/* Homepage case cards: one product stage for every project (25 Sept).
   Hulusi: take the product images from the Figma file and make the cards
   "minimal, clear, and in the continuous design language". Every card is now
   the same plate: a quiet surface, the product itself, the name bottom left
   and one figure bottom right. Apps show Lena's two phone renders
   (assets/img/cases/lena/), web products a flat screen in a plain window that
   runs off the right and bottom edges. No textures, no giant titles, no
   per-project colour: the product carries the colour.
   The scroll drift reuses case-parallax.js (--case-phone-y on [data-case-art]). */

.case-category .case-stage.case-stage--product[data-case-art] {
  --product-surface: #eceef1;
  --product-shadow: 0 1.5rem 3rem rgb(18 20 23 / 13%), 0 .25rem .75rem rgb(18 20 23 / 6%);
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
  background: var(--product-surface);
}

/* ---------- The product ---------- */
.case-product { position: absolute; z-index: 0; pointer-events: none; transform: translate3d(0, calc(var(--case-phone-y, 0px) * .5), 0); }

/* Apps: two phones side by side, a little to the right of centre so the
   name keeps a clear corner. Lena's renders are already angled. */
.case-product--duo { inset: 6% 4% 11% 22%; display: flex; justify-content: center; align-items: center; }
.case-product--duo .case-product__phone { height: 100%; width: auto; max-width: 48%; object-fit: contain; filter: drop-shadow(0 1.5rem 2rem rgb(18 20 23 / 16%)); }
.case-product--duo .case-product__phone + .case-product__phone { margin-left: -3%; transform: translateY(4%); }

/* Older projects: one framed phone from the previous site. */
.case-product--single { inset: 6% 4% 6% 22%; display: flex; justify-content: center; align-items: center; }
.case-product--single .case-product__phone { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 1.5rem 2rem rgb(18 20 23 / 16%)); }

/* Web: a plain window (one bar, no traffic lights) cut by the card edges. */
.case-product--web { inset: 12% -6% -8% 26%; }
.case-product__window { width: 100%; height: 100%; overflow: hidden; background: #fff; border-radius: .5rem 0 0 0; box-shadow: var(--product-shadow); }
.case-product__window::before { content: ""; display: block; height: 1.5rem; background: #fff; border-bottom: 1px solid var(--ed-line, #d8dce1); }
.case-product__window img { display: block; width: 100%; height: calc(100% - 1.5rem); object-fit: cover; object-position: left top; }

/* ---------- Name and figure: ink on the light plate ---------- */
.case-stage--product .case-art__credit { z-index: 1; color: var(--ed-ink, #121417); }
.case-stage--product .case-art__credit h4 { font-weight: 500; }
.case-stage--product .case-art__tag { color: var(--ed-muted, #51565e); background: #fff; border: 1px solid var(--ed-line, #d8dce1); }
.case-stage.case-stage--product::after { content: none; }
.case-category .case-stage--product .case-stage__kpi { z-index: 1; background: #fff; border: 1px solid var(--ed-line, #d8dce1); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.case-stage--product .case-stage__value span { font-size: .52em; letter-spacing: -.04em; }
.case-stage--product .case-stage__link:focus-visible { outline: 2px solid var(--brand, #0052f8); outline-offset: -4px; box-shadow: none; }

/* ---------- B and C: white plate on the grey band, square corners ---------- */
html[data-style="industrial"] .case-category .case-stage.case-stage--product[data-case-art] { --product-surface: #fff; border: 1px solid var(--ind-line, #d8dce1); }
html[data-style="industrial"] .case-product__window { border-radius: 0; }
/* No in-card name in B (it sits under the card), so the product centres. */
html[data-style="industrial"] .case-product--duo,
html[data-style="industrial"] .case-product--single { left: 4%; }
html[data-style="industrial"] .case-product--web { left: 14%; }

/* ---------- Small screens: the product above, name and figure in a band below ---------- */
@media (max-width: 760px) {
  .case-product--duo, .case-product--single { inset: 5% 4% 30% 4%; }
  .case-product--web { inset: 9% -14% 30% 10%; }
  .case-product__window { border-radius: .375rem 0 0 0; }
  .case-product__window::before { height: 1rem; }
  .case-product__window img { height: calc(100% - 1rem); }
  .case-stage--product .case-art__credit > div { display: none; }
  .case-category .case-stage.case-stage--product .case-stage__kpi { right: 1rem; bottom: 1rem; padding: .5rem .75rem; }
  .case-category .case-stage.case-stage--product .case-stage__value { font-size: 1.5rem; }
  .case-category .case-stage.case-stage--product .case-stage__label { margin-top: .25rem; font-size: .8125rem; max-width: 9.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case-product { transform: none; }
}

/* ---------- Web products on a real laptop (25 Sept, round 2) ----------
   Hulusi: the covers looked like pasted mockup images. Web products now sit
   in the MacBook render of the case study film (its last frame, transparent,
   assets/img/cases/device/macbook.webp) with the project's own screen on its
   display, whole and centred like the apps, instead of a drawn window
   running off the edges. Screen area measured on the render. */
.case-product--mac { inset: 7% 4% 9% 22%; display: flex; justify-content: center; align-items: center; }
.case-product__mac { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1306 / 1123; }
.case-product__device { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1.75rem 2rem rgb(18 20 23 / 18%)); }
.case-product__screen { position: absolute; left: 9.01%; top: 2.97%; width: 81.5%; height: 61.3%; overflow: hidden; border-radius: .4% / .6%; background: #fff; }
.case-product__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
html[data-style="industrial"] .case-product--mac { left: 4%; }
@media (max-width: 760px) { .case-product--mac { inset: 5% 4% 30% 4%; } }

/* ---------- Plate grounds to choose from (25 Sept, ?plate=cobalt|sky|gradient) ----------
   Hulusi: the grey is flat; try our own assets: the cobalt grain (contact
   plate), the showreel sky, or a gradient. Grey stays the default until one
   is picked. The ground sits on a ::before so it can be flipped. */
html[data-plate] .case-category .case-stage.case-stage--product[data-case-art]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plate-bg); background-size: cover; background-position: center; transform: var(--plate-flip, none);
}
html[data-plate="cobalt"] .case-category .case-stage--product[data-case-art] { --plate-bg: #e9f0ff url("../../img/backgrounds/dream/figma/hero/ai-bg-097.webp"); --plate-flip: scaleY(-1); }
html[data-plate="cobalt"] .case-category__slide:nth-child(2n) .case-stage--product[data-case-art] { --plate-flip: scale(-1, -1); }
html[data-plate="sky"] .case-category .case-stage--product[data-case-art] { --plate-bg: #cfe2ff url("../../img/hero/cloud-plate-v9.webp"); }
html[data-plate="sky"] .case-category__slide:nth-child(2n) .case-stage--product[data-case-art] { --plate-flip: scaleX(-1); }
html[data-plate="gradient"] .case-category .case-stage--product[data-case-art] { --plate-bg: radial-gradient(90% 80% at 88% 105%, rgb(0 82 248 / .55) 0, rgb(0 82 248 / 0) 62%), radial-gradient(70% 60% at 10% 0%, #fff 0, rgb(255 255 255 / 0) 70%), linear-gradient(180deg, #f1f4f9 0, #dfe6f2 100%); }

/* ---------- Lena's covers (6 Oct): a designed image fills the stage ----------
   The cover carries its own name and figure, so the in-card name and the
   figure box are hidden (the name stays for screen readers: it labels the
   card link). Cropped from the centre on shorter cards. */
.case-category .case-stage.case-stage--cover[data-case-art] { background: #1e1f22; }
.case-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.case-stage--cover .case-stage__kpi { display: none; }
.case-stage--cover .case-art__credit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-style="industrial"] .case-category .case-stage.case-stage--cover[data-case-art] { border: 0; }