/* ==========================================================================
   KOBIL — Resources/Case Studies — Tab bar + card grid
   Figma 6201:91737 (desktop 1440) · 6201:91889 (phone 393)

   Rebuilt from the Aug-2026 frames on the `--wN` / `--mN` scale.

   The tab bar sits on the page background above the white block on desktop, and
   becomes the white card's top row on the phone — the same arrangement as the
   insights list, which all three list pages now share.

   The frame does it differently on desktop (white from y=494 with the pills inside it
   at 534, measured on the render) and so did this file. That was one of three
   inconsistent treatments across the three list pages, and the design was wrong about
   it: on request the insights arrangement is the one they all follow, which moves the
   pills up out of the block, keeps the white full-width with no rounding at the top,
   and gives the area above it the extra height that buys.

   Desktop rhythm: white 494..3746 full-bleed, pills 534, cards 630, rows of three
   400s with 20 between columns and 48 between rows, pagination 80 under the last
   row, 40 of padding under that, then 20 to the footer.
   Phone: card inset 12 (369 wide) with radius 8, pills 430, cards 498, 48 between
   cards, pagination 20 under them, 16 of padding, 20 to the footer.
   ========================================================================== */

.sec-case-studies-browser {
  /* 70 under the pill row, and nothing under the block: the white runs straight into
     the footer, as on the insights list. The frame's 20 there read as a seam once the
     block went full-bleed, so it is gone on all three. The rhythm above is the
     insights list's: hero ends 414, pills 484..532, white from 602, first row 650. */
  margin-top: var(--w70);
  padding: var(--w48) var(--w100) var(--w40);
  background: var(--white);
  scroll-margin-top: var(--w132);
}

/* ---- Tab bar ---------------------------------------------------------- */

/* 70 under the hero puts the pills at 484, on the page background. */
.csb__tabs {
  display: flex;
  gap: var(--w8);
  padding: var(--w70) var(--w100) 0;
}

.csb__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--w48);
  padding: var(--w8) var(--w32);
  border: 1px solid var(--navy);
  border-radius: var(--w40);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  white-space: nowrap;
  color: var(--navy);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.csb__tab:hover {
  background: var(--navy);
  color: var(--white);
}

.csb__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  cursor: default;
}

.csb__tab.is-disabled {
  cursor: default;
  opacity: 0.45;
}

.csb__tab.is-disabled:hover {
  background: transparent;
  color: var(--navy);
}

/* ---- Grid ------------------------------------------------------------- */

.csb__grid {
  display: grid;
  /* 3 x 400 + 2 x 20 = 1240, the frame's content width. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Cards keep their own height rather than stretching to the tallest in the row —
     the frame's first row is 547, 593, 547, top-aligned. Without this the default
     `stretch` left 121px of dead space under the shorter cards' metrics. */
  align-items: start;
  gap: var(--w48) var(--w20);
  /* The 48 above the first row is the block's own padding-top now. */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- Card (frame 6201:91750 / 6201:91751) -----------------------------
   Every gap inside the desktop card is 20, including the 20 of padding under the
   metrics: 290 + 20 + 112 + 20 + 0 + 20 + 65 + 20 = 547, the frame's card height.
   The phone card keeps 20 between the cover and the text but tightens the rest to
   16, so the gaps are margins rather than one `gap` value. */

.csb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--w20);
}

.csb-card > * + *:not(.csb-card__link) {
  margin-top: var(--w20);
}

/* 400x290 as a ratio, not fixed pixels, so the cover scales with the column.
   No width/height attributes on the img — this rule owns the geometry. */
.csb-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 400 / 290;
  object-fit: cover;
  border-radius: var(--w12);
}

.csb-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

/* Two lines of the 20/26 title are reserved whether or not the brand wraps, and
   the row is top- rather than centre-aligned. Both are about the hairline: with
   `height: auto` a wrapping brand ("German Federal Network Agency") pushed its own
   card's rule and figures 26 lower than its single-line neighbours', and with
   `center` the reserved space would instead drop a single-line title 13 below
   theirs. Top-aligned + fixed height keeps the title, the rule and the figures on
   the same y across a row; the industry label now also reads next to the title's
   first line rather than floating at its vertical middle. */
.csb-card__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--w8);
  min-height: var(--w52);
  margin: 0;
}

/* Title/Desktop/Title 2 — SemiBold 20/26, System/100%. Clamped to the two lines
   the row reserves, so no future brand name can break that alignment. */
.csb-card__brand {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

/* The 0.5px rule between the brand and its industry. Solving the rendered ink
   gives (87, 101, 129) — System/70%; 1px at half opacity carries the same ink. */
.csb-card__sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--w14);
  /* (26 - 14) / 2 — centres the 14 rule on the title's first 26 line box now
     that the row aligns to flex-start. */
  margin-top: var(--w6);
  background: var(--navy-70);
  opacity: 0.5;
}

/* Body/xLarge in Go Blue — the industry label. */
.csb-card__cat {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--blue);
}

/* The description box is a fixed three lines on desktop — the frame states
   `h-[78px]` at `leading-[26px]`, and holds it even where the text is only two
   lines: Istanbul Senin's card is 593 against Spark's 547, and that 46 is entirely
   the metric-2 block, nothing to do with its shorter description. Fixing the
   height is what keeps the hairlines and figures aligned across a row of cards.
   A description longer than three lines scrolls inside that box rather than being
   clamped away — two of the entries (VakifBank, Albaraka) run to five lines and an
   ellipsis simply lost the rest. `z-index` is what makes that scroll reachable:
   `.csb-card__link` is an overlay over the whole card, so without raising the
   description above it the wheel would hit the link and scroll the page instead.
   The cost is that a click on the description text no longer follows the card
   link — the cover, the title and the figures still do. The phone frame hugs the
   description instead, and keeps it inside the tap target — see below. */
.csb-card__desc {
  position: relative;
  z-index: 1;
  margin: 0;
  height: var(--w78);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Only an overflowing box gets a bar, so this is also the affordance that says
     there is more text — macOS' overlay scrollbars are invisible until you
     already scrolled, and a description that simply stops mid-sentence reads as
     a bug. The bar costs a few px of inline space on those cards only. */
  scrollbar-width: thin;
  scrollbar-color: var(--navy-50) transparent;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* The full-width rule above the metrics. Same method as the vertical one:
   the ink solves to (215, 217, 225) — System/50% (#D5D9E3). */
.csb-card__rule {
  height: 1px;
  border: 0;
  background: var(--navy-50);
  opacity: 0.5;
}

/* ---- Metrics ---------------------------------------------------------
   The frame has two variants of this block and they are the same component:
   `metric 1` is one figure across the card, `metric 2` two side by side with 10
   between them. That is the whole reason some cards are 547 tall and others 593 —
   metric 2 is 111 tall against metric 1's 65, and 593 - 547 = 46 is exactly that
   difference.

   `grid-auto-flow: column` with `grid-auto-columns: 1fr` gives both variants with
   no modifier class: one child fills the width, two split it evenly. The phone
   frame states that split explicitly (163.5 + 10 + 163.5 = 337); the desktop
   frame's 171 + 10 + 207 does not even add up to its own 400-wide row, so it is a
   pair of hand-resized boxes rather than a rule, and even halves is the only
   content-independent reading of it. */
.csb-card__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--w10);
}

.csb-card__stat {
  display: flex;
  flex-direction: column;
  gap: var(--w6);
}

/* Header/Desktop/H4 — Bold 28/36. Both the figure and its caption are
   System/100%; the frame sets the colour on the wrapper. */
.csb-card__stat-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w28);
  font-weight: 700;
  line-height: var(--w36);
  color: var(--navy);
}

.csb-card__stat-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy);
}

/* The whole card is the link target. Kept as an overlay rather than wrapping the
   card so the brand and the industry stay separate text nodes. */
.csb-card__link {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--w12);
}

.csb-card__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

/* ---- Phone (Figma 6201:91889) ---------------------------------------- */
@media (max-width: 768px) {
  /* 45 under the hero (which ends at y=369) — the frame's card starts at 414. */
  /* The phone keeps the frame's arrangement: the pills are the white card's first
     row. The bar and the panel are adjacent siblings, so the bar takes the fill and
     the top two corners and the panel the bottom two. */
  .sec-case-studies-browser {
    margin: 0 var(--m12) var(--m20);
    padding: var(--m20) var(--m16) var(--m16);
    border-radius: 0 0 var(--m8) var(--m8);
    scroll-margin-top: var(--m88);
  }

  /* The frame insets the pill row 8 from the card edge while the cards sit at 16,
     so the row is pulled back out of the section's own padding. It also overflows
     its 353 of width (118+159+122+221 plus three 8s = 644), so it scrolls
     sideways rather than wrapping into a second line the design does not have. */
  .csb__tabs {
    gap: var(--m8);
    /* 45 under the hero (which ends at 369) — the frame's card starts at 414. */
    margin: var(--m45) var(--m12) 0;
    padding: var(--m16) 0 0 var(--m8);
    background: var(--white);
    border-radius: var(--m8) var(--m8) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .csb__tabs::-webkit-scrollbar {
    display: none;
  }

  .csb__tab {
    height: var(--m48);
    padding: var(--m8) var(--m28);
    border-radius: var(--m40);
    font-size: var(--m16);
    line-height: var(--m20);
  }

  /* Cards land 20 under the pill row exactly as before — the panel's padding-top
     carries it now that the bar is a sibling. */
  .csb__grid {
    grid-template-columns: 1fr;
    gap: var(--m48);
    margin-top: 0;
  }

  .csb-card {
    padding-bottom: 0;
  }

  .csb-card > * + *:not(.csb-card__link) {
    margin-top: var(--m20);
  }

  /* 16 rather than 20 for everything after the text block. The child combinator
     is load-bearing: `.csb-card > * + *:not(.csb-card__link)` above counts two
     classes (`:not()` contributes its argument's specificity), so a bare
     `.csb-card__rule` loses to it and both gaps stayed at 20. */
  .csb-card > .csb-card__rule,
  .csb-card > .csb-card__stats {
    margin-top: var(--m16);
  }

  /* 337x244, and radius 4 — the phone cover is much less rounded than the
     desktop's 12. */
  .csb-card__img {
    aspect-ratio: 337 / 244;
    border-radius: var(--m4);
  }

  .csb-card__link {
    border-radius: var(--m4);
  }

  /* One card per row here, so there is no neighbouring rule to line up with:
     the title hugs its own lines again, unclamped and with nothing reserved. */
  .csb-card__meta {
    min-height: 0;
  }

  /* Title/Mobile/Title 2 — SemiBold 18/24. The industry keeps 26 of line height
     even at 18px, which is what the frame states. */
  .csb-card__brand {
    display: block;
    overflow: visible;
    font-size: var(--m18);
    line-height: var(--m24);
  }

  .csb-card__cat {
    font-size: var(--m18);
    line-height: var(--m26);
  }

  .csb-card__sep {
    height: var(--m14);
    /* (24 - 14) / 2 — the phone title's line box is 24, not 26. */
    margin-top: var(--m5);
  }

  /* The phone card hugs its description rather than fixing it: Istanbul Senin's
     phone card is 506 against Spark's 460, which only adds up with a two-line
     description there (244+20+[26+8+46]+16+16+130). */
  .csb-card__desc {
    /* Nothing to scroll once the box hugs, so the description drops back under
       the link overlay and stays part of the card's tap target. */
    position: static;
    z-index: auto;
    height: auto;
    overflow: visible;
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .csb-card__stats {
    gap: var(--m10);
  }

  /* Header/Mobile/H4 — Bold 24/32. */
  .csb-card__stat-value {
    font-size: var(--m24);
    line-height: var(--m32);
  }

  .csb-card__stat-label {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .csb-card__stat {
    gap: var(--m6);
  }
}