/*
 * Corpo del blog nel tema della home.
 *
 * Header, footer, font e il CSS di Tailwind NON stanno qui: li innesta
 * `scripts/blog-guscio.mjs` dopo il prerender, prendendoli da dist/index.html,
 * cosi' sono gli stessi byte della home e non possono divergere. Questo file
 * veste solo le classi `ap-*` che l'Ufficio Stampa scrive negli articoli e
 * nell'indice, e usa le variabili che src/index.css dichiara su :root.
 */

/* ===== Indice: /blog/ ===== */

.ap-blog-hero {
  max-width: 1400px;
  margin: 0 auto;
  padding: 80px 20px 64px;
  border-bottom: 1px solid var(--ink-border);
}
@media (min-width: 640px) { .ap-blog-hero { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1024px) { .ap-blog-hero { padding: 112px 48px 80px; } }

.ap-label { display: flex; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.ap-label-num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; color: var(--bone-faded);
}

.ap-blog-hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 14ch;
}
.ap-blog-hero h1 span { color: var(--bone); }
.ap-blog-hero h1::after { content: "."; color: var(--signal); }
.ap-blog-hero p {
  margin-top: 28px; max-width: 36rem;
  color: var(--bone-faded); font-size: 1.05rem; line-height: 1.65;
}

.ap-grid {
  max-width: 1400px;
  margin: 64px auto 96px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-border);
  border-top: 1px solid var(--ink-border);
  border-bottom: 1px solid var(--ink-border);
}
@media (min-width: 768px) { .ap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) {
  .ap-grid { border-left: 1px solid var(--ink-border); border-right: 1px solid var(--ink-border); }
}

.ap-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ink-bg);
  transition: background-color 200ms ease;
}
.ap-card:hover { background: var(--ink-surface); }
.ap-card-img {
  width: 100%; height: 220px; object-fit: cover;
  border-bottom: 1px solid var(--ink-border);
  filter: saturate(0.85) contrast(1.02);
  transition: filter 300ms ease;
}
.ap-card:hover .ap-card-img { filter: none; }
.ap-card-body { flex: 1; display: flex; flex-direction: column; padding: 32px; min-width: 0; }
.ap-card-tag {
  align-self: flex-start; margin-bottom: 20px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-faded);
}
.ap-card h3 {
  font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.025em;
  margin-bottom: 16px; overflow-wrap: anywhere;
  transition: color 200ms ease;
}
.ap-card:hover h3 { color: var(--signal); }
.ap-card p {
  flex: 1; margin-bottom: 24px;
  font-size: 0.875rem; line-height: 1.65; color: var(--bone-muted);
  overflow-wrap: anywhere;
}
.ap-card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-faded);
}
.ap-card-meta::after { content: "Leggi la guida \2192"; color: var(--signal); }

/* ===== Articolo ===== */

.ap-hero {
  position: relative; height: 520px; overflow: hidden;
  border-bottom: 1px solid var(--ink-border);
}
.ap-hero img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.ap-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,9,0.25) 0%, rgba(10,10,9,0.55) 45%, rgba(10,10,9,0.96) 100%);
}
.ap-hero-text { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 2; }
.ap-hero-text-inner { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.ap-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.02; letter-spacing: -0.035em;
}
.ap-hero-meta {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-muted);
}
.ap-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.ap-hero-meta span::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--signal);
}

.ap-article { max-width: 820px; margin: 0 auto; padding: 56px 20px 96px; }

.ap-toc {
  margin-bottom: 56px; padding: 28px 32px;
  background: var(--ink-surface); border: 1px solid var(--ink-border);
}
.ap-toc-title {
  margin-bottom: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--signal);
}
.ap-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.ap-toc li {
  counter-increment: toc; display: flex; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--ink-surface-2);
}
.ap-toc li:first-child { border-top: 0; }
.ap-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--bone-faded); padding-top: 2px;
}
.ap-toc a { color: var(--bone); font-size: 0.95rem; line-height: 1.45; transition: color 200ms ease; }
.ap-toc a:hover { color: var(--signal); }

.ap-body { color: var(--bone-muted); font-size: 1.075rem; line-height: 1.78; overflow-wrap: break-word; }
.ap-body h2 {
  margin: 64px 0 20px; padding-top: 28px;
  border-top: 1px solid var(--ink-border);
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1;
  scroll-margin-top: 140px;
}
.ap-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ap-body h3 { margin: 40px 0 14px; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; }
.ap-body h4 { margin: 28px 0 10px; font-size: 1.1rem; }
.ap-body p { margin-bottom: 22px; }
.ap-body strong, .ap-body b { color: var(--bone); font-weight: 600; }
.ap-body ul, .ap-body ol { margin: 0 0 24px 1.4em; }
.ap-body ul { list-style: square; }
.ap-body ol { list-style: decimal; }
.ap-body li { margin-bottom: 10px; padding-left: 4px; }
.ap-body li::marker { color: var(--signal); }
.ap-body a {
  color: var(--bone);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; text-decoration-color: var(--signal-dim);
  transition: color 200ms ease, text-decoration-color 200ms ease;
}
.ap-body a:hover { color: var(--signal); text-decoration-color: var(--signal); }
.ap-body img { margin: 32px 0; border: 1px solid var(--ink-border); }
/* Schermate del prodotto: ogni articolo ne ha almeno una, con didascalia. */
.ap-body figure { margin: 40px 0; }
.ap-body figure img { width: 100%; margin: 0; border: 1px solid var(--ink-border-strong); }
.ap-body figcaption {
  margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--signal);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; color: var(--bone-faded);
}
.ap-body table {
  width: 100%; margin: 32px 0; border-collapse: collapse;
  font-size: 0.92rem; line-height: 1.5;
  display: block; overflow-x: auto;
}
.ap-body th, .ap-body td { padding: 14px 16px; text-align: left; border: 1px solid var(--ink-border); vertical-align: top; }
.ap-body th {
  background: var(--ink-surface); color: var(--bone);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.ap-body tr:nth-child(even) td { background: rgba(21, 20, 15, 0.5); }
.ap-body blockquote {
  margin: 32px 0; padding: 4px 0 4px 24px;
  border-left: 2px solid var(--signal);
  color: var(--bone); font-family: "IBM Plex Serif", Georgia, serif; font-size: 1.2rem; line-height: 1.5;
}
.ap-body code {
  padding: 2px 6px; background: var(--ink-surface-2); color: var(--bone);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.88em;
}
.ap-body hr { border: 0; border-top: 1px solid var(--ink-border); margin: 48px 0; }

.ap-author {
  display: flex; gap: 20px; align-items: center;
  margin: 72px 0 0; padding: 28px 0;
  border-top: 1px solid var(--ink-border); border-bottom: 1px solid var(--ink-border);
}
.ap-author-avatar {
  flex-shrink: 0; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--signal); color: var(--ink-bg);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: 14px; letter-spacing: 0.08em;
}
.ap-author-name { margin-bottom: 4px; color: var(--bone); font-weight: 600; }
.ap-author-bio { color: var(--bone-faded); font-size: 0.9rem; line-height: 1.55; }

.ap-cta {
  margin: 56px 0; padding: 48px 40px;
  background: var(--ink-surface); border: 1px solid var(--ink-border-strong);
}
.ap-cta::before {
  content: "Esclusiva di zona"; display: block; margin-bottom: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal);
}
.ap-cta h3 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 14px; }
.ap-cta p { color: var(--bone-faded); margin-bottom: 28px; font-size: 1rem; line-height: 1.6; max-width: 34rem; }
.ap-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 24px; background: var(--signal); color: var(--ink-bg) !important;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  transition: background-color 200ms ease;
}
.ap-cta-btn::after { content: "\2197"; }
.ap-cta-btn:hover { background: #ffd233; }
/* Un invito all'azione dentro il corpo: senza, `.ap-body a` gli mette la sottolineatura e il colore dei link. */
.ap-body .ap-cta { margin: 48px 0; }
.ap-body .ap-cta-btn { text-decoration: none; color: var(--ink-bg); }
.ap-body .ap-cta-btn:hover { color: var(--ink-bg); }

.ap-related { margin: 56px 0 0; }
.ap-related h3 {
  margin-bottom: 20px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-faded);
}
.ap-related-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--ink-border); border: 1px solid var(--ink-border);
}
@media (min-width: 640px) { .ap-related-grid { grid-template-columns: repeat(3, 1fr); } }
.ap-related-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 140px; padding: 24px; background: var(--ink-bg);
  transition: background-color 200ms ease;
}
.ap-related-card:hover { background: var(--ink-surface); }
.ap-related-card::after {
  content: "\2192"; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--signal);
}
.ap-related-card-title {
  color: var(--bone); font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.015em;
  transition: color 200ms ease;
}
.ap-related-card:hover .ap-related-card-title { color: var(--signal); }

/* ===== Menu mobile (la home lo monta con React, qui lo monta blog-guscio) ===== */

.ap-mnav { border-top: 1px solid var(--ink-border); background: var(--ink-bg); padding: 8px 20px 24px; }
.ap-mnav[hidden] { display: none; }
.ap-mnav-group { padding: 14px 0; border-bottom: 1px solid var(--ink-surface-2); }
.ap-mnav-title { display: flex; align-items: baseline; gap: 12px; color: var(--bone); font-family: "IBM Plex Serif", Georgia, serif; font-weight: 600; font-size: 1.25rem; }
.ap-mnav-title span { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 400; color: var(--bone-faded); }
.ap-mnav-items { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0 28px; }
.ap-mnav-items a {
  display: block; padding: 12px 14px; border: 1px solid var(--ink-surface-2); background: var(--ink-surface);
  color: var(--bone); font-size: 15px; font-weight: 500;
}
.ap-mnav-items a:hover { border-color: var(--signal); color: var(--signal); }
.ap-mnav-cta {
  display: flex; justify-content: center; margin-top: 20px; padding: 12px 20px;
  background: var(--signal); color: var(--ink-bg); font-weight: 600; font-size: 14px;
}

@media (max-width: 767px) {
  .ap-hero { height: 440px; }
  .ap-hero-text { bottom: 32px; }
  .ap-article { padding: 40px 16px 72px; }
  .ap-toc { padding: 22px 20px; }
  .ap-card-body { padding: 24px 20px; }
  .ap-cta { padding: 32px 22px; }
  .ap-grid { margin: 40px 0 64px; }
}