/* The guest home and its bounded layout templates, declared once for BOTH guest surfaces.

   The four templates are an Application-layer contract, not surface chrome: Ardoise.Application.Common
   .HomeTemplateResolver.TemplateKeys bounds them to classic / centered / split-image / minimal, the Dashboard picker
   writes one of those keys, and the Menu and the Showcase both render it verbatim onto
   <div class="home-page" data-home-template="@_home.HomeTemplate"> and onto the hero inside it. Two copies of the
   rules meant one owner choice could mean two different layouts, which is the drift #2970 had already hit three times
   in one day on the token layer (#2922, #2950, #2951).

   The key is carried at TWO scopes on purpose: the hero, and the page around it. Until then a template reached the
   hero alone, so every restaurant on the platform got the same page under a differently-composed banner — the owner
   picked "épuré" and got an épuré hero over the same tinted cards. The page-scope block at the foot of this file is
   what makes the choice a page look; both attributes come from the same bounded, normalized key, so they cannot
   disagree.

   The base hero moves with the presets rather than staying behind: a preset only ADJUSTS the composition (alignment,
   grid, chrome), so a drifted .hero-tint or .hero-branded makes the same key render differently just as surely as a
   drifted preset would. Splitting them would leave the guard covering half the risk.

   This is the sibling of content-sections.css — class rules for a render both surfaces share — and the opposite of
   brand-tokens.css, which declares tokens and may carry no class rule. It reads those tokens and declares none, so it
   is linked after each host's app.css, exactly as content-sections.css is. GuestHomeHeroLayerGuardTests holds the
   split. */

.hero-tagline { color: var(--muted); font-size: 1.1rem; margin: 0 0 1rem; }

.hero { margin: 0 0 1.5rem; }
.hero-heading {
    font-family: var(--brand-font);
    letter-spacing: var(--brand-display-spacing);
    font-size: clamp(1.9rem, 6.5vw, 3.4rem);
    line-height: 1.1;
    margin: 0.5rem 0 0.75rem;
}

/* 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: 0.75rem;
    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-image fallback: a warm brand-tint band with a 4px accent rule across the top keeps the home identity-led; the title
   inks in the on-tint brand colour (the primary, gated to AA-large ≥3:1 on the near-white tint) and the tenant logo leads
   above the wordmark. */
.hero-tint {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(17rem, 42vh, 26rem);
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 2.75rem);
    border-radius: 0.75rem;
    background-color: var(--brand-tint);
    background-image:
        radial-gradient(125% 90% at 12% 0%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 62%),
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--brand-primary) 2%, transparent) 0,
            color-mix(in srgb, var(--brand-primary) 2%, transparent) 1px,
            transparent 1px,
            transparent 4px);
    border: 1px solid var(--brand-hairline);
    border-top: 4px solid var(--brand-accent);
}
.hero-tint .hero-logo {
    height: 3.5rem;
    width: auto;
    display: block;
    margin: 0 0 0.85rem;
}
/* No-photo hero: type is the identity. A tracked olive-gold eyebrow (with an accent rule), a large confident heading
   inked in the AA-gated on-tint brand colour, and a measured tagline — all on the warm brand-tint band. Every colour
   is a theme-adaptive token, so it re-inks correctly in the dark canvas and for any configured tenant brand. */
.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: 999px;
    background: var(--brand-accent);
}
.hero-tint .hero-heading {
    margin-top: 0;
    color: var(--brand-on-tint);
    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);
}

/* 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. */
.hero[data-home-template="centered"] { text-align: center; }
.hero-tint[data-home-template="centered"] { align-items: center; }
.hero[data-home-template="centered"] .hero-eyebrow { align-self: center; }
.hero[data-home-template="centered"] .hero-tagline { margin-left: auto; margin-right: auto; }
.hero[data-home-template="centered"] .hero-actions { justify-content: center; }

@media (min-width: 40rem) {
    .hero-branded[data-home-template="split-image"] {
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        min-height: 20rem;
    }
    .hero-branded[data-home-template="split-image"] .hero-image { position: relative; }
    .hero-branded[data-home-template="split-image"]::after { display: none; }
    .hero-branded[data-home-template="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-template="minimal"] {
    background-image: none;
    border: none;
    padding-left: 0;
    padding-right: 0;
    min-height: auto;
}
.hero[data-home-template="minimal"] .hero-eyebrow { display: none; }
.hero-branded[data-home-template="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: 0.5rem;
    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; }
}

/* ---------------------------------------------------------------------------------------------------------------
   PAGE SCOPE — the same bounded key, applied to the home around the hero.

   Reach, deliberately narrow: the owner's own content blocks (.content-section*, emitted by GuestContentSections and
   styled by content-sections.css — one render, so one rule reaches both surfaces) and the practical-info strip, which
   both twins render as #home-info. The dish strips are left alone: they are utility-composed grids of the tenant's own
   photographs and already read as the restaurant's.

   #home-info is a genuine coupling to host markup and is named here rather than hidden: a surface that renames that id
   loses these rules silently. It is targeted by id rather than by a new class because the id already exists on both
   twins and is what the hours cue links to — adding a hook would have meant editing utility-composed markup on both
   halves for nothing. GuestHomeHeroLayerGuardTests reads the ids out of this sheet and requires each one to exist on
   every guest home, so the coupling cannot rot quietly.

   classic carries no rule: it IS the base treatment above, the one every tenant had before a template could reach past
   the hero, so picking it must change nothing. Every other key must have a rule here — the same guard fails a bounded
   key that reaches the hero only, which is precisely the state this block ends. */

/* centered — the hero's alignment carried down the page: the owner's blocks, their lists and their star rows, and the
   practical-info strip all read on the same centre line instead of resetting to a left column below the fold. */
.home-page[data-home-template="centered"] .content-section { text-align: center; }
.home-page[data-home-template="centered"] .content-section-contact,
.home-page[data-home-template="centered"] .content-section-legal { align-items: center; }
.home-page[data-home-template="centered"] .content-section-list { list-style-position: inside; padding-left: 0; }
.home-page[data-home-template="centered"] .content-section-review-head { justify-content: center; }
.home-page[data-home-template="centered"] .content-section-gallery { justify-content: center; }
.home-page[data-home-template="centered"] #home-info li { justify-content: center; }

/* minimal — chrome off, air on. The blocks separate by a hairline and their own rhythm rather than by boxes, and the
   info strip stops being a tinted card. The first block keeps no rule above it: a line under the hero reads as a
   mistake, not as a separation. */
.home-page[data-home-template="minimal"] .content-section {
    margin: 2.75rem 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--brand-hairline);
}
.home-page[data-home-template="minimal"] .content-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}
.home-page[data-home-template="minimal"] .content-section-gallery-image { border-radius: 0; }
.home-page[data-home-template="minimal"] #home-info {
    background: none;
    border: 0;
    border-top: 1px solid var(--brand-hairline);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* split-image — the hero's two-column composition, continued: on a wide viewport the owner's photographs become a
   mosaic led by one full-width plate, and what guests said runs in two columns instead of one long ribbon. Both are
   width-gated, because two columns of a phone are two half-columns. */
@media (min-width: 48rem) {
    .home-page[data-home-template="split-image"] .content-section-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-page[data-home-template="split-image"] .content-section-gallery-item:first-child {
        grid-column: 1 / -1;
    }
    .home-page[data-home-template="split-image"] .content-section-gallery-item:first-child
        .content-section-gallery-image {
        aspect-ratio: 2 / 1;
    }
    .home-page[data-home-template="split-image"] .content-section-reviews {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 1.5rem;
    }
}