/*
 * AAMV design system: base (DESIGN_SYSTEM.md §3).
 * Body, typography, links, layout primitives (.a-container, .a-section, .a-grid, .a-stack), tones, utilities.
 */

/* ---------- Body and typography ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--a-paper);
    color: var(--a-ink);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-base);
    line-height: var(--a-lh);
    overflow-x: clip;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    margin: 0 0 .5em;
    color: var(--a-ink);
    font-family: var(--a-font-display);
    letter-spacing: 0;
}
h1, .h1 { font-size: var(--a-fs-h1); font-weight: 800; line-height: 1.06; }
h2, .h2 { font-size: var(--a-fs-h2); font-weight: 800; line-height: 1.1; }
h3, .h3 { font-size: var(--a-fs-h3); font-weight: 700; line-height: 1.15; }
h4, .h4 { font-size: var(--a-fs-h4); font-weight: 700; line-height: 1.2; }
h5, h6, .h5, .h6 { color: var(--a-ink); font-family: var(--a-font-body); font-weight: 800; }

p { margin: 0 0 1em; }

/*
 * Line breaks: titles balanced (no word alone on the last line), running text without orphans.
 * Browsers without text-wrap keep the usual breaks.
 */
h1, h2, h3, h4, .a-band__title, .a-card__title, .a-callout__title, .a-section-title, .a-row__title { text-wrap: balance; }
p, li, .a-band__lead, .a-card__text { text-wrap: pretty; }
b, strong { font-weight: 800; }
small, .small { font-size: var(--a-fs-small); }

a { color: var(--a-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--a-coral); }

:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }

::selection { background: var(--a-sun-soft); color: var(--a-ink); }

/* ---------- Tones: one set of custom properties, used by every colored component ---------- */
.is-sun   { --tone: var(--a-sun);   --tone-soft: var(--a-sun-soft);   --tone-ink: var(--a-sun-ink);   --tone-text: var(--a-sun-ink); }
.is-coral { --tone: var(--a-coral); --tone-soft: var(--a-coral-soft); --tone-ink: var(--a-coral-ink); --tone-text: var(--a-coral); }
.is-sky   { --tone: var(--a-sky);   --tone-soft: var(--a-sky-soft);   --tone-ink: var(--a-sky-ink);   --tone-text: var(--a-sky); }
.is-leaf  { --tone: var(--a-leaf);  --tone-soft: var(--a-leaf-soft);  --tone-ink: var(--a-leaf-ink);  --tone-text: var(--a-leaf); }

/* ---------- Layout primitives ---------- */
.a-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--a-container) + 2 * var(--a-container-pad));
    margin-inline: auto;
    padding-inline: var(--a-container-pad);
}

.a-section { padding-top: var(--a-section); }
.a-section--last, main > .a-section:last-child { padding-bottom: var(--a-section); }

.a-grid {
    display: grid;
    gap: var(--a-gutter);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}
.a-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/*
 * 7/5 and 8/4: children alternate spans on a 12-column grid (proportions include the gutters).
 * "Content + side box" grids: each column keeps its own height (no card stretched with an empty bottom);
 * stretching is kept for the rows of similar cards (--2, --3, --4).
 */
.a-grid--7-5, .a-grid--8-4 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.a-grid--7-5 > :nth-child(odd)  { grid-column: span 7; }
.a-grid--7-5 > :nth-child(even) { grid-column: span 5; }
.a-grid--8-4 > :nth-child(odd)  { grid-column: span 8; }
.a-grid--8-4 > :nth-child(even) { grid-column: span 4; }

/* Side column of fixed width (filters) and main column */
.a-grid--aside { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }

@media (max-width: 991.98px) {
    .a-grid--aside { grid-template-columns: minmax(0, 1fr); }
    .a-grid--3, .a-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a-grid--2, .a-grid--7-5, .a-grid--8-4 { grid-template-columns: minmax(0, 1fr); }
    .a-grid--7-5 > :nth-child(n), .a-grid--8-4 > :nth-child(n) { grid-column: auto; }
}
@media (max-width: 767.98px) {
    .a-grid--3, .a-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.a-stack { display: flex; flex-direction: column; gap: 16px; }
.a-stack--sm { gap: 8px; }
.a-stack--lg { gap: 24px; }
.a-stack > * { margin: 0; }

/* ---------- Utilities ---------- */
.a-lead { font-size: var(--a-fs-lead); color: var(--a-ink-2); }
.a-muted { color: var(--a-muted); }
.a-text-small { font-size: var(--a-fs-small); }

/*
 * Comfortable line length (60 to 75 characters) for the running text of the content pages: on the text
 * column, or on a text card (its padding and border added to the measure).
 */
.a-measure { max-width: var(--a-measure); }
.a-card.a-measure { max-width: calc(var(--a-measure) + 2 * (var(--a-pad-card) + var(--a-border))); }

/* Rich text (news, ads): sanitized HTML from the editor */
.a-prose > :last-child { margin-bottom: 0; }
.a-prose ul, .a-prose ol { padding-left: 1.4em; margin: 0 0 1em; }
/* Text card: the card's gap spaces its blocks, the margins would add to it */
.a-card.a-prose > * { margin: 0; }
/* Lists of a card or of a list styled as prose: the bullet indent of the text, not Bootstrap's 2rem */
ul.a-prose, ol.a-prose, .a-card :is(ul, ol):not([class]) { padding-left: 1.4em; }
.a-prose li + li { margin-top: .25em; }
.a-prose a { color: var(--a-coral-ink); font-weight: 700; }
.a-prose blockquote { margin: 0 0 1em; padding: 12px 20px; border-left: 4px solid var(--a-sun); background: var(--a-sun-soft); border-radius: 0 var(--a-radius-tile) var(--a-radius-tile) 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}