/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   CaseStudies — Section styles.
   Card (slide) styles live in the CaseStudySlide primitive
   (primitives/CaseStudySlide/CaseStudySlide.css).
   Carousel mechanics live in Carousel/Carousel.css.
   Design tokens are defined in src/styles/tokens.css.
   ============================================================ */

.case-studies {
  background-color: var(--background);
  box-sizing:       border-box;
  display:          flex;
  flex-direction:   column;
  font-family:      var(--font-family-default);
  gap:              4rem;   /* 64px */
  padding:          6rem 0; /* 96px */
  width:            100%;
}

.case-studies[data-spacing="expanded"] {
  padding: 8rem 0; /* 128px */
}

.case-studies[data-variant="partner"] {
  gap: 0;
  padding: 4rem 0;
}

.case-studies__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem; /* 64px */
  width:          100%;
}

/* Bound the sticky rail to the heading instead of the whole section, so the
   badge stops before the full-width carousel begins. This wrapper starts at
   the container's content edge, hence the simpler 100% rail offset. */
.case-studies__header-wrap {
  position: relative;
  width:    100%;
}

.case-studies__header-wrap > .hp-rail {
  right: 100%;
}

@media (min-width: 1480px) {
  .case-studies__header-wrap[data-hp-rail-overflow] > .hp-rail {
    visibility: hidden;
  }

  .case-studies__header-wrap[data-hp-rail-overflow] .hp-badge--inline {
    display: inline-flex;
  }
}

.case-studies__content > .carousel {
  margin-left: calc(50% - 50vw);
  width:       100vw;
}

/* `layout="grid"` — a static row of cards on the container instead of the
   full-bleed carousel track. Two-up, equal heights. Only the ClioCon LP uses
   it (no live page does).

   On phones it becomes a swipe row, as the ClioCon mobile frame draws it: a
   CSS scroll-snap strip with no arrows, the first card on the 16px media
   inset, the next one peeking in from the right edge. The strip bleeds out
   of `.container`'s 2rem mobile padding to BOTH screen edges and pads 16px
   back in (see the ≤767 rule), so cards rest on the 16px inset and scroll
   off the real edge; the last card snaps back to a 16px margin. */
.case-studies__grid {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--spacing-4);   /* 16px */
  align-items:           stretch;
}

@media (max-width: 767px) {
  /* The scroller runs EDGE TO EDGE (the container's 32px cancelled on both
     sides) with 16px of padding, so the cards rest 16px in but scroll off
     the real screen edge. With the scroller starting 16px in, a swiped-past
     card was clipped by a hard line inside the screen (owner, 2026-10-20).
     `scroll-padding` makes the snap land on that same 16px inset. */
  .case-studies__grid {
    display:             flex;
    margin-inline:       -2rem;
    padding-inline:      1rem;
    scroll-padding-inline: 1rem;
    overflow-x:          auto;
    scroll-snap-type:    x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width:     none;
  }

  .case-studies__grid::-webkit-scrollbar {
    display: none;
  }

  /* Two classes: CaseStudySlide's own `.case-study-card { flex: 1 }` has the
     same single-class weight and can load after this sheet. */
  /* Capped at 400 so a clear part of the NEXT card always shows — the
     usual cue that a row swipes. Full-bleed cards (100% - 2rem) left only a
     32px sliver of it on 600–767 screens (owner, 2026-10-20). At 402 the
     cap doesn't bite: 338, as the mobile frame. */
  .case-studies .case-studies__grid > * {
    flex:              0 0 min(calc(100% - 2rem), 400px);
    scroll-snap-align: start;
  }
}

.case-studies__partner-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-9);
}

.case-studies__partner-header .eyebrow {
  height: 38px;
  padding-block: 1px;
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   Title — bespoke: `title` is a flexible ReactNode (any heading tag,
   not always <h2>), so it can't just be `.hp-heading` on the element
   itself like other sections. This wrapper targets whatever heading
   child is passed and matches .hp-heading's type styles exactly.
   Sits inside `.section-header__text` (see docs/conventions.md →
   "Section header + sticky badge convention"); description uses the
   shared `.hp-body` directly since it's always a plain string.
   ============================================================ */

.case-studies__title > :is(h1, h2, h3, h4, h5, h6, p) {
  color:       var(--foreground);
  display:     block;
  font-size:   2.25rem;     /* 36px */
  font-weight: var(--font-weight-regular);
  line-height: 2.5rem;      /* 40px */
  margin:      0;
}

.case-studies__title > h2 {
  font-weight: var(--font-weight-regular);
}


/* ============================================================
   Mobile landscape (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .case-studies {
    padding: 4rem 0;
  }

  .case-studies__content {
    gap: 2.25rem; /* 36px — heading group to carousel */
  }

  .case-studies[data-spacing="expanded"] {
    padding: 5rem 0;
  }

  .case-studies[data-variant="partner"] {
    padding: 3rem 0;
  }

  .case-studies__partner-header {
    gap: var(--spacing-6);
  }

  .case-studies__title > :is(h1, h2, h3, h4, h5, h6, p) {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }
}

@media (max-width: 479px) {
  .case-studies[data-spacing="expanded"] {
    padding: 4rem 0;
  }
}

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }

/* ============================================================
   Eyebrow — icon + label kicker. See Eyebrow.tsx.
   ============================================================ */

.eyebrow {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;            /* 8px */
  height:       36px;
  padding:      5px 0;
  width:        fit-content;       /* never stretch in a column-flex parent */
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-sm);
  font-weight:  var(--font-weight-regular);
  color:        var(--muted-foreground);
  white-space:  nowrap;
  box-sizing:   border-box;
}

.eyebrow[data-variant="active"] {
  color:       var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   RatingsBar — internal shared rating pills strip
   ============================================================ */

.ratings-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
}

.ratings-bar--grid-2-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ratings-bar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  min-width: 0;
  padding: 1.5rem;
  background: var(--secondary);
  border: 0.5px solid var(--border);
  border-radius: 1.5rem;
  box-sizing: border-box;
}

.ratings-bar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
}

.ratings-bar__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2);
  flex: 1 1 0;
  min-width: 0;
}

.ratings-bar__stars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 4.16%;
  color: var(--primary);
  flex: 1 1 0;
  max-width: 96px;
}

.ratings-bar__star {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.ratings-bar__score {
  width: 1.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
  color: var(--muted-foreground);
  text-align: center;
}

.ratings-bar__brand-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  .ratings-bar--strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .ratings-bar__item {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    height: auto;
    padding-bottom: 2rem;
  }

  .ratings-bar__logo {
    flex-grow: 1;
  }

  .ratings-bar__meta {
    justify-content: flex-start;
    flex: unset;
  }
}