/* =============================================================
   BLOG / ARTICOLI (SEO + AI) — Loredana & Alessandro
   Da usare INSIEME a styles.css e servizi.css (riusa header,
   footer, band, link e wa-float di servizi.css).
   Corpo articolo in HTML libero: vedi .art-prose.
   ============================================================= */

/* ---------- Testata articolo ---------- */
.art-head{max-width:820px;margin:0 auto;padding:clamp(40px,7vw,84px) var(--gut) clamp(8px,2vw,18px)}
.art-breadcrumb{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:clamp(22px,3vw,30px)}
.art-breadcrumb a{color:var(--ink-mute);transition:color .3s}
.art-breadcrumb a:hover{color:var(--ink)}
.art-breadcrumb .sep{margin:0 .55em;opacity:.5}
.art-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-deep);margin-bottom:18px}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--taupe)}
.art-title{font-family:var(--serif);font-weight:300;line-height:1.03;letter-spacing:-.01em;
  font-size:clamp(2.2rem,6vw,4rem);margin:0 0 clamp(18px,2.5vw,26px);text-wrap:balance}
.art-lead{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--ink-soft);
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.35;max-width:60ch;text-wrap:pretty}

.art-hero-img{max-width:1080px;margin:clamp(30px,5vw,56px) auto 0;padding:0 var(--gut)}
.art-hero-img figure{border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.art-hero-img img,.art-hero-img .ph{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* ---------- Corpo articolo (HTML libero) ---------- */
.art-prose{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--gut) clamp(20px,3vw,40px);
  font-size:clamp(1.06rem,1.5vw,1.2rem);line-height:1.85;color:var(--ink-soft)}
.art-prose > *:first-child{margin-top:0}
.art-prose p{margin:0 0 1.3em}
.art-prose h2{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.12;
  font-size:clamp(1.7rem,3.4vw,2.4rem);margin:clamp(40px,5vw,56px) 0 clamp(12px,1.6vw,18px);text-wrap:balance}
.art-prose h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.15;
  font-size:clamp(1.35rem,2.6vw,1.8rem);margin:clamp(30px,4vw,40px) 0 clamp(10px,1.4vw,14px)}
.art-prose ul,.art-prose ol{margin:0 0 1.3em;padding-left:1.3em}
.art-prose li{margin-bottom:.55em;padding-left:.2em}
.art-prose li::marker{color:var(--taupe-deep)}
.art-prose strong{color:var(--ink);font-weight:500}
.art-prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--taupe);transition:color .3s}
.art-prose a:hover{color:var(--taupe-deep)}
.art-prose blockquote{margin:clamp(28px,4vw,40px) 0;padding:.2em 0 .2em 1.2em;border-left:2px solid var(--taupe);
  font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4;color:var(--ink)}
.art-prose figure{margin:clamp(30px,4vw,44px) 0}
.art-prose figure img,.art-prose figure .ph{width:100%;border-radius:3px;border:1px solid var(--line);display:block;aspect-ratio:16/10;object-fit:cover}
.art-prose figcaption{margin-top:.7em;font-size:.8rem;letter-spacing:.04em;color:var(--ink-mute);text-align:center}
.art-prose hr{border:0;height:1px;background:var(--line);margin:clamp(34px,5vw,48px) 0}

/* box / callout evidenziato */
.art-prose .art-callout{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:clamp(20px,3vw,30px);margin:clamp(28px,4vw,40px) 0;font-size:1rem;line-height:1.7}
.art-prose .art-callout strong{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:500;margin-bottom:.4em;color:var(--ink)}

/* ---------- Indice blog ---------- */
.bi-hero{padding:clamp(56px,9vw,120px) var(--gut) clamp(30px,5vw,56px);text-align:center}
.bi-hero .section-title{margin:.4em auto .5em}
.bi-hero .section-intro{margin-inline:auto}
.bi-grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(56px,9vw,120px);
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.bi-card{background:var(--white);padding:clamp(22px,2.6vw,32px);display:grid;gap:14px;transition:.5s var(--ease)}
.bi-card:hover{background:var(--paper)}
.bi-card .bi-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px;display:block}
.bi-card .bi-thumb.ph{aspect-ratio:16/10}
.bi-card .post-meta{display:flex;gap:12px;align-items:center;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-deep)}
.bi-card .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--taupe)}
.bi-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.6vw,1.95rem);line-height:1.1;color:var(--ink)}
.bi-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.bi-card .read{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.6em;margin-top:2px}
.bi-card .read span{transition:transform .4s var(--ease)}
.bi-card:hover .read span{transform:translateX(5px)}
@media(min-width:680px){.bi-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.bi-grid{grid-template-columns:repeat(3,1fr)}}

/* navigazione fine articolo */
.art-end{max-width:820px;margin:0 auto;padding:0 var(--gut)}
.art-end .art-back{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);transition:color .3s}
.art-end .art-back:hover{color:var(--ink)}