/* ==========================================================================
   Pizza EAT — il blog.

   Secondo foglio, caricato solo da /blog/ e dagli articoli: la home non paga
   niente per una parte del sito che non mostra.

   Nessun token nuovo, nessun colore scritto a mano: tutto viene da sito.css.
   Cosi' il giorno che il verde del marchio cambia, cambia anche qui — e le
   sezioni scure continuano a funzionare senza una seconda regola, perche' i
   componenti leggono `--superficie`, `--testo`, `--linea` e non i colori veri.

   L'ordine dei layer e' gia' dichiarato in sito.css: qui si aggiunge dentro
   quelli che ci sono, non se ne inventano di nuovi.
   ========================================================================== */

@layer componenti {

  /* --- La scheda di un articolo nell'elenco -------------------------------- */

  .post {
    position: relative;
    display: flex; flex-direction: column; gap: var(--s3);
    padding: var(--s5);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r3);
    box-shadow: var(--ombra-1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .post:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombra-2);
    border-color: var(--bordo-2);
  }

  .post__titolo { font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; }
  .post__titolo a { color: var(--testo); text-decoration: none; }

  /* Tutta la scheda e' cliccabile, ma il collegamento resta UNO SOLO e
     contiene il titolo. Con un secondo <a> «Leggi» ogni scheda avrebbe avuto
     due voci nell'elenco dei collegamenti di uno screen reader, e la seconda
     si sarebbe chiamata «Leggi» in tutte e dieci. */
  .post__titolo a::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
  }
  .post__titolo a:focus-visible { outline: none; }
  .post:has(a:focus-visible) {
    outline: 2px solid var(--accento);
    outline-offset: 3px;
  }

  .post__estratto {
    color: var(--testo-2); font-size: .9375rem;
    /* L'estratto e' la meta description: nelle schede corte una la taglia,
       nelle lunghe no, e la griglia resta allineata. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
    overflow: hidden;
  }

  .post__coda {
    margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid var(--linea);
  }

  /* Il pilastro: la scheda che apre l'elenco e si prende tutta la riga. */
  .post--grande {
    gap: var(--s4);
    padding: var(--s6);
    border-radius: var(--r4);
    border-color: color-mix(in srgb, var(--arancio) 42%, var(--linea));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--arancio) 7%, transparent), transparent 60%),
      var(--superficie);
  }
  .post--grande .post__titolo { font-weight: 800; }
  .post--grande .post__estratto { -webkit-line-clamp: 3; font-size: 1.0625rem; }
  .post__bollo { align-self: flex-start; }

  /* Colonne proprie invece di `.g3`: con il minimo a 16rem venivano quattro
     colonne da 270px, e i titoli veri — «Kassensystem für die Pizzeria: der
     komplette Guide 2026» — ci finivano su cinque righe. A 19rem restano tre
     colonne larghe, che e' il passo giusto per un elenco di articoli. */
  .post-griglia {
    margin-top: var(--s5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }

  /* Le briciole di pane stanno in sito.css: le usa anche /guide/, e una
     seconda copia qui vorrebbe dire due posti da tenere uguali. */

  /* --- Testata dell'articolo ----------------------------------------------- */

  .articolo__testata { margin-top: var(--s5); }
  .articolo__testata > * + * { margin-top: var(--s3); }

  .articolo__coda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

  .articolo__sommario {
    /* Il sommario e' la meta description: la stessa frase che si e' letta nel
       risultato di ricerca. Ripeterla in cima conferma di essere nel posto
       giusto — ma in corpo minore, perche' non e' l'articolo. */
    font-size: 1.0625rem; color: var(--testo-2);
    padding-left: var(--s4);
    border-left: 3px solid color-mix(in srgb, var(--arancio) 55%, transparent);
  }

  /* --- Indice della pagina -------------------------------------------------- */

  .indice {
    margin-top: var(--s6);
    padding: var(--s4) var(--s5);
    background: var(--crema);
    border: 1px solid var(--linea);
    border-radius: var(--r2);
  }
  .indice ol {
    margin-top: var(--s3);
    display: grid; gap: var(--s2);
    counter-reset: voce; list-style: none;
  }
  .indice li { counter-increment: voce; display: grid; grid-template-columns: 1.6rem 1fr; }
  .indice li::before {
    content: counter(voce) '.';
    color: var(--testo-3); font-weight: 700; font-size: .8125rem;
    line-height: 1.65;
  }
  .indice a {
    color: var(--testo-2); text-decoration: none;
    font-size: .9375rem;
  }
  .indice a:hover { color: var(--verde-testo); text-decoration: underline; }

  /* --- Il corpo dell'articolo ---------------------------------------------- */

  .articolo {
    margin-top: var(--s7);
    max-width: var(--misura);
    color: var(--testo-2);
    font-size: 1.0625rem;
  }

  .articolo > * + * { margin-top: var(--s4); }

  .articolo h2 {
    margin-top: var(--s8);
    padding-top: var(--s5);
    border-top: 1px solid var(--linea);
    font-size: clamp(1.35rem, 1.15rem + .85vw, 1.75rem);
    font-weight: 800; letter-spacing: -.025em;
    color: var(--testo);
    /* Chi arriva da un collegamento all'ancora non deve trovare il titolo
       nascosto sotto la barra fissa. */
    scroll-margin-top: calc(var(--nav-h) + var(--s5));
  }
  .articolo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

  .articolo h3 {
    margin-top: var(--s6);
    font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em;
    color: var(--testo);
  }

  .articolo p { line-height: 1.75; }
  .articolo strong { color: var(--testo); font-weight: 700; }
  .articolo em { font-style: italic; }

  /* I collegamenti interni dentro il testo: si devono vedere che sono
     collegamenti anche senza il colore — c'e' chi non lo distingue. */
  .articolo a {
    color: var(--verde-testo);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: .18em;
  }
  .articolo a:hover { color: var(--verde-scuro); text-decoration-thickness: 2.5px; }

  .articolo ul, .articolo ol { margin-top: var(--s4); display: grid; gap: var(--s3); }
  .articolo li { line-height: 1.7; }

  .articolo ul { list-style: none; }
  .articolo ul li { position: relative; padding-left: 1.65rem; }
  .articolo ul li::before {
    content: ''; position: absolute; left: .25rem; top: .62em;
    width: 7px; height: 7px; border-radius: 50%;
    background: color-mix(in srgb, var(--verde) 70%, transparent);
  }

  .articolo ol { counter-reset: punto; list-style: none; }
  .articolo ol li { counter-increment: punto; position: relative; padding-left: 2rem; }
  .articolo ol li::before {
    content: counter(punto);
    position: absolute; left: 0; top: .1em;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--arancio) 22%, transparent);
    color: var(--arancio-su); font-size: .75rem; font-weight: 800;
  }

  .articolo code {
    font-family: var(--mono); font-size: .875em;
    padding: .12em .38em; border-radius: 6px;
    background: var(--chip); color: var(--testo);
  }

  .articolo hr {
    border: 0; border-top: 1px solid var(--linea);
    margin-block: var(--s6);
  }

  /* Le tabelle: strette in pagina, larghe quanto serve dentro il loro
     contenitore. Senza questo, una tabella a tre colonne su un telefono fa
     scorrere l'intera pagina di lato — e da li' non si torna piu' indietro. */
  .tabella-scorre { overflow-x: auto; margin-top: var(--s5); }
  .tabella-scorre table {
    width: 100%; min-width: 32rem;
    border-collapse: collapse;
    font-size: .9375rem;
  }
  .tabella-scorre th, .tabella-scorre td {
    text-align: left; padding: var(--s3);
    border-bottom: 1px solid var(--linea);
    vertical-align: top;
  }
  .tabella-scorre th {
    color: var(--testo); font-weight: 700;
    background: var(--crema);
    white-space: nowrap;
  }

  /* --- Invito alla prova, in fondo all'articolo ----------------------------
     Il nome NON e' `.prova`: quella classe esiste gia' in sito.css per il
     riquadro dei prezzi in home, sta nel layer `sezioni` — che vince su
     `componenti` — e riscriveva bordo e sfondo di questo blocco senza che si
     vedesse da nessuna parte. */

  .art-prova {
    margin-top: var(--s8);
    border-color: color-mix(in srgb, var(--verde) 30%, var(--linea));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--verde) 6%, transparent), transparent 70%),
      var(--superficie);
  }
  .art-prova p { color: var(--testo-2); }
  .art-prova strong { color: var(--testo); }

  /* Rete di sicurezza: i `.btn` del sito non vanno a capo, e un'etichetta
     lunga — o una traduzione piu' lunga dell'originale — farebbe scorrere di
     lato tutta la pagina invece di allargare solo se stessa. */
  .art-prova .btn { max-width: 100%; white-space: normal; text-align: center; }

  /* --- Leggi anche ---------------------------------------------------------- */

  .correlati { margin-top: var(--s7); }
  .correlati ul {
    margin-top: var(--s4);
    display: grid; gap: var(--s2); list-style: none;
  }
  .correlati li {
    padding: var(--s3) var(--s4);
    border: 1px solid var(--linea);
    border-radius: var(--r2);
    background: var(--superficie);
    transition: border-color .15s ease, transform .15s ease;
  }
  .correlati li:hover { border-color: var(--bordo-2); transform: translateX(2px); }
  .correlati a {
    display: block;
    color: var(--testo); font-weight: 700; font-size: .9375rem;
    text-decoration: none;
  }
  .correlati a:hover { color: var(--verde-testo); text-decoration: underline; }

  /* Il titolo vero dell'articolo di destinazione, sotto il testo cliccabile:
     il collegamento porta l'anchor text voluto dalla redazione, ma chi legge
     deve poter capire dove sta andando. */
  .correlati__t { display: block; margin-top: .15rem; }

  .articolo__ritorno { margin-top: var(--s7); }
}

@layer sezioni {

  .blog-testata { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
  .blog-testata .h1 { margin-top: var(--s3); }

  /* Testata ed elenco restano sempre disegnati: `sito.css` mette
     `content-visibility: auto` su tutte le sezioni sotto la piega, ed e'
     giusto per le schermate ricostruite della home — pesanti e cercate da
     nessuno. Qui invece la griglia degli articoli e' il contenuto della
     pagina, non un di piu'. */
  .blog-testata,
  .blog-elenco { content-visibility: visible; }

  .articolo-sez { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
  .articolo-sez { content-visibility: visible; }
}

@layer utility {

  @media print {
    .indice, .art-prova, .correlati, .articolo__ritorno, .briciole { display: none !important; }
    .articolo { max-width: none; color: #000; }
    .articolo a { color: #000; text-decoration: none; }
  }
}