/* ==========================================================================
   CASE BLOCKS — «Смак Грузії», from Завдання to the exit
   --------------------------------------------------------------------------
   Editorial page (Vadim's rules, 22 Oct): lots of air, the TEXT ties the
   page together, no numbering of photos or sections. Every block is its
   own composition, built from the same kit: a marker + a Display XL head,
   ONE large atmosphere picture (a clean frame or a clip, one grade), the
   EVIDENCE small (screens, slides, offers, stories, Insights) and a narrow
   text column tied to an edge of the picture.

   Phones (mobile first): the site's mobile numbers — field 20, gutter 16,
   spacing 16 / 32 / 56, 120 between blocks — each block with its own
   mobile move (approved sketch, 23 Oct).
   Desktop (≥ 64em): the approved 1920 sketch. Columns are written as the
   sketch's pixel widths in fr, so at 1920 every edge lands where it was
   drawn and below 1920 the picture shrinks as a whole; text columns never
   go narrower than 18rem. Vertical gaps are the scale: 16 / 32 / 56 /
   120 / 160.
   ========================================================================== */

/* --- Shared kit -----------------------------------------------------------
   Phone widths are written as shares of the FIELD (100 % − 2 × margin),
   because each item keeps the field margins itself: 264 of 350 = 0.7543. */

.case {
  padding-top: var(--space-section);           /* Hero → first block: 120 */
}

.case-blk {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-section);        /* 120 between blocks */
}

/* Phones: everything sits on the field unless it bleeds on purpose. */
.case-blk > * {
  margin-inline: var(--page-margin);
}

.case-soft { color: var(--color-bg-soft); }

.case-cap {
  display: block;
  margin-top: var(--space-pair);               /* image → caption 16 */
  color: var(--color-bg-soft);
}

.case-head__title {
  margin-top: var(--space-pair);               /* marker → head 16 */
  font-variant-numeric: lining-nums;           /* «$65», «2,5» level with the caps */
}

.case-head--c { text-align: center; }

/* Line breaks that exist only in the desktop composition. */
.case-br-d { display: none; }

/* Numbers: Display, lining figures; the label under them reads in bg-soft. */
.case-num {
  margin-top: var(--space-group);              /* text → number 32 */
  font-variant-numeric: lining-nums;
}

.case-num__label { margin-top: var(--space-pair); }

/* The «→» of «256 → 793»: Cormorant's subset has no arrow, so it is drawn
   — the same hairline arrow as the site's buttons, at the text's colour. */
.case-to {
  display: inline-block;
  width: 0.6em;
  height: 0.2em;
  margin-inline: 0.12em;
  vertical-align: 0.28em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  overflow: visible;
}

.case-to path { vector-effect: non-scaling-stroke; }

/* A picture box: the photo, or a clip's first frame with the clip laid over
   it. The clip only shows once frames are really running (.is-playing,
   js/case-media.js) — until then, and for good when video is off, the
   frame stays. */
.case-frame {
  position: relative;
  overflow: hidden;
  background: #1a1814;
}

.case-frame img,
.case-frame video,
.case-tile img,
.case-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-frame video,
.case-tile video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}

.case-frame video.is-playing,
.case-tile video.is-playing {
  opacity: 1;
}

/* Screens (UI) get a hairline so they hold their edge on the ink. */
.case-frame--shot {
  background: #000;
  outline: 1px solid var(--color-line-dark);
  outline-offset: -1px;
}

.case-frame--ui-dark { background: #0d0d0f; }
.case-frame--ui-light { background: #fff; }
.case-frame--ui-dark img,
.case-frame--ui-light img {
  object-fit: contain;
  object-position: top;
}

/* --- Завдання -------------------------------------------------------------
   Phones: head → storefront clip on the field → «було» small, right →
   text. */
.case-task__media { order: 1; margin-top: var(--space-between); aspect-ratio: 5 / 4; }
.case-task__proof { order: 2; margin-top: var(--space-group); margin-left: auto; width: calc((100% - 2 * var(--page-margin) - var(--gutter)) / 2); }
.case-task__text  { order: 3; margin-top: var(--space-group); }
.case-task__proof .case-frame { aspect-ratio: 300 / 227; }
.case-task__proof img { object-position: top; }

/* --- Етап 1 -----------------------------------------------------------------
   Phones: the photo right (264 of 350), the strategy small below-left with
   the lens, then the text and «390». */
.case-s1__photo { order: 1; margin-top: var(--space-between); margin-left: auto; width: calc(0.7543 * (100% - 2 * var(--page-margin))); aspect-ratio: 4 / 5; }
.case-s1__plan  { order: 2; margin-top: var(--space-group); width: calc(0.523 * (100% - 2 * var(--page-margin))); }
.case-s1__text  { order: 3; margin-top: var(--space-group); }

/* The stack: three slides, each 16 down-right of the last (proportions of
   the desktop sketch: 320 slides in a 352 × 224 box), the lens on the top
   slide. */
.case-stack {
  position: relative;
  aspect-ratio: 352 / 224;
}

.case-stack__slide {
  position: absolute;
  width: 90.91%;
  aspect-ratio: 16 / 9;
  box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / 0.55);
}

.case-stack__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-stack__slide:nth-child(1) { left: 0;      top: 0; }
.case-stack__slide:nth-child(2) { left: 4.545%; top: 7.14%; }
.case-stack__slide:nth-child(3) { left: 9.09%;  top: 14.29%; }
.case-stack__slide:nth-child(1) img { filter: brightness(0.55); }
.case-stack__slide:nth-child(2) img { filter: brightness(0.7); }

/* The lens: the top slide again at ×2 (the image is 2 × the slide width,
   so 444 % of a lens that is 45 % of a slide), a hairline accent ring —
   the site's ring motif. */
.case-stack__lens {
  position: absolute;
  left: 56.82%;
  top: 35.71%;
  width: 40.91%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url('../images/smak-slide-5-1280.jpg') no-repeat 82.26% 77.78% / 444.4% auto;
  /* WebP where the browser takes it (≈40 % lighter); the line above stays
     as the fallback for browsers without image-set() type(). */
  background-image: image-set(url('../images/smak-slide-5-1280.webp') type('image/webp'), url('../images/smak-slide-5-1280.jpg') type('image/jpeg'));
  box-shadow: 0 0 0 1px var(--color-accent), 0 1.875rem 3.75rem rgb(0 0 0 / 0.6);
}

/* The slides and the lens are positioned, so their long shadows paint OVER
   the caption below (on phones it starts 16 under the stack and its first
   line came out greyed). The caption is lifted above them: the shadow now
   falls behind the text. */
.case-s1__plan figcaption {
  position: relative;
  z-index: 1;
}

/* --- Етап 2 -----------------------------------------------------------------
   Phones: the interior clip edge to edge; the 3 × 3 sheet on the full field
   (it reads as the Instagram feed — tap a tile to play it); the number and
   the text; the story player centred (tap = next story). */
.case-s2__media { order: 1; margin-inline: 0; margin-top: var(--space-between); aspect-ratio: 4 / 5; }
.case-s2__feed  { order: 2; margin-top: var(--space-group); }
.case-s2__stories { order: 3; margin-top: var(--space-between); }

.case-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;                               /* 10 → tiles 110 at 390 */
}

.case-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a1814;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The feed's own sign for a reel. */
.case-tile__mark {
  position: absolute;
  z-index: 1;
  top: 0.375rem;
  right: 0.375rem;
  width: 0.625rem;
  height: 0.625rem;
  fill: var(--color-bg);
  transition: opacity 200ms ease;
}

.case-tile.is-on .case-tile__mark { opacity: 0; }

.case-s2__num { margin-top: var(--space-between); }
.case-s2__text { margin-top: var(--space-group); }
.case-s2__text p + p { margin-top: var(--paragraph-spacing); }

.case-s2__stories { text-align: center; }

.case-story {
  position: relative;
  width: 57.14%;                               /* 200 of 350 */
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #1a1814;
  text-align: left;
}

.case-story__part {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.case-story__part.is-on,
.case-story picture:has(.is-on) img { visibility: visible; }
.case-story picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Progress bars, as in Instagram: one per part, the current one filling. */
.case-story__bars {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.1875rem;                              /* 3 */
  height: 2px;
}

.case-story__bars i { position: relative; overflow: hidden; background: rgb(242 240 234 / 0.35); }
.case-story__bars b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-bg); }

/* The whole story is the "next" button, as in Instagram. */
.case-story__next {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* No JS or no motion: the first story stands still, no bars. */
html:not(.js) .case-story__bars,
html:not(.js) .case-story__next { display: none; }

/* --- Етап 3 -----------------------------------------------------------------
   Phones: the photo edge to edge with the head on it; the offers small in
   a row; the text and «62». */
.case-s3__bleed {
  position: relative;
  margin-inline: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.case-s3__bleed img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The shade the head sits on: ink rising from the bottom. */
.case-s3__bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(14 13 10 / 0.9), rgb(14 13 10 / 0.55) 30%, rgb(14 13 10 / 0) 60%);
}

.case-s3__head {
  position: absolute;
  z-index: 1;
  left: var(--page-margin);
  bottom: var(--space-between);                /* 56 */
}

.case-s3__offers { margin-top: var(--space-between); }

.case-offers {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
}

.case-offers li { flex: 1; aspect-ratio: 9 / 16; }
.case-offers li:last-child { aspect-ratio: 3 / 4; }

.case-s3__text { margin-top: var(--space-group); }

/* --- Результат --------------------------------------------------------------
   Phones: the photo left; «60+» at the Hero size; the three numbers; the
   proof: «стало», the feed, Insights in a row that scrolls sideways. */
.case-res__photo { margin-top: var(--space-between); width: calc(0.7543 * (100% - 2 * var(--page-margin))); aspect-ratio: 4 / 5; }
.case-res__nums { margin-top: var(--space-group); margin-bottom: 0; }

.case-res__big {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 28.718vw;                         /* the Hero role: 112 at 390 */
  line-height: 0.875;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}

.case-res__lead dd > * { display: block; margin-top: var(--space-pair); }
.case-res__lead dd > .case-cap { margin-top: var(--space-pair); }
.case-res__nums > div + div { margin-top: var(--space-group); }
.case-res__nums .case-num { margin-top: 0; }

.case-res__proof { margin-top: var(--space-between); }
.case-res__after { width: calc((100% - var(--gutter)) / 2); }
.case-res__after .case-frame { aspect-ratio: 300 / 227; }
.case-res__feed { margin-top: var(--space-group); }

.case-res__feeds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.case-res__feeds .case-frame { aspect-ratio: 3 / 4; }

/* Insights: three readable screens; on a phone they don't fit side by
   side, so the row scrolls sideways and runs off the right edge — the
   cut-off third screen says "there is more". */
.case-insights {
  display: flex;
  gap: var(--gutter);
  margin-top: var(--space-group);
  margin-inline: calc(-1 * var(--page-margin));
  padding-inline: var(--page-margin);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--page-margin);
  scrollbar-width: none;
}

.case-insights::-webkit-scrollbar { display: none; }

.case-insights li { flex: 0 0 12.5rem; scroll-snap-align: start; }   /* 200 */
.case-insights .case-frame { aspect-ratio: 200 / 323; }
.case-insights .t-marker { margin-top: var(--space-pair); }
.case-insights .case-cap { margin-top: var(--space-pair); }

.case-res__source { margin-top: var(--space-group); }

/* --- Відгук -----------------------------------------------------------------
   Phones: the quote in Display (in XL it ran to seven lines), the photo
   right, the message small below-left. */
.case-rev__quote {
  margin-top: var(--space-pair);
  font-size: var(--display-size);
  line-height: var(--display-leading);
}

.case-rev__who { margin-top: var(--space-group); }
.case-rev__photo { margin-top: var(--space-between); margin-left: auto; width: calc(0.7543 * (100% - 2 * var(--page-margin))); aspect-ratio: 4 / 5; }
.case-rev__msg { margin-top: var(--space-group); width: calc(0.5714 * (100% - 2 * var(--page-margin))); }
.case-rev__msg .case-frame { aspect-ratio: 360 / 295; }

/* --- Exit ------------------------------------------------------------------ */
.case-exit {
  display: flex;
  justify-content: center;
}

/* «Усі кейси»: the site CTA facing back. The whole ring is mirrored, so the
   arrow points left and its run-through plays leftwards too. */
.cta--back .cta__ring { transform: scaleX(-1); }

/* ==========================================================================
   DESKTOP — the approved 1920 sketch
   ========================================================================== */
@media (min-width: 64em) {
  .case {
    /* The bar docks 56 under the Hero (64 tall); the first block starts a
       section gap below it — 200 at 1920, as in the sketch. */
    padding-top: calc(var(--dock-gap) + 4rem + var(--space-section));
  }

  .case-blk {
    display: grid;
    row-gap: 10rem;                            /* head → pictures 160 */
  }

  .case-blk > * { margin-inline: 0; }

  .case-head__title { margin-top: 2.25rem; }  /* marker top → head top 56 */
  .case-br-d { display: inline; }
  .case-num { margin-top: var(--space-between); }

  /* Завдання: 79 | 720 video | 321 | 392 text | 29 | 300 proof | 79 */
  .case-task {
    grid-template-columns: var(--page-margin) 720fr 321fr minmax(18rem, 392fr) 29fr 300fr var(--page-margin);
  }
  .case-task__head  { grid-area: 1 / 2 / 2 / 5; }
  .case-task__proof { grid-area: 1 / 6; align-self: start; width: auto; margin: 0; }
  .case-task__media { grid-area: 2 / 2; margin: 0; }
  .case-task__text  { grid-area: 2 / 4; align-self: end; margin: 0; }

  /* Етап 1: 79 | 233 | 352 stack | 56 | 480 photo | 56 | 392 text | 193 | 79 */
  .case-s1 {
    grid-template-columns: var(--page-margin) 233fr 352fr 56fr 480fr 56fr minmax(18rem, 392fr) 193fr var(--page-margin);
  }
  .case-s1__head  { grid-area: 1 / 2 / 2 / 9; }
  .case-s1__plan  { grid-area: 2 / 3; align-self: start; width: auto; margin: 0; }
  .case-s1__photo { grid-area: 2 / 5; width: auto; margin: 0; }
  .case-s1__text  { grid-area: 2 / 7; align-self: end; margin: 0; }

  /* Етап 2: 79 | 321 | 600 clip + stories | 56 | 432 sheet + text | 353 | 79 */
  .case-s2 {
    grid-template-columns: var(--page-margin) 321fr 600fr 56fr 432fr 353fr var(--page-margin);
  }
  .case-s2__head    { grid-area: 1 / 2 / 2 / 7; }
  .case-s2__media   { grid-area: 2 / 3; margin: 0; }
  .case-s2__feed    { grid-area: 2 / 5 / 4 / 6; align-self: start; margin: 0; }
  .case-s2__stories { grid-area: 3 / 3; margin: 0; text-align: left; }
  .case-sheet { gap: 0.75rem; }               /* 12 → tiles 136 at 1920 */
  .case-tile__mark { top: 0.5rem; right: 0.5rem; width: 0.75rem; height: 0.75rem; }
  .case-story { width: 45%; margin-inline: 0; }   /* 270 of 600 */
  .case-story__bars { top: 0.75rem; left: 0.75rem; right: 0.75rem; gap: 0.25rem; }

  /* Етап 3: the left half bleeds; 160 | 632 offers + text | 89 | 79 */
  .case-s3 {
    grid-template-columns: 50% 160fr 632fr 89fr var(--page-margin);
    /* Offers top, text bottom; on a narrow desktop the two never touch:
       at least 56 between them, and the photo stretches if they need more
       height than its 8 : 9 frame. */
    grid-template-rows: auto minmax(var(--space-between), 1fr) auto;
    row-gap: 0;
  }
  .case-s3__bleed  { grid-area: 1 / 1 / 4 / 2; width: 100%; aspect-ratio: 960 / 1080; min-height: 100%; }
  .case-s3__head   { bottom: 7.5rem; }         /* 120 under «на $65» */
  .case-s3__offers { grid-area: 1 / 3; margin: 0; }
  .case-s3__text   { grid-area: 3 / 3; width: max(62%, 18rem); margin: 0; }

  /* Результат: 79 | 600 photo | 160 | 560 numbers | 442 | 79, then the
     proof band: 79 | 392 source | 406 | 300 · 32 · 300 · 32 · 300 | 79 */
  .case-res {
    grid-template-columns: var(--page-margin) 600fr 160fr 560fr 442fr var(--page-margin);
  }
  .case-res__head  { grid-area: 1 / 2 / 2 / 6; }
  .case-res__photo { grid-area: 2 / 2; width: auto; margin: 0; }
  .case-res__nums  { grid-area: 2 / 4; align-self: end; margin: 0; }
  .case-res__big   { font-size: var(--hero-size); line-height: var(--hero-leading); }
  .case-res__nums > div + div { margin-top: var(--space-group); }

  .case-res__proof {
    grid-area: 3 / 1 / 4 / -1;
    display: grid;
    grid-template-columns: var(--page-margin) 392fr 406fr 300fr 2rem 300fr 2rem 300fr var(--page-margin);
    row-gap: 7.5rem;                           /* 120 between the two rows */
    margin: 0;
  }
  .case-res__after  { grid-area: 1 / 4; width: auto; }
  .case-res__feed   { grid-area: 1 / 6 / 2 / 9; margin: 0; }
  .case-res__feeds  { gap: 2rem; }
  .case-insights {
    grid-area: 2 / 4 / 3 / 9;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .case-insights .case-frame { aspect-ratio: 300 / 484; }
  .case-res__source { grid-area: 2 / 2; align-self: end; margin: 0; }

  /* Відгук: 79 | 802 | 360 message | 120 | 480 photo | 79 */
  .case-rev {
    grid-template-columns: var(--page-margin) 802fr 360fr 120fr 480fr var(--page-margin);
  }
  .case-rev__head  { grid-area: 1 / 2 / 2 / 6; }
  .case-rev__quote {
    max-width: 83.333vw;                       /* 1600: three lines at 1920 */
    margin: 2.25rem auto 0;
    font-size: var(--display-xl-size);
    line-height: var(--display-xl-leading);
  }
  .case-rev__photo { grid-area: 2 / 5; width: auto; margin: 0; }
  .case-rev__msg   { grid-area: 2 / 3; align-self: end; width: auto; margin: 0; }
}

/* The numbers list: no browser indents (the site reset doesn't cover dl). */
.case-res__nums dd {
  margin-inline-start: 0;
}