/* ==========================================================================
   omarattia.it — Magazine (elenco, categorie, articolo)

   Le pagine stanno in /mag/ e rispondono su /magazine/ (vedi
   /magazine/.htaccess). Viene dal Magazine di advertaria.it, con le classi
   rinominate in mag-* per non toccare niente del resto del sito: usa solo
   i token di style.css (--accent, --ink, --serif...), quindi se cambiano
   i colori del sito cambia anche il Magazine.
   ========================================================================== */

/* --- briciole di pane ---------------------------------------------------- */
.mag-crumbs-bar{background:var(--paper);border-bottom:1px solid var(--line)}
.mag-crumbs{max-width:var(--max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.mag-crumb{color:var(--gray)}
.mag-crumb-sep{opacity:.5}
.mag-crumb-current{color:var(--accent)}
.mag-crumb:hover,.mag-link-ink:hover{color:var(--accent)}
.mag-link-ink{color:var(--ink)}

/* --- apertura dell'elenco ------------------------------------------------ */
.mag-hero{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--gutter) clamp(24px,3vw,40px)}
.mag-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,38px)}
.mag-eyebrow-line{width:34px;height:1px;background:var(--ink);opacity:.5}
.mag-eyebrow-text{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)}
.mag-hero-title{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;color:var(--ink);font-size:clamp(46px,8.4vw,124px);margin:0}
.mag-hero-a{display:block}
.mag-hero-b{display:block;font-style:italic;font-weight:500;text-transform:none;color:var(--accent)}
.mag-hero-text{font-size:clamp(19px,2.3vw,30px);line-height:1.32;color:var(--ink);max-width:36ch;margin-top:clamp(24px,3vw,40px)}

/* --- le schede ----------------------------------------------------------- */
.mag-list{max-width:var(--max);margin:0 auto;padding:clamp(16px,2vw,32px) var(--gutter) clamp(48px,6vw,80px)}
.mag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.mag-card{display:flex;flex-direction:column;min-width:0}
.mag-card-media{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden}
.mag-card-badge{position:absolute;top:10px;right:10px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:2px}
/* Il titolo della scheda è un link: nero come il resto dei titoli, con
   l'accento solo al passaggio del mouse. */
.mag-card-title{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.22;margin:18px 0 6px}
.mag-card-title a{color:var(--ink)}
.mag-card-title a:hover{color:var(--accent)}
.mag-card-cat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;align-self:flex-start}
.mag-card-cat:hover{color:var(--accent-dark)}
.mag-card-excerpt{font-size:14px;line-height:1.6;color:var(--gray);margin-bottom:16px}
.mag-card-more{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);align-self:flex-start;margin-bottom:auto}
.mag-card-more:hover{color:var(--accent);border-color:var(--accent)}
.mag-card-date{font-size:12px;color:var(--gray);margin-top:16px}
.mag-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:22px;margin-top:clamp(40px,5vw,64px);font-size:14px;font-weight:600;color:var(--gray)}

/* --- copertine ---
   Le immagini stanno dentro un riquadro con proporzione fissa: la
   riempiono e vengono ritagliate, invece di deformarsi. */
.mag-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mag-img-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#E6E5E0;color:#8A8A85;font-size:12px;letter-spacing:.04em;text-align:center;padding:12px}

/* --- l'articolo ---------------------------------------------------------- */
.mag-article{max-width:840px;margin:0 auto;padding:clamp(40px,5vw,64px) 24px 0}
.mag-meta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.mag-meta-sep{opacity:.4}
.mag-title{font-family:var(--serif);font-weight:800;letter-spacing:-.01em;line-height:1.06;font-size:clamp(34px,4.6vw,56px);margin-bottom:28px;color:var(--ink)}
.mag-article-cover{position:relative;aspect-ratio:16/8;border-radius:3px;overflow:hidden;margin-bottom:clamp(32px,4vw,48px)}

/* L'indice sta in cima, sopra il testo, e l'articolo occupa tutta la
   larghezza della colonna. In largo le voci vanno su due colonne, così un
   indice lungo non spinge il testo troppo in basso. */
.mag-toc{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:14px 0 18px;margin-bottom:clamp(32px,4vw,44px)}
.mag-toc-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px}
.mag-toc-list{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.4}
.mag-toc-list a{color:var(--ink)}
.mag-toc-list a:hover{color:var(--accent)}
@media (min-width:700px){
  .mag-toc-list{display:block;columns:2;column-gap:40px}
  .mag-toc-list>a{display:block;break-inside:avoid;margin-bottom:9px}
}

/* Il testo arriva da WordPress come HTML semplice, senza classi: si veste
   per discendenza da .mag-text. */
.mag-text{font-size:16px;line-height:1.75;color:var(--gray)}
.mag-text h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.2;color:var(--ink);margin:44px 0 16px;scroll-margin-top:96px}
.mag-text h3{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);margin:30px 0 12px}
.mag-text h4{font-weight:700;font-size:16px;color:var(--ink);margin:24px 0 10px}
.mag-text p{margin-bottom:18px}
.mag-text ul,.mag-text ol{margin:0 0 18px;padding-left:22px}
.mag-text li{margin-bottom:8px}
.mag-text strong,.mag-text b{color:var(--ink);font-weight:700}
.mag-text a{color:var(--accent);text-decoration:underline}
.mag-text a:hover{color:var(--accent-dark)}
.mag-text img{max-width:100%;height:auto;border-radius:3px;display:block}
.mag-text figure{margin:28px 0}
.mag-text figcaption{font-size:13px;color:var(--gray);margin-top:9px}
.mag-text blockquote{margin:28px 0;padding-left:20px;border-left:2px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.45;color:var(--ink)}
.mag-text blockquote p{margin-bottom:0}
.mag-text hr{border:none;border-top:1px solid var(--line);margin:36px 0}
.mag-text table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.mag-text th,.mag-text td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.mag-text th{background:var(--paper);color:var(--ink);font-weight:700}
/* Il cappello: se l'articolo comincia con un paragrafo, è in corsivo grande. */
.mag-text>p:first-child{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--ink)}
/* Le tabelle larghe scorrono dentro la colonna invece di allargare la pagina. */
.mag-text .wp-block-table{overflow-x:auto}

/* --- chiusura dell'articolo ---------------------------------------------- */
.mag-cta-row{display:flex;justify-content:center;margin:clamp(40px,5vw,56px) 0}
.mag-cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:16px 32px;border-radius:2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mag-cta:hover{background:var(--accent-dark);color:#fff}
.mag-author{display:flex;align-items:center;gap:16px;padding:28px 0;border-top:1px solid var(--line)}
.mag-author-initial{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--accent-3);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:20px}
.mag-author-name{display:block;font-weight:700;font-size:15px;color:var(--ink)}
.mag-author-bio{display:block;font-size:13px;color:var(--gray)}
.mag-share{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:60px}
.mag-share-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.mag-share-list{display:flex;gap:10px}
.mag-share-btn{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.mag-share-btn:hover{background:var(--accent);color:#fff}

/* --- schermi stretti ----------------------------------------------------- */
@media (max-width:900px){
  .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .mag-grid{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------------
   Modifiche grafiche di Omar (02/10/2026)
   ------------------------------------------------------------------ */
/* Titolo dell'elenco: la seconda riga più piccola, così il titolo resta compatto */
.mag-hero-title{font-size:clamp(40px,6.2vw,96px)}
.mag-hero-b{font-size:.62em;line-height:1.02;margin-top:.12em}

/* Copertine intere nelle schede: stesso formato delle copertine (1200×630), niente tagli */
.mag-card-media{aspect-ratio:1200/630;background:var(--paper)}
.mag-card-media .mag-cover{object-fit:contain}

/* Categoria e data in una riga sopra il titolo della scheda */
.mag-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.mag-card-meta .mag-card-cat{margin:0;font-size:12px}
.mag-card-meta time{font-weight:600}
.mag-card-dot{width:4px;height:4px;border-radius:50%;background:var(--gray);opacity:.5;flex:none}
.mag-card-title{margin:10px 0 10px}

@media (max-width:600px){
  .mag-hero-title{font-size:clamp(36px,11vw,56px)}
  .mag-hero-b{font-size:.6em}
  .mag-card-meta{font-size:11px;margin-top:14px}
  .mag-card-meta .mag-card-cat{font-size:11px}
  .mag-card-title{font-size:20px}
}