/* 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; }
/* The block holds the week component now, not a paragraph of prose, so it no longer honours the owner's newlines. */
.content-section-hours { color: var(--ink); margin: 0; }
.content-section-contact { color: var(--ink); margin: 0; font-style: normal; display: flex; flex-direction: column; gap: 0.25rem; }
/* A phone number and an address are taps, not prose: the contact block's lines are held to the 44px floor here
   rather than by a utility, because this component's markup is in neither surface's Tailwind ledger and a utility
   would live only as long as some scanned file elsewhere happened to use it too. */
.content-section-contact-line {
    color: inherit;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.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); }
}

/* The ratio is reserved before the tiles arrive, so nothing moves under a thumb. */
.content-section-map {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--brand-hairline);
    border-radius: var(--radius-lg);
    background: var(--brand-band);
}

@container (min-width: 34rem) {
    .content-section-map { aspect-ratio: 3 / 2; }
}

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

[data-theme="dark"] .content-section-map-frame { filter: invert(0.9) hue-rotate(180deg) saturate(0.8) brightness(0.95); }