/* IDO — case study pages (template: Figma 219:8823 / 219:9392 / 219:9904, figma-dump/case-study-template.txt).
   Desktop ≥ 1200: Figma's 1440 numbers × --px (fluid to 1200). Laptop windows (< 880 high): the four tall sections
   (mockup band, solution, highlights, details, form band) compact spacing and mockups so each fits one screen
   (locked rule "every desktop section fits one laptop screen"); text sizes stay. Hero + nav fit via --hk (tokens.css).
   Tablet 768–1199 + phone < 768: LAYOUT.md rules (not drawn in Figma) — stacked in reading order.
   Nav, nav sheet, footer, shapes and buttons come from home.css / button.css / mockup.css. */

.cs { position: relative; background: var(--color-bg-surface); overflow-x: clip; }
.cs__inner { position: relative; width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.case { padding-top: 68px; } /* phone nav band */
@media (min-width: 768px) { .case { padding-top: 96px; } }
@media (min-width: 1200px) { .case { padding-top: min(120px, 8.333vw); } } /* Figma nav band 120 at 1440, fluid below */
.cs-index { color: var(--color-ink-300); }
.cs-label { color: var(--color-text-muted); }
.cs-meta, .cs-facts, .cs-details__list { margin: 0; }
.cs-meta dd, .cs-facts dd, .cs-detail dd { margin: 0; }
.cs-decisions, .cs-cards { margin: 0; padding: 0; list-style: none; }
.cs-idea { font-family: var(--font-display); font-weight: 400; margin: 0; }
.cs-decision__marker { display: block; width: 40px; height: 8px; border-radius: 4px; background: var(--color-deco-green); }
.cs-card { background: var(--color-bg-page); border-radius: var(--radius-2xl); }
.cs-card--lesson { background: var(--color-deco-green); }
.cs-card--lesson .t-label { color: var(--color-text-primary); }
.cs-formband { background: var(--color-bg-page); }
.cs-hero__title[dir="ltr"] { text-align: right; }
.mockup-laptop, .mockup-phone { flex: none; }

/* Per-case values (Figma 219:9392 / 219:9904 differ from case 1 in these boxes) */
.case[data-case="yaron-levi"] { --statement-w: 620; --challenge-w: 1200; }
.case[data-case="proball-academy"] { --statement-w: 620; --challenge-w: 1240; --loop-y: 567.6; } /* ProBall's loop sits low, beside the pill */

/* ======================= PHONE + TABLET (flow) ======================= */
@media (max-width: 1199px) {
  .cs__inner { display: flex; flex-direction: column; align-items: flex-start; padding-block: 56px; }
  .cs-hero__text, .cs-text { display: flex; flex-direction: column; align-items: flex-start; }
  .cs-back { margin: -16px 0 24px; }   /* «חזרה»: top of the hero, start side */
  .cs-hero__statement { margin-top: 20px; }
  .cs-meta { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; width: 100%; }
  .cs-meta__item, .cs-facts__item { display: flex; flex-direction: column; gap: 6px; }
  .cs-hero__visual { position: relative; width: 100%; margin-top: 40px; padding-bottom: 32px; }
  .cs-hero__laptop { position: relative; z-index: 1; }
  .cs-hero__pill { position: absolute; left: -4%; bottom: 0; width: 92%; height: 42%; transform: rotate(4deg); }
  .cs-hero__loop { position: absolute; z-index: 2; left: 2%; top: -24px; width: 44px; height: 77px; transform: rotate(-14deg); } /* on the laptop's top corner, clear of the meta text */
  .cs-text__intro { margin-top: 16px; } .cs-text__role { margin-top: 12px; }
  .cs-facts { margin-top: 32px; width: 100%; padding: 32px; border-radius: var(--radius-2xl); background: var(--color-bg-page); display: flex; flex-direction: column; gap: 18px; }
  .cs-challenge .cs__inner, .cs-result .cs__inner { align-items: center; text-align: center; }
  .cs-label { margin-top: 12px; }
  .cs-challenge__statement, .cs-result__statement { margin-top: 14px; }
  .cs-challenge__p, .cs-result__p { margin-top: 20px; max-width: 640px; }
  .cs-band__panel { width: 100%; padding: 40px 20px 32px; border-radius: var(--radius-2xl); background: var(--color-bg-page); }
  .cs-idea { margin-top: 10px; font-size: 40px; line-height: 44px; }
  .cs-solution__p { margin-top: 20px; }
  .cs-decisions { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 32px; width: 100%; }
  .cs-decision { display: flex; flex-direction: column; align-items: flex-start; }
  .cs-decision__no { margin-top: 14px; } .cs-decision__title { margin-top: 6px; } .cs-decision .t-p { margin-top: 8px; }
  .cs-highlights .cs__inner { position: relative; }
  .cs-highlights__laptop { width: 100%; }
  .cs-highlights__pill { position: absolute; left: calc(var(--gutter) - 12px); bottom: 56px; width: 180px; height: 260px; }
  .cs-highlights__phone { position: relative; z-index: 1; width: 156px; margin-top: -72px; align-self: flex-end; } /* RTL column: flex-end = left → overlaps the laptop bottom-left (LAYOUT.md) */
  .cs-highlights__caption { margin-top: 28px; align-self: stretch; text-align: center; }
  .cs-cards { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%; }
  .cs-card { padding: 28px; }
  .cs-card .t-p, .cs-card .t-h3 { margin-top: 12px; }
  .cs-details .cs__inner { flex-direction: column-reverse; }
  .cs-details__visual { position: relative; width: 100%; margin-top: 40px; display: flex; justify-content: center; padding-block: 8px 24px; }
  .cs-details__band { position: absolute; left: calc(-1 * var(--gutter)); right: 20%; top: 30%; bottom: 0; }
  .cs-details__phone { position: relative; width: min(220px, 46%); }
  .cs-details__phone--b { margin-inline-end: -24px; margin-top: 40px; } /* two phones overlap −24 px */
  .cs-details__phone--a { order: 2; }
  .cs-details__list { margin-top: 28px; display: flex; flex-direction: column; gap: 28px; }
  .cs-detail .t-p { margin-top: 6px; }
  .cs-formband .cs__inner { align-items: stretch; }
  .cs-result__buttons { margin-top: 32px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .cs-result__buttons .btn, .cs-result__buttons .btn__body { width: 100%; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .cs__inner { padding-block: 72px; }
  .cs-hero__visual { max-width: 640px; align-self: center; }
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .cs-decisions { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cs-idea { font-size: 56px; line-height: 60px; }
  .cs-band__panel { padding: 64px 48px 48px; }
  .cs-highlights__phone { width: 200px; margin-top: -96px; }
  .cs-highlights__pill { width: 240px; height: 330px; }
  .cs-details__phone { width: 220px; }
  .cs-result__buttons { flex-direction: row; justify-content: center; width: auto; }
  .cs-result__buttons .btn, .cs-result__buttons .btn__body { width: auto; }
}

/* ======================= DESKTOP ≥ 1200 (Figma 1440) ======================= */
@media (min-width: 1200px) {
  .case-page .nav { top: 0; } /* the case template's nav band sits at y 0 (home: y 8) */
  .cs__inner { padding-inline: calc(80 * var(--px)); }

  /* 01 Hero (219:8362, 1440 × 760) — composition × --hk so nav + hero fit a laptop window */
  .cs-hero .cs__inner { position: relative; height: calc(760 * var(--hk) * var(--px)); }
  /* «חזרה» (Ido, 2026-10-19; not in Figma): the free top-left corner, in the column of the nav's «צור קשר» */
  .cs-back { position: absolute; left: calc(80 * var(--px)); top: calc(24 * var(--hk) * var(--px)); z-index: 3; }
  .cs-hero__text { position: absolute; right: calc(80 * var(--px)); top: calc(64 * var(--hk) * var(--px)); display: flex; flex-direction: column; align-items: flex-start; z-index: 2; }
  .cs-hero__title { font-size: calc(112 * var(--hk) * var(--px)); line-height: calc(104 * var(--hk) * var(--px)); white-space: nowrap; }
  .cs-hero__statement { margin-top: calc(28 * var(--hk) * var(--px)); width: calc(var(--statement-w, 540) * var(--hk) * var(--px)); min-height: calc(120 * var(--hk) * var(--px)); /* fixed row: the meta is at 460 in all three cases */ font-size: calc(32 * var(--hk) * var(--px)); line-height: calc(40 * var(--hk) * var(--px)); }
  .cs-meta { margin-top: calc(40 * var(--hk) * var(--px)); display: grid; grid-template-columns: repeat(2, calc(300 * var(--px))); row-gap: calc(34 * var(--hk) * var(--px)); }
  .cs-meta__item { display: flex; flex-direction: column; gap: 8px; }
  .cs-hero__visual { position: absolute; inset: 0; }
  .cs-hero__visual > * { position: absolute; }
  .cs-hero__pill { left: calc(30.8 * var(--hk) * var(--px)); top: calc(452.7 * var(--hk) * var(--px)); width: calc(660 * var(--hk) * var(--px)); height: calc(240 * var(--hk) * var(--px)); border-radius: calc(44 * var(--hk) * var(--px)); transform: rotate(4deg); }
  .cs-hero__laptop { left: calc(40 * var(--hk) * var(--px)); top: calc(236 * var(--hk) * var(--px)); width: calc(694.4 * var(--hk) * var(--px)); }
  .cs-hero__loop { left: calc(715.7 * var(--hk) * var(--px)); top: calc(var(--loop-y, 158.2) * var(--hk) * var(--px)); width: calc(80 * var(--hk) * var(--px)); height: calc(140 * var(--hk) * var(--px)); transform: rotate(-14deg); }

  /* 02 הפרויקט (219:8393, 600) */
  .cs-project .cs__inner { display: grid; grid-template-columns: calc(640 * var(--px)) 1fr; align-items: start; min-height: calc(600 * var(--px)); padding-top: calc(72 * var(--px)); }
  .cs-text { display: flex; flex-direction: column; align-items: flex-start; }
  .cs-text .t-h2 { margin-top: calc(8 * var(--px)); }
  .cs-text__intro { margin-top: calc(24 * var(--px)); width: calc(600 * var(--px)); }
  .cs-text__role { margin-top: calc(16 * var(--px)); width: calc(600 * var(--px)); }
  .cs-facts { justify-self: end; margin-top: calc(24 * var(--px)); width: calc(520 * var(--px)); height: calc(404 * var(--px)); padding: calc(48 * var(--px)); border-radius: calc(32 * var(--px)); background: var(--color-bg-page); display: flex; flex-direction: column; gap: calc(18 * var(--px)); }
  .cs-facts__item { display: flex; flex-direction: column; gap: 4px; }

  /* 03 האתגר (219:8419, 560) — centred */
  .cs-challenge .cs__inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: calc(560 * var(--px)); padding-top: calc(56 * var(--px)); }
  .cs-challenge .cs-label { margin-top: calc(16 * var(--px)); }
  .cs-challenge__statement { margin-top: calc(18 * var(--px)); max-width: calc(var(--challenge-w, 980) * var(--px)); }
  .cs-challenge__p { margin-top: calc(28 * var(--px)); max-width: calc(760 * var(--px)); }

  /* 04 Mockup band (219:8428, 800): panel 1280 × 720 r48, laptop 1066.4 centred, 108 from the panel top */
  .cs-band .cs__inner { padding-block: calc(40 * var(--px)); }
  .cs-band__panel { height: calc(720 * var(--px)); border-radius: calc(48 * var(--px)); background: var(--color-bg-page); display: flex; justify-content: center; padding-top: calc(108 * var(--px)); }
  .cs-band__laptop { width: calc(1066.4 * var(--px)); }

  /* 05 הפתרון (219:8436, 880) */
  .cs-solution .cs__inner { display: flex; flex-direction: column; align-items: flex-start; min-height: calc(880 * var(--px)); padding-top: calc(72 * var(--px)); }
  .cs-solution .cs-label { margin-top: calc(8 * var(--px)); }
  /* the idea line sits in a fixed 88-high row (Figma: 88 px text at 204 in case 1; 60 / 64 px text centred in the same row in cases 2 / 3), so the paragraph is always at 332 and the decisions at 484 */
  .cs-idea { margin-top: calc(10 * var(--px)); height: calc(88 * var(--px)); display: flex; align-items: center; white-space: nowrap; }
  .cs-idea--88 { font-size: calc(88 * var(--px)); line-height: calc(88 * var(--px)); }
  .cs-idea--60 { font-size: calc(60 * var(--px)); line-height: calc(64 * var(--px)); }
  .cs-idea--64 { font-size: calc(64 * var(--px)); line-height: calc(68 * var(--px)); }
  .cs-solution__p { margin-top: calc(40 * var(--px)); width: calc(560 * var(--px)); }
  .cs-decisions { margin-top: calc(92 * var(--px)); display: grid; grid-template-columns: repeat(4, calc(290 * var(--px))); column-gap: calc(40 * var(--px)); }
  .cs-decision { display: flex; flex-direction: column; align-items: flex-start; }
  .cs-decision__no { margin-top: calc(16 * var(--px)); }
  .cs-decision__title { margin-top: calc(10 * var(--px)); align-self: stretch; }
  .cs-decision .t-p { align-self: stretch; }
  .cs-decision .t-p { margin-top: calc(12 * var(--px)); }

  /* 06 Highlights (219:8473, 840) — composition, × --ck on laptop windows */
  .cs-highlights { --ck: 1; }
  .cs-highlights .cs__inner { height: calc(840 * var(--ck) * var(--px)); }
  .cs-highlights .cs__inner > * { position: absolute; }
  .cs-highlights__laptop { left: calc(80 * var(--px)); top: calc(80 * var(--ck) * var(--px)); width: calc(967.2 * var(--ck) * var(--px)); }
  .cs-highlights__pill { left: calc(990 * var(--px)); top: calc(250 * var(--ck) * var(--px)); width: calc(320 * var(--ck) * var(--px)); height: calc(520 * var(--ck) * var(--px)); border-radius: calc(44 * var(--px)); }
  .cs-highlights__phone { left: calc(1012 * var(--px)); top: calc(200 * var(--ck) * var(--px)); width: calc(272.24 * var(--ck) * var(--px)); }
  .cs-highlights__caption { left: calc(340 * var(--px)); top: calc(640 * var(--ck) * var(--px)); width: calc(640 * var(--px)); text-align: center; }

  /* 07 Way / what stayed out / what the parent sees (219:8490, 660) */
  .cs-way .cs__inner { min-height: calc(660 * var(--px)); padding-top: calc(72 * var(--px)); }
  .cs-way .cs-text { height: calc(230 * var(--px)); } /* cards always at Figma's 360 (72 + 230 + 58), whatever the paragraph's length */
  .cs-cards { margin-top: calc(58 * var(--px)); display: grid; grid-template-columns: repeat(3, calc(400 * var(--px))); column-gap: calc(40 * var(--px)); }
  .cs-card { height: calc(240 * var(--px)); padding: calc(40 * var(--px)); border-radius: calc(32 * var(--px)); }
  .cs-card .t-p, .cs-card .t-h3 { margin-top: calc(18 * var(--px)); width: calc(320 * var(--px)); }

  /* 08 בפרטים (219:8512, 860) — phones + band on the left (× --ck on laptops), text on the right */
  .cs-details { --ck: 1; }
  .cs-details .cs__inner { height: calc(860 * var(--px)); }
  .cs-details__visual { position: absolute; inset: 0; }
  .cs-details__visual > * { position: absolute; }
  .cs-details__band { left: calc(-160 * var(--px)); top: calc(330 * var(--ck) * var(--px)); width: calc(940 * var(--ck) * var(--px)); height: calc(380 * var(--ck) * var(--px)); border-radius: calc(44 * var(--px)); }
  .cs-details__phone { width: calc(272.24 * var(--ck) * var(--px)); }
  .cs-details__phone--a { left: calc(110 * var(--px)); top: calc(110 * var(--ck) * var(--px)); }
  .cs-details__phone--b { left: calc(420 * var(--ck) * var(--px)); top: calc(190 * var(--ck) * var(--px)); }
  .cs-details__text { position: absolute; right: calc(80 * var(--px)); top: calc(72 * var(--px)); width: calc(640 * var(--px)); }
  .cs-details__list { margin-top: calc(40 * var(--px)); display: flex; flex-direction: column; gap: calc(40 * var(--px)); }
  .cs-detail dd { margin-top: calc(8 * var(--px)); width: calc(520 * var(--px)); }

  /* 09 Form band (219:8543, case 1, 760) */
  .cs-formband .cs__inner { height: calc(760 * var(--px)); display: flex; justify-content: center; padding-top: calc(114 * var(--px)); }
  .cs-formband__laptop { width: calc(1066.4 * var(--px)); }

  /* 10 התוצאה (219:8550, 600) */
  .cs-result .cs__inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: calc(600 * var(--px)); padding-top: calc(120 * var(--px)); }
  .cs-result__statement { margin-top: calc(18 * var(--px)); max-width: calc(1000 * var(--px)); }
  .cs-result__p { margin-top: calc(20 * var(--px)); max-width: calc(720 * var(--px)); }
  .cs-result__buttons { margin-top: calc(48 * var(--px)); display: flex; gap: 16px; }
}

/* Laptop windows (< 880 high): the tall sections compact (Claude's values, for Ido to tune) */
@media (min-width: 1200px) and (max-height: 879px) {
  .cs-band .cs__inner { padding-block: calc(24 * var(--px)); }
  .cs-band__panel { height: calc(600 * var(--px)); padding-top: calc(88 * var(--px)); }
  .cs-band__laptop { width: calc(860 * var(--px)); }
  .cs-solution .cs__inner { min-height: 0; padding-top: calc(24 * var(--px)); padding-bottom: calc(24 * var(--px)); }
  .cs-idea { height: auto; }                       /* the line's own height instead of the fixed 88 row */
  .cs-solution__p { margin-top: calc(24 * var(--px)); }
  .cs-decisions { margin-top: calc(32 * var(--px)); }
  .cs-decision__no { margin-top: calc(10 * var(--px)); }
  .cs-decision__title { margin-top: calc(6 * var(--px)); }
  .cs-highlights { --ck: 0.8; }
  .cs-details { --ck: 0.8; }
  .cs-details .cs__inner { height: calc(668 * var(--px)); }
  .cs-details__text { top: calc(48 * var(--px)); }
  .cs-details__list { margin-top: calc(28 * var(--px)); gap: calc(20 * var(--px)); }
  .cs-formband .cs__inner { height: calc(690 * var(--px)); padding-top: calc(87 * var(--px)); }
}