/* de.chef dining — the home hero slideshow (.hs), loaded by home.html only when the manifest has hero slides.
   Moved out of site.css in WO-7 (site.css was over the 800-line cap); the rules below the WO-7 line are new. */

/* ---- WO-3 S3a: home hero slideshow (.hs). The frame is the design's hero; slides stack in one grid cell and
   crossfade. Without JS slides 2+ keep their [hidden] attribute and the nav stays hidden (slide 1 only). ---- */
/* WO-8: the wrap repeats the slide grid's columns so the indicator row (.hs-nav) can sit under the ART column: the track spans every
   column, the nav takes the last one (bottom-left of the art on a desktop; one column on a phone, where it is centred) */
.hs-wrap { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.hs-track { display: grid; grid-column: 1 / -1; min-width: 0; position: relative; }
.hs-slide { grid-area: 1 / 1; min-width: 0; }
.js .hs-slide { transition: opacity .6s ease, visibility .6s; }
.js .hs-slide:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.js .hs-slide:not(.is-on) .home-hero-text { animation: none; } /* so v2Up replays when the slide comes on */
.hs-kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); margin-bottom: 18px; }
.hs-title { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.8vw, 88px); line-height: .95; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
.hs-title span { display: block; }
.hs-title .h1-b { color: var(--sage); }
.hs-art-top3 .hs-bubble { position: absolute; aspect-ratio: 1; overflow: visible; background: var(--mint); border: 1px solid var(--line); color: var(--ink); display: block; transform: var(--fan, none); } /* --fan: the mobile fan rotation; hsPop ends on it */
/* the photo is clipped to the bubble's shape by .hs-bubble-clip; the pills sit outside the clip so a round corner never cuts them */
.hs-bubble-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.hs-art-top3 .hs-bubble img { transition: transform .5s; }
.hs-art-top3 .hs-bubble:hover img { transform: scale(1.08); }
.hs-b1 { right: 0; top: 0; width: min(50%, 320px); } /* WO-8 caps: no change at 1440; a full-width art (single column up to ~1182 px, more with a scrollbar) keeps the fan inside it */
.hs-b2 { left: 0; top: 28%; width: min(44%, 280px); }
.hs-b3 { right: 8%; bottom: 24px; width: min(40%, 260px); } /* WO-8: the nav is under the art now (no 64 px strip); 24 px keeps the pill clear of it */
.hs-bubble-name { position: absolute; font-weight: 800; font-size: 13px; line-height: 1.2; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.hs-bubble-name { left: 12px; bottom: 12px; background: var(--cream); }
/* ---- WO-8 §1 (Louis, 2026-10-17): no arrows, no capsule. One slim segment per slide (4 px bar, radius 2, 6 px apart: 3 px padding on
   each side; 40 px wide on a desktop, 28 px on a phone), each a 44 px tall button. Inactive = --line; the active one is a progress bar
   whose sage fill runs the 5 s interval while the show plays and is simply full when it is paused or under reduced motion. The row sits
   12 px under the art (the 44 px button reaches 8 px up into the art's bottom edge, which holds no control). ---- */
.hs-nav { grid-column: -2 / -1; justify-self: start; position: relative; z-index: 2; display: flex; margin: -8px 0 0 -3px; }
/* Desktop (two hero columns): the indicator overlays the art's bottom-left corner on a translucent cream backing, where the old
   arrows sat — below the art it was hidden under the sticky message bar on an 800px-tall viewport until the first scroll. */
@media (min-width: 1180px) {
  .hs-nav { position: absolute; left: 16px; bottom: 20px; /* an absolutely placed grid child measures from its grid area = the art column */ margin: 0; padding: 2px 8px; border-radius: 12px;
    background: rgba(251, 247, 241, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .hs-seg { height: 36px; padding: 16px 3px; }
}
.hs-seg { display: block; height: 44px; padding: 20px 3px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.hs-seg-bar { display: block; position: relative; width: 40px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; transition: background .2s; }
.hs-seg:hover .hs-seg-bar { background: rgba(86, 117, 94, .38); }
.hs-seg[aria-current] .hs-seg-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--sage); transform-origin: 0 50%; }
.hs-seg:focus-visible { outline: none; }
.hs-seg:focus-visible .hs-seg-bar { outline: 2px solid var(--sage); outline-offset: 4px; overflow: visible; }
@media (max-width: 999.98px) {
  .hs-nav { justify-self: center; margin-left: 0; }
  .hs-seg-bar { width: 28px; }
  /* Fan of cards (Louis, 2026-10-17): the three bubbles overlap like a hand of cards rising to the right, each rotated a
     little and floating on the one before (z-order left -> right, soft shadow). Bottoms are staggered by 52px so every
     name pill (26px tall, 12px up) stays clear of the card above it; the lowest card's pill sits >= 12 px above the indicator.
     WO-8 §1b: the fan moves UP behind the text column (a negative margin, not more height) so the highest card tucks ~30 px under
     the CTA row for a layered look; the text sits above the cards and lets taps through except on its own links. */
  .hs-slide[data-kind="top3"] .home-hero-text { position: relative; z-index: 2; pointer-events: none; }
  .hs-slide[data-kind="top3"] .home-hero-text > :not(.home-ctas), .hs-slide[data-kind="top3"] .home-ctas > a { pointer-events: auto; }
  .hs-slide[data-kind="top3"] .home-hero-art { min-height: 330px; margin-top: -56px; z-index: 1; }
  .hs-slide[data-kind="top3"] .hs-bubble { width: min(52%, 190px); top: auto; left: auto; right: auto; box-shadow: var(--shadow-md); }
  .hs-slide[data-kind="top3"] .hs-b1 { left: 0; bottom: 24px; z-index: 1; --fan: rotate(-8deg); }
  .hs-slide[data-kind="top3"] .hs-b2 { left: 24%; bottom: 76px; z-index: 2; --fan: rotate(0deg); }
  .hs-slide[data-kind="top3"] .hs-b3 { left: 48%; bottom: 128px; z-index: 3; --fan: rotate(8deg); }
}

/* 1000-1179 px: the two hero columns do not fit yet (each wants 520 px), so the art is still full width; same cap as above, a bit larger */
@media (min-width: 1000px) and (max-width: 1179.98px) {
  .hs-slide[data-kind="top3"] .hs-b1 { width: min(50%, 220px); }
  .hs-slide[data-kind="top3"] .hs-b2 { width: min(44%, 210px); }
  .hs-slide[data-kind="top3"] .hs-b3 { width: min(40%, 190px); }
}

/* ---- WO-5: animated hero slideshow. Every slide change adds .hs-in (site.js) to the entering slide: kicker -> title -> sub -> CTA fade up in
   60 ms steps (500 ms each), the arch / bubble photos drift 1.06 -> 1 (Ken Burns), bubbles pop in with an overshoot. Slide 1 as rendered has
   no .hs-in, so its first paint is unchanged. The active segment's fill runs the 5 s interval (--hs-iv, set by the script; WO-8).
   Under prefers-reduced-motion the rule at the top of this file removes every animation: no entrance, no drift, instant switch. ---- */
.hs-slide.hs-in .home-hero-text { animation: none; }
.hs-slide.hs-in .hs-kicker, .hs-slide.hs-in .home-h1, .hs-slide.hs-in .hs-title, .hs-slide.hs-in .home-short, .hs-slide.hs-in .home-ctas { animation: v2Up .5s ease both; }
.hs-slide.hs-in .home-h1, .hs-slide.hs-in .hs-title { animation-delay: .06s; }
.hs-slide.hs-in .home-short { animation-delay: .12s; }
.hs-slide.hs-in .home-ctas { animation-delay: .18s; }
.hs-slide.hs-in .hero-drift, .hs-slide.hs-in .hs-bubble-clip img, .hs-slide.hs-in .hero-dish img { animation: hsKb 5.6s ease-out backwards; }
.hs-slide.hs-in .hs-bubble, .hs-slide.hs-in .hero-dish { animation: hsPop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.hs-slide.hs-in .hs-b1 { animation-delay: .22s; }
.hs-slide.hs-in .hs-b2 { animation-delay: .3s; }
.hs-slide.hs-in .hs-b3 { animation-delay: .38s; }
.hs-slide.hs-in .hero-dish { animation-delay: .24s; }
@keyframes hsKb { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hsPop { from { opacity: 0; transform: var(--fan,) scale(.7); } to { opacity: 1; transform: var(--fan, none); } }
@keyframes hsFillA { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hsFillB { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .hs[data-run="1"][data-tick="0"] .hs-seg[aria-current] .hs-seg-bar::after { animation: hsFillA var(--hs-iv, 5s) linear both; }
  .hs[data-run="1"][data-tick="1"] .hs-seg[aria-current] .hs-seg-bar::after { animation: hsFillB var(--hs-iv, 5s) linear both; }
}

/* ---- WO-7: the award poster whole (a frame with the photo's aspect ratio, contained on sand, inset from the rounded corners so nothing
   is clipped; no drift, an entrance fade), and on phones each slide is as tall as its own content: slides align to the top of the shared
   cell and the track takes the ACTIVE slide's height (--hs-h, set by site.js after layout, on resize and on every change). ---- */
/* WO-8: the indicator is under the art now, so the poster no longer keeps a 64 px strip for it; the frame is as tall as the other slides' art */
.hs-slide[data-kind="award"] .home-hero-art { min-height: 0; }
.hs-award-frame { position: relative; width: min(100%, calc(clamp(400px, 48vw, 660px) * var(--arw, .707))); aspect-ratio: var(--ar, 1237 / 1750);
  margin-left: auto; padding: 12px; border-radius: 28px; background: var(--sand); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.hs-award-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hs-slide.hs-in .hs-award-frame { animation: v2Up .6s ease .12s both; }
@media (max-width: 999.98px) {
  .hs-slide { align-self: start; }
  .js .hs-track { height: var(--hs-h, auto); transition: height .6s ease; clip-path: inset(-60px -50vw -36px -50vw); } /* WO-8: 36 px below = the indicator row, so a low card's shadow is not cut */
  .hs-award-frame { width: min(100%, calc(400px * var(--arw, .707))); margin-inline: auto; }
}