/* Card and tile images appear WHOLE — companion to inc/assets/media-reveal.js.
   Loaded globally from inc/enqueue.php.

   ⚠️ THE HOLD IS DECLARATIVE AND KEYED ON THE DOCUMENT, not applied per-image by
   script after the fact. `html.ck-media-hold` is written during PARSE by the
   companion script, so these rules are in force before a single card image is
   parsed, let alone painted. The script then marks each image `.ck-img-ready`
   once it has DECODED, and the image reveals itself.

   The earlier arrangement was the other way round — the script added a class to
   images that had not arrived — and it could not work: on a throttled shop page
   the stylesheet landed at 3.7s, the script at 10.2s, and DOMContentLoaded at
   31.8s, so nothing was held back for the first half-minute of the load. */

/* ⚠️ OPACITY, NEVER `display` OR `visibility`. The CLS work reserves these boxes
   before the bytes arrive (width/height attributes and aspect-ratio, audited at
   CLS 0 on six of eight pages); taking the image out of layout would undo it. */
/* ⚠️ A FILM TILE'S PICTURE IS ITS POSTER, AND THE POSTER IS NOT AN `<img>` — it
   is the `<video>`'s `poster` attribute and the canvas's own `background-image`.
   Marking the card was not enough: the poster went on painting exactly as it
   liked, so the tile showed a HALF-ARRIVED poster with the placeholder label
   still over it — *"text appears with image and image appears partially, not
   fully loaded"* (Marek, 2026-08-30). The elements that do the painting have to
   be held too, and released together with the label when the poster has decoded.

   ⚠️ Opacity, like everywhere else here: the canvas carries the tile's
   aspect-ratio and the video its width/height, and taking either out of layout
   would undo the space reservation the CLS work depends on. */
html.ck-media-hold .grid-card.ck-poster-pending :is(video, canvas),
html.ck-media-hold .grid-card img:not(.ck-img-ready),
html.ck-media-hold .carousel-card img:not(.ck-img-ready),
html.ck-media-hold .e-loop-item .product-card img:not(.ck-img-ready),
html.ck-media-hold .cpg-item img:not(.ck-img-ready) {
  opacity: 0;
}

/* ⚠️ WHILE THE MAIN PICTURE IS MISSING, THE CARD SHOWS NOTHING — including a
   hover image that happens to have arrived first. Each image was revealing
   itself on its own merit, so a card whose ALT had landed and whose MAIN had not
   showed that alt photograph with the placeholder label over it: *"case when alt
   loaded but main didn't"* (Marek, 2026-08-30). Two pictures racing means the
   card can show the wrong one, so the main decides for both — which is also what
   the placeholder claims: the card has no picture yet. */
html.ck-media-hold .grid-card:has(.card-main:not(.ck-img-ready)) img,
html.ck-media-hold .carousel-card:has(.card-main:not(.ck-img-ready)) img,
html.ck-media-hold .e-loop-item .product-card:has(.main img:not(.ck-img-ready)) img {
  opacity: 0;
}

/* The reveal is a short fade rather than a switch: the picture has been withheld
   for as long as it took to decode, and arriving abruptly draws attention to the
   wait it was hiding. */
/* ⚠️ THE REVEAL IS A PLAIN ALPHA FADE, 0 → 1, over the page's own ground and
   nothing else. Anything dark behind it during the fade — a scrim, a tint — and
   the picture appears to rise out of a shadow, which is what *"I still see the
   fade in from dark on image load"* was. Short enough not to read as an
   animation, long enough not to read as a jump. */
.grid-card img,
.carousel-card img,
.e-loop-item .product-card img,
.cpg-item img {
  transition: opacity 0.18s linear;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PLACEHOLDER — ground, and the card's own label over it
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ `:has()` RATHER THAN A STATE CLASS. The card is a placeholder exactly while
   it holds an image that is not ready — that is the definition, so let the
   selector say it. It also removes a whole class of bug: there is no second
   piece of state for the script to add late, forget to remove, or apply to the
   wrong element (the class was on the media box for a while, which could not
   reach the label because the label is its SIBLING).

   ⚠️ THE GROUND IS THE PAGE'S OWN `#fafafa`. It was `#f0efed` for a round — the
   colour `.ck-viewer__item` shows behind an unpainted figure — on the reasoning
   that a tile waiting for its picture and a viewer figure waiting for its
   picture should look alike. Measured on the page they do not: `#f0efed` reads
   as a grey panel laid ON the paper rather than as paper with nothing on it yet.
   Marek: *"you still use translucent bg probably: measured color is not
   fafafa"*. The placeholder is absence, so it is the ground. */
/* ⚠️ THE PLACEHOLDER KEYS ON THE PRIMARY IMAGE ONLY — `img:not(.ck-img-ready)`
   matched ANY image in the card, and every one of these carries two: the one on
   show and the one revealed on hover. So a card whose photograph had arrived sat
   under a scrim and a label because the HOVER image nobody had asked for was
   still loading. That is exactly the report — *"I see the placeholder, but when
   the image is already downloaded? idk, it's weird"* (Marek, 2026-08-30).

   The hover image is still held back by the rule above; it simply no longer
   decides whether the card looks like a placeholder. */
html.ck-media-slow .grid-card.ck-poster-pending .grid-card-media,
html.ck-media-slow .grid-card:has(.card-main:not(.ck-img-ready)) .grid-card-media,
html.ck-media-slow .carousel-card:has(.card-main:not(.ck-img-ready)),
html.ck-media-slow .e-loop-item .product-card:has(.main img:not(.ck-img-ready)),
/* ⚠️ THE GALLERY GETS THE GROUND AND NOTHING ELSE — no label, no scrim. A card
   carries a name over its picture and can say what it is while you wait; a
   gallery figure IS the picture, and a label invented for it would be a caption
   the page does not otherwise have. */
html.ck-media-slow .cpg-item:has(img:not(.ck-img-ready)) {
  background-color: #fafafa;
}

/* ⚠️ Gated on `(hover: hover)` because on a touch device these cards ALREADY
   show their label permanently, as a bar under the picture — the pointer/width
   split the three components share. There is nothing to reveal there, and
   revealing it would draw a second label beside the first. */
/* ═══════════════════════════════════════════════════════════════════════════
   THE PLACEHOLDER DRAWS ITSELF
   ═══════════════════════════════════════════════════════════════════════════

   ⚠️ NOTHING BELOW TOUCHES A COMPONENT'S OWN LABEL OR OVERLAY, and that is the
   whole point. Revealing their hover label by forcing its opacity meant fighting
   their hover machinery on every axis: the carousel's tint bled through so the
   picture rose out of a dark wash, its 0.35s transition animated the
   placeholder's exit, and suppressing that transition broke hovering on cards
   that had already loaded. Three reports, one cause.

   The script copies the card's name to `data-ck-label`; these rules draw it in a
   `::before` the components know nothing about. Nothing is overridden, so
   nothing can be left overridden — hover behaves exactly as it always did, at
   every moment, loaded or not.

   ⚠️ Keyed on `.ck-media-slow`, not `.ck-media-hold`: the hold hides images from
   the first paint, but the placeholder only appears once the wait has lasted
   long enough to be worth explaining. A cached picture shows no placeholder. */

html.ck-media-slow .grid-card.ck-poster-pending::before,
html.ck-media-slow .grid-card:has(.card-main:not(.ck-img-ready))::before,
html.ck-media-slow .carousel-card:has(.card-main:not(.ck-img-ready))::before,
html.ck-media-slow .e-loop-item .product-card:has(.main img:not(.ck-img-ready))::before {
  content: attr(data-ck-label);
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ck-label-safe-l, 24px);
  background-color: #fafafa;
  color: var(--ck-ink);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

/* ⚠️ The collection grid keeps the treatment it was given: white type over the
   translucent scrim, because its label is CENTRED on the picture and reads as
   part of it. The others put theirs at an edge, where a scrim over an empty
   ground is a tint with nothing to tint. */
html.ck-media-slow .grid-card.ck-poster-pending::before,
html.ck-media-slow .grid-card:has(.card-main:not(.ck-img-ready))::before {
  background-color: #fafafa;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* The gallery gets the ground and nothing else — a figure IS the picture, and a
   label invented for it would be a caption the page does not otherwise have. */
html.ck-media-slow .cpg-item:has(img:not(.ck-img-ready))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: #fafafa;
  pointer-events: none;
}

/* The cards must be a containing block for it. */
.grid-card,
.carousel-card,
.e-loop-item .product-card,
.cpg-item {
  position: relative;
}