/* ==========================================================================
   CASES TEASER — second section on mobile (Figma «Frame 109»)
   --------------------------------------------------------------------------
   Two work previews side by side, the right one dropped by 56 → one
   sentence → «Усі кейси» pinned right. The whole section has ONE action:
   the previews are shown, not linked, so there is a single tap target
   and no guessing which image leads where.

   Gaps — the Figma panel values, box to box:
     About text  → previews     138
     previews    → sentence      32
     sentence    → CTA           16
   ========================================================================== */

.cases-teaser {
  margin-top: 8.625rem;                     /* 138, Figma */
}

.cases-teaser__inner {
  display: flex;
  flex-direction: column;
}

/* --- Previews -------------------------------------------------------------
   The mobile grid: two columns, 16 gutter. align-items: start stops the
   grid from stretching the first cell to the height of the dropped one.
   The drop is 56 — a composition offset, fixed on every width. */

.cases-teaser__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

.cases-teaser__media > :nth-child(2) {
  margin-top: var(--space-between);
}

.cases-teaser__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 167 / 296;       /* the Figma cell, ≈ 9:16 of a Reel */
  object-fit: cover;
}

/* --- Clips over the photos (desktop) ---------------------------------------
   Each preview is a stack: the photo below, the clip above it, filling the
   same box. The clip is invisible until js/teaser.js reports it is really
   playing (.is-playing), then fades in over its own first frame — which is
   the photo — so the switch cannot be seen, only the motion starting.
   Phones too since 5 Nov, with the light 360-wide files (-m), only while
   on screen (js/teaser.js); Save-Data and "reduce motion": photos. */

.cases-teaser__item {
  position: relative;
}

.cases-teaser__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 250ms ease;
}

.cases-teaser__video.is-playing {
  opacity: 1;
}

/* --- Sentence + CTA ------------------------------------------------------- */

.cases-teaser__text {
  margin-top: var(--space-group);           /* 32 */
}

.cases-teaser__cta {
  align-self: flex-end;
  margin-top: var(--space-pair);            /* 16 */
}

/* --------------------------------------------------------------------------
   DESKTOP (Figma «Frame 48», 1920)
   Two previews 406 wide with 100 between them, the right one dropped by
   half its height (360) — the mobile move, scaled; then 262 of air and
   the text column (586) with the sentence level with the dropped preview
   and «Усі кейси» under it, at the column's right edge.
   All widths are shares of the 1762 field.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
  .cases-teaser {
    margin-top: var(--space-section);
  }

  .cases-teaser__inner {
    display: grid;
    grid-template-columns: minmax(0, 914fr) minmax(0, 262fr) minmax(0, 586fr);
    grid-template-rows: auto auto 1fr;
  }

  .cases-teaser__media {
    grid-column: 1;
    grid-row: 1 / 4;
    column-gap: 10.94%;                         /* 100 / 914 */
  }

  .cases-teaser__media > :nth-child(2) {
    margin-top: calc(var(--content) * 360 / 1762);
  }

  .cases-teaser__text {
    grid-column: 3;
    grid-row: 1;
    max-width: 30.2rem;                         /* 483 */
    margin-top: calc(var(--content) * 360 / 1762);
  }

  .cases-teaser__cta {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    margin-top: var(--space-group);
  }
}