/*
  Institutional pages (FAQ, process, shipping, care, privacy, terms, returns).

  These are read, not browsed: a branded editorial header over a narrow, generously-led reading
  column. They use the same eyebrow/rule/measure vocabulary as the rest of the site so a legal page
  still reads as Ceramigeek rather than as a bare document dump.
*/

.institutional {
    display: grid;
    gap: var(--space-xl);
    max-inline-size: calc(var(--container-narrow) + var(--container-pad) * 2);
    padding-block: var(--section-gap-tight) var(--section-gap);
}

.institutional__header {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
}

/* The maker's mark — the same red rule that opens every section elsewhere on the site. */
.institutional__header::before {
    content: "";
    inline-size: 3.5rem;
    block-size: 3px;
    background: var(--color-accent);
}

.institutional__header h1 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-display);
    margin: 0;
}

.institutional__body {
    display: grid;
    gap: var(--space-lg);
}

.institutional__body p {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-ink);
    margin: 0;
    max-inline-size: none;
}

/* A pending legal review is stated plainly rather than hidden — the page must never imply that
   unreviewed terms are final. */
.institutional__notice {
    padding: var(--space-md) var(--space-lg);
    border-inline-start: 3px solid var(--color-accent);
    background: var(--color-surface-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-ink-muted);
    font-size: var(--text-sm);
}

.institutional__notice p { margin: 0; max-inline-size: none; }

/* ---- FAQ ----------------------------------------------------------------------------------------
   Twenty numbered pairs with real space between them. The complaint this answers (PPT slide 6) was
   not that the answers were wrong but that they ran together — so the work here is entirely rhythm:
   a visible number, a question that reads as a heading, and enough air between entries that the eye
   can find the next one. No accordion: with twenty short entries, hiding the answers behind clicks
   costs more than it saves, and open text is searchable with the browser's own find. */

.faq {
    list-style: none;
    counter-reset: faq;
    margin: var(--space-2xl) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-xl);
    max-inline-size: 68ch;
}

.faq__item {
    counter-increment: faq;
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 var(--space-sm);
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--color-border);
}

.faq__item:last-child { border-block-end: 0; }

/* The number is generated, so renumbering is automatic when the owner fills a gap — she never has to
   retype "7." into a question because entry 6 was left blank. */
.faq__item::before {
    content: counter(faq) ".";
    grid-row: 1 / span 2;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-accent);
}

.faq__question {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-lg);
    line-height: 1.3;
}

.faq__answer { margin: 0; }
.faq__answer > * + * { margin-block-start: var(--space-sm); }

@media (max-width: 40rem) {
    /* On a phone the number sits above rather than stealing a column from the text. */
    .faq__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
    .faq__item::before { grid-row: auto; }
}

/* =========================================================================
   REDESIGN LAYER — the title on a dark kiln-floor card, the FAQ as numbered cards
   The FAQ stays open text (the owner's rule above: no accordion); only its rhythm changes.
   ========================================================================= */
.institutional { max-inline-size: calc(var(--container-narrow) + 12rem + var(--container-pad) * 2); }

.institutional__header {
    position: relative;
    padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
    border: 0;
    border-radius: var(--radius-2xl);
    background: var(--cg-black);
    overflow: hidden;
}

.institutional__header::before { background: var(--heat-gradient); position: relative; z-index: 1; }

.institutional__header h1 {
    font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.2rem);
    font-stretch: 114%;
    font-weight: 900;
    line-height: 0.96;
    color: var(--color-on-deep-strong);
}

.institutional--faq .faq { gap: var(--space-md); }

.institutional--faq .faq__item {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition-slow);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .institutional--faq .faq__item:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--kiln-ember) 40%, transparent);
        box-shadow: 0 26px 50px -40px var(--kiln-glow);
    }
}

.institutional--faq .faq__item::before {
    content: counter(faq, decimal-leading-zero);
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-black);
    line-height: 1.1;
    color: var(--cg-red);
}