/* Shared, opt-in introduction for the two definitive editions.

   Le dimensioni qui passano tutte dalla scala a token (--fs-*, --lh-*). Non
   rimettere rem hardcoded: erano la ragione degli unici dieci elementi sotto
   i 12px rimasti sulla pagina, e soprattutto non ereditavano il blocco
   mobile dei token, dove la scala si accorcia invece di rimpicciolirsi. */
@layer components {
  .growth-primer { scroll-margin-top: 96px; }
  .growth-primer-heading { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
  .growth-primer-heading h2 { margin-top: 12px; }
  .growth-primer-levers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 28px 24px; border-block: 1px solid var(--hair); }
  .growth-primer-levers > div { padding: 22px 24px; border-left: 1px solid var(--hair); }
  .growth-primer-levers > div:first-child { padding-left: 0; border-left: 0; }
  .growth-primer dt { color: var(--ink-1); font-weight: 600; }
  .growth-primer dt span { color: var(--accent-text); font-size: var(--fs-label); margin-right: 10px; }
  .growth-primer dd { color: var(--ink-2); margin: 10px 0 0; font-size: var(--fs-body-s); line-height: var(--lh-body); }
  .growth-primer-example { border-left: 2px solid var(--accent-line); padding-left: 20px; max-width: 58ch; color: var(--ink-2); font-size: var(--fs-body-s); line-height: var(--lh-body); }
  .growth-primer-example strong { color: var(--ink-1); }
  /* --- Confronto fra i tre ruoli -------------------------------------
     Una sola idea: le righe corrono orizzontali sotto una card bianca
     sollevata a tutta altezza, quella del Growth manager, che porta una
     testata scura con una linea ambra in cima (luce, non cornice). Le
     altre due colonne restano piatte sulla carta, l'indice a sinistra
     ripete le dimensioni. Zero filetti verticali: la gerarchia la fanno
     superficie, quota e inchiostro, non le campiture.
     Struttura: .growth-roles e' la griglia madre (4 colonne, 6 righe);
     ogni ruolo e' una subgrid sulle righe, e la sua <dl> una subgrid
     annidata sulle righe 2..6, cosi' le celle si allineano fra colonne
     senza che il markup sia una tabella. Dove subgrid manca, le righe
     smettono di allinearsi fra le colonne ma nulla si rompe. */
  .growth-comparison { margin-top: 36px; }
  .growth-comparison > h3 { max-width: 36ch; margin-bottom: 28px; }
  .growth-roles {
    --row-y: var(--s-5);
    --col-x: clamp(20px, 2.4vw, 32px);
    display: grid;
    grid-template-columns: minmax(140px, .42fr) minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto repeat(5, auto);
    align-items: stretch;
  }
  .growth-roles-index,
  .growth-role {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
  .growth-roles-index > span,
  .growth-role-head,
  .growth-role-list > div {
    padding-block: var(--row-y);
    border-top: 1px solid var(--hair);
  }
  .growth-roles-index > span:first-child,
  .growth-role-head { border-top: 0; padding-top: 0; }
  .growth-roles-index > span:last-child,
  .growth-role-list > div:last-child { border-bottom: 1px solid var(--hair); }
  /* L'indice: etichette di riga in Inter, maiuscole, al minimo della scala. */
  .growth-roles-index { color: var(--ink-4); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--track-label); text-transform: uppercase; }
  .growth-roles-index > span { padding-right: var(--s-4); }
  /* L'etichetta e' piu' piccola del testo di riga: scende di 4px per
     centrarsi sulla prima riga delle celle accanto. */
  .growth-roles-index > span:not(:first-child) { padding-top: calc(var(--row-y) + var(--s-1)); }
  .growth-roles-index > span:first-child { align-self: end; padding-bottom: var(--s-5); }
  /* La <dl> e' subgrid annidata: eredita le righe 2..6 del ruolo. */
  .growth-role-list { display: grid; grid-row: 2 / -1; grid-template-rows: subgrid; margin: 0; }
  .growth-role-list > div { display: block; }
  .growth-role-list dd { margin: 0; max-width: 34ch; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--ink-3); }
  /* I grassetti sono gli stessi dell'originale, alleggeriti: nelle colonne
     piatte e' il colore a portare l'enfasi (peso 500), nella card il peso
     risale a 600 perche' li' l'enfasi e' voluta. */
  .growth-role-list strong { color: var(--ink-1); font-weight: 500; }
  /* Sul desktop la dimensione la dice l'indice: i <dt> restano ai soli
     screen reader. Sul telefono tornano visibili come kicker. */
  .growth-role-list dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* Testate: nome del ruolo come titolo, in Fraunces, ancorato in basso
     cosi' i tre nomi stanno sulla stessa linea anche se la card ha in piu'
     l'etichetta "Il mio ruolo". */
  .growth-role-head { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2); padding-bottom: var(--s-5); }
  .growth-role-name { margin: 0; color: var(--ink-1); }
  .growth-role-tagline { margin: 0; color: var(--ink-3); font-size: var(--fs-caption); line-height: var(--lh-small); }
  /* Le due colonne piatte: il rientro tiene il testo lontano dalla card e
     lascia correre i filetti fin sotto al suo bordo. */
  .growth-role:not([data-role="manager"]) { padding-right: var(--col-x); }
  .growth-role:not([data-role="manager"]):last-child { padding-right: 0; padding-left: var(--col-x); }
  /* La card protagonista. Bianca su carta, un solo gradino di quota, il
     bordo neutro della card: l'ambra sta solo sulla linea in cima alla
     testata scura, dove si comporta da lampada. La card sporge sopra e
     sotto le righe di un margine minimo, quanto basta per leggersi come
     un oggetto appoggiato, non come una colonna colorata. */
  /* Nel DOM il Growth manager viene per primo (e' l'ordine di lettura e di
     tabulazione): la colonna 3 lo rimette al centro solo sul desktop. */
  .growth-role[data-role="manager"] {
    grid-column: 3;
    position: relative;
    z-index: 1;
    margin-block: calc(-1 * var(--s-3));
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    background: var(--card-surface);
    box-shadow: var(--card-elev);
    overflow: hidden;
  }
  .growth-role[data-role="manager"] .growth-role-head,
  .growth-role[data-role="manager"] .growth-role-list > div { padding-inline: var(--s-5); }
  .growth-role[data-role="manager"] .growth-role-list > div:last-child { border-bottom: 0; padding-bottom: calc(var(--row-y) + var(--s-3)); }
  .growth-role[data-role="manager"] .growth-role-list dd { color: var(--ink-2); }
  .growth-role[data-role="manager"] .growth-role-list strong { font-weight: 600; }
  /* Testata scura: contesto invertito, quindi inchiostri --on-dark-* e
     ambra piena per l'etichetta. La linea in cima e' una luce radente da
     2px, piu' accesa a sinistra, come le altre sorgenti della pagina. */
  .growth-role[data-role="manager"] .growth-role-head {
    position: relative;
    justify-content: flex-end;
    gap: var(--s-2);
    padding-top: calc(var(--s-5) + var(--s-3));
    padding-bottom: var(--s-5);
    color: var(--on-dark-1);
    background-color: var(--surface-050);
    background-image: var(--ambient-tl);
  }
  .growth-role[data-role="manager"] .growth-role-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amber) 0%, var(--amber) 38%, var(--amber-a45) 100%);
  }
  .growth-role[data-role="manager"] .growth-role-name { color: var(--on-dark-1); }
  .growth-role[data-role="manager"] .growth-role-tagline { color: var(--on-dark-3); }
  .growth-role-badge { margin: 0 0 var(--s-2); color: var(--amber); font-size: var(--fs-label); font-weight: 700; line-height: var(--lh-label); letter-spacing: var(--track-label); text-transform: uppercase; }
  .growth-comparison-note { max-width: 58ch; margin-top: 22px; color: var(--ink-2); font-size: var(--fs-caption); line-height: var(--lh-small); }
  .growth-comparison-link { display: inline-block; margin-top: 12px; padding-block: 10px; color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; font-size: var(--fs-body-s); }
  .growth-primer :is(a, [tabindex]):focus-visible { outline: 3px solid var(--accent-line); outline-offset: 5px; }
  /* Telefono e tablet stretto: i ruoli si impilano, il Growth manager per
     primo, e ogni riga torna a essere "dimensione sopra, testo sotto".
     Niente scorrimento orizzontale. */
  @media (max-width: 900px) {
    .growth-comparison > h3 { margin-bottom: 20px; }
    .growth-roles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-6); }
    .growth-roles-index { display: none; }
    .growth-role, .growth-role-list { display: block; grid-row: auto; }
    .growth-role:not([data-role="manager"]),
    .growth-role:not([data-role="manager"]):last-child { padding-inline: 0; }
    .growth-role[data-role="manager"] { grid-column: auto; margin-block: 0; }
    .growth-role-head { padding-top: 0; padding-bottom: var(--s-4); border-top: 0; }
    .growth-role-list > div { padding-block: var(--s-4); }
    .growth-role-list > div:last-child { border-bottom: 0; }
    .growth-role-list dt { position: static; width: auto; height: auto; margin: 0 0 var(--s-1); padding: 0; overflow: visible; clip: auto; white-space: normal; color: var(--ink-4); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--track-label); text-transform: uppercase; }
    .growth-role-list dd { max-width: 56ch; }
    .growth-role[data-role="manager"] .growth-role-head { padding-top: calc(var(--s-4) + var(--s-2)); padding-bottom: var(--s-4); }
    .growth-role[data-role="manager"] .growth-role-list > div:last-child { padding-bottom: var(--s-5); }
    /* Le due colonne piatte, impilate, si chiudono con un filetto in fondo
       cosi' la lista non finisce nel vuoto. */
    .growth-role:not([data-role="manager"]) .growth-role-list > div:last-child { border-bottom: 1px solid var(--hair); }
  }
  @media (max-width: 700px) {
    .growth-primer-heading { grid-template-columns: 1fr; gap: 20px; }
    .growth-primer-levers { grid-template-columns: 1fr; margin-block: 24px; }
    .growth-primer-levers > div, .growth-primer-levers > div:first-child { padding: 16px 0; border-left: 0; }
    .growth-primer-levers > div + div { border-top: 1px solid var(--hair); }
  }

  /* --- Legacy, solo per definitiva-2.0.html (archivio): la vecchia tabella
     <table class="growth-comparison-table">. definitiva.html usa .growth-roles
     qui sopra. Nessun selettore condiviso con il blocco nuovo. --- */
  .growth-comparison-hint { display: none; }
  .growth-comparison-scroll { overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; }
  .growth-comparison-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: left; font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--ink-2); }
  .growth-dimension { width: 14%; }
  .growth-comparison-table th, .growth-comparison-table td { padding: 22px; vertical-align: top; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .growth-comparison-table tr > :last-child { border-right: 0; }
  .growth-comparison-table tbody tr:last-child > * { border-bottom: 0; }
  .growth-comparison-table thead th { background: color-mix(in srgb, var(--ink-1) 5%, var(--page-bg)); vertical-align: bottom; padding-block: 24px; }
  .growth-comparison-table tbody th, .growth-table-label { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
  .growth-comparison-table tbody th { vertical-align: middle; background: color-mix(in srgb, var(--ink-1) 3%, var(--page-bg)); }
  .growth-comparison-table thead [data-role="manager"] { background: var(--ink); color: var(--amber); }
  .growth-comparison-table [data-role="manager"] .growth-role-name { color: var(--on-dark-1); }
  .growth-comparison-table td[data-role="manager"] { background: color-mix(in srgb, var(--amber) 12%, var(--page-bg)); }
  .growth-comparison-table strong { color: var(--ink-1); font-weight: 600; }
  .growth-comparison-scroll .growth-role-name { display: block; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.025em; color: var(--ink-1); }
  .growth-comparison-scroll .growth-role-tagline { display: block; margin-top: 10px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .growth-comparison-scroll .growth-role-badge { display: inline-block; background: var(--amber); color: var(--ink); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  @media (max-width: 960px) {
    .growth-comparison-scroll + .growth-comparison-note { margin-top: 18px; }
    .growth-comparison-scroll ~ .growth-comparison-hint, .growth-comparison-hint:has(+ .growth-comparison-scroll) { display: block; margin-block: -8px 16px; color: var(--ink-2); font-size: var(--fs-caption); line-height: var(--lh-small); }
    .growth-comparison-table th, .growth-comparison-table td { padding: 18px; }
  }
}