/*
 * blog.css — Archivio blog "Storie" (mockup blog.html) + singolo articolo.
 * Scoped sotto .blog-archive / .blog-single. Riusa i token :root globali.
 *
 * @package Peperibimbi
 */

.blog-archive { padding-block: clamp(32px,5vw,64px); }

/* HERO */
.blog-archive .blog-hero { text-align:center;max-width:720px;margin:0 auto clamp(34px,5vw,54px) }
.blog-archive .blog-hero .eyebrow { font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);font-weight:600 }
.blog-archive .blog-hero h1 { font-family:'Fraunces',serif;font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;line-height:1.04;margin:14px 0 }
.blog-archive .blog-hero h1 em { color:var(--terra);font-style:italic }
.blog-archive .blog-hero p { font-size:1.12rem;color:var(--ink-soft);max-width:52ch;margin:0 auto }

/* FEATURED */
.blog-archive .featured { display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch;background:var(--bone-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:46px }
.blog-archive .featured-img { display:block;min-height:320px;background:var(--bone);overflow:hidden }
.blog-archive .featured-img img { width:100%;height:100%;object-fit:cover;transition:transform .5s }
.blog-archive .featured:hover .featured-img img { transform:scale(1.03) }
.blog-archive .featured-body { padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center }
.blog-archive .featured-body h2 { font-family:'Fraunces',serif;font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:500;line-height:1.06;margin:10px 0 14px }
.blog-archive .featured-body h2 em { color:var(--terra);font-style:italic }
.blog-archive .featured-body h2 a:hover { color:var(--terra) }
.blog-archive .featured-body p { color:var(--ink-soft);font-size:1.02rem;margin-bottom:18px }

/* CAT BADGE + META */
.blog-archive .cat-badge,
.blog-single .cat-badge { display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35em .85em;border-radius:999px;background:rgba(196,74,46,.12);color:var(--terra-deep);width:fit-content }
.blog-archive .meta { display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--mute);margin:14px 0 6px;flex-wrap:wrap }
.blog-archive .meta .av { width:32px;height:32px;border-radius:999px;object-fit:cover;background:var(--bone) }
.blog-archive .meta b { color:var(--ink) }

/* FILTERS */
.blog-archive .blog-filters { display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px }
.blog-archive .blog-filter { border:1.5px solid var(--line);border-radius:999px;padding:.6em 1.3em;font-size:.86rem;font-weight:500;cursor:pointer;transition:.2s;color:var(--ink) }
.blog-archive .blog-filter:hover { border-color:var(--ink) }
.blog-archive .blog-filter.active { background:var(--ink);color:var(--bone);border-color:var(--ink) }

/* GRID + CARD */
.blog-archive .post-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:30px }
.blog-archive .post-card { background:var(--bone-2);border:1px solid transparent;border-radius:10px;overflow:hidden;transition:.2s;display:flex;flex-direction:column }
.blog-archive .post-card:hover { transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow,0 12px 40px rgba(27,20,16,.10)) }
.blog-archive .post-card .card-img { display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bone) }
.blog-archive .post-card .card-img img { width:100%;height:100%;object-fit:cover;transition:.4s }
.blog-archive .post-card:hover .card-img img { transform:scale(1.04) }
.blog-archive .post-card .card-body { padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1 }
.blog-archive .post-card h3 { font-family:'Fraunces',serif;font-size:1.32rem;font-weight:500;line-height:1.18;margin:0 }
.blog-archive .post-card h3 a:hover { color:var(--terra) }
.blog-archive .post-card p { color:var(--ink-soft);font-size:.94rem;margin:0;flex:1 }
.blog-archive .post-card .card-meta { display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--mute);margin-top:4px }
.blog-archive .post-card .card-meta .av { width:26px;height:26px;border-radius:999px;object-fit:cover;background:var(--bone) }

/* PAGINATION */
.blog-archive .pagination { display:flex;justify-content:center;gap:8px;margin:54px 0 0 }
.blog-archive .pagination a,
.blog-archive .pagination span { min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:999px;font-weight:600;transition:.2s }
.blog-archive .pagination a:hover { border-color:var(--ink) }
.blog-archive .pagination .current { background:var(--terra);color:#fff;border-color:var(--terra) }

/* CTA / NEWSLETTER */
.blog-archive .blog-cta { margin-top:clamp(46px,6vw,74px);background:var(--forest);color:var(--bone);border-radius:16px;padding:clamp(34px,5vw,64px);text-align:center }
.blog-archive .blog-cta h2 { font-family:'Fraunces',serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400;color:var(--bone);margin-bottom:12px }
.blog-archive .blog-cta h2 em { color:var(--butter);font-style:italic }
.blog-archive .blog-cta p { opacity:.85;max-width:480px;margin:0 auto 26px }
.blog-archive .blog-cta .news-form { display:flex;gap:10px;max-width:480px;margin:0 auto }
.blog-archive .blog-cta .news-form input { flex:1;background:rgba(255,255,255,.08);border:1.5px solid rgba(244,235,221,.3);border-radius:999px;padding:.9em 1.4em;color:var(--bone);font-family:inherit }
.blog-archive .blog-cta .news-form input::placeholder { color:rgba(244,235,221,.55) }
.blog-archive .blog-cta .news-form button { background:var(--butter);color:var(--ink);border:none;border-radius:999px;padding:.9em 1.8em;font-family:inherit;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;cursor:pointer }
.blog-archive .blog-cta .news-form button:hover { filter:brightness(1.06) }

@media (max-width:980px){ .blog-archive .post-grid { grid-template-columns:repeat(2,1fr) } }
@media (max-width:880px){
  .blog-archive .featured { grid-template-columns:1fr }
  .blog-archive .featured-img { order:-1;min-height:220px }
  .blog-archive .post-grid { grid-template-columns:1fr }
  .blog-archive .blog-cta .news-form { flex-direction:column }
}

/* =========================================================================
   SINGOLO ARTICOLO (.blog-single)
   ========================================================================= */
.blog-single { padding-bottom:0 }
.blog-single .breadcrumb { font-size:.84rem;color:var(--mute);padding:26px 0 0 }
.blog-single .breadcrumb a:hover { color:var(--ink) }
.blog-single .breadcrumb span { color:var(--ink) }

/* Post header */
.blog-single .post-head { max-width:820px;margin:0 auto;text-align:center;padding:30px 0 36px }
.blog-single .post-head .cat-badge { margin-bottom:18px }
.blog-single .post-head h1 { font-family:'Fraunces',serif;font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:500;margin-bottom:24px;line-height:1.1 }
.blog-single .post-head h1 em { color:var(--terra);font-style:italic }
.blog-single .post-meta { display:flex;align-items:center;justify-content:center;gap:14px;font-size:.9rem;color:var(--mute);flex-wrap:wrap }
.blog-single .post-meta .av { width:42px;height:42px;border-radius:999px;object-fit:cover;background:var(--bone-2) }
.blog-single .post-meta b { color:var(--ink) }
.blog-single .share { display:flex;gap:10px;margin-left:6px }
.blog-single .share a { width:36px;height:36px;border:1.5px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:.2s;color:var(--ink) }
.blog-single .share a:hover { border-color:var(--ink) }

.blog-single .cover { max-width:1100px;margin:0 auto 60px;border-radius:14px;overflow:hidden;aspect-ratio:16/8 }
.blog-single .cover img { width:100%;height:100%;object-fit:cover }

/* Layout body + TOC */
.blog-single .article-layout { display:grid;grid-template-columns:240px minmax(0,720px);gap:60px;justify-content:center;padding-bottom:80px }
.blog-single .toc { position:sticky;top:100px;align-self:start;font-size:.9rem }
.blog-single .toc h4 { font-family:'Instrument Sans';text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;color:var(--mute);margin-bottom:16px }
.blog-single .toc ul { list-style:none;border-left:2px solid var(--line) }
.blog-single .toc li a { display:block;padding:8px 0 8px 16px;color:var(--ink-soft);margin-left:-2px;border-left:2px solid transparent;transition:.2s }
.blog-single .toc li a:hover,.blog-single .toc li a.active { color:var(--terra-deep);border-color:var(--terra) }

/* Article body (contenuto WP) */
.blog-single .article-body { font-size:1.12rem;color:var(--ink-soft) }
.blog-single .article-body > p:first-of-type { font-size:1.3rem;color:var(--ink);line-height:1.5 }
.blog-single .article-body p { margin-bottom:1.4em }
.blog-single .article-body h2 { font-family:'Fraunces',serif;font-size:1.9rem;color:var(--ink);margin:1.8em 0 .6em;scroll-margin-top:100px }
.blog-single .article-body h3 { font-family:'Fraunces',serif;font-size:1.4rem;color:var(--ink);margin:1.4em 0 .5em }
.blog-single .article-body ul,.blog-single .article-body ol { margin:0 0 1.4em 1.3em }
.blog-single .article-body li { margin-bottom:.5em }
.blog-single .article-body a { color:var(--terra-deep);text-decoration:underline }
.blog-single .article-body blockquote { border-left:4px solid var(--terra);background:var(--bone-2);padding:24px 28px;margin:1.8em 0;border-radius:0 6px 6px 0;font-family:'Fraunces',serif;font-style:italic;font-size:1.35rem;color:var(--ink);line-height:1.4 }
.blog-single .article-body figure { margin:2em 0 }
.blog-single .article-body figure img { border-radius:6px;width:100% }
.blog-single .article-body figcaption { font-size:.84rem;color:var(--mute);text-align:center;margin-top:10px }
.blog-single .article-body img { border-radius:6px }

/* Author box */
.blog-single .author-box { display:flex;gap:22px;align-items:center;background:var(--bone-2);border-radius:10px;padding:30px;margin-top:50px }
.blog-single .author-box img { width:84px;height:84px;border-radius:999px;object-fit:cover;flex-shrink:0;background:var(--bone) }
.blog-single .author-box h4 { font-family:'Fraunces',serif;font-size:1.3rem;margin-bottom:6px }
.blog-single .author-box .lbl { color:var(--mute);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700 }
.blog-single .author-box p { font-size:.94rem;color:var(--ink-soft);margin:0 }

/* Related */
.blog-single .related { background:var(--bone-2);padding:74px 0;margin-top:20px }
.blog-single .related h2 { font-family:'Fraunces',serif;text-align:center;font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:44px;font-weight:500 }
.blog-single .related h2 em { color:var(--terra);font-style:italic }
.blog-single .rel-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:28px }
.blog-single .rel-card { background:var(--bone);border-radius:8px;overflow:hidden;transition:.2s;display:flex;flex-direction:column }
.blog-single .rel-card:hover { transform:translateY(-4px) }
.blog-single .rel-card .img { display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bone-2) }
.blog-single .rel-card .img img { width:100%;height:100%;object-fit:cover }
.blog-single .rel-card .b { padding:22px }
.blog-single .rel-card .cat-badge { margin-bottom:10px }
.blog-single .rel-card h3 { font-family:'Fraunces',serif;font-size:1.22rem;margin-bottom:8px;font-weight:500 }
.blog-single .rel-card small { color:var(--mute);font-size:.82rem }

/* CTA shop */
.blog-single .cta-shop { background:var(--terra);color:#fff;text-align:center;padding:70px 32px }
.blog-single .cta-shop h2 { font-family:'Fraunces',serif;font-size:clamp(1.9rem,4vw,3rem);color:#fff;margin-bottom:14px;font-weight:500 }
.blog-single .cta-shop h2 em { color:var(--butter);font-style:italic }
.blog-single .cta-shop p { opacity:.92;max-width:480px;margin:0 auto 26px }
.blog-single .cta-shop .cta-btn { display:inline-flex;background:#fff;color:var(--terra-deep);border-radius:999px;padding:.9em 1.9em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem }

@media (max-width:880px){
  .blog-single .article-layout { grid-template-columns:1fr;gap:0 }
  .blog-single .toc { position:static;border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:34px }
  .blog-single .toc ul { border-left:none }
  .blog-single .author-box { flex-direction:column;text-align:center }
  .blog-single .rel-grid { grid-template-columns:1fr }
  .blog-single .cover { aspect-ratio:4/3 }
}