/* The practical-information card: hours as a week, and where the restaurant is. Its own sheet rather than a corner
   of home-hero.css, because two pages draw it and only one of them has a hero. A page that renders no hero must not
   block paint on the hero layer to get these rules, which is what GuestPageScopedStylesheetAssertions holds.

   The per-template overrides that re-aim this card stay in home-hero.css: they belong to the home's template, not
   to the card, and nothing outside the home page has a template to honour. */

/* Practical information: the two facts a stranger came for, hours and where. Both cards are hand-rolled rather than
   <BbCard> because the surface is brand-gated and the library's own card paints from a sheet the branding scans
   cannot read. */
.practical { margin: 0 0 3.5rem; }

.practical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .practical-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
    .practical-grid > :only-child { grid-column: 1 / -1; }
}

.practical-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.35rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-hairline);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -18px color-mix(in srgb, var(--ink) 30%, transparent);
    overflow: hidden;
}

@media (max-width: 30rem) {
    .practical-card { padding: 1.25rem 1rem; }
}

/* The rail is the only thing marking these two cards as a pair, and it is a pseudo-element rather than a border so it
   cannot fight the radius on the corners it crosses. */
.practical-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--brand-accent);
}

.practical-hours { gap: 0.75rem; }

/* The address sits at the top and the actions at the bottom, so the two cards end level however long the week is. */
.practical-where { justify-content: space-between; }

.practical-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.practical-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--brand-font);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.practical-eyebrow-icon { display: inline-flex; color: var(--brand-interactive); }

.hours-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--brand-band);
    border: 1px solid var(--brand-hairline);
    border-radius: var(--radius-pill);
}

.hours-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--muted);
    flex: none;
}

/* Status is never colour alone: the badge always carries the word, and the dot only repeats it. The three dots are
   the platform's own functional status tones, which the dark theme re-declares. A literal green was one fixed
   value on both canvases. */
.hours-status[data-state="open"] .hours-dot { background: var(--status-positive-dot); }
.hours-status[data-state="soon"] .hours-dot { background: var(--status-caution-dot); }
.hours-status[data-state="closed"] .hours-dot { background: var(--status-neutral-dot); }

/* The map is its own full-width row under the two cards. It reserves its ratio before it loads, so nothing grows
   under a thumb when the tiles arrive, and the wrapper clips the radius an iframe ignores. 4:3 on a phone and 16:9
   wider: OpenStreetMap paints its attribution INSIDE the frame at a fixed height, so a shallow box gives most of it
   to small print instead of the street. */
.practical-map {
    position: relative;
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--brand-hairline);
    border-radius: var(--radius-xl);
    background: var(--brand-band);
}

@media (min-width: 48rem) {
    .practical-map { aspect-ratio: 16 / 9; }
}

.practical-map-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The tiles are a light raster the page cannot restyle, so on the dark theme they are inverted and turned back to
   their own hues, rather than left as the one white slab on a dark page. */
[data-theme="dark"] .practical-map-frame { filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.95); }

.practical-address {
    margin: 0;
    font-family: var(--brand-font);
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--ink);
}

.practical-directions-label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
}

.practical-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.practical-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: var(--brand-interactive);
    background: var(--surface-base);
    border: 1px solid var(--muted);
    text-decoration: none;
}

.practical-cta-icon { display: inline-flex; }

.practical-cta-primary {
    align-self: flex-start;
    margin-top: auto;
    color: var(--brand-on-primary);
    background: var(--brand-primary-raised);
    border-color: var(--brand-primary-raised);
}

.practical-cta:hover { border-color: var(--brand-accent); }
.practical-cta-primary:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-accent-ink); }