/*! Telaio 1.0.0 · telaio.css · GMC Autoriparazioni (token 1.0.0) · generato il 2026-09-26 · non modificare a mano */
/* ==========================================================================
   Telaio · base — reset leggero, tipografia, focus, struttura Bricks
   --------------------------------------------------------------------------
   Ordine dei layer: bricks (il reset di Bricks) < telaio.* < stili del builder.
   Theme style, classi globali e impostazioni degli elementi di Bricks non
   stanno in nessun layer: vincono sempre sul framework, senza !important.
   Regola: in questi file niente rem scritti a mano (dipendono dalla rem base
   del sito). Si usano i token, em, %, ch.
   ========================================================================== */
@layer bricks, telaio;
@layer telaio.tokens, telaio.base, telaio.layout, telaio.components, telaio.utilities;

@layer telaio.base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-size: var(--root-font-size);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Le ancore non finiscono sotto l'header fisso (WCAG 2.4.11) */
    scroll-padding-block-start: calc(var(--header-height) + var(--space-s));
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background-color: var(--bg-body);
    color: var(--text-color);
    font-family: var(--text-font-family);
    font-size: var(--text-m);
    font-weight: var(--text-font-weight);
    line-height: var(--text-line-height);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Titoli: la gerarchia visiva arriva dai token --h1 … --h6 */
  :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: var(--heading-color);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    text-wrap: balance;
  }
  h1 { font-size: var(--h1); letter-spacing: -0.02em; }
  h2 { font-size: var(--h2); letter-spacing: -0.02em; }
  h3 { font-size: var(--h3); letter-spacing: -0.01em; }
  h4 { font-size: var(--h4); }
  h5 { font-size: var(--h5); }
  h6 { font-size: var(--h6); }

  :where(p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
  p { text-wrap: pretty; }
  :where(strong, b) { font-weight: 700; }
  small { font-size: var(--text-s); }

  a {
    color: inherit;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.18em;
  }

  :where(img, video) { max-width: 100%; height: auto; }

  hr {
    margin: 0;
    border: 0;
    border-block-start: var(--border-width) solid var(--border-color);
  }

  /* I controlli dei form ereditano il font (i browser di default no) */
  :where(button, input, select, textarea) { font: inherit; }

  /* Focus sempre visibile, spesso e con contrasto ≥ 3:1 (WCAG 2.4.7 e 2.4.13) */
  :focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
  }

  ::selection {
    background-color: var(--primary-light);
    color: var(--base-ultra-dark);
  }

  /* ------------------------------------------------------------------------
     Struttura — stessi default di Bricks (section, container, block), così un
     prototipo HTML e la pagina costruita in Bricks si comportano uguale.
     Qui si aggiungono solo i valori dei token.
     ------------------------------------------------------------------------ */
  :where(.brxe-section, .section) {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-block: var(--section-space-m);
    padding-inline: var(--gutter);
    gap: var(--container-gap);
  }
  :where(#brx-header) :where(.brxe-section) { padding-block: var(--space-s); }
  :where(#brx-footer) :where(.brxe-section) { padding-block: var(--section-space-s); }

  :where(.brxe-container, .container) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
    gap: var(--content-gap);
  }

  :where(.brxe-block) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: var(--content-gap);
  }

  /* Rispetta chi ha chiesto meno movimento (WCAG 2.3.3). !important dentro un
     layer vince anche sulle animazioni impostate nel builder: è voluto. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   Telaio · layout — pile, file, griglie
   --------------------------------------------------------------------------
   Le griglie sono intrinseche: si dichiara il numero MASSIMO di colonne e la
   larghezza minima di una colonna; il resto lo decide lo spazio disponibile.
   Niente breakpoint, tranne le griglie asimmetriche (tablet Bricks: 991px).
   ========================================================================== */
@layer bricks, telaio;
@layer telaio.tokens, telaio.base, telaio.layout, telaio.components, telaio.utilities;

@layer telaio.layout {
  /* Contenitori */
  .container--narrow { max-width: var(--content-width-narrow); }
  .container--full { max-width: none; }

  /* Pila verticale con spazio uniforme (come un block di Bricks) */
  .stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--content-gap);
  }

  /* Fila che va a capo: bottoni, badge, loghi */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
  }

  /* Flusso di testo: spazio tra elementi consecutivi, proporzionale al font */
  .flow > * + * { margin-block-start: var(--flow-space); }

  /* Griglie intrinseche: al massimo N colonne, vanno a capo da sole */
  :where(.grid--2, .grid--3, .grid--4, .grid--5, .grid--6) {
    display: grid;
    width: 100%;
    gap: var(--grid-gap);
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        min(100%, max(var(--grid-min), (100% - (var(--grid-cols) - 1) * var(--grid-gap)) / var(--grid-cols))),
        1fr
      )
    );
  }
  .grid--2 { --grid-cols: 2; --grid-min: var(--grid-min-2); }
  .grid--3 { --grid-cols: 3; --grid-min: var(--grid-min-3); }
  .grid--4 { --grid-cols: 4; --grid-min: var(--grid-min-4); }
  .grid--5 { --grid-cols: 5; --grid-min: var(--grid-min-5); }
  .grid--6 { --grid-cols: 6; --grid-min: var(--grid-min-6); }

  /* Quante colonne ci stanno, senza massimo */
  .grid--auto {
    display: grid;
    width: 100%;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, var(--grid-min-3))), 1fr));
  }

  /* Griglie asimmetriche: una colonna su mobile e tablet, due da 992px in su */
  :where(.grid--1-2, .grid--2-1, .grid--1-3, .grid--3-1) {
    display: grid;
    width: 100%;
    gap: var(--grid-gap);
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 992px) {
    .grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .grid--1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
    .grid--3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  }
}

/* ==========================================================================
   Telaio · componenti (BEM: blocco__elemento--modificatore)
   ========================================================================== */
@layer bricks, telaio;
@layer telaio.tokens, telaio.base, telaio.layout, telaio.components, telaio.utilities;

@layer telaio.components {

  /* ---------- Bottoni -------------------------------------------------------
     class="btn btn--primary" (funziona anche solo "btn--primary", come ACSS).
     Colori: primary, secondary, accent, base, light, dark.
     Modificatori: --outline, --s, --l, --block.
     Le variabili --btn-<colore>-* le impostano le superfici (vedi utility):
     su una sezione primary il bottone primary diventa chiaro da solo. */
  :where(.btn, [class^="btn--"], [class*=" btn--"], .brxe-form button[type="submit"]) {
    --btn-bg: var(--btn-primary-bg, var(--primary));
    --btn-fg: var(--btn-primary-fg, var(--on-primary));
    --btn-bg-hover: var(--btn-primary-hover, var(--primary-hover));
    --btn-text: var(--primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: var(--target-size);
    min-width: var(--target-size);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    border: var(--btn-border-width) solid var(--btn-bg);
    border-radius: var(--btn-radius);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--btn-font-family);
    font-size: var(--btn-font-size, var(--text-m));
    font-weight: var(--btn-font-weight);
    letter-spacing: normal;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
  }
  :where(.btn, [class^="btn--"], [class*=" btn--"], .brxe-form button[type="submit"]):hover {
    background-color: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg);
  }
  :where(.btn, [class^="btn--"], [class*=" btn--"]):active { transform: translateY(1px); }
  :where(.btn, [class^="btn--"], [class*=" btn--"]):is(:disabled, [aria-disabled="true"]) {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  .btn--primary {
    --btn-bg: var(--btn-primary-bg, var(--primary));
    --btn-fg: var(--btn-primary-fg, var(--on-primary));
    --btn-bg-hover: var(--btn-primary-hover, var(--primary-hover));
    --btn-text: var(--primary-text);
  }
  .btn--secondary {
    --btn-bg: var(--btn-secondary-bg, var(--secondary));
    --btn-fg: var(--btn-secondary-fg, var(--on-secondary));
    --btn-bg-hover: var(--btn-secondary-hover, var(--secondary-hover));
    --btn-text: var(--secondary-text);
  }
  .btn--accent {
    --btn-bg: var(--btn-accent-bg, var(--accent));
    --btn-fg: var(--btn-accent-fg, var(--on-accent));
    --btn-bg-hover: var(--btn-accent-hover, var(--accent-hover));
    --btn-text: var(--accent-text);
  }
  .btn--base {
    --btn-bg: var(--btn-base-bg, var(--base));
    --btn-fg: var(--btn-base-fg, var(--on-base));
    --btn-bg-hover: var(--btn-base-hover, var(--base-hover));
    --btn-text: var(--base-text);
  }
  .btn--dark {
    --btn-bg: var(--btn-dark-bg, var(--base-ultra-dark));
    --btn-fg: var(--btn-dark-fg, var(--white));
    --btn-bg-hover: var(--btn-dark-hover, var(--base-dark));
    --btn-text: var(--base-ultra-dark);
  }
  .btn--light {
    --btn-bg: var(--white);
    --btn-fg: var(--base-ultra-dark);
    --btn-bg-hover: var(--base-ultra-light);
    --btn-text: var(--white);
  }

  .btn--outline {
    background-color: transparent;
    border-color: currentColor;
    color: var(--btn-outline-fg, var(--btn-text));
  }
  .btn--outline:hover {
    background-color: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
  }

  .btn--s {
    --btn-font-size: var(--text-s);
    min-height: calc(var(--target-size) * 0.8);
    padding: 0.5em 1em;
  }
  .btn--l {
    --btn-font-size: var(--text-l);
    padding: 0.85em 1.75em;
  }
  .btn--block { width: 100%; }

  /* ---------- Card ---------------------------------------------------------- */
  .card {
    --card-padding: var(--space-l);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: var(--card-padding);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--card-radius, var(--radius-l));
    background-color: var(--card-bg, var(--white));
  }
  .card__media {
    margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) var(--space-xs);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--card-radius, var(--radius-l)) var(--card-radius, var(--radius-l)) 0 0;
  }
  .card__media img { width: 100%; height: 100%; object-fit: cover; }
  .card__title { font-size: var(--h4); }
  .card__text { color: var(--text-color-muted); }
  .card__footer { margin-block-start: auto; padding-block-start: var(--space-xs); }
  .card--elevated { border-color: transparent; box-shadow: var(--shadow-m); }
  .card--flat { border-color: transparent; --card-bg: var(--base-ultra-light); }
  .card--interactive { transition: var(--transition); }
  .card--interactive:hover { box-shadow: var(--shadow-l); transform: translateY(-2px); }

  /* ---------- Testata di sezione (sopratitolo + titolo + introduzione) ------- */
  .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    max-width: var(--section-header-width);
  }
  .section-header--center { align-items: center; margin-inline: auto; text-align: center; }
  .section-header__lead { font-size: var(--text-l); color: var(--text-color-muted); }

  .eyebrow {
    color: var(--eyebrow-color, var(--link-color));
    font-size: var(--text-s);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  /* ---------- Badge --------------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.75em;
    border-radius: var(--radius-pill);
    background-color: var(--badge-bg, var(--primary-ultra-light));
    color: var(--badge-fg, var(--primary-ultra-dark));
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
  }
  .badge--secondary { --badge-bg: var(--secondary-ultra-light); --badge-fg: var(--secondary-ultra-dark); }
  .badge--accent { --badge-bg: var(--accent-ultra-light); --badge-fg: var(--accent-ultra-dark); }
  .badge--success { --badge-bg: var(--success-ultra-light); --badge-fg: var(--success-ultra-dark); }
  .badge--warning { --badge-bg: var(--warning-ultra-light); --badge-fg: var(--warning-ultra-dark); }
  .badge--danger { --badge-bg: var(--danger-ultra-light); --badge-fg: var(--danger-ultra-dark); }

  /* ---------- Icon box (vantaggi, servizi) ---------------------------------- */
  .icon-box { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-s); }
  .icon-box--row { flex-direction: row; }
  .icon-box__icon {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.75em;
    height: 2.75em;
    border-radius: var(--radius-m);
    background-color: var(--primary-ultra-light);
    color: var(--primary-text);
    font-size: var(--text-l);
  }
  .icon-box__icon :where(svg, i) { width: 1.25em; height: 1.25em; font-size: 1.25em; }
  .icon-box__title { font-size: var(--h5); }
  .icon-box__text { color: var(--text-color-muted); }

  /* ---------- Numeri ---------------------------------------------------------- */
  .stat { display: flex; flex-direction: column; gap: var(--space-xxs); }
  .stat__value {
    color: var(--heading-color);
    font-family: var(--heading-font-family);
    font-size: var(--h2);
    font-weight: var(--heading-font-weight);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .stat__label { color: var(--text-color-muted); font-size: var(--text-s); }

  /* ---------- Testimonianza ---------------------------------------------------- */
  .testimonial { display: flex; flex-direction: column; gap: var(--space-m); }
  .testimonial__quote { font-size: var(--text-l); line-height: 1.5; }
  .testimonial__author { display: flex; align-items: center; gap: var(--space-s); }
  .testimonial__avatar { width: 3em; height: 3em; border-radius: 50%; object-fit: cover; }
  .testimonial__name { color: var(--heading-color); font-weight: 700; }
  .testimonial__role { color: var(--text-color-muted); font-size: var(--text-s); }

  /* ---------- FAQ (details/summary: accessibile senza JavaScript) ------------- */
  .faq { display: flex; flex-direction: column; width: 100%; border-block-start: var(--border-width) solid var(--border-color); }
  .faq__item { border-block-end: var(--border-width) solid var(--border-color); }
  .faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    min-height: var(--target-size);
    padding-block: var(--space-s);
    color: var(--heading-color);
    font-size: var(--text-l);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }
  .faq__question::-webkit-details-marker { display: none; }
  .faq__question::after {
    content: "";
    flex-shrink: 0;
    width: 0.55em;
    height: 0.55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--transition-duration) var(--transition-timing);
  }
  .faq__item[open] > .faq__question::after { transform: translateY(25%) rotate(-135deg); }
  .faq__answer { padding-block-end: var(--space-m); color: var(--text-color-muted); max-width: var(--text-max-width); }

  /* ---------- Elenco con spunte ------------------------------------------------ */
  .list--check { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
  .list--check > li { display: grid; grid-template-columns: 1.25em 1fr; gap: 0.6em; align-items: start; }
  .list--check > li::before {
    content: "";
    width: 1.25em;
    height: 1.25em;
    margin-block-start: 0.15em;
    background-color: var(--list-icon-color, var(--primary-text));
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
  }

  /* ---------- Testo ricco (editor WP, campi ACF, rich text Bricks) ------------- */
  .prose { max-width: var(--text-max-width); }
  :where(.prose, .brxe-text, .brxe-post-content) > * + * { margin-block-start: var(--flow-space); }
  :where(.prose, .brxe-text, .brxe-post-content) > :where(h2, h3, h4, h5, h6) { margin-block-start: 1.75em; }
  :where(.prose, .brxe-text, .brxe-post-content) > :where(h2, h3, h4, h5, h6) + * { margin-block-start: 0.6em; }
  :where(.prose, .brxe-text, .brxe-post-content) :where(ul, ol) { padding-inline-start: 1.25em; }
  :where(.prose, .brxe-text, .brxe-post-content) :where(li + li) { margin-block-start: 0.4em; }
  :where(.prose, .brxe-text, .brxe-post-content) a:not([class]) { color: var(--link-color); text-decoration: underline; }
  :where(.prose, .brxe-text, .brxe-post-content) a:not([class]):hover { color: var(--link-color-hover); text-decoration-thickness: 2px; }
  :where(.prose, .brxe-text, .brxe-post-content) blockquote {
    padding-inline-start: var(--space-m);
    border-inline-start: 3px solid var(--primary);
    font-size: var(--text-l);
  }
  :where(.prose, .brxe-post-content) img { border-radius: var(--radius-m); }

  /* ---------- Campi dei form (nativi e form di Bricks) -------------------------- */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="hidden"], [type="color"]), select, textarea) {
    width: 100%;
    min-height: var(--target-size);
    padding: 0.625em 0.875em;
    border: var(--border-width) solid var(--input-border-color);
    border-radius: var(--input-radius);
    background-color: var(--white);
    color: var(--light-text-color);
    line-height: 1.4;
    transition: var(--transition);
  }
  :where(textarea) { min-height: 8em; resize: vertical; }
  ::placeholder { color: var(--light-text-color-muted); opacity: 1; }
  :where(input, select, textarea):focus-visible { border-color: var(--light-focus-color); }
  :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--danger); }
  :where(input[type="checkbox"], input[type="radio"]) { width: 1.25em; height: 1.25em; accent-color: var(--primary); }

  .field { display: flex; flex-direction: column; gap: var(--space-xxs); width: 100%; }
  :where(.field__label, .brxe-form label) { color: var(--heading-color); font-size: var(--text-s); font-weight: 600; }
  .field__hint { color: var(--text-color-muted); font-size: var(--text-s); }
  .field__error { color: var(--danger-text); font-size: var(--text-s); }
}

/* ==========================================================================
   Telaio · utility — ultimo layer: vincono sui componenti
   --------------------------------------------------------------------------
   Convenzione nomi: "--" quando c'è un valore di scala o una variante
   (.text--l, .gap--m, .bg--dark); "-" per le proprietà fisse (.text-center).
   ========================================================================== */
@layer bricks, telaio;
@layer telaio.tokens, telaio.base, telaio.layout, telaio.components, telaio.utilities;

@layer telaio.utilities {

  /* ---------- Testo ---------------------------------------------------------- */
  .text--xs { font-size: var(--text-xs); }
  .text--s { font-size: var(--text-s); }
  .text--m { font-size: var(--text-m); }
  .text--l { font-size: var(--text-l); }
  .text--xl { font-size: var(--text-xl); }
  .text--xxl { font-size: var(--text-xxl); }

  /* Aspetto da titolo senza cambiare tag: la semantica resta giusta (SEO, screen reader) */
  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--heading-color);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    line-height: var(--heading-line-height);
    text-wrap: balance;
  }
  .h1 { font-size: var(--h1); letter-spacing: -0.02em; }
  .h2 { font-size: var(--h2); letter-spacing: -0.02em; }
  .h3 { font-size: var(--h3); letter-spacing: -0.01em; }
  .h4 { font-size: var(--h4); letter-spacing: normal; }
  .h5 { font-size: var(--h5); letter-spacing: normal; }
  .h6 { font-size: var(--h6); letter-spacing: normal; }

  .text-center { text-align: center; }
  .text-left { text-align: start; }
  .text-right { text-align: end; }
  .text-balance { text-wrap: balance; }
  .text-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
  .text--muted { color: var(--text-color-muted); }
  /* Solo su superfici chiare: sono le versioni dei colori con contrasto ≥ 4,5:1 sul bianco */
  .text--primary { color: var(--primary-text); }
  .text--accent { color: var(--accent-text); }

  .max-width--text { max-width: var(--text-max-width); }
  .max-width--narrow { max-width: var(--content-width-narrow); }
  .margin-auto { margin-inline: auto; }
  .width--full { width: 100%; }
  .list--none { margin: 0; padding: 0; list-style: none; }

  /* ---------- Flex e allineamenti (nomi del profilo ACSS della CLI Bricks) --- */
  .flex-center { display: flex; align-items: center; justify-content: center; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-grow { flex-grow: 1; }
  .align-start { align-items: flex-start; }
  .align-center { align-items: center; }
  .align-end { align-items: flex-end; }
  .align-stretch { align-items: stretch; }
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }

  /* ---------- Spazi (il gap aggiorna anche il calcolo delle griglie) --------- */
  .gap--none { gap: 0; --grid-gap: 0px; }
  .gap--xxs { gap: var(--space-xxs); --grid-gap: var(--space-xxs); }
  .gap--xs { gap: var(--space-xs); --grid-gap: var(--space-xs); }
  .gap--s { gap: var(--space-s); --grid-gap: var(--space-s); }
  .gap--m { gap: var(--space-m); --grid-gap: var(--space-m); }
  .gap--l { gap: var(--space-l); --grid-gap: var(--space-l); }
  .gap--xl { gap: var(--space-xl); --grid-gap: var(--space-xl); }
  .gap--xxl { gap: var(--space-xxl); --grid-gap: var(--space-xxl); }

  .pad--none { padding: 0; }
  .pad--xs { padding: var(--space-xs); }
  .pad--s { padding: var(--space-s); }
  .pad--m { padding: var(--space-m); }
  .pad--l { padding: var(--space-l); }
  .pad--xl { padding: var(--space-xl); }

  .pad-section--none { padding-block: 0; }
  .pad-section--xs { padding-block: var(--section-space-xs); }
  .pad-section--s { padding-block: var(--section-space-s); }
  .pad-section--m { padding-block: var(--section-space-m); }
  .pad-section--l { padding-block: var(--section-space-l); }
  .pad-section--xl { padding-block: var(--section-space-xl); }
  .pad-section--xxl { padding-block: var(--section-space-xxl); }

  /* ---------- Superfici ------------------------------------------------------ */
  .bg--white { background-color: var(--white); }
  .bg--ultra-light { background-color: var(--bg-ultra-light); }
  .bg--light { background-color: var(--bg-light); --link-color: var(--light-link-color-strong); }
  .bg--dark { background-color: var(--bg-dark); }
  .bg--ultra-dark { background-color: var(--bg-ultra-dark); }
  .bg--primary { background-color: var(--primary); }
  .bg--secondary { background-color: var(--secondary); }
  .bg--accent { background-color: var(--accent); }

  /* Contesto chiaro: ripristina i colori, anche dentro una sezione scura.
     :where() = specificità zero, così un contesto scuro esplicito vince sempre. */
  :where(.card, .bg--white, .bg--ultra-light, .bg--light) {
    --text-color: var(--light-text-color);
    --text-color-muted: var(--light-text-color-muted);
    --heading-color: var(--light-heading-color);
    --link-color: var(--light-link-color);
    --link-color-hover: var(--light-link-color-hover);
    --focus-color: var(--light-focus-color);
    --border-color: var(--light-border-color);
    --btn-outline-fg: initial;
    --btn-primary-bg: initial;
    --btn-primary-fg: initial;
    --btn-primary-hover: initial;
    --btn-secondary-bg: initial;
    --btn-secondary-fg: initial;
    --btn-secondary-hover: initial;
    --btn-accent-bg: initial;
    --btn-accent-fg: initial;
    --btn-accent-hover: initial;
    --btn-base-bg: initial;
    --btn-base-fg: initial;
    --btn-base-hover: initial;
    --btn-dark-bg: initial;
    --btn-dark-fg: initial;
    --btn-dark-hover: initial;
    color: var(--text-color);
  }

  /* Contesto scuro: testi, titoli, link, focus e bottoni scuri si adattano da soli */
  .bg--dark, .bg--ultra-dark {
    --text-color: var(--dark-text-color);
    --text-color-muted: var(--dark-text-color-muted);
    --heading-color: var(--dark-heading-color);
    --link-color: var(--dark-link-color);
    --link-color-hover: var(--dark-link-color-hover);
    --focus-color: var(--dark-focus-color);
    --border-color: var(--dark-border-color);
    --btn-outline-fg: var(--dark-heading-color);
    --btn-base-bg: var(--white);
    --btn-base-fg: var(--base-ultra-dark);
    --btn-base-hover: var(--base-ultra-light);
    --btn-dark-bg: var(--white);
    --btn-dark-fg: var(--base-ultra-dark);
    --btn-dark-hover: var(--base-ultra-light);
    color: var(--text-color);
  }

  /* Superfici di brand: il testo usa il colore "on" calcolato dal build per il contrasto */
  .bg--primary {
    --text-color: var(--on-primary);
    --text-color-muted: var(--on-primary);
    --heading-color: var(--on-primary);
    --link-color: var(--on-primary);
    --link-color-hover: var(--on-primary);
    --focus-color: var(--on-primary);
    --border-color: color-mix(in oklch, var(--on-primary) 30%, transparent);
    --btn-outline-fg: var(--on-primary);
    --btn-primary-bg: var(--white);
    --btn-primary-fg: var(--primary-text);
    --btn-primary-hover: var(--primary-ultra-light);
    color: var(--text-color);
  }
  .bg--secondary {
    --text-color: var(--on-secondary);
    --text-color-muted: var(--on-secondary);
    --heading-color: var(--on-secondary);
    --link-color: var(--on-secondary);
    --link-color-hover: var(--on-secondary);
    --focus-color: var(--on-secondary);
    --border-color: color-mix(in oklch, var(--on-secondary) 30%, transparent);
    --btn-outline-fg: var(--on-secondary);
    --btn-secondary-bg: var(--white);
    --btn-secondary-fg: var(--secondary-text);
    --btn-secondary-hover: var(--secondary-ultra-light);
    color: var(--text-color);
  }
  .bg--accent {
    --text-color: var(--on-accent);
    --text-color-muted: var(--on-accent);
    --heading-color: var(--on-accent);
    --link-color: var(--on-accent);
    --link-color-hover: var(--on-accent);
    --focus-color: var(--on-accent);
    --border-color: color-mix(in oklch, var(--on-accent) 30%, transparent);
    --btn-outline-fg: var(--on-accent);
    --btn-accent-bg: var(--white);
    --btn-accent-fg: var(--accent-text);
    --btn-accent-hover: var(--accent-ultra-light);
    color: var(--text-color);
  }

  /* ---------- Forma ---------------------------------------------------------- */
  .radius--none { border-radius: 0; }
  .radius--s { border-radius: var(--radius-s); }
  .radius--m { border-radius: var(--radius-m); }
  .radius--l { border-radius: var(--radius-l); }
  .radius--xl { border-radius: var(--radius-xl); }
  .radius--pill { border-radius: var(--radius-pill); }
  .radius--circle { border-radius: 50%; }

  .shadow--none { box-shadow: none; }
  .shadow--s { box-shadow: var(--shadow-s); }
  .shadow--m { box-shadow: var(--shadow-m); }
  .shadow--l { box-shadow: var(--shadow-l); }

  /* ---------- Media: proporzioni fisse = niente salti di layout (CLS) ---------- */
  .ratio--1-1 { aspect-ratio: 1 / 1; }
  .ratio--4-3 { aspect-ratio: 4 / 3; }
  .ratio--3-2 { aspect-ratio: 3 / 2; }
  .ratio--16-9 { aspect-ratio: 16 / 9; }
  .ratio--21-9 { aspect-ratio: 21 / 9; }
  .ratio--3-4 { aspect-ratio: 3 / 4; }
  .object-cover { width: 100%; height: 100%; object-fit: cover; }
  .object-contain { width: 100%; height: 100%; object-fit: contain; }

  /* ---------- Accessibilità ---------------------------------------------------- */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Tutta la card cliccabile con un solo link (niente link annidati, un solo stop di tab).
     Il contenitore deve avere position: relative (la .card ce l'ha già). */
  .clickable-parent { text-decoration: none; }
  .clickable-parent::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .clickable-parent:focus-visible { outline: none; }
  .clickable-parent:focus-visible::after {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
  }
}