/* previews.css: art-directed product previews (kehr-previews). Loaded after /style.css and the page CSS.
   External stylesheet only (CSP). Pure-CSS motion; honours prefers-reduced-motion. */

/* ---- the stage: full-bleed art, no tilt, no frame ---- */
.pv { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; background: var(--stage);
  aspect-ratio: 1600 / 1100; }
.pv picture, .card .pv picture { display: block; width: 100%; max-width: none; height: 100%; }
.pv img, .card .pv img, .card .phone-stage.pv img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; transform: none; margin: 0; }
.card .pv { display: block; align-self: stretch; height: auto; }

/* more room for the picture on wide cards; stack from tablet width down so previews stay legible */
.card-featured, .card-hedgerow, .card-wide { grid-template-columns: minmax(0, .78fr) minmax(0, 1.52fr); }
.card-reverse { grid-template-columns: minmax(0, 1.52fr) minmax(0, .78fr); }
.card-featured .card-copy, .card-hedgerow .card-copy, .card-wide .card-copy { padding: clamp(1.75rem, 3vw, 3rem); }
@media (max-width: 960px) {
  .card-featured, .card-hedgerow, .card-wide, .card-reverse { grid-template-columns: minmax(0, 1fr); }
  .card-reverse .desktop-stage { order: 0; }
}

/* care cards: a landscape stage instead of the 360px phone crop */
.phone-stage.pv { height: auto; padding: 0; aspect-ratio: 1200 / 1100; }

/* phone widths: art-directed crops (hero moment, larger type) */
@media (max-width: 600px) {
  .pv-duly { aspect-ratio: 1000 / 1390; }
  .pv-saleback { aspect-ratio: 1000 / 1185; }
  .pv-stillwater { aspect-ratio: 1000 / 1190; }
  .pv-hedgerow { aspect-ratio: 1040 / 800; }
}

/* ---- homepage hero ---- */
.hero-art .art-orbit { display: none; }
.hero-art .hero-overview { position: static; width: 100%; height: auto; transform: none; border: 0; border-radius: 28px; box-shadow: 0 30px 60px -30px #1b1a1780, 0 4px 14px #1b1a1714; }
.hero-art picture { display: block; }
.hero-art { aspect-ratio: auto; }
.hero-art .art-caption { display: none; }

/* ---- product page heroes ---- */
.hg-hero.pv-hero-grid, .sb-hero.pv-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
@media (max-width: 960px) { .hg-hero.pv-hero-grid, .sb-hero.pv-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hg-hero .hg-shot.pv, .sb-hero .sb-art.pv { max-width: none; width: 100%; padding: 0; border-radius: 24px; margin: 0; justify-self: stretch; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.hg-hero .hg-shot.pv img, .sb-hero .sb-art.pv img { box-shadow: none; border-radius: 0; margin: 0; }

/* ---- looping demos: hero pictures use an animated AVIF; reduced-motion visitors and phones get the still (art direction is in the <picture> sources, no JS) ---- */

/* ---- card micro-animation (CSS only): a soft light sweep and a gentle settle on hover/focus ---- */
.pv::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 61%); transform: translateX(-60%); }
@media (prefers-reduced-motion: no-preference) {
  .pv img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
  .card:hover .pv img, .card:focus-within .pv img, .card:hover .phone-stage.pv img { transform: scale(1.025); }
  .card:hover .pv::after, .card:focus-within .pv::after { opacity: 1; transform: translateX(60%); transition: transform 1.4s ease, opacity .3s; }
  .pv-hero::after { display: none; }
}
@media (hover: none) { .card:hover .pv img, .card:hover .phone-stage.pv img { transform: none; } .pv::after { display: none; } }