/* Homepage "Resort hours today" box (--home-hours builds). Uses the site's colour variables, so dark mode is automatic. */
.hh-band { padding: 6px 0 18px; }
.hh-band[hidden] { display: none; }
.hh-band .band-head { margin-bottom: 4px; flex-wrap: wrap; }
.hh-band .band-head .ic { color: var(--gold); }
.hh-sub { margin: 0 0 12px; }
#hhNow { color: var(--ink-2); font-weight: 600; }
.hh-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hh-group { background: var(--surface, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 6px; min-width: 0; }
.hh-gh { margin: 0 0 4px; font: 700 .7rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hh-list { list-style: none; margin: 0; padding: 0; }
.hh-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tag" "today tag"; gap: 0 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.hh-item:first-child { border-top: 0; }
.hh-item[hidden] { display: none; }
.hh-name { grid-area: name; font-weight: 600; font-size: .92rem; min-width: 0; }
.hh-name a { color: inherit; text-decoration: none; } .hh-name a:hover, .hh-name a:focus-visible { text-decoration: underline; }
.hh-name .badge { vertical-align: 1px; }
.hh-today { grid-area: today; font-size: .8rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hh-tag { grid-area: tag; display: inline-block; font: 700 .64rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap; }
.hh-tag.open { background: #e3f3eb; color: #1f6447; border-color: #9fd3b8; }
.hh-tag.closed { background: #f6e9e9; color: #8a2d36; border-color: #e3b9bd; }
[data-theme="dark"] .hh-tag.open { background: #12352a; color: #8fe0b9; border-color: #24604a; }
[data-theme="dark"] .hh-tag.closed { background: #3a1a1f; color: #f3b4bc; border-color: #6a2c35; }
@media (max-width: 960px) { .hh-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hh-groups { grid-template-columns: 1fr; gap: 10px; } }
@media print { .hh-band { display: none !important; } }