/* Shared restaurant heroes components. Theme tokens own colors and typography. */
.home-hero { position: relative; min-height: calc(100svh - var(--header-height)); display: grid; place-items: center; overflow: hidden; padding: clamp(4rem, 10vw, 9rem) var(--edge); background: linear-gradient(140deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 52%, var(--surface-strong))); color: var(--hero-text); isolation: isolate; }
.home-hero__slides { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.home-hero--with-image::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, var(--hero-overlay-start), var(--hero-overlay-end)); content: ""; }
.home-hero__content { width: min(68rem, 100%); text-align: center; }
.home-hero__slide-content.is-active { animation: home-hero-content-in .45s ease both; }
@keyframes home-hero-content-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.home-hero h1 { margin: 0; font: 500 clamp(4rem, 12vw, 10.5rem)/.85 var(--display-font); letter-spacing: var(--display-tracking); text-wrap: balance; }
.home-hero__logo { width: min(25rem, 60vw); max-height: 12rem; margin-inline: auto; object-fit: contain; }
.home-hero__claim, .home-hero__eyebrow { max-width: 40rem; margin: 2rem auto 0; font-size: clamp(.9rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
.home-hero__description { max-width: 42rem; margin: 1.5rem auto 0; font-size: clamp(.85rem, 1.3vw, 1.05rem); }
.home-hero__button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; margin-top: 1.8rem; border: 1px solid currentColor; padding: .65rem 1.25rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.home-hero__button:hover, .home-hero__button:focus-visible { background: var(--hero-text); color: var(--theme-primary); }
.scroll-cue { position: absolute; bottom: 2rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--hero-control-line); border-radius: 50%; }
.scroll-cue span { position: absolute; top: .85rem; left: 1.05rem; width: .55rem; height: .55rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.hero-slider-controls { position: absolute; right: var(--edge); bottom: 2rem; display: flex; align-items: center; gap: .75rem; }
.hero-slider-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--hero-control-line); border-radius: 50%; padding: 0; background: transparent; color: var(--hero-text); cursor: pointer; }
.hero-slider-toggle:hover, .hero-slider-toggle:focus-visible { background: var(--hero-control-hover); }
.hero-slider-status { min-width: 3rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-align: right; }
.page-hero { position: relative; display: grid; min-height: clamp(27rem, 64vh, 47rem); place-items: center; overflow: hidden; padding: clamp(4rem, 9vw, 9rem) var(--edge); background: linear-gradient(140deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 52%, var(--surface-strong))); color: var(--hero-text); isolation: isolate; text-align: center; }
.page-hero__slides { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.page-hero--with-image::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, var(--hero-overlay-start), var(--page-hero-overlay-end)); content: ""; }
.page-hero__content { width: min(68rem, 100%); }
.page-hero__slide-content.is-active { animation: page-hero-content-in .45s ease both; }
.page-hero__description { max-width: 40rem; margin: 1.5rem auto 0; }
.page-hero__button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; margin-top: 1.8rem; border: 1px solid currentColor; padding: .65rem 1.25rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.page-hero__button:hover, .page-hero__button:focus-visible { background: var(--hero-text); color: var(--theme-primary); }
@keyframes page-hero-content-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.page-hero h1 { max-width: 12ch; margin-inline: auto; }
.page-hero .eyebrow { color: currentColor; }
.page-hero__intro { max-width: 38rem; margin: 1.5rem auto 0; color: currentColor; }
@media (max-width: 45rem) {
  .home-hero { min-height: calc(85svh - var(--header-height)); }
}