/* hps/hero: the hour picker. The whole block takes the colour of the hour you pick. */
.hero { --edge: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); --hero-bg: #fbeecb; --hero-ink: var(--night); --hero-star: var(--lantern-dark); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; min-height: min(calc(100svh - var(--head-h) - 100px), 780px); background-color: var(--hero-bg); color: var(--hero-ink); transition: background-color .8s ease, color .5s ease; }
.hero[data-tone="first"] { --hero-bg: #f3e6e3; }
.hero[data-tone="dawn"] { --hero-bg: #e9f0ee; }
.hero[data-tone="noon"] { --hero-bg: #f8e6cd; }
.hero[data-tone="gold"] { --hero-bg: #f6cd98; }
.hero[data-tone="night"] { --hero-bg: var(--night); --hero-ink: #fff; --hero-star: var(--turmeric); }
.hero-stage { position: relative; grid-column: 2; grid-row: 1; min-height: 420px; overflow: hidden; border-bottom-left-radius: 32px; }
.hero-stage picture { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero-stage picture.is-on { opacity: 1; }
.hero-stage img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero-copy { grid-column: 1; grid-row: 1; align-self: center; padding: 32px clamp(24px, 3.5vw, 56px) 44px var(--edge); }
.hero-copy h1 { font-size: clamp(2.9rem, 5.2vw, 4.7rem); line-height: 1.04; }
:lang(zh) .hero-copy h1, :lang(ja) .hero-copy h1 { font-size: clamp(2.3rem, 3.8vw, 3.5rem); line-height: 1.18; }
.hero-copy > p { margin-top: 18px; max-width: 26em; font-size: clamp(1.2rem, 1.5vw, 1.38rem); line-height: 1.36; }
.hero-copy .btn { min-width: 218px; }
.hero-copy .hero-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 22px; font-size: 1.04rem; line-height: 1.3; }
.hero-rating .stars { display: inline-flex; gap: 1px; color: var(--hero-star); transition: color .5s ease; }
.hero-rating a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hours { --dwell: 6s; position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: -18px var(--edge) 28px; padding: 6px; background: #fff; color: var(--night); border-radius: 20px; box-shadow: var(--shadow-float); }
.hours button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(8px, 1vw, 14px); align-items: center; min-height: 68px; padding: 8px clamp(8px, 1.3vw, 18px); text-align: left; border-radius: 15px; transition: background-color .2s, color .2s; }
.hours .i { grid-row: 1 / 3; width: 28px; height: 28px; stroke-width: 1.5; color: var(--wood); transition: color .2s; }
.hours button[aria-checked="true"] .i { color: var(--turmeric); }
.hours button:hover { background: var(--canvas); }
.hours button[aria-checked="true"] { background: var(--night); color: #fff; }
.hours.is-auto button[aria-checked="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; background: var(--turmeric); border-radius: 2px; transform-origin: left; animation: hour-fill var(--dwell) linear both; }
.hours.is-held button[aria-checked="true"]::after { animation-play-state: paused; }
@keyframes hour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-toggle { position: absolute; top: 16px; right: 16px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; color: var(--night); background: rgb(255 255 255 / .88); border-radius: 50%; box-shadow: var(--shadow-soft); transition: background-color .15s; }
.hero-toggle:hover { background: #fff; }
.hero-toggle .i { width: 18px; height: 18px; fill: currentColor; stroke-width: 1; }
.hero-toggle .i-play, .hero-toggle.is-stopped .i-pause { display: none; }
.hero-toggle.is-stopped .i-play { display: block; }
.hours strong { display: block; font-size: clamp(1.2rem, 1.9vw, 1.55rem); font-weight: 700; line-height: 1.12; font-variant-numeric: lining-nums tabular-nums; }
.hours span { display: block; font-size: 1.02rem; line-height: 1.2; }
.hero-note { display: none; }

@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-stage { order: 1; flex: none; height: 42svh; min-height: 280px; border-radius: 0 0 24px 24px; }
  .hours { order: 2; margin: -22px var(--gutter) 0; padding: 4px; border-radius: 16px; gap: 2px; }
  .hours button { display: block; min-height: 58px; padding: 6px 2px 5px; text-align: center; border-radius: 12px; }
  .hours .i { display: block; width: 20px; height: 20px; margin: 0 auto 1px; margin-bottom: 4px; }
  .hours strong { font-size: 1.04rem; }
  .hours span { display: none; }
  .hero-note { order: 3; display: block; padding: 12px var(--gutter) 0; font-size: 1.04rem; text-align: center; }
  .hero-copy { order: 4; align-self: stretch; padding: 10px var(--gutter) 28px; }
  .hero-copy h1 { font-size: 2.6rem; }
  .hero-copy > p { margin-top: 10px; font-size: 1.15rem; }
  .hero-copy .btn { min-width: 204px; padding-inline: 18px; }
  .hours.is-auto button[aria-checked="true"]::after { left: 12px; right: 12px; bottom: 3px; }
  .hero-toggle { top: 12px; right: 12px; }
  .hero-copy .hero-rating { flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin-top: 16px; padding-right: 64px; font-size: 1rem; }
  .hero-rating .stars { margin-top: .12em; }
  .hero-rating .stars .i:nth-child(n + 2) { display: none; }
}