/* ============================================================
   AboutCaseStudiesSection — Figma zwjE3DrysH5sY4WacmYDKy, node 6940:6868.
   Spec: AboutCaseStudiesSection.figma.md.

   The redesign language on the shared CaseStudies, scoped to
   `.about-case-studies` — the class this page passes through CaseStudies'
   `className` hook. Nothing here reaches another page. The shared stylesheets
   load after this one (they are imported by the shared components), so every
   rule carries at least one more class than the rule it overrides.
   ============================================================ */


/* ---- Section --------------------------------------------- */

/* White ground — the redesign's inversion. `spacing="expanded"` already gives
   Figma's 128px padding; the cream badge is `.hp-badge--cream`, via CaseStudies' `badgeClassName`. */
.case-studies.about-case-studies {
  background-color: var(--background-white);
}

/* `.case-studies__title > h2` sets 400; the redesign heading is Rowan Light.
   Size (36/40, 30/36 at ≤767) already matches `.hp-heading--serif`. */
.about-case-studies .case-studies__title > h2 {
  font-weight: var(--font-weight-light);
}


/* ---- Carousel on white ----------------------------------- */

/* The carousel's edge fades and nav buttons are painted in `--background`
   (cream) — right on every cream page, a cream strip on this one. */
.about-case-studies .carousel .carousel__overlay:not(.carousel__overlay--left) {
  background: linear-gradient(to right, transparent 0%, var(--background-white) 60%);
}

.about-case-studies .carousel .carousel__overlay--left {
  background: linear-gradient(to left, transparent 0%, var(--background-white) 60%);
}

.about-case-studies .carousel .carousel__nav-btn,
.about-case-studies .carousel .carousel__nav-btn:hover:not(:disabled) {
  background-color: var(--background-white);
}

/* The track's 8px bottom padding is room for card shadows; these cards have
   none, and it pushed the ratings row 8px below Figma's. */
.about-case-studies .carousel .carousel__track {
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .about-case-studies .carousel .carousel__overlay:not(.carousel__overlay--left) {
    background: linear-gradient(to right, transparent 0%, var(--background-white) 50%);
  }

  .about-case-studies .carousel .carousel__overlay--left {
    background: linear-gradient(to left, transparent 0%, var(--background-white) 50%);
  }
}


/* ---- Slides (6947:10260) ---------------------------------- */

/* White on white needs the hairline; Figma's padding is 36 / 32 / 36 / 36. */
.about-case-studies .case-study-card {
  border:  0.5px solid var(--opacity-neutral-40);
  padding: 2.25rem 2rem 2.25rem 2.25rem;
}

/* Button area → quote: 24 here, 32 in the stock slide. */
.about-case-studies .case-study-card .case-study-card__top {
  padding-bottom: 1.5rem;
}

/* Figma sets the mark in Rowan Medium; the hosted faces are Light and
   Semibold, so Semibold is the nearest real weight. 36 tall, level with the
   36px button (the stock mark's 38 made the row 2px taller than Figma's). */
.about-case-studies .case-study-card .case-study-card__quote-mark {
  font-family: var(--font-family-serif);
  font-weight: 600;
  height:      36px;
}

/* The redesign's quote-card text: Rowan Light 24/32 (the stock slide is the
   sans at the same size and weight). Figma's card is `justify-between` with
   the quote sitting directly on the author block, so the free space goes
   ABOVE the quote — the stock slide centres it instead. */
.about-case-studies .case-study-card .case-study-card__quote {
  font-family:   var(--font-family-serif);
  font-weight:   var(--font-weight-light);
  align-content: flex-end;
}

@media (max-width: 767px) {
  .about-case-studies .case-study-card {
    padding: 1.5rem 2rem 2.25rem 2.25rem;
  }
}


/* ---- Ratings row (6947:10295) ----------------------------- */

/* Bare, as LegalHubSocialProofSection strips them: no chip fill, border or
   padding, logo box hugging the mark, 16px logo → stars, Figma's 76.8px
   stars — the LOOK, at every width. */
.about-case-studies .ratings-bar .ratings-bar__item {
  justify-content: flex-start;
  padding:         0;
  gap:             var(--spacing-4);               /* 16px */
  background:      none;
  border:          0;
  border-radius:   0;
}

.about-case-studies .ratings-bar .ratings-bar__meta {
  flex: 0 0 auto;
}

/* Figma's five stars: 12.8px with 3.2px gaps = 76.8px. */
.about-case-studies .ratings-bar .ratings-bar__stars {
  flex:      0 0 auto;
  width:     76.8px;
  max-width: none;
}

/* The LAYOUT, desktop (≥992): Figma's single row, the four groups 64px
   apart, 12px in from the container edge. Below 992 the stock RatingsBar's
   layout applies — two equal columns filling the width, logo over stars at
   ≤479 — with only its gaps opened up for bare marks (owner, 2026-10-20:
   "copy the layout, not the styles"). */
@media (min-width: 992px) {
  .about-case-studies .ratings-bar.ratings-bar {
    grid-template-columns: repeat(4, max-content);
    justify-content:       start;
    gap:                   4rem;                   /* 64px */
    padding-inline:        0.75rem;                /* 12px */
    /* Figma's row is a 16px box (6947:10295) that the 30px marks overflow
       evenly — so the section's 64 / 128 spacing is measured to THAT box. */
    grid-auto-rows:        1rem;
    align-items:           center;
  }

  /* Logo box hugging the mark. Below 992 the stock 64px box stays, so the
     stars line up down each column. */
  .about-case-studies .ratings-bar .ratings-bar__logo {
    width: auto;
  }
}

@media (max-width: 991px) {
  .about-case-studies .ratings-bar.ratings-bar {
    gap: var(--spacing-8) var(--spacing-6);        /* 32px rows / 24px columns */
  }

  /* Each rating centred in its column (owner, 2026-10-20). They are all one
     width — the stock 64px logo box + the 76.8px stars + the score — so
     centring keeps the logos and stars aligned down each column. */
  .about-case-studies .ratings-bar .ratings-bar__item {
    justify-self: center;
  }

  /* …and each mark centred in its 64px box, so the logos stacked in a
     column share one centre line. */
  .about-case-studies .ratings-bar .ratings-bar__logo {
    justify-content: center;
  }
}

/* Portrait phones (≤479): like Figma's mobile row (ClioCon 7399:13876) —
   ONE column, each rating on one line (logo hugging the mark, 16, stars),
   each row centred on its own, rows 20 apart. Deliberately NOT Figma's
   16px row boxes or its larger 16px stars: the owner preferred this look
   (2026-10-20). The stock ≤479 logo-over-stars stack is undone. */
@media (max-width: 479px) {
  .about-case-studies .ratings-bar.ratings-bar {
    grid-template-columns: max-content;
    justify-content:       center;
    gap:                   20px;                   /* Figma; no 20px token */
  }

  .about-case-studies .ratings-bar .ratings-bar__item {
    flex-direction: row;
    align-items:    center;
    padding-bottom: 0;
  }

  .about-case-studies .ratings-bar .ratings-bar__logo {
    flex-grow: 0;
    width:     auto;
  }
}

/* ============================================================
   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;
  }
}

/* ============================================================
   ClioconTestimonialsSection — Figma CIs8dXkXRGQGuyagIgryfN, node 7399:12213
   (desktop) / 7399:13831 (mobile); unchanged from the first design, whose
   ids (lggjmuj2yPib1xxVgnbLOc 7305:*) the comments below use. Spec: ClioconTestimonialsSection.figma.md
   and ../ClioconPage.mobile.figma.md.

   Mostly the MOBILE frame differs from AboutCaseStudiesSection's look (plus
   the quote mark's line, at every width) — every rule is under `.cliocon-testimonials`
   (a `display: contents` wrapper), so the About page and every other
   CaseStudies consumer are untouched. Rules carry one class more than the
   About / shared rules they override (those sheets load first or last
   depending on the bundle, so specificity — not order — decides).
   ============================================================ */

.cliocon-testimonials {
  display: contents;
}

/* The quote mark (7399:12226 / mobile 7399:13844): Rowan 48 on a NORMAL
   line inside its 36px box, so the ink starts 13px into the box. About's rule
   sets it on a 48px line, which lifts it 8px. */
.cliocon-testimonials .about-case-studies .case-study-card__quote-mark {
  line-height: normal;
}

@media (max-width: 767px) {
  /* Header: the design system's mobile badge gap (the 402 frame's 8 read
     as a bug); header → cards and cards → ratings are Figma's 32
     (CaseStudies: 36 / 64) — owner, 2026-10-20. The section's 64 / 64
     padding at 402 is CaseStudies' own ≤479 step. */
  .cliocon-testimonials .case-studies__content,
  .cliocon-testimonials .case-studies {
    gap: var(--spacing-8);                     /* 32px */
  }

  /* Cards (7305:2661): 24 padding all round, 24/32 Rowan quote, 16/24
     author lines — About's mobile is 24/32/36/36 padding, 20/28 quote and
     the slide's 12/16 author type. */
  .cliocon-testimonials .about-case-studies .case-study-card {
    padding: var(--spacing-6);                 /* 24px */
  }

  /* Card layout (7399:13842): Figma stacks the card top-down — mark row, 24,
     quote, 36, author — with any spare room at the BOTTOM. The desktop card's
     `space-between` (and About's bottom-aligned quote) would put the quote
     straight under the mark in the taller card and push the shorter card's
     quote down.

     Height follows the content. Figma draws a fixed 457 for its 338px cards
     at 402; as a min-height it left wider phones (≤767) with a tall empty
     card (owner, 2026-10-20). The swipe row still stretches both cards to
     the taller one, so they stay equal. */
  .cliocon-testimonials .about-case-studies .case-study-card {
    justify-content: flex-start;
    gap:             var(--spacing-6);         /* 24px */
  }

  .cliocon-testimonials .about-case-studies .case-study-card__quote {
    flex: 0 0 auto;
  }

  .cliocon-testimonials .case-study-card .case-study-card__quote {
    font-size:   var(--font-size-2xl);         /* 24px */
    line-height: var(--line-height-2xl);       /* 32px */
  }

  .cliocon-testimonials .case-study-card .case-study-card__author-name,
  .cliocon-testimonials .case-study-card .case-study-card__author-role {
    font-size:   var(--font-size-base);        /* 16px */
    line-height: var(--line-height-base);      /* 24px */
  }

  /* Ratings: the stock RatingsBar below 992 (see AboutCaseStudiesSection.css)
     — owner, 2026-10-20; the mobile frame's centred single column read
     oddly. */
}