/* Home layout and mission scenes. The page is the wall: no art card,
   backdrop, stroke, perspective or hover transform around product pieces.
   Theme, type and spacing tokens live in style.css; piece shadows use
   the original front-facing grammar in screen-stage.css. */
:root {
  --gallery-heading: var(--font-section-h2);
  --gallery-lead: var(--font-body-lg);
  --gallery-rule: var(--border);
  --gallery-column-gap: var(--air-3);
  --gallery-art-max-height: clamp(340px, 42vw, 520px);
}
body.home .home-cases { background: var(--bg); color: var(--fg); padding-block: var(--air-4); }
body.home .home-cases__h2 {
  margin: 0; color: var(--fg); font-family: var(--display);
  font-size: var(--gallery-heading); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); letter-spacing: -.035em; text-transform: none;
}
body.home .home-cases__intro {
  max-width: var(--measure-body); margin: var(--air-2) 0 var(--air-3);
  color: var(--fg-soft); font-size: var(--gallery-lead); line-height: var(--lh-snug);
}
body.home .home-hero__lead { color: var(--fg-soft); font-weight: var(--fw-normal); }
body.home .home-case-picker {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none; gap: var(--g); margin: 0 0 var(--air-3);
}
body.home .home-case-picker a {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--air-1);
  min-height: 44px; color: var(--fg); text-decoration: none;
  padding-block: var(--air-2); border-color: var(--gallery-rule);
}
body.home .home-case-picker strong {
  font-family: var(--display); font-size: var(--fs-lg); font-weight: var(--fw-semibold);
}
body.home .home-case-picker span { color: var(--fg-soft); font-size: var(--fs-sm); line-height: var(--lh-snug); }
body.home .home-case-picker a:hover,
body.home .home-case-picker a:focus-visible,
body.home .home-case-picker a[aria-current="true"] { color: var(--hl); border-color: var(--hl); }
body.home .home-case-picker a:focus-visible,
body.home .home-case__demo:focus-visible,
body.home .home-case__link:focus-visible {
  outline: 2px solid var(--hl); outline-offset: 5px; border-radius: var(--radius-sm);
}
body.home .home-case,
body.home .home-case-picker { scroll-margin-top: calc(var(--nav-h) + var(--air-3)); }
body.home .home-cases__list,
body.home .home-cases__list.is-carousel {
  display: flex; align-items: stretch; gap: var(--air-3); width: 100%; max-width: none;
  margin-block: calc(-1 * var(--air-3)); padding: var(--air-3) 4px var(--air-4);
  overflow-x: auto; overscroll-behavior-inline: contain; cursor: grab;
  scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  -webkit-mask-image: none; mask-image: none;
}
body.home .home-cases__list.is-bleed {
  width: auto;
  margin-inline-start: calc(-1 * var(--shift, 0px));
  margin-inline-end: calc(-1 * var(--shift-r, 0px));
  padding-inline-start: var(--bleed, 0px);
  padding-inline-end: var(--bleed-r, 0px);
  scroll-padding-inline-start: var(--bleed, 0px);
}
body.home .home-cases__list > .home-case {
  display: block; flex: 0 0 var(--slide, 86%); width: auto; min-width: 0; margin: 0;
  scroll-snap-align: start; scroll-snap-stop: always;
}
body.home .home-cases__list > .home-case + .home-case { margin: 0; padding: 0; border: 0; }
body.home .home-cases__list > .home-case[hidden] { display: none; }
body.home .home-case__link {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: var(--gallery-column-gap); color: var(--fg);
  background: transparent; border: 0; box-shadow: none; transform: none; transition: none;
}
body.home .home-case__cover--illu {
  display: block; width: 100%; aspect-ratio: auto; overflow: visible;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body.home .home-case__cover--illu::after { display: none; }
body.home .home-case__cover { opacity: 1; }
body.home .home-case__cover .screen-stage--gallery {
  max-width: min(100%, 780px, calc(var(--gallery-art-max-height) * var(--scene-aspect)));
  margin-inline: 0;
}
/* Keep controls from neighboring carousel cards from peeking in as clipped labels. */
body.home .home-cases__list.is-carousel > .home-case:not(.is-current) .solution-zoom {
  visibility: hidden;
}
/* Geometry and theme switching are shared with case heroes in screen-stage.css. */
body.home .home-case__body { display: flex; gap: var(--air-2); max-width: var(--measure-body); }
body.home .home-case__meta { align-items: baseline; letter-spacing: .1em; }
body.home .home-case__source {
  font-size: var(--fs-xs); font-weight: var(--fw-normal);
  letter-spacing: .015em; text-transform: none;
}
body.home .home-case__title { color: var(--fg); font-size: var(--font-display-md); }
body.home .home-case__result { color: var(--fg); font-size: var(--fs-xl); line-height: var(--lh-snug); }
body.home .home-case__sub { color: var(--fg-soft); max-width: var(--measure-body); }
body.home .home-case__cta { color: var(--hl); }
body.home .home-case__extra { margin: var(--air-2) 0 0; }
body.home .home-case__demo {
  display: inline-flex; align-items: center; gap: var(--air-1); min-height: 44px;
  color: var(--hl); font-size: var(--fs-base); font-weight: var(--fw-medium);
  line-height: var(--lh-normal); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--hl) 40%, transparent); text-underline-offset: 5px;
}
body.home .home-case__demo:hover { text-decoration-color: currentColor; }
@media (max-width: 999px) {
  body.home .home-case__link { grid-template-columns: 1fr; gap: var(--air-2); }
  body.home .home-case__cover--illu { max-width: 760px; margin-inline: 0; }
  body.home .home-case__body { max-width: 640px; }
  body.home .home-case__extra { margin-inline: 0; }
}
@media (max-width: 720px) {
  html body.home .home-hero__eyebrow,
  html body.home .home-hero__h1,
  html body.home .home-hero__lead,
  html body.home .home-hero__avail,
  html.pluie body.home .home-hero__eyebrow .ltr,
  html.pluie body.home .home-hero__h1 .ltr,
  html.pluie body.home .home-hero__lead .ltr {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  body.home .home-case-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 0; }
  body.home .home-case-picker span { font-size: var(--fs-xs); }
  body.home .home-case__title { font-size: var(--font-section-h2); }
}
@media (prefers-reduced-motion: reduce) {
  body.home .home-cases * { scroll-behavior: auto; transition: none; }
}