/* ===========================================================================
   CE-32 · Media realizacji (case study pictures)
   Root:     div.ce-case-media – a run of pictures wider than the text (its own
             side margins, no .lf-wrap)
   Parts:    __row (one row: a full-width picture, or __row--pair for two side
             by side), __item (figure: the picture box, clips), __mask and
             __mask-in (the two reveal masks, as CE-27), __img (object-fit:
             cover; an img, or a video – __img __video), __empty (a grey
             stand-in box with a small label, when a picture is not there
             yet), __play (the play button of a video, reduced motion only)
   Variants: base   – margins 24, gaps 24 across / 20 down; full 1464 × 720,
                      pair 720 × 720 (Figma 4065:7332, 4065:7367)
             cover  – the first, larger picture right under CE-31: 1464 × 940,
                      no top margin (4065:7280)
             tight  – margins 12, gaps 8; full 1488 × 720, pair 740 × 720
                      (4065:7281, 4065:7326)
             video  – (26.09) the picture is a film: <video class="__img
                      __video" data-src="…" poster="…" muted loop
                      playsinline preload="none">, the address in data-src
                      (each case its own film, the card's film from the
                      works list); poster = the still of the case. Plays by
                      itself in view, see the script.
             screens – (05.10.2026) screenshots and phone screens from the
                      WordPress case studies: the whole picture on the grey
                      box with an inner margin, never cropped; the items
                      carry data-parallax="none" (no drift).
                      An item with data-fit="top" (08.10.2026, full-page
                      screenshots) fills the frame from the top instead.
             Rows mix freely: full, pair, full… (4065:7326 is full – pair –
             full).
   Mechanics: ce/CE-32-case-media.js marks each picture .is-visible once its
             top passes 70% of the window; the CSS uncovers it as the CE-27
             cards (ref.digital/work): the outer mask comes down from −100%,
             the inner one up from +100%, the picture settles from 1.2 to 1,
             the box grows from 0.95 to 1; 0.7 s power2.out, the second
             picture of a pair 80 ms later. Without the script nothing is
             hidden; reduced motion: no reveal.
             Scroll motion (26.09, after the Halston template, measured –
             see the script): every picture drifts in its frame – full
             rows, the cover and both pictures of a pair alike, so a pair
             moves as one (26.09 evening; "zoom" and "deep" stay as
             data-parallax options), scrubbed by the scroll. It is the
             `transform` of the picture; the reveal keeps the masks and the
             `scale` property, so the two never fight. Reduced motion: none.
   Layout:   Figma web-design-2026, frame 4065:7265. The height follows the
             width (aspect-ratio), so the design's proportions hold at every
             width; 1:1 at 1512 px. 152 px above each run (the section rhythm
             of the design). ≤ 640 px a pair becomes a column and a full
             picture turns 3 : 2, so it does not end up a thin strip.
   Base:     realizacje/drutplast/#galeria-1 · registry: CE-32
   =========================================================================== */

.ce-case-media {
  --m-gut: clamp(12px, 1.587vw, 24px);
  --m-gap-x: clamp(8px, 1.587vw, 24px);
  --m-gap-y: clamp(8px, 1.323vw, 20px);
  --m-full: 1464 / 720;
  --m-pair: 720 / 720;

  display: grid;
  gap: var(--m-gap-y);
  margin-top: clamp(72px, 10.053vw, 152px);
  padding-inline: var(--m-gut);
}

.ce-case-media[data-ce-variant~="tight"] {
  --m-gut: clamp(8px, .794vw, 12px);
  --m-gap-x: clamp(6px, .529vw, 8px);
  --m-gap-y: var(--m-gap-x);
  --m-full: 1488 / 720;
  --m-pair: 740 / 720;
}

.ce-case-media[data-ce-variant~="cover"] {
  --m-full: 1464 / 940;
  margin-top: 0;                         /* CE-31 holds the 189 px above it */
}

.ce-case-media[data-ce-variant~="screens"] .ce-case-media__img {
  box-sizing: border-box;
  padding: clamp(16px, 3.175vw, 48px);
  object-fit: contain;
}
/* a full-page screenshot (much taller than wide, 08.10.2026): contained it
   would shrink to a sliver – it fills the frame from the top instead, so the
   first screens of the page show at full width */
.ce-case-media[data-ce-variant~="screens"] .ce-case-media__item[data-fit="top"] .ce-case-media__img {
  padding: 0;
  object-fit: cover;
  object-position: top;
}

.ce-case-media__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--m-gap-x);
}
.ce-case-media__row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ce-case-media__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--m-full);
  background: var(--box);                /* until the picture arrives */
}
.ce-case-media__row--pair .ce-case-media__item { aspect-ratio: var(--m-pair); }
.ce-case-media__row--pair .ce-case-media__item + .ce-case-media__item { --m-i: 1; }

.ce-case-media__mask,
.ce-case-media__mask-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The picture (img, or video in the variant "video"). --par-over is the
   margin the scroll motion needs (set by the script, 1 without it): the
   picture is that much taller than the frame and centred in it. */
.ce-case-media__img {
  position: absolute;
  top: calc(50% - var(--par-over, 1) * 50%);
  left: 0;
  width: 100%;
  max-width: none;
  height: calc(var(--par-over, 1) * 100%);
  object-fit: cover;
}
.ce-case-media__video { display: block; }
.is-par-near > .ce-case-media__mask .ce-case-media__img,
.is-par-near > img,
.is-par-near > video { will-change: transform; }   /* only near the window */

/* Reduced motion only: the script adds a play button to a video (no
   autoplay then). A circle with a triangle, pause bars while it plays. */
.ce-case-media__play {
  position: absolute;
  right: clamp(12px, 1.587vw, 24px);
  bottom: clamp(12px, 1.587vw, 24px);
  z-index: 1;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ui-ink, #1d1d1e);
  cursor: pointer;
}
.ce-case-media__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -8px 0 0 -5px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
}
.ce-case-media__play[aria-pressed="true"]::before {
  width: 4px;
  height: 16px;
  margin: -8px 0 0 -7px;
  border: 0;
  background: currentColor;
  box-shadow: 8px 0 0 currentColor;
}
.ce-case-media__play:focus-visible { outline: 2px solid var(--ui-ink, #1d1d1e); outline-offset: 3px; }

/* A picture that is not there yet: the grey box of the design (#D9D9D9). */
.ce-case-media__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #d9d9d9;
  color: rgba(29, 29, 30, .45);
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* phone screens side by side (08.10.2026): up to four in one narrower row,
   each whole in a phone-shaped frame – instead of one phone per full-width
   frame */
.ce-case-media__row--phones {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
.ce-case-media__row--phones .ce-case-media__item { aspect-ratio: 1170 / 2532; }
.ce-case-media[data-ce-variant~="screens"] .ce-case-media__row--phones .ce-case-media__img { padding: 0; object-fit: cover; object-position: top; }

@media (max-width: 640px) {
  .ce-case-media:not([data-ce-variant~="cover"]) { --m-full: 3 / 2; }
  .ce-case-media__row--phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-case-media__row--pair { grid-template-columns: minmax(0, 1fr); }
  .ce-case-media__row--pair .ce-case-media__item + .ce-case-media__item { --m-i: 0; }
}

/* ---- reveal (as CE-27) ------------------------------------------------------ */
/* The hidden start hangs on .cr-js (set by chrome.js in <head>, before the
   first paint), not on .is-armed from this script at the end of <body> – a
   picture in the window on load no longer shows, hides and opens again
   (27.09, the same fix as CE-27). */
@media (prefers-reduced-motion: no-preference) {
  .cr-js .ce-case-media .ce-case-media__item { transform: scale(.95); }
  .cr-js .ce-case-media .ce-case-media__mask { transform: translateY(-100%); }
  .cr-js .ce-case-media .ce-case-media__mask-in { transform: translateY(100%); }
  .cr-js .ce-case-media .ce-case-media__img { scale: 1.2; }
  .cr-js .ce-case-media :is(.ce-case-media__item, .ce-case-media__mask, .ce-case-media__mask-in) {
    transition: transform .7s var(--ease-out-power2) calc(var(--m-i, 0) * 80ms);
  }
  .cr-js .ce-case-media .ce-case-media__img {
    transition: scale .7s var(--ease-out-power2) calc(var(--m-i, 0) * 80ms);
  }
  .cr-js .ce-case-media .is-visible:is(.ce-case-media__item),
  .cr-js .ce-case-media .is-visible :is(.ce-case-media__mask, .ce-case-media__mask-in) { transform: none; }
  .cr-js .ce-case-media .is-visible .ce-case-media__img { scale: 1; }
}