/* ==========================================================================
   Block: work-showcase — heading + intro, then a full-bleed row of work drifting in a constant loop
   (src/blocks/work-showcase.html, js/blocks/work-showcase.js). Layouts: portrait (default), landscape, sites.
   Figma "Social Media Advertising" 4506:165 at 1920 (page y):
     eyebrow  dot x103, label x124 y1238 (20px)
     title    x103  y1289  48px Blauer Nue Regular, 59 tall      → 26px under the eyebrow
     rule     x100  y1382  125 × 2 green                          → 33px under the title
     body     x974  y1289  849 wide, 20px, 2 paragraphs (5 lines = 125 tall, bottom 1414)
     cards    340 × 604, radius 10, pitch 365 (gap 25); "up" cards y1479, "down" cards y1499 (+20)
              → the row starts 65px under the body; first full card ("down") at x59
     next block's eyebrow at y2243 (140 under the lowest card bottom 2103)
   Columns = .grid-2 (860fr | 849fr, 11px gap: right column at x971; the Figma body box is at 974).
   Desktop sizes are the 1920 values scaled with the viewport (vw, capped at the Figma px).
   "Mobile Category" 4148:2776 at 402: head, then the row (204 × 362 cards, pitch 219, +12 offset, centre card
   at x101), then the body under the row.
   Variants (optional fields, SMA renders exactly as before):
     title_lines  → --title-lines: a 2-line heading, rule 45 under it (Organic 4539:196, Graphic 4696:1095,
                    Web 4816:2 — every 2-line 48px title in the service frames)
     layout       → --landscape (Graphic Design) · --sites (Web Design, the paid scrolling showcase)
   ========================================================================== */

.block-work-showcase {
  --card-w: min(17.7083vw, 340px);                 /* 340 */
  --gap: min(1.3021vw, 25px);                      /* 25 → 365 pitch */
  --offset: min(1.0417vw, 20px);                   /* "down" cards sit 20px lower */
  --pitch: calc(var(--card-w) + var(--gap));
  --start: min(3.0729vw, 59px);                    /* x of the first real card */
  --nudge: min(0.1563vw, 3px);                     /* Figma text boxes sit 3px inside the 100px gutter */
  padding: min(3.5417vw, 68px) 0 min(3.6458vw, 70px);   /* hero ends at y1170 → eyebrow 1238; 140px to the next eyebrow, split */
  overflow: hidden;                                /* the full-bleed row never widens the page */
}

.block-work-showcase__grid {
  grid-template-areas:
    "head body"
    "row  row";
  row-gap: 0;
}

/* ---- Heading ------------------------------------------------------------- */
.block-work-showcase__head { grid-area: head; }
.block-work-showcase__eyebrow { margin-left: var(--nudge); }
.block-work-showcase__title {
  max-width: 729px;
  margin: min(1.3542vw, 26px) 0 0 var(--nudge);    /* eyebrow bottom 1263 → title 1289 */
  font-family: var(--font-display);
  font-weight: 400;                                /* Blauer Nue Regular, sentence case */
  font-size: 48px;
  line-height: 1.23;                               /* 59px box */
}
.block-work-showcase__rule {
  display: block;
  width: 125px;
  height: 2px;
  margin-top: min(1.7188vw, 33px);                 /* title bottom 1348 → line 1381 */
  background: var(--accent);
}

/* ---- Body ---------------------------------------------------------------- */
.block-work-showcase__body {
  grid-area: body;
  max-width: 849px;
  padding-top: calc(25px + min(1.3542vw, 26px));   /* level with the title (eyebrow line + gap) */
  padding-left: var(--nudge);
}
.block-work-showcase__body p { font-size: var(--fs-body); line-height: var(--lh-body); }
.block-work-showcase__body p + p { margin-top: calc(var(--lh-body) * 1em); }   /* one blank line */

/* ---- Row ----------------------------------------------------------------- */
.block-work-showcase__row {
  grid-area: row;
  margin: min(3.4375vw, 66px) calc(var(--gutter) * -1) 0;   /* body bottom 1413 → up-card top 1479 */
  overflow: hidden;
}
.block-work-showcase__track {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  width: max-content;
  height: calc(var(--card-w) * 604 / 340 + var(--offset));
  margin-left: var(--start);
}
/* The script prepends one card so the row opens with a part-card on the left, as in the Figma. */
.block-work-showcase__row.is-looping .block-work-showcase__track {
  margin-left: calc(var(--start) - var(--pitch));
  will-change: transform;
}
.block-work-showcase__item {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
}
/* Alternate cards sit lower. The first real card is a "down" card: without JS it is the 1st child, once
   the script has prepended a card it is the 2nd. */
.block-work-showcase__row:not(.is-looping) .block-work-showcase__item:nth-child(odd),
.block-work-showcase__row.is-looping .block-work-showcase__item:nth-child(even) { margin-top: var(--offset); }

.block-work-showcase__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 340 / 604;
  object-fit: cover;
  border-radius: 10px;
  background: #1a1a1a;                             /* placeholder while a still / poster loads */
}

/* ---- title_lines: the designer's line breaks + the Figma's 2-line spacing ------------------------------
   Organic 4539:196: title y1289 (2 lines, 118 tall) → rule y1452 (45 under) → up cards y1522 (68 under the
   rule's bottom edge); Graphic / Web: title y1337 → rule y1500. */
.block-work-showcase__line { display: block; }
/* Below 1630px the heading column is narrower than the Figma's 729px box, so a designer's line would wrap
   on its own (Organic's run to 4 lines at 1440): let the heading flow, balanced, instead. */
@media (min-width: 1025px) and (max-width: 1629px) {
  .block-work-showcase__line { display: inline; }
  .block-work-showcase--title-lines .block-work-showcase__title { text-wrap: balance; }
}

/* ---- Layout "landscape" (Graphic Design 4696:1095) ------------------------------------------------------
   Stills alternate LARGE 995 × 680 and SMALL 705 × 482 by position, top-aligned, 20px gaps, square corners;
   first large card on the gutter (x100), the small part-card the script prepends before it (x-625, Figma
   x-623). Cards y1577 = 75 under the rule. An odd number of items loops as two sets (the script), so the
   large/small alternation stays seamless. */
.block-work-showcase--landscape {
  --card-w: min(51.8229vw, 995px);                 /* large */
  --small-w: min(36.7188vw, 705px);                /* small */
  --gap: min(1.0417vw, 20px);
  --offset: 0px;
  --pitch: calc(var(--small-w) + var(--gap));      /* the prepended card is a small one */
  --start: var(--gutter);                          /* x100 */
}
.block-work-showcase--landscape .block-work-showcase__track { height: calc(var(--card-w) * 680 / 995); }
.block-work-showcase--landscape .block-work-showcase__row:not(.is-looping) .block-work-showcase__item:nth-child(even),
.block-work-showcase--landscape .block-work-showcase__row.is-looping .block-work-showcase__item:nth-child(odd) {
  flex-basis: var(--small-w);
  width: var(--small-w);
}
.block-work-showcase--landscape .block-work-showcase__media { aspect-ratio: 995 / 680; border-radius: 0; }

/* ---- Layout "sites" (Web Design 4816:2 — the paid scrolling showcase) ------------------------------------
   Full-bleed #000 band y1533→2523 (990 tall), 31 under the rule's bottom edge; screens 1176 × 743, square
   corners, no stagger, at y1667 (134 into the band, 113 above its bottom), 87px gaps (pitch 1263); the first
   screen at x555, the one the script prepends cut at the left edge (x-708, Figma x-707), the next at x1818.
   Each screen clips its page capture; the script scrolls a capture taller than the screen inside it. */
.block-work-showcase--sites {
  --card-w: min(61.25vw, 1176px);
  --gap: min(4.5313vw, 87px);
  --offset: 0px;
  --start: min(28.9063vw, 555px);
}
.block-work-showcase--sites .block-work-showcase__row {
  padding: min(6.9792vw, 134px) 0 min(5.8854vw, 113px);
  background: var(--bg);                          /* the site background (client call 30 Sep: less boxy than #000) */
}
.block-work-showcase--sites .block-work-showcase__track { height: auto; }
.block-work-showcase__screen {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1176 / 743;
  background: #1a1a1a;                             /* placeholder while the capture loads */
  color: inherit;
}
.block-work-showcase__picture { display: block; height: 100%; }
.block-work-showcase__capture {                    /* the page capture: full width, its own height, top first */
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.block-work-showcase__scroll-video {               /* a scroll recording plays over the still once it runs */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.block-work-showcase__scroll-video.is-playing { opacity: 1; }
/* A phone recording in the desktop row (media.tall — the add-on's AFOM reference mixes desktop and phone
   screens): the same height as a desktop screen, the recording's own 1126 × 2308 shape. ≤640px it is a
   phone frame like any site with a mobile view (see the mobile rules below). */
@media (min-width: 641px) {
  .block-work-showcase__site--tall {
    flex-basis: calc(var(--card-w) * 743 / 1176 * 1126 / 2308);
    width: calc(var(--card-w) * 743 / 1176 * 1126 / 2308);
  }
  .block-work-showcase__site--tall .block-work-showcase__screen { aspect-ratio: 1126 / 2308; }
}
/* Interaction (sites): the row slows to a stop under the mouse, then grab and throw (js/blocks/work-showcase.js);
   the hovered screen grows. */
.block-work-showcase--sites .block-work-showcase__row { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.block-work-showcase--sites .block-work-showcase__row.is-grabbable { cursor: grab; }
.block-work-showcase--sites .block-work-showcase__row.is-dragging { cursor: grabbing; }
/* draggable rows (Graphic Design, client #51): grab and throw, the drift carries on */
.block-work-showcase__row[data-draggable] { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.block-work-showcase__row[data-draggable].is-grabbable { cursor: grab; }
.block-work-showcase__row[data-draggable].is-dragging { cursor: grabbing; }
.block-work-showcase--sites .block-work-showcase__screen { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover) {
  .block-work-showcase--sites .block-work-showcase__item:hover .block-work-showcase__screen { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .block-work-showcase--sites .block-work-showcase__screen { transition: none; }
}
a.block-work-showcase__screen:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Graphic and Web both leave ~215px from the row's bottom to the next block's eyebrow (Graphic 2257 → 2472,
   Web 2523 → 2739), not the portrait 140: this block takes 145 of it, the next block its usual 70. */
.block-work-showcase--landscape,
.block-work-showcase--sites { padding-bottom: min(7.5521vw, 145px); }

@media (min-width: 1025px) {
  .block-work-showcase--title-lines .block-work-showcase__rule { margin-top: min(2.3438vw, 45px); }   /* 1407 → 1452 */
  .block-work-showcase--title-lines .block-work-showcase__row { margin-top: min(3.5417vw, 68px); }    /* 1454 → 1522 */
  .block-work-showcase--landscape .block-work-showcase__row { margin-top: min(3.9063vw, 75px); }      /* 1502 → 1577 */
  .block-work-showcase--sites .block-work-showcase__row { margin-top: min(1.6146vw, 31px); }          /* 1502 → 1533 */
}

/* ---- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .block-work-showcase {
    --card-w: 240px;
    --gap: 18px;
    --offset: 14px;
    --start: var(--gutter);
    --nudge: 0px;
    padding: 72px 0 56px;
  }
  .block-work-showcase__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "body" "row";
  }
  .block-work-showcase__title { font-size: 40px; }
  .block-work-showcase__body { padding-top: 32px; }
  .block-work-showcase__row { margin-top: 48px; }

  .block-work-showcase--landscape { --card-w: 520px; --small-w: 368px; --gap: 16px; --offset: 0px; }
  .block-work-showcase--sites { --card-w: 80vw; --gap: 32px; --offset: 0px; --start: 10vw; }   /* first screen centred */
  .block-work-showcase--sites .block-work-showcase__row { padding: 64px 0 56px; }
}

/* ---- Mobile (Figma "Mobile Category" 4148:2776, 402 wide) ----------------
   eyebrow y896 · title y928 (36px, 2 lines, 88 tall) · rule y1049 (64 wide) · cards y1082 / 1094
   (204 × 362, pitch 219) · body y1495 (x23, 20px) · next block's eyebrow y1792. */
@media (max-width: 640px) {
  .block-work-showcase {
    --card-w: 204px;
    --gap: 15px;
    --offset: 12px;
    --start: calc(50% - var(--card-w) / 2 - 2 * var(--pitch));   /* 3rd card centred (x101 at 402) */
    padding: 10px 0 36px;   /* Figma: 66px from the hero intro to the eyebrow (the hero pads 56) · 72px to the next eyebrow, split */
  }
  .block-work-showcase__grid { grid-template-areas: "head" "row" "body"; }
  .block-work-showcase__eyebrow { gap: 12px; margin-left: 4px; }   /* dot x24, label x42 */
  .block-work-showcase__title { margin-top: 12px; font-size: 36px; line-height: 1.222; }   /* 88px, 2 lines */
  .block-work-showcase__rule { width: 64px; margin-top: 32px; }
  .block-work-showcase__row { margin-top: 32px; }
  .block-work-showcase__row:not(.is-looping) .block-work-showcase__track { margin-left: var(--gutter); }   /* no JS */
  .block-work-showcase__body { padding: 39px 0 0 3px; }          /* x23 */
  .block-work-showcase__line { display: inline; }                /* title_lines flow as one sentence */

  /* landscape (derived): 300 × 205 / 212 × 145, 12px gaps, the first large card on the 20px gutter */
  .block-work-showcase--landscape { --card-w: 300px; --small-w: 212px; --gap: 12px; --offset: 0px; --start: var(--gutter); }

  /* sites (derived): 40px black band; a site with a mobile capture shows it in a phone frame (62vw, 9 : 19.5,
     radius 16) — the row then sizes to phones — otherwise its desktop capture in a 75vw screen; the first
     site centred with its neighbours peeking. */
  .block-work-showcase--sites { --card-w: 75vw; --gap: 14px; --offset: 0px; --start: calc(50% - var(--card-w) / 2); }
  .block-work-showcase--sites:has(.block-work-showcase__site--phone) { --card-w: 62vw; }
  .block-work-showcase--sites .block-work-showcase__row { padding: 40px 0; }
  .block-work-showcase__site--phone .block-work-showcase__screen { aspect-ratio: 9 / 19.5; border-radius: 16px; }
  /* a row that mixes desktop and phone recordings (media.tall): desktop screens 80vw, phones 40vw in their
     own 1126 × 2308 shape, all on the row's centre line — so neither kind shrinks to fit the other */
  /* client call 30 Sep: desktop screens bigger and the same height as the phones (as on desktop) */
  .block-work-showcase--sites:has(.block-work-showcase__site--tall) { --card-w: 88vw; --start: 6vw; }
  .block-work-showcase--sites:has(.block-work-showcase__site--tall) .block-work-showcase__track { align-items: center; }
  .block-work-showcase__site--tall { flex-basis: calc(88vw * 743 / 1176 * 1126 / 2308); width: calc(88vw * 743 / 1176 * 1126 / 2308); }
  .block-work-showcase__site--tall .block-work-showcase__screen { aspect-ratio: 1126 / 2308; }
}

@media (prefers-reduced-motion: reduce) {
  .block-work-showcase__row.is-looping .block-work-showcase__track { will-change: auto; }
  .block-work-showcase__scroll-video { transition: none; }
}