/* ============================================================
   card-carousel — a heading row over a row of post-cards.
   Figma: related products 1407:65592 / 1407:69180; case studies
   1407:65257 (tablet 1407:74756, mobile 1407:74401); Home news
   1407:99220; T14 grid 1331:154088. No tablet frames for related
   products: tablet follows mobile.

   Three cards across on desktop with a progress bar under them;
   319px cards with the next one peeking in below 1025px. The
   section's template owns the vertical padding. The related-products
   section wrapper shares these rules.
   ============================================================ */

.card-carousel,
.related-products {
    padding-left: var(--space-gutter);
    padding-right: var(--space-gutter);
}
.card-carousel__inner,
.related-products__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Header row ───────────────────────────────────────────── */
.card-carousel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}
.card-carousel__titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.card-carousel__titles .eyebrow { margin: 0; }

/* H2 is Title Case in the Figma ("TITLE" text case) */
.card-carousel__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
}
.card-carousel__body--secondary .card-carousel__heading { color: var(--color-secondary); }   /* Home news: Secondary */
.card-carousel__intro {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}

/* "All Case Studies" (T11): the primary button where the arrows would be */
.card-carousel__cta { flex-shrink: 0; }

/* Prev / next: 32px, a 16px arrow, 24 apart; prev is the arrow turned round.
   The disabled state (either end) isn't designed: 30% (flagged). */
.card-carousel__controls {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}
.card-carousel__prev,
.card-carousel__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    transition: opacity var(--transition-base);
}
.card-carousel__prev svg,
.card-carousel__next svg { width: 24px; height: 24px; }   /* the 24-box icon: the frame's 16px glyph */
.card-carousel__prev svg { transform: rotate(180deg); }
.card-carousel__prev.is-disabled,
.card-carousel__next.is-disabled {
    opacity: 0.3;
    cursor: default;
}
.card-carousel__prev:focus-visible,
.card-carousel__next:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}
.card-carousel__controls.swiper-navigation-disabled,
.card-carousel__prev.swiper-button-lock,
.card-carousel__next.swiper-button-lock { display: none; }

/* ── Cards ────────────────────────────────────────────────── */
.card-carousel__track {
    margin: 0;
    padding: 0;
    list-style: none;
}
.card-carousel__slide {
    width: calc((100% - 48px) / 3);   /* three across, 24 apart */
    height: auto;
}

/* ── Progress bar, desktop ────────────────────────────────────
   Fills from the left as you move through the cards (Alex, 30 Sep;
   the frame draws a one-card thumb). Swiper's progressbar type.
   ───────────────────────────────────────────────────────────── */
.card-carousel__carousel .card-carousel__progress {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 4px;
    margin-top: 24px;
    border-radius: 99px;
    overflow: hidden;
    background: var(--color-surface-tint);
}
.card-carousel__progress .swiper-pagination-progressbar-fill {
    border-radius: 99px;
    background: var(--color-primary);
}

/* Three or fewer cards, or a band with a CTA (T11): a static row on desktop,
   no progress bar (the arrows aren't rendered). A CTA band with more cards
   shows the first three here and all of them below 1025px. Swiper isn't
   started there, so the row is spaced here. */
@media (min-width: 1025px) {
    .card-carousel__body--few .card-carousel__track { gap: 24px; }
    .card-carousel__body--few .card-carousel__slide:nth-child(n+4) { display: none; }
    .card-carousel__body--few .card-carousel__progress { display: none; }
}

/* ── Static grid (T14, 1331:154091): three across, 24 apart ─── */
.card-carousel__body--grid .card-carousel__titles { gap: 12px; }
.card-carousel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Tablet and mobile (1407:69180, 1407:74401) ───────────────
   No controls or progress bar; 319px cards, the next peeking in
   past the right gutter.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .card-carousel__head { margin-bottom: 20px; }
    .card-carousel__controls { display: none; }

    .card-carousel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .card-carousel__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }

    .card-carousel__carousel { margin-right: calc(-1 * var(--space-gutter)); }
    .card-carousel__slide { width: 319px; }
    .card-carousel__carousel .card-carousel__progress { display: none; }
}

/* The T14 grid stacks, 20 apart (1331:154347) */
@media (max-width: 767px) {
    .card-carousel__body--grid .card-carousel__titles { gap: 10px; }
    .card-carousel__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-carousel__cta {
        display: none;
    }
}