/* ==========================================================================
   MAIN-CASE BAND — the way into «Смак Грузії» (index.html, cases.html)
   --------------------------------------------------------------------------
   One component, two places (Vadim, 2 Nov):
     - the main page: it takes the place of the dark quote band — the same
       full-bleed ink strip between the cases teaser and the services, with
       the same job (a hard break between two blocks without headings), now
       also a door;
     - the cases page: it opens the page, before the three cases.
   A dark strip that opens a dark page: the band is a preview of where the
   link goes. Only the «Дивитись кейс» button is the link (Vadim, 2 Nov:
   the click box is the button, not the band) — the site CTA: hover /
   press plays the ring, a click sends the arrow out (components.css +
   js/cta.js) and the band's ink spreads over the screen before the case
   page opens (js/case-leave.js; the case page turns it cream —
   css/case-enter.css).
   Right side: the three squares of the case Hero (the live part of the ad
   carousel) as still frames — no video here on any screen (Vadim, 4 Nov:
   the clips play on the case page itself, where they take turns).
   Text, top to bottom: marker → name (Display XL) → kind → evidence →
   «Дивитись кейс»; gaps 16 / 16 / 32 / 56 (desktop: 36 under the marker,
   so the cap height of the name sits 56 below its top — as on the case
   page).
   ========================================================================== */

.case-cta {
  position: relative;
  display: block;
  margin-top: var(--space-between);            /* teaser CTA → band: 56, as the quote band */
  padding-block: var(--space-section);         /* 120 inside, as the quote band */
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-bg);
}

/* --- Squares ---------------------------------------------------------------
   Phones: a small moodboard above the text, drawn at 390 (÷ 3.9 → vw),
   centres, sizes. */
.case-cta__squares {
  position: relative;
  height: 61.54vw;                             /* 240 */
  margin-bottom: var(--space-group);           /* 32 */
}

.case-cta__sq {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a1814;
  transform: translate(-50%, -50%);
}

.case-cta__sq--1 { --x: 74.36vw; --y: 17.95vw; --s: 28.72vw; }   /* 290, 70 · 112 */
.case-cta__sq--2 { --x: 28.21vw; --y: 35.9vw;  --s: 32.82vw; }   /* 110, 140 · 128 */
.case-cta__sq--3 { --x: 64.1vw;  --y: 51.28vw; --s: 20.51vw; }   /* 250, 200 · 80 */

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

/* --- Text ------------------------------------------------------------------- */
.case-cta__label { color: var(--color-bg-soft); }

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

.case-cta__kind {
  margin-top: var(--space-pair);
  color: var(--color-bg-soft);
}

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

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

.case-cta .cta {
  color: var(--color-bg);                      /* the site CTA is ink on cream */
}

/* --- Cases page: first thing on the page, full bleed ----------------------
   The cases column has its own side padding; the band steps out of it. */
.cases .case-cta {
  margin-top: 0;
  margin-bottom: var(--space-section);         /* band → first case */
}

/* ==========================================================================
   DESKTOP — 800 tall at 1920, like the quote band; text left on the field,
   the squares in the right half (drawn at 1920, ÷ 19.2 → vw)
   ========================================================================== */
@media (min-width: 64em) {
  .case-cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 41.667vw;                      /* 800 */
  }

  .case-cta__squares {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
  }

  .case-cta__sq--1 { --x: 64.06vw; --y: 12.5vw;  --s: 11.458vw; }  /* 1230, 240 · 220 */
  .case-cta__sq--2 { --x: 83.33vw; --y: 24.48vw; --s: 14.583vw; }  /* 1600, 470 · 280 */
  .case-cta__sq--3 { --x: 61.46vw; --y: 31.77vw; --s: 9.375vw; }   /* 1180, 610 · 180 */

  .case-cta__text { position: relative; }
  .case-cta__go   { align-self: flex-start; }
  .case-cta__name { margin-top: 2.25rem; }    /* marker top → name top 56 */

  .cases .case-cta {
    margin-left: calc(-1 * var(--page-margin));
    margin-right: -11.51vw;                    /* the cases column's right padding */
  }

  /* The cases column zeroes container padding on desktop; the band needs
     the field back. */
  .cases .case-cta .container {
    padding-inline: var(--page-margin);
  }
}

/* ==========================================================================
   LEAVING FOR THE CASE (js/case-leave.js)
   The click on «Дивитись кейс»: an ink veil grows from the band's own
   edges to the whole screen (the band seems to swallow the page), the band
   rides above it while its text and squares fade, then the case page
   opens on the same ink. The veil is over the header bar and the thread,
   under the custom cursor (1000).
   ========================================================================== */
.case-veil {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--color-ink);
  clip-path: inset(var(--veil-top, 0px) 0 var(--veil-bottom, 0px) 0);
  transition: clip-path 600ms cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}

.case-veil.is-full {
  clip-path: inset(0 0 0 0);
}

.case-cta.is-leaving-page {
  z-index: 901;
}

.case-cta.is-leaving-page > * {
  opacity: 0;
  transition: opacity 300ms ease 250ms;
}