/* GRT Process Steps block styles */

/* ============================================================
 * Section shell
 * ============================================================ */

.grt-process-steps {
    padding-block: var(--space-dkt-60, 3.75rem);
    overflow: hidden; /* clips the Swiper peek without page scroll */
}

/* ============================================================
 * Header row: heading + nav arrows
 * ============================================================ */

.grt-process-steps__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: var(--space-dkt-32, 2rem);
}

.grt-process-steps__heading {
    font-family: var(--font-family-body, 'Calibri', sans-serif);
    font-weight: 400;
    font-size: clamp(var(--h3-font-size, 2.75rem), 3.5vw, 3.125rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #000;
    margin: 0;
}

/* ============================================================
 * Navigation buttons
 * ============================================================ */

.grt-process-steps__nav {
    display: flex;
    align-items: stretch;
    background: var(--color-gray-50, #f7f7f7);
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}

.grt-process-steps__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    color: var(--color-brand-red, #e40521);
}

.grt-process-steps__nav-btn:not(.is-disabled):hover {
    opacity: 0.7;
}

.grt-process-steps__nav-btn:focus-visible {
    outline: 2px dashed var(--color-brand-red, #e40521);
    outline-offset: 2px;
}

.grt-process-steps__nav-btn.is-disabled {
    color: var(--color-gray-300, #d9d9d9);
    pointer-events: none;
    cursor: default;
}

.grt-process-steps__nav-icon {
    display: block;
    width: 2.7813rem;
    height: 2.7892rem;
}

/* ============================================================
 * Swiper container
 * ============================================================ */

/* Container aligns first slide with heading; overflow:visible lets slides break out right.
 * The section's overflow:hidden clips at the viewport edge. */
.grt-process-steps__slider {
    overflow: visible;
}

.swiper.grt-process-steps__swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
    overflow: visible;
}

/* Override Swiper's height:100% so align-items:stretch makes all slides equal-height */
.grt-process-steps__swiper .swiper-slide {
    height: auto;
}

/* ============================================================
 * Cards
 * ============================================================ */

/* Higher specificity than Swiper's .swiper-slide { width: 100% } */
.grt-process-steps__swiper .grt-process-steps__card {
    width: clamp(280px, 30vw, 400px);
    display: flex;
    flex-direction: column;
    background: var(--color-gray-50, #f7f7f7);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

/* ── Step number: top-right, large red numeral ── */

.grt-process-steps__num {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: var(--font-family-headline, 'Campora', serif);
    font-weight: 400;
    font-size: clamp(3rem, 5vw, 4.375rem);
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: var(--color-brand-red, #e40521);
    z-index: 1;
    pointer-events: none;
}

/* ── Illustration area ── */

.grt-process-steps__img-wrap {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 472 / 376;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-50, #f7f7f7);
}

.grt-process-steps__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Text area ── */

.grt-process-steps__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 2.1875rem 2rem;
}

.grt-process-steps__title {
    font-family: var(--h4-font-family, 'Campora', serif);
    font-weight: var(--h4-font-weight, 600);
    font-size: var(--h4-font-size, 2rem);
    line-height: var(--h4-line-height, 1.2);
    letter-spacing: var(--h4-letter-spacing, 0);
    color: #000;
    margin: 0;
}

.grt-process-steps__desc {
    font-family: var(--copy-big-font-family, 'Calibri', sans-serif);
    font-weight: var(--copy-big-font-weight, 400);
    font-size: var(--copy-big-font-size, 1.5rem);
    line-height: var(--copy-big-line-height, 1.35);
    letter-spacing: var(--copy-big-letter-spacing, 0.01em);
    color: #000;
    margin: 0;
}

/* ============================================================
 * Numbers variant
 * ============================================================ */

/* Heading styled as h3 (tag stays h2) */
.grt-process-steps--numbers .grt-process-steps__heading,
.grt-process-steps--photos .grt-process-steps__heading {
    font-family: var(--h3-font-family, 'Campora', serif);
    font-weight: var(--h3-font-weight, 600);
    font-size: var(--h3-font-size, 2.75rem);
    line-height: var(--h3-line-height, 1.2);
    letter-spacing: var(--h3-letter-spacing, 0);
}

/* Card overrides — Figma: 12px radius, padding on card (not text), no top pad */
.grt-process-steps--numbers .grt-process-steps__swiper .grt-process-steps__card {
    width: clamp(320px, 36vw, 490px);
    height: 26rem;
    border-radius: 0.75rem; /* 12px — Figma (steps uses 8px) */
    padding: 0 1.5rem 1.5rem; /* no top padding — number area handles vertical centering */
    overflow: hidden;
}

/* Large centred number — Figma node 16:28084
   Campora / 78.316px / 600 / 120% lh / black / centered */
.grt-process-steps__card-number {
    flex: 1 0 0; /* fills all space above the description */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: var(--h2-font-family, 'Campora', serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: 4.897rem; /* 78.316px — Figma */
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-black, #000);
}

/* Description area — Figma node 16:28085
   min-height 190px, shrink-0, DKT/Copy_Big/Regular, left-aligned */
.grt-process-steps--numbers .grt-process-steps__text {
    flex: 0 0 11.875rem; /* 190px — Figma, fixed height */
    padding: 0; /* card already has padding-inline */
    gap: 0;
    justify-content: center;
    overflow: hidden;
}

/* ============================================================
 * Photos variant
 * ============================================================ */

.grt-process-steps--photos .grt-process-steps__swiper .grt-process-steps__card {
    width: clamp(320px, 36vw, 472px);
    height: auto; /* content-driven, no fixed height */
    padding: 1.5rem; /* 24px all sides — Figma */
    gap: 2rem; /* 32px — Figma */
    border-radius: 0.75rem; /* 12px — Figma */
    overflow: visible;
}

/* Image: fixed 250px height, cover crop, 8px radius */
.grt-process-steps--photos .grt-process-steps__img-wrap {
    aspect-ratio: unset;
    height: 15.625rem; /* 250px — Figma */
    border-radius: 0.5rem; /* 8px — Figma */
}

.grt-process-steps--photos .grt-process-steps__img {
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Text area: no padding (card handles it), 12px gap */
.grt-process-steps--photos .grt-process-steps__text {
    flex: none;
    padding: 0;
    gap: 0.75rem; /* 12px — Figma */
    min-height: 0;
}

/* Year: H3 style, left-aligned */
.grt-process-steps--photos .grt-process-steps__card-number {
    flex: none;
    display: block;
    text-align: left;
    font-family: var(--h3-font-family, 'Campora', serif);
    font-weight: var(--h3-font-weight, 600);
    font-size: var(--h3-font-size, 2.75rem);
    line-height: var(--h3-line-height, 1.2);
    letter-spacing: var(--h3-letter-spacing, 0);
    color: var(--color-black, #000);
}

/* Description: DKT/Copy/Regular (18px), min-height 180px */
.grt-process-steps--photos .grt-process-steps__desc {
    font-family: var(--copy-font-family, 'Calibri', sans-serif);
    font-weight: var(--copy-font-weight, 400);
    font-size: var(--copy-font-size, 1.125rem);
    line-height: var(--copy-line-height, 1.35);
    letter-spacing: var(--copy-letter-spacing, 0.01em);
    min-height: 11.25rem; /* 180px — Figma */
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1024px) {
    .grt-process-steps__swiper .grt-process-steps__card {
        width: clamp(260px, 36vw, 360px);
    }
}

@media (max-width: 768px) {
    .grt-process-steps {
        padding-block: var(--space-mbl-60, 3.75rem);
    }

    .grt-process-steps__header {
        margin-bottom: var(--space-mbl-24, 1.5rem);
    }

    .grt-process-steps__heading,
    .grt-process-steps--numbers .grt-process-steps__heading,
    .grt-process-steps--photos .grt-process-steps__heading {
        font-family: var(--mbl-h3-font-family, 'Campora', serif);
        font-weight: var(--mbl-h3-font-weight, 600);
        font-size: var(--mbl-h3-font-size, 1.5rem);
        line-height: var(--mbl-h3-line-height, 1.3);
        letter-spacing: var(--mbl-h3-letter-spacing, 0.02em);
        color: var(--color-black, #000);
    }

    .grt-process-steps__swiper .grt-process-steps__card {
        width: calc(100vw - 4.5rem);
        max-width: 400px;
    }

    .grt-process-steps__num {
        font-size: 3rem;
    }

    .grt-process-steps__title {
        font-size: var(--mbl-h4-font-size, 1.0625rem);
    }

    .grt-process-steps__desc {
        font-family: var(--mbl-copy-font-family, 'Calibri', sans-serif);
        font-weight: var(--mbl-copy-font-weight, 400);
        font-size: var(--mbl-copy-font-size, 1.1875rem);
        line-height: var(--mbl-copy-line-height, 1.4);
        letter-spacing: var(--mbl-copy-letter-spacing, 0.02em);
        color: var(--color-black, #000);
        overflow: hidden;
        text-overflow: ellipsis;
    }
}