/* The guest home and its bounded looks (HomeTemplateResolver.TemplateKeys), declared once for both guest surfaces.
   The key is carried on the hero and on the page around it; the page-scope block at the foot decides the blocks'
   columns. Reads tokens, declares none; linked after each host's app.css. */

.hero-tagline {
    text-align: var(--brand-align, initial); color: var(--muted); font-size: 1.15rem; line-height: 1.5; margin: 0 0 1.25rem; max-width: 52ch; text-wrap: pretty; }

.hero { margin: 0 0 calc(var(--guest-section-gap) * 1.25); }
.hero-heading {
    font-family: var(--brand-font);
    letter-spacing: var(--brand-display-spacing);
    font-size: clamp(2rem, 7vw, 3.75rem);
    line-height: 1.05;
    margin: 0.5rem 0 0.75rem;
    text-wrap: balance;
    /* A restaurant with a long name gets a headline, not a banner: without a measure it runs the full width of a
       desktop band and reads as one unbroken line. */
    max-width: 18ch;
}

/* Branded hero: the tenant's image as a background band behind an overlaid title (the LCP element). The reserved
   aspect-ratio box + the explicit img width/height kill layout shift; the scrim keeps the white title AA over any photo. */
.hero-branded {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 2 / 1;
    margin: 0 0 1.5rem;
}
.hero-branded .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--brand-hero-focal, 50% 50%);
    display: block;
}
/* Brand-tinted scrim: a faint primary wash up top deepening to a near-black brand shade (primary 72%-toward-black) at
   the bottom text band, so the photo reads as the tenant's, and the white overlaid title stays AA over the dark band. */
.hero-branded::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary) 10%, transparent),
        color-mix(in srgb, var(--brand-primary), #000000 72%) 88%);
}
.hero-branded .hero-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: clamp(1.25rem, 4vw, 2.25rem);
}
.hero-branded .hero-heading,
.hero-branded .hero-tagline {
    color: #f8fafc;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* No photo: a flat band of the restaurant's main colour, its words in the resolver's on-colour (AA 4.5:1 against
   that fill, in both themes), so every tenant's identity leads, a hueless one included. */
.hero-tint {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 18rem;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem);
    border-radius: var(--radius-lg);
    background: var(--brand-primary-raised);
    color: var(--brand-on-primary);
    border-top: 4px solid var(--brand-accent);
}
.hero-words,
.hero-panel { display: contents; }
/* align-self, because .hero-tint is a flex column: a stretched logo distorts. No display here, the [data-logo]
   toggle in each host's app.css switches the light/dark pair. The plate keeps a dark mark legible on any fill. */
.hero-tint .hero-logo {
    order: -1;
    box-sizing: content-box;
    height: 3.5rem;
    width: auto;
    align-self: start;
    margin: 0 0 0.85rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    background: var(--bg);
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: start;
    gap: 0.6rem;
    margin: 0 0 0.6rem;
    font-family: var(--brand-font);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-ink-accent);
}
.hero-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
}
.hero-tint .hero-heading {
    margin-top: 0;
    color: var(--brand-interactive);
    font-size: clamp(2.4rem, 9vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
}
.hero-tint .hero-tagline {
    max-width: 36ch;
    font-size: var(--step-1);
}
.hero-tint:not([data-home-family="minimal"]) :is(.hero-eyebrow, .hero-heading, .hero-tagline) { color: var(--brand-on-primary); }
.hero-tint:not([data-home-family="minimal"]) .hero-cta:not(.hero-cta-secondary) {
    background: var(--bg);
    color: var(--brand-interactive);
}
.hero-tint:not([data-home-family="minimal"]) .hero-cta-secondary {
    background: transparent;
    color: var(--brand-on-primary);
    border-color: var(--brand-on-primary);
}
.hero-tint:not([data-home-family="minimal"]) .hero-cta-secondary:hover { background: color-mix(in srgb, var(--brand-on-primary) 12%, transparent); }
.hero-tint:not([data-home-family="minimal"]) :focus-visible { outline-color: var(--brand-on-primary); }

/* Home layout templates (bounded owner presets, never free CSS): data-home-template varies the hero composition.
   classic is the default treatment above; centered / split-image / minimal adjust alignment, layout, or chrome.
   The FAMILY decides the hero composition; the key beside it decides how wide the page runs and how many columns
   its blocks take, so a look is one choice and not two. */
.hero[data-home-family="centered"] { text-align: center; }
.hero-tint[data-home-family="centered"] { align-items: center; }
.hero[data-home-family="centered"] :is(.hero-eyebrow, .hero-logo) { align-self: center; }
.hero[data-home-family="centered"] .hero-heading,
.hero[data-home-family="centered"] .hero-tagline { margin-left: auto; margin-right: auto; }
.hero[data-home-family="centered"] .hero-actions { justify-content: center; }

@media (min-width: 40rem) {
    .hero-branded[data-home-family="split-image"] {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: 20rem;
    }
    .hero-branded[data-home-family="split-image"] .hero-image { position: relative; }
    .hero-branded[data-home-family="split-image"]::after { display: none; }
    .hero-branded[data-home-family="split-image"] .hero-overlay {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: color-mix(in srgb, var(--brand-primary), #000000 72%);
    }

    .hero-tint[data-home-family="split-image"]:has(.hero-panel > *) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 20rem;
        padding: 0;
        overflow: hidden;
    }
    .hero-tint[data-home-family="split-image"]:has(.hero-panel > *) > :is(.hero-words, .hero-panel) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem);
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel {
        align-items: center;
        gap: 1.25rem;
        color: var(--ink);
        background: var(--brand-tint-2);
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel .hero-logo {
        align-self: center;
        height: 4.5rem;
        margin: 0;
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel .hero-actions {
        justify-content: center;
        margin: 0;
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel .hero-cta:not(.hero-cta-secondary) {
        background: var(--brand-primary-raised);
        color: var(--brand-on-primary);
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel .hero-cta-secondary {
        background: var(--bg);
        color: var(--ink);
        border-color: var(--brand-accent);
    }
    .hero-tint[data-home-family="split-image"] > .hero-panel :focus-visible { outline-color: var(--accent-line); }
}

.hero-tint[data-home-family="minimal"] {
    background: none;
    color: inherit;
    border: none;
    padding-left: 0;
    padding-right: 0;
    min-height: auto;
}
.hero[data-home-family="minimal"] .hero-eyebrow { display: none; }
.hero-branded[data-home-family="minimal"] { aspect-ratio: 21 / 9; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.6rem 1.4rem;
    background: var(--brand-primary-raised);
    color: var(--brand-on-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
}
.hero-cta:hover { filter: brightness(1.08); }
.hero-cta-secondary {
    background: var(--bg);
    color: var(--ink);
    border: 1px solid var(--brand-accent);
}
.hero-cta-secondary:hover { background: var(--brand-accent-soft); filter: none; }

@media (min-width: 48rem) {
    .hero-actions { gap: 1rem; }
}

/* PZ-HERO-OPT. With no hero band, the action row is the page's first element and carries the top margin the hero
   used to give it. Its own .hero-actions rules still lay out the buttons; this only positions the row. */
/* PZ-HERO-OPT. A page whose owner wrote no hero still owes the document exactly one h1 (content.md, SEO and AEO)
   and a screen reader its top heading level. It carries the restaurant's own name, unseen: the founder's rule is
   that no hero BAND is shown, not that the document loses its heading. */
/* The quiet opening band: shown only when the owner composed no hero, so the page leads with the restaurant's
   own name and address instead of two bare buttons. Nothing here is platform-authored. */
.home-nameplate-title {
    /* Roomy below, because the action row follows directly when the owner saved no address. The address, when
       there is one, pulls back up against the name so the two read as one block. */
    margin: 0 0 1.5rem;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    line-height: 1.15;
}
.home-nameplate-address {
    margin: -1.25rem 0 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.document-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.hero-links {
    margin: 0 0 1.5rem;
}
.hero-links .hero-actions {
    margin: 0;
}

/* PAGE SCOPE: the same bounded key, applied to the home around the hero. #home-info is the practical strip both
   twins render; GuestHomeHeroLayerGuardTests requires every id named here to exist on every guest home. */

.home-page[data-home-family="centered"] .content-section { text-align: center; }
.home-page[data-home-family="centered"] .content-section-body,
.home-page[data-home-family="centered"] .content-section-list,
.home-page[data-home-family="centered"] .content-section-invite-body { margin-inline: auto; }
.home-page[data-home-family="centered"] .content-section-contact,
.home-page[data-home-family="centered"] .content-section-legal { align-items: center; }
.home-page[data-home-family="centered"] .content-section-list { list-style-position: inside; padding-left: 0; }
.home-page[data-home-family="centered"] .content-section-extract-today { padding-left: 0; border-left: 0; }
.home-page[data-home-family="centered"] #home-info .practical-head,
.home-page[data-home-family="centered"] #home-info .practical-actions { justify-content: center; }
.home-page[data-home-family="centered"] #home-info .practical-address,
.home-page[data-home-family="centered"] #home-info .practical-email,
.home-page[data-home-family="centered"] #home-info .hours-freeform { text-align: center; }
.home-page[data-home-family="centered"] #home-info .practical-where > :is(.practical-cta, .practical-route) { align-self: center; }
.home-page[data-home-family="centered"] .home-nameplate-title,
.home-page[data-home-family="centered"] .home-nameplate-address { text-align: center; }
.home-page[data-home-family="centered"] .hero-links .hero-actions { justify-content: center; }

.home-page[data-home-family="minimal"] .content-section {
    padding-top: var(--space-5);
    border-top: 1px solid var(--brand-hairline);
}
.home-page[data-home-family="minimal"] .content-section:first-of-type,
.home-page[data-home-family="minimal"] > .hero + .content-section {
    padding-top: 0;
    border-top: 0;
}
.home-page[data-home-family="minimal"] .content-section-gallery-image { border-radius: 0; }
.home-page[data-home-family="minimal"] .content-section-review,
.home-page[data-home-family="minimal"] .content-section-dish-link {
    background: none;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    padding-inline: 0;
}
.home-page[data-home-family="minimal"] #home-info .practical-card {
    background: none;
    border: 0;
    border-top: 1px solid var(--brand-hairline);
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.home-page[data-home-family="minimal"] #home-info .practical-card::before { content: none; }

.home-page {
    --home-gap: var(--space-6);
    --home-column: min(var(--guest-page-max), 100vw - 2 * var(--guest-gutter));
    --home-page-max: var(--home-column);
    --home-page-width: min(var(--home-page-max), 100vw - 2 * var(--guest-gutter));
    width: var(--home-page-width);
    margin-inline: calc(50% - var(--home-page-width) / 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--home-gap);
}
@media (min-width: 48rem) {
    .home-page {
        --home-gap: var(--space-7);
        --home-column: min(var(--guest-page-max), 100vw - 2 * var(--guest-gutter-md));
        --home-page-width: min(var(--home-page-max), 100vw - 2 * var(--guest-gutter-md));
    }
}
@media (min-width: 64rem) {
    .home-page { --home-column: min(var(--guest-page-max-wide), 100vw - 2 * var(--guest-gutter-md)); }
}
.home-page > :is(.hero, .hero-links, .practical, .content-section, .home-nameplate-title) { margin-block: 0; }
.home-page > .home-nameplate-address { margin: calc(var(--space-2) - var(--home-gap)) 0 0; }

html:has(.home-page[data-home-template="classic-wide"]),
html:has(.home-page[data-home-template="minimal-wide"]) { overflow-x: clip; }

.home-page[data-home-template="classic-wide"] > .hero,
.home-page[data-home-template="minimal-wide"] > .hero {
    margin-inline: calc((var(--home-page-width) - 100vw) / 2);
    margin-top: calc(-1 * var(--guest-page-top));
    border-radius: 0;
    border-inline: 0;
    border-top: 0;
}
@media (min-width: 48rem) {
    .home-page[data-home-template="classic-wide"] > .hero,
    .home-page[data-home-template="minimal-wide"] > .hero { margin-top: calc(-1 * var(--guest-page-top-md)); }
}
.home-page[data-home-template="classic-wide"] > .hero-tint,
.home-page[data-home-template="classic-wide"] > .hero-branded .hero-overlay,
.home-page[data-home-template="minimal-wide"] > .hero-tint,
.home-page[data-home-template="minimal-wide"] > .hero-branded .hero-overlay {
    padding-inline: calc((100vw - var(--home-page-width)) / 2);
}

/* Every look declares its columns: its own count, and at most two on a tablet. */
.home-page[data-home-template="classic"] { --brand-columns: 1; --brand-columns-md: 1; }
.home-page[data-home-template="classic-wide"] { --brand-columns: 1; --brand-columns-md: 1; }
.home-page[data-home-template="centered"] { --brand-columns: 1; --brand-columns-md: 1; }
.home-page[data-home-template="centered-2"] { --brand-columns: 2; --brand-columns-md: 2; }
.home-page[data-home-template="split-image"] { --brand-columns: 2; --brand-columns-md: 2; }
.home-page[data-home-template="split-3"] { --brand-columns: 3; --brand-columns-md: 2; }
.home-page[data-home-template="minimal"] { --brand-columns: 1; --brand-columns-md: 1; }
.home-page[data-home-template="minimal-wide"] { --brand-columns: 1; --brand-columns-md: 1; }

/* A last card alone on its row takes the row, so no card stands beside an empty column. */
@container (min-width: 34rem) {
    .home-page:is([data-home-template="centered-2"], [data-home-template="split-image"], [data-home-template="split-3"]) :is(.content-section-dishes, .content-section-reviews) > :last-child:nth-child(2n+3) { grid-column: 1 / -1; }
}
@container (min-width: 48rem) {
    .home-page[data-home-template="split-3"] :is(.content-section-dishes, .content-section-reviews) > :last-child:nth-child(2n+3) { grid-column: auto; }
    .home-page[data-home-template="split-3"] :is(.content-section-dishes, .content-section-reviews) > :last-child:nth-child(3n+4) { grid-column: 1 / -1; }
    .home-page[data-home-template="split-3"] :is(.content-section-dishes, .content-section-reviews) > :last-child:nth-child(3n+5) { grid-column: span 2; }
}

/* The owner's home look preview (GuestHomePreviewDocument): the page box around the same blocks, read from the
   guest grid tokens. */
.home-preview {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

.home-preview-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--guest-page-max);
    margin: 0 auto;
    padding: var(--guest-page-top) var(--guest-gutter) var(--guest-page-bottom);
}

.home-preview *,
.home-preview *::before,
.home-preview *::after { box-sizing: border-box; }

.home-preview-title {
    font-family: var(--brand-font);
    letter-spacing: var(--brand-display-spacing);
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
}

.home-preview-empty { color: var(--muted); }

@media (min-width: 48rem) {
    .home-preview-page { padding: var(--guest-page-top-md) var(--guest-gutter-md) var(--guest-page-bottom-md); }
}

@media (min-width: 64rem) {
    .home-preview-page { max-width: var(--guest-page-max-wide); }
}