/*
 * public/css/blog.css | Last modified: 2026-05-18 | v1.0
 *
 * PURPOSE:
 *   Page-scoped stylesheet for /blog index and /blog/{slug} article view.
 *   Imported via $extra_css only on blog routes, NOT sitewide.
 *
 *   This file contains the design originally delivered as two standalone
 *   HTML pages (design/articolo_blog/Blog.html + Blog Post.html). The
 *   two <style> blocks have been unified and deduplicated; reset/base
 *   rules (body, *, .wrap, .nav, footer) have been removed because the
 *   site already ships them in public/css/style.css and would override.
 *
 * SCOPE:
 *   - Sub-nav category bar (.blog-subnav)
 *   - Hero variants (.blog-hero / .blog-hero--post)
 *   - Index article grid (.articles-grid, .article-card, .article-card .cat)
 *   - Post body typography (.post-body)
 *   - Inline CTA, share bar, author box, related posts
 *   - Sidebar boxes (.box-contatti, .box-annuncio, .box-correlati)
 *
 * DEPENDENCIES:
 *   - public/css/style.css (loaded BEFORE this file by base.php).
 *     This file relies on --blu, --giallo, --testo defined there.
 *   - Google Fonts Barlow Condensed + Nunito: already loaded sitewide
 *     by base.php, NO duplicate <link> here.
 *
 * CRITICAL NOTES:
 *   - Local CSS variables (--blu-light, --grigio-bg, --grigio-bordo,
 *     --grigio-testo, --amber-bg, --amber-bordo, --display, --body) are
 *     declared in :root inside this file. They redefine sitewide values
 *     only WHEN this stylesheet is loaded (blog pages). On non-blog
 *     pages those values fall back to whatever style.css defines.
 *   - h1..h4 global rule from the design is NOT replicated here to avoid
 *     conflicts with style.css globally-applied typography. Heading
 *     specifics live inside scoped containers (.blog-hero h1,
 *     .post-body h2, etc.).
 *
 * REVISION HISTORY:
 *   - 2026-05-18 v1.0: initial release. Extracted and unified from
 *                      design/articolo_blog/Blog.html and Blog Post.html.
 *                      Removed duplicate base/reset rules (already in
 *                      style.css). Resolved hero divergence via
 *                      .blog-hero--post modifier.
 */

/* ============================================================================
   1. SCOPED CSS VARIABLES (local additions to the sitewide palette)
   ============================================================================ */

:root {
  --blu-light: #F0F4FF;
  --grigio-bg: #F8F9FA;
  --grigio-bordo: #E5E7EB;
  --grigio-testo: #6B7280;
  --amber-bg: #FEF3C7;
  --amber-bordo: #F59E0B;
  --display: 'Barlow Condensed', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

/* ============================================================================
   2. SUB-NAV CATEGORIE (sticky, horizontal scrollable)
   ============================================================================ */

.blog-subnav {
  background: var(--grigio-bg);
  border-bottom: 1px solid var(--grigio-bordo);
  position: sticky;
  top: 0;
  z-index: 50;
}
.blog-subnav .wrap {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-subnav .wrap::-webkit-scrollbar { display: none; }

.blog-subnav a {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  margin-right: 28px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--testo);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.blog-subnav a:last-child { margin-right: 0; }
.blog-subnav a:hover { color: var(--blu); }
.blog-subnav a.active {
  color: var(--blu);
  border-bottom-color: var(--blu);
  font-weight: 700;
}

/* ============================================================================
   3. HERO BLOG (index variant — centered)
   ============================================================================ */

.blog-hero {
  background: var(--blu);
  color: #fff;
  padding: 48px 0 56px;
  text-align: center;
}
.blog-hero h1 {
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
  margin: 0 0 10px;
}
.blog-hero p {
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  max-width: 640px;
  line-height: 1.55;
}

/* ============================================================================
   4. HERO POST (modifier — left-aligned, breadcrumb, post meta)
   ============================================================================ */

.blog-hero--post {
  padding: 40px 0 44px;
  text-align: left;
}
.blog-hero--post h1 {
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 24ch;
  text-wrap: balance;
}

.blog-hero .crumbs {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
}
.blog-hero .crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-hero .crumbs a {
  color: rgba(255, 255, 255, 0.85);
  transition: color .2s ease;
}
.blog-hero .crumbs a:hover { color: var(--giallo); }
.blog-hero .crumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.55);
}
.blog-hero .crumbs li:last-child {
  color: var(--giallo);
  font-weight: 700;
}

.post-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--giallo);
  color: var(--blu);
  margin-bottom: 18px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}
.post-meta .item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-meta .item .ic { color: var(--giallo); }
.post-meta .sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

/* ============================================================================
   5. MAIN LAYOUT (2-col main + sidebar)
   ============================================================================ */

.blog-main { padding: 48px 0 80px; }
.post-main { padding: 40px 0 80px; }

.blog-grid-2col,
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .blog-grid-2col { grid-template-columns: 2fr 1fr; gap: 40px; }
  .post-grid      { grid-template-columns: 2fr 1fr; gap: 48px; }
}

/* ============================================================================
   6. ARTICLE GRID (index cards)
   ============================================================================ */

.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

.article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: 8px;
  padding: 22px;
  box-shadow: 0 1px 2px rgba(15, 30, 80, 0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -12px rgba(15, 30, 80, 0.18);
  border-color: #d4d8e0;
}

.article-card .cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
  background: #DBE3F5;
  color: var(--blu);
}
.article-card .cat.amber  { background: #FEF3C7; color: #92400E; }
.article-card .cat.teal   { background: #D1FAE5; color: #065F46; }
.article-card .cat.violet { background: #E9E0FB; color: #5B21B6; }
.article-card .cat.rose   { background: #FCE7E7; color: #9F1239; }

.article-card h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--blu);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card .excerpt {
  color: var(--grigio-testo);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.article-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--grigio-bordo);
}
.article-card .date {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.article-card .read {
  font-size: 13px;
  font-weight: 700;
  color: var(--blu);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .25s ease;
}
.article-card:hover .read { gap: 8px; }

/* ============================================================================
   7. POST BODY (typography of the rendered Markdown)
   ============================================================================ */

.post-body { max-width: 720px; }

.post-body p {
  margin: 0 0 18px;
  color: #2A2A3E;
  font-size: 17px;
  line-height: 1.75;
}
.post-body p.lede {
  font-size: 19px;
  line-height: 1.6;
  color: #1F2937;
  font-weight: 500;
}
.post-body h2 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--blu);
  font-size: clamp(24px, 3.5vw, 28px);
  line-height: 1.2;
  margin: 36px 0 14px;
}
.post-body h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--blu);
  font-size: clamp(20px, 2.5vw, 22px);
  line-height: 1.2;
  margin: 28px 0 10px;
}
.post-body a {
  color: var(--blu);
  border-bottom: 1px solid #BFCBF0;
  font-weight: 600;
  transition: border-color .2s ease;
}
.post-body a:hover { border-color: var(--blu); }

.post-body ul,
.post-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: #2A2A3E;
}
.post-body li {
  margin-bottom: 10px;
  line-height: 1.65;
}

.post-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  background: var(--grigio-bg);
  border-left: 4px solid var(--giallo);
  border-radius: 0 6px 6px 0;
  color: #374151;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
}
.post-body strong { color: var(--blu); font-weight: 700; }

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.post-body table th,
.post-body table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grigio-bordo);
}
.post-body table th {
  background: var(--grigio-bg);
  font-family: var(--display);
  font-weight: 700;
  color: var(--blu);
}

/* ============================================================================
   8. INLINE CTA inside post body
   ============================================================================ */

.inline-cta {
  margin: 40px 0;
  background: var(--blu-light);
  border: 2px solid var(--blu);
  border-radius: 10px;
  padding: 24px 26px;
}
.inline-cta h3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--blu);
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.inline-cta p {
  margin: 0 0 16px;
  color: #1F2937;
  font-size: 15px;
}
.inline-cta a.btn {
  display: inline-block;
  background: var(--blu);
  color: #fff;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 6px;
  border-bottom: none;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .2s ease;
}
.inline-cta a.btn:hover {
  background: var(--blu-2);
  transform: translateY(-1px);
}

/* ============================================================================
   9. SHARE BAR + AUTHOR
   ============================================================================ */

.share-bar {
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--grigio-bordo);
  border-bottom: 1px solid var(--grigio-bordo);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.share-bar .label {
  font-size: 13px;
  color: var(--grigio-testo);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.share-bar .share-list {
  display: flex;
  gap: 8px;
}
.share-bar a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--grigio-bordo);
  border-radius: 50%;
  color: var(--blu);
  transition: all .2s ease;
}
.share-bar a:hover {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
}

.author {
  margin-top: 32px;
  background: var(--grigio-bg);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.author .avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blu);
  color: var(--giallo);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
}
.author .info .name {
  font-family: var(--display);
  font-weight: 700;
  color: var(--blu);
  font-size: 18px;
  line-height: 1;
}
.author .info .role {
  font-size: 13px;
  color: var(--grigio-testo);
  margin-top: 4px;
}

/* ============================================================================
   10. SIDEBAR (contatti, annuncio, correlati)
   ============================================================================ */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 1024px) {
  .sidebar {
    position: sticky;
    top: 64px;
    align-self: start;
  }
}

.box-contatti {
  background: var(--blu);
  color: #fff;
  border-radius: 8px;
  padding: 24px;
}
.box-contatti h3 {
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.box-contatti .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.box-contatti .row a {
  color: #fff;
  transition: color .2s ease;
}
.box-contatti .row a:hover { color: var(--giallo); }
.box-contatti .row .ic {
  color: var(--giallo);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
}
.box-contatti .cta {
  display: block;
  margin-top: 18px;
  background: var(--giallo);
  color: var(--blu);
  text-align: center;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  padding: 13px 18px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: background .2s ease, transform .2s ease;
}
.box-contatti .cta:hover {
  background: #ffd028;
  transform: translateY(-1px);
}

.box-annuncio {
  background: var(--amber-bg);
  border-left: 4px solid var(--amber-bordo);
  border-radius: 8px;
  padding: 20px;
}
.box-annuncio h3 {
  color: #92400E;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px;
}
.box-annuncio p {
  margin: 0 0 14px;
  color: #78350F;
  font-size: 14px;
  line-height: 1.55;
}
.box-annuncio a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #92400E;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 2px solid var(--amber-bordo);
  padding-bottom: 1px;
  transition: gap .25s ease;
}
.box-annuncio a:hover { gap: 8px; }

.box-correlati {
  background: #fff;
  border: 1px solid var(--grigio-bordo);
  border-radius: 8px;
  padding: 20px 22px;
}
.box-correlati .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--giallo);
}
.box-correlati .head .titolo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.box-correlati .head .titolo .pre {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grigio-testo);
}
.box-correlati h3 {
  color: var(--blu);
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.005em;
  line-height: 1.05;
}
.box-correlati .head .vedi {
  font-size: 12px;
  font-weight: 700;
  color: var(--blu);
  transition: gap .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.box-correlati .head .vedi:hover { gap: 6px; }

.corr-item {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--grigio-bordo);
  transition: padding-left .25s ease;
}
.corr-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.corr-item:hover { padding-left: 4px; }
.corr-item:hover h4 { color: var(--blu-2); }
.corr-item h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--blu);
  line-height: 1.25;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s ease;
}
.corr-item .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--grigio-testo);
}
.corr-item .meta .ic {
  display: inline-flex;
  align-items: center;
  color: #9CA3AF;
}

/* ============================================================================
   11. ICONS (sizing helpers, used by inline SVGs in this stylesheet)
   ============================================================================ */

svg.icn-blog {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.icn-blog-sm {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================================
   12. MOBILE-FIRST READING OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 600px) {
  .blog-hero,
  .blog-hero--post { padding: 32px 0 36px; }
  .post-body p { font-size: 16.5px; line-height: 1.72; }
  .post-body p.lede { font-size: 18px; }
  .post-main { padding: 32px 0 56px; }
}