/* ==========================================================================
   KOBIL — Resources/Case Studies — Detail
   Figma 6201:91780 (desktop 1440) · 6201:91920 (phone 393)

   Rebuilt on the `--wN` / `--mN` scale from the desktop frame, which is the
   complete one.

   A warning about the phone frame before anyone "fixes" this file against it:
   **6201:91920 is unfinished below its head.** It is the insights-detail phone
   frame with a case-study head pasted on top — its breadcrumb reads
   RESOURCES | INSIGHTS | ISTANBUL SENIN, its body is the quantum-ready *article*
   (tag row, "KOBIL integrates hybrid cryptography…", the press-contact trailer),
   and it carries a date + Share row that the desktop case-study frame does not
   have at all. What it does specify, and what is used here, is the head geometry,
   the hero image box, and the white block's insets. Everything below that comes
   from the desktop frame collapsed to one column, on the phone type scale this
   design system uses elsewhere; those places are marked "derived".

   Desktop rhythm: head 298..405, hairline 453, stat/store strip 523..611, white
   block 681.. full-bleed with 48 of padding, hero image 1036x540 centred, content
   column 1036, sections as a 231 heading beside a fluid body with 16 between and
   40 between sections.
   ========================================================================== */

.sec-cs-detail {
  position: relative;
  /* 198 = the frame's crumb line box (y=298) minus the header's height (100). */
  padding-top: var(--w198);
  /* `clip`, not `hidden`: `hidden` would make this a scroll container and cut the
     wash's bleed above the section, and the two axes cannot mix `hidden` with
     `visible`. No `isolation` — that would trap the `z-index: -1` wash inside this
     positioned section and paint it over the white block. */
  overflow-x: clip;
  overflow-y: visible;
}

/* The blurred wash behind the header (frame vector 6201:91781).

   `#1D56EE`, the case-study blue — not the insights pages' `#3EBFFC`. Confirmed on
   the render: at y=450 the tint sits at (204,216,250) against the page background's
   (245,247,252), pulling red *and* green (-41,-31,-2); a cyan wash leaves green
   almost alone.

   Geometry is the case-studies list's asset unchanged, and that is exact rather
   than approximate: this frame reports the vector at x=797.796875, y=147.50390625,
   1610.79661518168 x 988.9504491667103 — the same ten-decimal numbers as the list
   frame, i.e. one instance placed identically. The canvas is a 1440x1295 flattening
   anchored at the page origin, hence the pull-up by exactly the header's height. */
.sec-cs-detail::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--w100));
  left: 0;
  width: 100%;
  height: var(--w1295);
  background: url('/assets/resources/case-studies/hero/hero-wash.svg') no-repeat top left / 100% 100%;
  pointer-events: none;
}

/* Everything above the white block keeps the frame's 100 inset; the block itself
   is full-bleed, so the inset lives here rather than on the section. */
.cs-detail__upper {
  padding: 0 var(--w100);
}

/* ---- Head: two bottom-aligned columns ------------------------------------
   Left is crumbs(18) + 16 + H1(73) = 107 at x=100 w=597; right is the lead, 46
   tall and 492 wide at x=848. Both end at y=405 — the frame bottom-aligns them,
   so this is `align-items: flex-end` rather than a grid (a grid would force the
   two first rows to share a row box and drag the lead up to the crumbs). */

.cs-detail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w151);
}

.cs-detail__head-main {
  display: flex;
  flex-direction: column;
  gap: var(--w16);
  width: var(--w597);
  flex: 0 0 auto;
}

/* `RESOURCES | CASE STUDIES | <BRAND>` — three crumbs here, mono Medium 12/18,
   System/70%. */
.cs-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--w12);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  text-transform: uppercase;
  color: var(--navy-70);
}

.cs-detail__crumb-sep {
  flex: 0 0 auto;
  width: 1px;
  height: var(--w10);
  background: var(--navy-70);
  opacity: 0.5;
}

/* Instrument Serif 56/1.3 — one line for "Istanbul Senin" in the frame, but it
   wraps freely for longer brands. */
.cs-detail__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--w56);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--navy);
}

.cs-detail__head-aside {
  display: flex;
  flex-direction: column;
  /* 27 between the meta row and the lead, the same as the insights detail's right
     column (frame 6201:91715). It lands the lead at y=359, which is where this
     frame already draws it. */
  gap: var(--w27);
  width: var(--w492);
  flex: 0 0 auto;
}

.cs-detail__description {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

/* The date + Share row, above the lead in the right column (frame 6201:91715 on
   the insights detail, which is the same component; 6201:91942 on this page's phone
   frame). This desktop frame omits it — the head there is just the two columns —
   but it belongs on both breakpoints.

   `justify-content: flex-end` rather than `space-between` so the row still reads
   right when there is no date to put on the left; the date claims the left edge
   with `margin-right: auto` when it is there. */
.cs-detail__meta {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-80);
}

/* Nothing on desktop: the frame's row is only 176 wide and packed against the right
   edge — date, hairline and Share together with 16 between them (6201:91715). The
   phone frame is the one that splits them to opposite edges, so the auto margin
   lives in the media query. */

/* Phone-only: the desktop frame has no hairline in its head — the full-width rule
   below it does that job. */
.cs-detail__divider-mobile {
  display: none;
}

/* The Share control. Its base styling has to be here even though the button only
   shows on the phone — without it the element falls back to the UA's button font
   and the row measured 12.7 tall instead of 18. */
.cs-detail__share {
  display: inline-flex;
  align-items: center;
  gap: var(--w2);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.cs-detail__share:hover {
  color: var(--blue);
}

.cs-detail__share img {
  display: block;
  width: var(--w18);
  height: var(--w18);
}

/* The full-width hairline between the head and the strip (frame Vector 1016 at
   y=453). Solving its rendered ink gives (121,134,164) — System/65% at half
   coverage, so 1px at 0.5 opacity. The frame draws it from x=92 to 1331, i.e. 8
   left of its own content column; aligned to the content here, which is plainly
   what was meant. */
.cs-detail__rule {
  height: 1px;
  margin: var(--w48) 0 0;
  border: 0;
  background: var(--navy-65);
  opacity: 0.5;
}

/* ---- Stat + store strip (frame 6201:91830) ------------------------------ */

.cs-detail__app-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--w118);
  margin-top: var(--w70);
}

/* The figures share the row evenly. The frame pins each label to its own width
   (107, 131, 216) — hand-sized to its text — and dropping those without putting
   anything back left the labels unable to wrap at all: the group overflowed its
   755 of space and wrapped onto a second line, making the strip 196 tall instead
   of 88 and pushing the whole white block 108 down. `flex: 1 1 0` + `min-width: 0`
   is the content-independent reading, the same one the overview card's two-up
   metrics use. */
.cs-detail__stats {
  display: flex;
  align-items: flex-start;
  gap: var(--w60);
  flex: 1 1 auto;
  min-width: 0;
}

.cs-detail__stat {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--w12);
}

/* Instrument Sans Bold 44 on a 36 line box — a deliberately tight setting, and the
   reason each figure's row is 36 tall in the frame rather than ~52. */
.cs-detail__stat-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w44);
  font-weight: 700;
  line-height: var(--w36);
  white-space: nowrap;
  color: var(--navy);
}

/* Body/Small, System/100%. The frame pins each label to its own width (107, 131,
   216) — those are hand-sized to their text, not a rule, so labels wrap freely
   here and the figure above them is what stays on one line. */
.cs-detail__stat-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy);
}

.cs-detail__stores {
  display: flex;
  gap: var(--w16);
  flex: 0 0 auto;
}

.cs-detail__store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--w12);
  min-width: var(--w170);
  /* 12, not the frame's 13: Figma draws the 1px border inside the 58-tall box,
     CSS adds it outside the padding box, so 13 + 32 + 13 + 2 came out at 60. */
  padding: var(--w12) var(--w21);
  border: 1px solid var(--navy);
  border-radius: var(--w14);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cs-detail__store-btn:hover {
  background: var(--navy);
}

.cs-detail__store-btn:hover .cs-detail__store-text,
.cs-detail__store-btn:hover .cs-detail__store-text small {
  color: var(--white);
}

/* The Apple glyph is a single #0a0a0a path, so on the navy hover fill it goes
   near-invisible — black on #11244a. Whitened the same way the CTA icons are.
   The Google badge is left alone: it is multi-colour and reads on navy as-is,
   and Google's brand terms don't allow recolouring it. */
.cs-detail__store-btn .cs-detail__store-icon--apple {
  transition: filter var(--dur) var(--ease);
}

.cs-detail__store-btn:hover .cs-detail__store-icon--apple {
  filter: brightness(0) invert(1);
}

/* The two badges are different shapes — 22x26 for Apple, 29x32 for Google — so
   they are sized individually rather than forced into one box. */
.cs-detail__store-icon {
  display: block;
  flex: 0 0 auto;
}

.cs-detail__store-icon--apple {
  width: var(--w22);
  height: var(--w26);
}

.cs-detail__store-icon--play {
  width: var(--w29);
  height: var(--w32);
}

/* Inter, and the odd numbers are the frame's: 10/12.5 with +0.3672 tracking over
   17/18.75 with -0.6094. Both line heights are expressed as ratios because the
   fluid scale only emits whole pixels. */
.cs-detail__store-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--w17);
  font-weight: 600;
  line-height: 1.103;
  letter-spacing: -0.0358em;
  color: #0a0a0a;
}

.cs-detail__store-text small {
  font-size: var(--w10);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.0367em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}

/* ---- White block ---------------------------------------------------------
   Full-bleed (sampled: row y=700 of the render is #ffffff from x=0 to 1439) from
   y=681, which is 70 under the strip, with 48 of padding. The frame's own footer
   instance overlaps the block's stated height, which is why the render's white
   appears to stop at 4170 — the block's 48 of bottom padding is the structural
   value and is what is used. */

.cs-detail__body {
  margin-top: var(--w70);
  padding: var(--w48) 0;
  background: var(--white);
}

.cs-detail__media {
  width: var(--w1036);
  margin: 0 auto;
}

/* Centred, radius 16 (the corner insets trace r=16 once the ~1px antialiasing bias
   is taken out: 11, 9, 7, 6, 5, 4 …). Sized by ratio rather than by attributes so it
   stays on the fluid scale.

   1038/540 = 1.922, which is the ratio of the image *fill* in the frame
   (`image 127`, 1038x540 at x=-2 — it bleeds 2px past its 1036-wide box). Using the
   fill's ratio rather than the box's 1036/540 = 1.9185 costs ~1px of height at this
   width and is the number the design is specified in.

   This box now shows `detailImage`, a field of its own — see the note in
   CaseStudies.ts. When it is empty the whole block is absent, so nothing here has to
   cope with a missing image. */
.cs-detail__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1038 / 540;
  object-fit: cover;
  border-radius: var(--w16);
}

.cs-detail__media-caption {
  margin: var(--w16) 0 0;
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
}

.cs-detail__content {
  width: var(--w1036);
  margin: var(--w32) auto 0;
}

/* The industry, above the sections — Instrument Sans SemiBold 14/20 uppercase in
   System/65% (sampled: the band's darkest pixel is (123,137,162)). It is one label,
   not the tag row the class name suggests; the markup is shared with insights. */
.cs-detail__tags {
  display: flex;
  align-items: center;
  gap: var(--w6);
}

.cs-detail__tag {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w20);
  text-transform: uppercase;
  color: var(--navy-70);
}

/* ---- Sections ------------------------------------------------------------
   `Introducing` / `Challenges` / `Solution` / `Results` — the heading sits in a
   231-wide column beside the body, 16 apart, and 231 + 16 + 789 = 1036. */

.cs-detail__section {
  display: flex;
  align-items: flex-start;
  gap: var(--w16);
  margin-top: var(--w40);
}

.cs-detail__section-heading {
  flex: 0 0 auto;
  width: var(--w231);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 600;
  line-height: var(--w32);
  text-transform: uppercase;
  color: var(--navy);
}

.cs-detail__section-body {
  flex: 1 1 0;
  min-width: 0;
}

/* Body/Large 18/26 in System/80% — read off the frame and confirmed against the
   render. The space *between* blocks is a design-system decision: the frame's
   section bodies are single text nodes with the paragraph breaks baked in, so they
   state no paragraph gap. One line (26) between paragraphs, more above a heading. */
.cs-detail__section-body .rich-text {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

.cs-detail__section-body .rich-text > * {
  margin: 0;
}

.cs-detail__section-body .rich-text > * + * {
  margin-top: var(--w26);
}

/* The sub-headings inside a section body are SemiBold 20/26 in System/100% — the
   frame sets them inline in the same text node ("“Istanbul Senin” City SuperApp
   Concept"). */
.cs-detail__section-body .rich-text h2,
.cs-detail__section-body .rich-text h3,
.cs-detail__section-body .rich-text h4,
.cs-detail__section-body .rich-text h5,
.cs-detail__section-body .rich-text h6 {
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.cs-detail__section-body .rich-text > * + h2,
.cs-detail__section-body .rich-text > * + h3,
.cs-detail__section-body .rich-text > * + h4,
.cs-detail__section-body .rich-text > * + h5,
.cs-detail__section-body .rich-text > * + h6 {
  margin-top: var(--w32);
}

.cs-detail__section-body .rich-text a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: var(--w3);
}

.cs-detail__section-body .rich-text strong,
.cs-detail__section-body .rich-text b {
  font-weight: 600;
}

.cs-detail__section-body .rich-text ul,
.cs-detail__section-body .rich-text ol {
  padding-left: var(--w24);
}

.cs-detail__section-body .rich-text ul {
  list-style: disc;
}

.cs-detail__section-body .rich-text ol {
  list-style: decimal;
}

.cs-detail__section-body .rich-text li + li {
  margin-top: var(--w8);
}

.cs-detail__section-body .rich-text hr {
  height: 1px;
  border: 0;
  background: var(--navy-40);
}

/* Screenshots belong to the section they follow. 32 above them and 32 between the
   image and whatever follows it, which is the rhythm the frame uses inside its
   Solution and Results columns. Square corners — unlike the hero image's 16, the
   section images measure 0 inset at every row of their top-left corner. */
.cs-detail__section-images {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
  margin-top: var(--w32);
}

.cs-detail__section-figure {
  margin: 0;
}

.cs-detail__section-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-detail__section-figure figcaption {
  margin-top: var(--w32);
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

/* Inline uploads inside a section body get the same treatment, which is how the
   frame's text -> image -> text ordering is reproduced: place the image in the
   rich text rather than in the section's `images` array, which always renders
   after the whole body. */
.cs-detail__section-body .rich-text__figure {
  margin: var(--w32) 0 0;
}

.cs-detail__section-body .rich-text__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.cs-detail__section-body .rich-text__figure figcaption {
  margin-top: var(--w32);
  color: var(--navy-80);
}

/* ---- Phone (Figma 6201:91920, head only — see the file header) ---------- */
@media (max-width: 768px) {
  .sec-cs-detail {
    /* 92 = the frame's crumb line box (y=160) minus the phone header (68). */
    padding-top: var(--m92);
  }

  /* The phone vector is the case-studies list's, measured out of that frame's
     render — see `case-studies/hero.css` for the method. This frame places the
     same node at the same coordinates (233.0859375, 295.80078125, 351.18 x
     476.47), so the same asset applies unchanged. */
  .sec-cs-detail::before {
    top: calc(-1 * var(--m68));
    height: var(--m800);
    background-image: url('/assets/resources/case-studies/hero/hero-wash-mobile.png');
  }

  .cs-detail__upper {
    padding: 0 var(--m24);
  }

  .cs-detail__head {
    flex-direction: column;
    align-items: stretch;
    /* 12 = H1 bottom (235) to lead top (247). */
    gap: var(--m12);
  }

  .cs-detail__head-main {
    width: auto;
    gap: var(--m16);
  }

  .cs-detail__breadcrumb {
    /* 8 between crumbs on the phone, 12 on desktop. */
    gap: var(--m8);
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .cs-detail__crumb-sep {
    height: var(--m10);
  }

  .cs-detail__title {
    font-size: var(--m34);
    line-height: 1.2;
  }

  .cs-detail__head-aside {
    width: auto;
    gap: var(--m20);
  }

  .cs-detail__description {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  /* The phone frame puts a hairline and a Share row under the lead; the desktop
     frame has neither, and its full-width rule is what this replaces. The date the
     phone frame shows next to Share is dropped on purpose: it belongs to the
     insights frame this one was copied from, and a case study has no editorial
     date — only `createdAt`, which is a record timestamp. */
  .cs-detail__rule {
    display: none;
  }

  .cs-detail__divider-mobile {
    display: block;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--navy-60);
    opacity: 0.5;
  }

  /* Source order is the phone's — lead, hairline, then this row — so the desktop
     hoist is dropped. Without `order: 0` it would inherit `order: -1` and jump back
     above the lead. */
  .cs-detail__meta {
    order: 0;
    gap: 0;
    font-size: var(--m12);
    line-height: var(--m18);
  }

  /* The phone frame puts the date at one edge and Share at the other (6201:91942:
     date at x=0, the Share group at x=293 of a 345 row) with nothing between them. */
  .cs-detail__date {
    margin-right: auto;
  }

  .cs-detail__meta .cs-detail__crumb-sep {
    display: none;
  }

  .cs-detail__share {
    gap: var(--m2);
  }

  .cs-detail__share img {
    width: var(--m18);
    height: var(--m18);
  }

  /* Derived: the phone frame carries no strip at all. Two figures per row keeps
     the 44px numbers legible at 393, and the store buttons follow underneath. */
  .cs-detail__app-info {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m24);
    margin-top: var(--m24);
  }

  .cs-detail__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m24) var(--m16);
  }

  .cs-detail__stat {
    gap: var(--m8);
  }

  .cs-detail__stat-value {
    font-size: var(--m32);
    line-height: var(--m36);
  }

  .cs-detail__stat-label {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .cs-detail__stores {
    flex-wrap: wrap;
    gap: var(--m12);
  }

  .cs-detail__store-btn {
    min-width: var(--m150);
    padding: var(--m10) var(--m16);
    border-radius: var(--m12);
    gap: var(--m10);
  }

  .cs-detail__store-icon--apple {
    width: var(--m20);
    height: var(--m24);
  }

  .cs-detail__store-icon--play {
    width: var(--m26);
    height: var(--m29);
  }

  .cs-detail__store-text {
    font-size: var(--m15);
  }

  .cs-detail__store-text small {
    font-size: var(--m9);
  }

  /* White block: full-bleed from y=404 (30 under the head), 16 of padding, hero
     image 361x178 inset 16. */
  .cs-detail__body {
    margin-top: var(--m30);
    padding: var(--m16) 0 var(--m24);
  }

  .cs-detail__media {
    width: auto;
    padding: 0 var(--m16);
  }

  /* The phone frame is NOT 1.922. `image-istanbulsenin` there is 361x178 (2.028) and
     its fill 361.97x179.04 (2.022) — measured on 6201:91920, not carried over from
     desktop. Left as the frame draws it. */
  .cs-detail__media img {
    aspect-ratio: 361 / 178;
    border-radius: var(--m8);
  }

  .cs-detail__media-caption {
    margin-top: var(--m12);
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .cs-detail__content {
    width: auto;
    /* 24 from the image's bottom edge to the content column (598 -> 622). */
    margin-top: var(--m24);
    padding: 0 var(--m16);
  }

  .cs-detail__tag {
    font-size: var(--m12);
    line-height: var(--m18);
  }

  /* Derived: 231 + 16 + 789 cannot survive at 361, so the heading stacks above
     its body. */
  .cs-detail__section {
    flex-direction: column;
    gap: var(--m12);
    margin-top: var(--m32);
  }

  .cs-detail__section-heading {
    width: auto;
    font-size: var(--m16);
    line-height: var(--m24);
  }

  .cs-detail__section-body .rich-text {
    font-size: var(--m18);
    line-height: var(--m26);
  }

  .cs-detail__section-body .rich-text > * + * {
    margin-top: var(--m26);
  }

  .cs-detail__section-body .rich-text h2,
  .cs-detail__section-body .rich-text h3,
  .cs-detail__section-body .rich-text h4,
  .cs-detail__section-body .rich-text h5,
  .cs-detail__section-body .rich-text h6 {
    font-size: var(--m18);
    line-height: var(--m26);
  }

  .cs-detail__section-body .rich-text > * + h2,
  .cs-detail__section-body .rich-text > * + h3,
  .cs-detail__section-body .rich-text > * + h4,
  .cs-detail__section-body .rich-text > * + h5,
  .cs-detail__section-body .rich-text > * + h6 {
    margin-top: var(--m24);
  }

  .cs-detail__section-body .rich-text ul,
  .cs-detail__section-body .rich-text ol {
    padding-left: var(--m20);
  }

  .cs-detail__section-images,
  .cs-detail__section-body .rich-text__figure {
    gap: var(--m24);
    margin-top: var(--m24);
  }

  .cs-detail__section-figure figcaption,
  .cs-detail__section-body .rich-text__figure figcaption {
    margin-top: var(--m24);
    font-size: var(--m16);
    line-height: var(--m23);
  }
}