/* The bounded content blocks GuestContentSections.razor emits, shipped from the library that emits them and served as
   _content/Ardoise.Presentation.Guest.Shared/content-sections.css to every surface that renders it: the Menu app, the
   Showcase vitrine and the Dashboard composer preview.

   One render, one stylesheet. Two host copies drifted the moment there were two, measured at #2790, the Showcase
   shipped no .content-section-legal rule at all, so the tenant's legal identity, SIRET and alcohol-licence reminder
   rendered at body size and colour on the vitrine while reading correctly on the ordering app.

   The HEADING is deliberately absent: it arrives as the component's HeadingClass parameter, so each host styles its own
   (the Menu composes utilities, the Showcase uses .content-section-title, the composer .composer-preview-title).

   No :root block here, and no token DEFINITIONS. The tokens read below belong to the consuming host's own theme layer;
   declaring them would override the guest hosts' dark theme and, in the Dashboard, repaint the staff chrome. */

.content-section { margin: var(--guest-section-gap) 0; }

/* The body no longer needs white-space: pre-line, the render emits a paragraph per paragraph and a <br> per line
   break, so the breaks are elements rather than characters CSS has to preserve. Keeping pre-line here would also make
   the render's own indentation visible the moment a paragraph holds more than one text node. */
/* The owner's alignment reaches PROSE and nothing else: a page-wide rule reached form labels, the cart lines and
   the text a guest types into a field. Unset, the token is `initial`, which is what every page rendered before. */
.content-section-body { color: var(--ink); margin: 0 0 0.75rem; text-align: var(--brand-align, initial); }
.content-section-body:last-child { margin-bottom: 0; }
.content-section-list { color: var(--ink); margin: 0 0 0.75rem; padding-left: 1.25rem; list-style: disc outside; text-align: var(--brand-align, initial); }
.content-section-list:last-child { margin-bottom: 0; }
.content-section-list-item { margin: 0.25rem 0; }
/* Underlined, not coloured: the link is distinguishable without relying on colour (WCAG 2.2), and it inherits the
   host's ink so a tenant brand or the dark theme carries it. */
.content-section-link { color: inherit; text-decoration: underline; }
.content-section-legal { color: var(--ink); margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.content-section-legal-line { color: var(--muted); font-size: 0.875rem; margin: 0; }
.content-section-faq { margin: 0; color: var(--ink); }
.content-section-faq-question { font-weight: 600; margin: 0.75rem 0 0.25rem; }
.content-section-faq-answer { margin: 0; }
/* A bounded grid, never a carousel: no script ships with these blocks, and a row that scrolls sideways hides half the
   photos from a keyboard. auto-fill keeps a two-photo gallery from stretching into two half-page frames. */
.content-section-gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}
.content-section-gallery-item { margin: 0; }
/* Fixed aspect + cover so photographs of different shapes still read as one grid rather than a ragged column. */
.content-section-gallery-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--brand-band);
}

.content-section-reviews {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.content-section-review { color: var(--ink); margin: 0; }
.content-section-review-head {
    margin: 0 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.content-section-review-author { font-weight: 600; }
/* The accent inked for body-size text (contrast-gated by BrandKitResolver), never the raw brand accent. */
.content-section-review-stars { color: var(--brand-accent-ink); white-space: nowrap; }
.content-section-review-comment { margin: 0; color: var(--ink); }

.content-section-cta {
    display: inline-block;
    background: var(--brand-primary-raised);
    color: var(--brand-on-primary);
    border-radius: var(--radius-md);
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    font-weight: 600;
}

/* Blocks lay themselves out by the room they have, not by a setting the owner has to think about: a set of questions
   or reviews takes a second column where the block is wide enough for one, and falls back to a single column on a
   phone. auto-fit with a minimum keeps that decision in one line and needs nothing stored.

   The query is on the BLOCK's own width, not the window's, so the console's preview frame answers the same as the
   device it is imitating. Prose stays one column at any width: a measure wider than about 75 characters is harder to
   read, and the page box already holds it under that. */
.content-section { container-type: inline-size; }

.content-section-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--guest-block-gap);
}

@container (min-width: 34rem) {
    /* auto-fit unless the owner capped it: --brand-columns is only set when they chose a number. The capped
       token is read here, because three 16rem tracks need 48rem and this query only promises 34rem: a third
       column in that band overflowed the block sideways. */
    .content-section-reviews {
        grid-template-columns: repeat(var(--brand-columns-md, 2), minmax(16rem, 1fr));
    }

    /* The FAQ is a <dl>: its question and answer are one pair, so it sets in COLUMNS of flow rather than a grid,
       which would separate a question from its answer. */
    .content-section-faq {
        columns: var(--brand-columns-md, 2);
        column-gap: var(--space-6);
    }

    .content-section-faq > .content-section-faq-question { break-after: avoid; }
    .content-section-faq > .content-section-faq-answer { break-before: avoid; break-inside: avoid; }
}

@container (min-width: 48rem) {
    /* Where three tracks genuinely fit, the owner's third column arrives. */
    .content-section-reviews {
        grid-template-columns: repeat(var(--brand-columns, auto-fit), minmax(16rem, 1fr));
    }

    .content-section-faq { columns: var(--brand-columns, 2); }
}

/* An extract of the carte, and the booking invitation: two blocks whose content is READ at render, so their rules
   live here beside the rest of the bounded set rather than in one host's Tailwind ledger. A guest surface and the
   composer preview draw the same markup, so a rule here is the only place either of them can get it. */
.content-section-extract > h2 { margin-top: var(--space-6); }
.content-section-extract > h2:first-child { margin-top: 0; }
/* The display face is the library's own claim, not the host's heading class: the extract ships on three surfaces and
   a brand face that arrived only through whichever class the host passed would be one host's accident. */
.content-section-extract-title {
    font-family: var(--brand-font);
    letter-spacing: var(--brand-display-spacing);
}

/* Today's pick reads as today: the accent rail is the only thing separating it from the permanent signatures. */
.content-section-extract-today {
    padding-left: 0.9rem;
    border-left: 3px solid var(--brand-accent);
    color: var(--brand-ink-accent);
}

.content-section-dishes {
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@container (min-width: 34rem) {
    .content-section-dishes { grid-template-columns: repeat(var(--brand-columns-md, 2), minmax(0, 1fr)); gap: 0.75rem; }
}

@container (min-width: 48rem) {
    .content-section-dishes { grid-template-columns: repeat(var(--brand-columns, 3), minmax(0, 1fr)); }
}

.content-section-dish { margin: 0; }

.content-section-dish-link {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    background: var(--brand-tint);
    border: 1px solid var(--muted);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
}

.content-section-dish-link:hover { border-color: var(--brand-accent); }

.content-section-dish-photo {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--brand-band);
}

.content-section-dish-name { flex: 1; min-width: 0; font-weight: 600; }
/* Money is amber ink, and the accent inked for body-size text, never the raw brand accent. */
.content-section-dish-price { white-space: nowrap; font-weight: 600; color: var(--brand-ink-accent); }

.content-section-invite {
    padding: 1.5rem 1.25rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-hairline);
    border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius-lg);
}

.content-section-invite > h2 { margin-top: 0; }
.content-section-invite-body { margin: 0 0 1rem; color: var(--muted); }
/* The vitrine's touch floor is 48px and the block's own call to action is a link, so it is held here rather than by
   whichever host happens to ship a utility of that height. */
.content-section-invite > .content-section-cta { min-height: 48px; display: inline-flex; align-items: center; }