/*
 * Home (design «La Griglia», ADR-0009; RF-01, RF-21). Solo ciò che non è già in ingnews.css:
 * campo di ricerca in cima alla home sotto 48 rem, apertura (introduzione + riga del direttore),
 * ordine dell'evidenza sul telefono, firma dell'evidenza su due righe sotto 48 rem, riga sulle
 * rubriche vuote. Nessun margine verticale sui figli diretti di <main>: lo spazio è il gap di main.
 */

/* --- Campo di ricerca in cima alla home: solo sotto 48 rem ------------------------------------------ */

.cerca-home {
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-ui);
}

@media (min-width: 48rem) {
  .cerca-home {
    display: none; /* sopra, il campo vero sta nella testata */
  }
}

.cerca-home__campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--t2);
  color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio);
}

.cerca-home__pulsante {
  flex: none;
}

/* --- Apertura: introduzione del direttore e riga della gerenza -------------------------------------- */

.apertura {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.introduzione {
  font-family: var(--font-testo);
  font-size: var(--t3);
  line-height: 1.65;
  color: var(--inchiostro);
}

.introduzione p {
  margin: 0;
}

.introduzione p + p {
  margin-top: 0.75rem;
}

.riga-direttore {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.6;
  color: var(--secondario);
}

.riga-direttore a {
  display: inline-block;
  padding-block: 0.5rem; /* bersaglio da 44 px senza spostare la riga */
  margin-block: -0.5rem;
}

@media (max-width: 47.99rem) {
  .introduzione {
    line-height: 1.6;
  }
}

/* --- Evidenza sotto 48 rem: etichetta → titolo → sottotitolo → immagine → «In breve» → firma -------- */

@media (max-width: 47.99rem) {
  .home .evidenza {
    gap: 0.75rem;
  }

  .home .evidenza__corpo {
    display: contents; /* i figli diventano voci del flex column dell'evidenza, così l'immagine si mette fra sottotitolo e «In breve» */
  }

  .home .evidenza__corpo > * {
    margin-inline: var(--scheda-padding);
  }

  .home .evidenza__corpo > :first-child {
    margin-top: var(--scheda-padding);
  }

  .home .evidenza__corpo > :last-child {
    margin-bottom: var(--scheda-padding);
  }

  .home .evidenza__intestazione {
    order: 0;
  }

  .home .evidenza__titolo {
    order: 1;
  }

  .home .evidenza__sottotitolo {
    order: 2;
  }

  .home .evidenza__figura {
    order: 3;
    margin: 0;
  }

  .home .evidenza .in-breve,
  .home .evidenza__abstract {
    order: 4;
  }

  .home .evidenza .firma {
    order: 5;
  }

  /* Firma estesa che sul telefono va su due righe: nomi e qualifica, poi data e minuti */
  .home .evidenza .firma__autori {
    display: block;
  }

  .home .evidenza .firma__separatore {
    display: none;
  }
}

/* --- Spalla fra 48 e 64 rem (iPad verticale): due colonne, la terza di tre schede a tutta larghezza --- */

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .home .griglia-articoli {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home .griglia-articoli > li:nth-child(3):last-child {
    grid-column: 1 / -1; /* il <li> supera i 30 rem e la scheda «orizzontale» si sdraia (container query) */
  }
}

/* --- Rubriche vuote: una sola riga sotto le tessere -------------------------------------------------- */

.rubriche-vuote {
  margin: 1rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.6;
  color: var(--secondario);
}

.rubriche-vuote a {
  display: inline-block;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}