/* The week of opening rows, shared by the vitrine's practical-info card and BOTH footers. It lives apart from
   practical-info.css because that sheet is linked per page, by the two pages carrying the card, while the footer is
   in the layout and renders on every page of both surfaces. */
.hours-week {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
/* Day on the left, its services as chips on the right, one row per day. The chips wrap under each other only when
   a day carries more services than the row can hold. */
.hours-day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}
.hours-day-name {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    font-weight: 600;
    color: var(--ink);
}
.hours-day-times {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: flex-end;
    gap: 0.35rem;
    text-align: right;
    color: var(--ink);
}
/* A service is one chip: which service it is, then when. "Midi 11h00-14h30" is read at a glance where a bare pair of
   times has to be worked out. */
.hours-slot {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.2rem 0.65rem;
    background: var(--brand-tint-2);
    border-radius: var(--radius-pill);
}
.hours-slot-service {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}
.hours-slot-range { white-space: nowrap; }
.hours-slot-dash { margin: 0 0.25rem; color: var(--muted); }
/* A closed day recedes, and still says the word: the status is never the colour alone. */
.hours-closed, .hours-note { color: var(--muted); }
.hours-day[data-closed] .hours-day-name { font-weight: 400; color: var(--muted); }
/* Today is raised by js/hours.js, never by the server: the response is shared-cached, so a server-rendered "today"
   would be whichever day the cache was filled on. The row carries the WORD too, in the tag rule below. */
.hours-day[data-today] {
    background: var(--brand-accent-soft);
    box-shadow: inset 3px 0 0 var(--brand-accent);
}
.hours-day[data-today] .hours-day-name { font-weight: 700; color: var(--ink); }
.hours-day[data-today] .hours-slot { background: var(--surface-base); }

.hours-today-tag {
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-on-primary);
    background: var(--brand-primary-raised);
    border-radius: var(--radius-sm);
}

/* The owner's own words, kept whole because no week could be read from them. */
.hours-freeform { margin: 0; white-space: pre-line; line-height: 1.6; color: var(--ink); }

/* The badge's slot. It is EMPTY until a script fills it, so it reserves height only where a script runs: a guest
   with none pays no blank band above the week. */
.hours-status-slot { display: flex; }
html[data-js] .hours-status-slot { min-height: 2rem; align-items: center; }

/* Below the smallest phone width a day and two services no longer share a row, so the services drop under the day
   name instead of squeezing it. */
@media (max-width: 22rem) {
    .hours-day { flex-wrap: wrap; }
    .hours-day-times { margin-left: 0; justify-content: flex-start; }
}

.footer-hours .hours-week { gap: 0.1rem; }
.footer-hours .hours-day { min-height: 0; padding: 0.15rem 0; font-size: inherit; }
.footer-hours .hours-day-name { font-weight: 400; color: inherit; }
.footer-hours .hours-day-times { color: inherit; }
.footer-hours .hours-slot { padding: 0; background: none; }
.footer-hours .hours-day[data-today] { background: none; box-shadow: inset 2px 0 0 var(--brand-accent); padding-left: 0.4rem; }
.footer-hours .hours-today-tag { font-size: 0.6rem; }