/* ==========================================================================
   PAGINA MAGAZINE "DA RIVISTA" (home.php): apertura e sezioni per categoria.
   Schede e intestazioni di sezione sono in components/news.css.
   ========================================================================== */

/* Le sezioni scure sono trasparenti sopra un'unica discesa; quelle chiare (.sb-light) hanno il fondo carta */
.sb-mag { background: linear-gradient(var(--sb-sea-3), var(--sb-abyss)); }
.sb-mag-sec { padding-block: clamp(56px, 7vw, 96px); }
.sb-mag-sec .sb-news__head { margin-bottom: clamp(28px, 3.5vw, 44px); }

/* Apertura: mosaico di quattro riquadri con il testo sopra la foto (riferimento: tagDiv Newspaper).
   Il riquadro è una griglia a una cella: foto e testo si sovrappongono senza posizionamenti assoluti sul testo,
   così il link del titolo (::after) copre tutto il riquadro. */
.sb-mag-lead { padding-block: var(--sb-pad-xs); }
.sb-mosaic { display: grid; gap: 6px; min-height: clamp(440px, 40vw, 580px); grid-template-columns: repeat(4, 1fr); grid-template-rows: 1.3fr 1fr; }
.sb-tile { position: relative; overflow: hidden; display: grid; grid-template-areas: "tile"; border-radius: 3px; isolation: isolate; color: var(--sb-text);
  background: linear-gradient(135deg, var(--sb-space-1), var(--sb-sea-1)); }
.sb-tile > * { grid-area: tile; }
.sb-tile--0 { grid-column: 1 / 3; grid-row: 1 / 3; }
.sb-tile--1 { grid-column: 3 / 5; grid-row: 1; }
.sb-tile--2 { grid-column: 3; grid-row: 2; }
.sb-tile--3 { grid-column: 4; grid-row: 2; }
.sb-mosaic--3 .sb-tile--2 { grid-column: 3 / 5; }
.sb-mosaic--2 .sb-tile--1 { grid-row: 1 / 3; }
.sb-tile__media { position: relative; z-index: -2; }
.sb-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.sb-tile:hover .sb-tile__media img { transform: scale(1.04); }
.sb-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--sb-space-0) 88%, transparent), color-mix(in srgb, var(--sb-space-0) 45%, transparent) 45%, transparent 75%); }
.sb-tile--no-image::after { display: none; }
.sb-tile__copy { align-self: end; padding: clamp(14px, 1.8vw, 26px); display: grid; gap: 8px; justify-items: start; }
.sb-chip { display: inline-block; padding: 4px 9px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; background: var(--sb-space-0); color: var(--sb-text); border-radius: 2px; }
.sb-tile h2, .sb-tile h3 { color: var(--sb-text); text-wrap: balance; transition: color .2s; }
.sb-tile h2 { font-size: clamp(1.6rem, 2.7vw, 2.5rem); font-weight: 600; font-variation-settings: "wdth" 125; line-height: 1.07; letter-spacing: -.03em; }
.sb-tile--1 h3 { font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 600; font-variation-settings: "wdth" 125; line-height: 1.12; letter-spacing: -.02em; }
.sb-tile--2 h3, .sb-tile--3 h3 { font-size: clamp(.98rem, 1.2vw, 1.12rem); font-weight: 600; font-variation-settings: "wdth" 100; line-height: 1.2; }
.sb-tile h2 a, .sb-tile h3 a { text-decoration: none; }
.sb-tile h2 a::after, .sb-tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sb-tile:hover h2, .sb-tile:hover h3, .sb-tile:focus-within h2, .sb-tile:focus-within h3 { color: var(--sb-gold-lt); }
.sb-tile time { font-size: .82rem; color: var(--sb-text-soft); }
.sb-tile--2 time, .sb-tile--3 time { display: none; }

/* Interviste: foto e titolo grande, senza riassunto */
.sb-card--persona h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; }

/* Forum ed eventi: elenco con la miniatura a sinistra */
.sb-mag-thumbs { list-style: none; padding: 0; margin: 0; }
.sb-mag-thumbs li { position: relative; display: grid; grid-template-columns: minmax(180px, 22%) 1fr; gap: 8px 32px; align-items: center; padding-block: 26px; border-top: 1px solid var(--sb-line); }
.sb-mag-thumbs li:last-child { border-bottom: 1px solid var(--sb-line); }
.sb-mag-thumbs img { grid-column: 1; grid-row: 1 / 3; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; }
.sb-mag-thumbs h3 { grid-column: 2; align-self: end; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 600; font-variation-settings: "wdth" 100; line-height: 1.25; }
.sb-mag-thumbs p { grid-column: 2; align-self: start; max-width: 62ch; color: var(--sb-muted); font-size: .94rem; line-height: 1.5; }
.sb-mag-thumbs h3 a { text-decoration: none; }
.sb-mag-thumbs h3 a::after { content: ""; position: absolute; inset: 0; }
.sb-mag-thumbs li:hover h3 { color: var(--sb-gold-lt); }

/* Politiche e strategie: due schede grandi */
.sb-mag-big { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sb-gap-m); }
.sb-card--grande img { aspect-ratio: 16 / 10; }
.sb-card--grande h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.015em; }
.sb-card--grande p { font-size: 1rem; max-width: 56ch; }

/* Scienza e ambienti estremi: tre colonne — foto, lettura in evidenza, due articoli brevi.
   Foto e testo condividono la riga dell'articolo (stesso rapporto delle colonne esterne). */
.sb-mag-read { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--sb-gap-s); align-items: stretch; }
.sb-read-main { grid-column: 1 / 3; display: grid; grid-template-columns: 5fr 4fr; gap: var(--sb-gap-s); position: relative; }
.sb-read-main__media { position: relative; min-height: 360px; }
.sb-read-main__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.sb-read-main--no-image { grid-template-columns: 1fr; }
.sb-read-main__copy { align-self: start; }
.sb-read-main time { font-size: .85rem; color: var(--sb-muted); }
.sb-light .sb-read-main time { color: var(--sb-ink-muted); }
.sb-read-main h3 { margin-top: 6px; font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 600; font-variation-settings: "wdth" 100; line-height: 1.15; letter-spacing: -.015em; }
.sb-read-main h3 a { text-decoration: none; }
.sb-read-main h3 a::after { content: ""; position: absolute; inset: 0; }
.sb-read-main:hover h3 { color: var(--sb-gold-dk); }
.sb-read-main p { margin-top: 10px; color: var(--sb-ink-muted); font-size: 1rem; line-height: 1.5; }
.sb-mag-read__side { display: grid; gap: 0; align-content: start; }
.sb-card--compatta { padding-block: 24px; border-top: 1px solid var(--sb-ink-line); }
.sb-card--compatta:first-child { padding-top: 0; border-top: 0; }
.sb-card--compatta h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.2; }
.sb-card p.sb-card__meta, .sb-read-main p.sb-card__meta { margin-top: 8px; font-size: .88rem; }

.sb-mag-all { padding-block: var(--sb-pad-m); text-align: center; }

@media (max-width: 1080px) {
  .sb-mag-read { grid-template-columns: 1fr; }
  .sb-read-main { grid-column: auto; grid-template-columns: 1fr; }
  .sb-read-main__media { min-height: 0; aspect-ratio: 16 / 9; }
  .sb-mosaic { min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: minmax(420px, auto) minmax(240px, auto) minmax(200px, auto); }
  .sb-tile--0 { grid-column: 1 / 3; grid-row: 1; }
  .sb-tile--1 { grid-column: 1 / 3; grid-row: 2; }
  .sb-tile--2 { grid-column: 1; grid-row: 3; }
  .sb-tile--3 { grid-column: 2; grid-row: 3; }
  .sb-mosaic--3 .sb-tile--2 { grid-column: 1 / 3; }
}
@media (max-width: 860px) {
  .sb-mag-big { grid-template-columns: 1fr; }
  .sb-mag-thumbs li { grid-template-columns: 1fr; padding-block: 22px; }
  .sb-mag-thumbs img { grid-row: auto; }
  .sb-mag-thumbs h3, .sb-mag-thumbs p { grid-column: 1; }
}
@media (max-width: 560px) {
  .sb-mosaic { grid-template-columns: 1fr; grid-template-rows: minmax(400px, auto) repeat(3, minmax(220px, auto)); }
  .sb-tile--0, .sb-tile--1, .sb-tile--2, .sb-tile--3, .sb-mosaic--3 .sb-tile--2 { grid-column: 1; grid-row: auto; }
}