/* Virdemlux — blog: elenco, archivi, articolo.
   Non c'era un mockup per il blog: si usano i token del design system
   (base.css) e le stesse forme del resto del sito — schede con bordo
   sottile, occhielli in maiuscoletto, pillole verdi. */

/* =====================================================================
   ELENCO
   ===================================================================== */

/* --- filtro per categoria --- */
.art-tabs{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:26px 0 4px;
}
.art-tabs a{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border:1px solid var(--line);border-radius:var(--pill);
  font-size:13.5px;font-weight:500;color:var(--text);background:#fff;
  text-decoration:none;transition:.2s;
}
.art-tabs a:hover{border-color:var(--line-2);background:var(--tint);text-decoration:none}
.art-tabs a.is-on{background:var(--verde-azione);border-color:var(--verde-azione);color:#fff}
.art-tabs a span{
  font-size:11px;font-weight:600;color:var(--muted);
  background:var(--tint);border-radius:var(--pill);padding:1px 7px;
}
.art-tabs a.is-on span{background:rgba(255,255,255,.2);color:#fff}

/* --- scheda articolo --- */
.ac{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.25s;
}
.ac:hover{box-shadow:var(--sh-h);transform:translateY(-4px);border-color:var(--line-2)}

.ac-img{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.ac-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ac:hover .ac-img img{transform:scale(1.04)}

.ac-b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}

/* Riga di informazioni: categoria, data, minuti. */
.art-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  margin:0 0 10px;font-size:11.5px;color:var(--muted);
  letter-spacing:.04em;
}
.art-meta > * + *{position:relative;padding-left:13px}
.art-meta > * + *::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--line-2);
  transform:translateY(-50%);
}
.art-cat{
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde-testo);text-decoration:none;
}
.art-cat:hover{text-decoration:underline}
/* Il pallino non va davanti alla categoria, che e il primo elemento. */
.art-meta .art-cat{padding-left:0}
.art-meta .art-cat::before{display:none}

.ac-t{font-size:18px;line-height:1.3;margin:0 0 9px;letter-spacing:-.02em}
.ac-t a{color:var(--ink);text-decoration:none}
/* Tutta la scheda e cliccabile: un solo collegamento, quello del titolo. */
.ac-t a::after{content:"";position:absolute;inset:0;z-index:1}

.ac-x{margin:0;font-size:14px;font-weight:300;line-height:1.6;color:var(--muted)}

.ac-go{
  margin-top:auto;padding-top:14px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--verde-testo);
}
.ac-go i.ti{font-size:15px;transition:transform .25s}
.ac:hover .ac-go i.ti{transform:translateX(3px)}

/* --- articolo in evidenza --- */
.art-lead{padding:22px 0 0}
.ac-lead{flex-direction:row;align-items:stretch}
.ac-lead .ac-img{flex:0 0 58%;aspect-ratio:auto}
.ac-lead .ac-b{padding:34px 38px;justify-content:center}
.ac-lead .ac-t{font-size:clamp(20px,1.8vw,26px);line-height:1.22;margin-bottom:12px}
.ac-lead .ac-x{font-size:15.5px}

/* --- griglia --- */
.art-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding:22px 0 10px;
}

/* =====================================================================
   ARTICOLO
   ===================================================================== */
.art-head{max-width:74ch;padding:34px 0 22px}
/* Stessa scala del titolo delle altre pagine (.phead h1 in base.css):
   un articolo non e piu importante di una pagina, e a 40px stonava. */
.art-head h1{font-size:clamp(26px,2.4vw,34px);line-height:1.15;margin:10px 0 0;letter-spacing:-.03em}
.art-lede{
  margin:16px 0 0;font-size:16px;font-weight:300;line-height:1.6;
  color:var(--muted);
}

.art-cover{margin:0 0 8px}
.art-cover img{width:100%;height:auto;border-radius:var(--r);display:block}
.art-cover figcaption{
  margin-top:9px;font-size:12.5px;color:var(--muted);
}

/* Colonna di lettura: oltre i 68 caratteri per riga l'occhio perde il
   capo, ed e il motivo per cui il testo non va a tutta larghezza. */
/* 15,5px come .lead: a 16,5 il testo dell'articolo era piu grande di
   qualsiasi altro testo del sito. */
.art-body{max-width:70ch;padding:26px 0 10px;font-size:15.5px;line-height:1.75;color:var(--text)}
.art-body > * + *{margin-top:1.15em}
.art-body h2{font-size:clamp(20px,1.8vw,26px);line-height:1.25;margin-top:1.9em}
.art-body h3{font-size:18.5px;margin-top:1.6em}
.art-body a{color:var(--verde-testo);text-decoration:underline;text-underline-offset:2px}
.art-body ul,
.art-body ol{padding-left:1.25em}
.art-body li + li{margin-top:.4em}
.art-body img{max-width:100%;height:auto;border-radius:12px;display:block}
.art-body figure{margin:1.6em 0}
.art-body figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.art-body blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;
  border-left:3px solid var(--verde-luce);
  font-size:17px;font-style:normal;color:var(--ink);
}
.art-body blockquote p{margin:0}
.art-body table{width:100%;border-collapse:collapse;font-size:14.5px}
.art-body th,
.art-body td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.art-body iframe{max-width:100%;border-radius:12px}

.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding-bottom:44px}
.art-tags a{
  padding:5px 13px;border:1px solid var(--line);border-radius:var(--pill);
  font-size:12.5px;color:var(--muted);text-decoration:none;background:#fff;
}
.art-tags a:hover{border-color:var(--line-2);color:var(--ink);text-decoration:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .art-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  /* In evidenza: la foto sopra, il testo sotto. Affiancati su schermo
     stretto la colonna di testo scenderebbe sotto i 30 caratteri. */
  .ac-lead{flex-direction:column}
  .ac-lead .ac-img{flex:none;aspect-ratio:16/10}
  .ac-lead .ac-b{padding:22px 22px 24px}
}

@media (max-width:600px){
  .art-grid{grid-template-columns:1fr}
  .art-body{font-size:15px}
}