/* ============================================================
   Blog Andrea Serritella — stile
   Palette committed: crema (superficie) · oliva (brand) · terracotta (accento)
   Font: Mustard (display) + Onest (body), self-host woff2
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "Mustard";
  src: url("../fonts/Mustard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Onest";
  src: url("../fonts/Onest-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token (OKLCH, neutrali tinti verso l'oliva) ---------- */
:root {
  /* superfici */
  --surface:        oklch(0.965 0.012 95);   /* crema calda */
  --surface-2:      oklch(0.985 0.008 95);   /* card / bianco caldo */
  --surface-sunk:   oklch(0.93 0.016 95);

  /* inchiostro */
  --ink:            oklch(0.26 0.018 80);     /* testo principale */
  --ink-soft:       oklch(0.46 0.02 80);      /* testo secondario */
  --ink-faint:      oklch(0.60 0.02 80);

  /* brand */
  --olive:          oklch(0.46 0.10 122);     /* #485b12 ~ oliva */
  --olive-deep:     oklch(0.36 0.085 122);
  --olive-tint:     oklch(0.93 0.03 120);

  /* accento caldo */
  --terra:          oklch(0.74 0.085 47);     /* terracotta/peach */
  --terra-soft:     oklch(0.86 0.055 55);
  --terra-tint:     oklch(0.94 0.03 60);

  --line:           oklch(0.86 0.02 90);
  --line-strong:    oklch(0.78 0.025 90);

  /* tipografia */
  --font-display: "Mustard", "Onest", Georgia, serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* scala (1.28) */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.62rem, 1.4rem + 1.1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 4.8rem);

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px oklch(0.4 0.03 80 / 0.06), 0 12px 28px oklch(0.4 0.03 80 / 0.08);
  --shadow-card-hover: 0 2px 6px oklch(0.4 0.03 80 / 0.10), 0 22px 48px oklch(0.4 0.03 80 / 0.16);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1120px;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: oklch(0.965 0.012 95 / 0.82);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 1rem;
}
.brand {
  display: flex; align-items: baseline; gap: 0.55rem;
  text-decoration: none; color: var(--ink);
}
.brand b { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; letter-spacing: -0.01em; }
.brand span { font-size: var(--step--1); color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
.nav-back {
  font-size: var(--step--1); font-weight: 500; text-decoration: none;
  color: var(--olive-deep); padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line-strong); transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.nav-back:hover { background: var(--olive-tint); border-color: var(--olive); }

/* ---------- Hero landing ---------- */
.hero { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero .wrap { max-width: 880px; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--olive-deep); font-weight: 600; margin: 0 0 1.1rem;
}
.hero .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--olive); }
.hero h1 { font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); max-width: 24ch; margin: 0 0 1.1rem; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--olive); }
.hero p { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; margin: 0; line-height: 1.5; }

/* ---------- Griglia articoli ---------- */
.section-label {
  display: flex; align-items: center; gap: 1rem;
  margin: 1rem 0 2rem; color: var(--ink-faint);
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
@media (max-width: 760px) { .article-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .wrap { width: min(100% - 1.5rem, var(--maxw)); }
  .site-header .wrap { min-height: 62px; }
  .brand span { display: none; }
  .nav-back { padding-inline: 0.7rem; }
  .hero { padding-top: 2.6rem; }
  .site-footer .f-links { flex-wrap: wrap; gap: 0.8rem 1.2rem; }
}

/* ---------- Card ---------- */
.article-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  will-change: transform;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--line-strong);
}
.article-card:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

.card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunk); }
.card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.article-card:hover .card-cover img { transform: scale(1.04); }
.card-cover.placeholder {
  display: grid; place-items: center; color: var(--olive);
  background:
    radial-gradient(circle at 30% 20%, var(--terra-tint), transparent 60%),
    var(--olive-tint);
}
.card-cover.placeholder span { font-family: var(--font-display); font-size: 2.4rem; opacity: 0.5; }

/* badge video */
.card-cover .play {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: oklch(0.26 0.018 80 / 0.78); color: var(--surface);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.card-cover .play::before {
  content: ""; width: 0; height: 0;
  border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

.card-cover .lang-badge {
  position: absolute; right: 12px; top: 12px;
  background: oklch(0.985 0.008 95 / 0.92); color: var(--olive-deep);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem; border-radius: 999px; backdrop-filter: blur(4px);
}

.card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); color: var(--olive-deep); font-weight: 500;
  letter-spacing: 0.02em;
}
.card-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--terra); }
.card-meta .src { color: var(--ink-faint); font-weight: 400; }
.card-title { font-size: var(--step-2); margin: 0; color: var(--ink); }
.card-excerpt { color: var(--ink-soft); margin: 0; font-size: var(--step-0); line-height: 1.55; }
.card-more {
  margin-top: auto; padding-top: 0.4rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: var(--olive);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.card-more .arrow { transition: transform 0.35s var(--ease-out); }
.article-card:hover .card-more .arrow { transform: translateX(4px); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--olive-tint);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between; }
.site-footer .f-brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--olive-deep); }
.site-footer p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: var(--step--1); }
.site-footer .f-links { display: flex; gap: 1.4rem; }
.site-footer .f-links a { color: var(--olive-deep); text-decoration: none; font-weight: 500; font-size: var(--step--1); border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease-out); }
.site-footer .f-links a:hover { border-color: var(--olive); }

/* ============================================================
   Pagina articolo
   ============================================================ */
.article-page { padding-bottom: clamp(3rem, 7vw, 6rem); }
.article-hero { padding: clamp(2rem, 4vw, 3.2rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.article-hero .wrap { max-width: 760px; }
.article-kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--olive-deep); margin: 0 0 1rem;
}
.article-kicker .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--terra); }
.article-hero h1 { font-size: var(--step-3); margin: 0 0 1rem; color: var(--ink); }
.article-hero .lede { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; margin: 0; }

.article-figure { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.article-figure .media {
  width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card);
  background: var(--surface-sunk);
}
/* Box immagine uniforme: altezza fissa, object-fit contain (niente stretch, niente gigantismo, testo scan leggibile) */
.article-figure .media img {
  width: 100%; height: clamp(360px, 58vh, 600px);
  object-fit: contain; display: block; background: var(--surface-sunk);
}
.article-figure figcaption {
  width: min(100% - 2.5rem, 760px); margin: 0.8rem auto 0;
  font-size: var(--step--1); color: var(--ink-faint); text-align: center;
}

/* video responsive */
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article-body { width: min(100% - 2.5rem, 680px); margin-inline: auto; }
.article-body > * + * { margin-top: 1.35rem; }
.article-body p { color: var(--ink); font-size: var(--step-0); line-height: 1.75; }
.article-body p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.4em; line-height: 0.78;
  float: left; margin: 0.06em 0.12em 0 0; color: var(--olive);
}
.article-body h2 { font-size: var(--step-2); margin-top: 2.6rem; color: var(--ink); }
.article-body ul { margin: 1.35rem 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.article-body ul li { position: relative; padding-left: 1.5rem; color: var(--ink); }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--terra); }
.article-body blockquote {
  margin: 2.4rem 0; padding: 1.6rem 0 0; text-align: center;
  border-top: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; color: var(--olive-deep);
}
.article-body blockquote::before {
  content: "“"; display: block; font-family: var(--font-display);
  font-size: 2.4em; line-height: 0.4; color: var(--terra); margin-bottom: 0.2em;
}
.article-body .note {
  background: var(--terra-tint); border: 1px dashed var(--terra);
  border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--ink-soft); font-size: var(--step--1);
}

.source-link {
  width: min(100% - 2.5rem, 680px); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); color: var(--ink-faint);
}
.source-link a { color: var(--olive-deep); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.source-link a:hover { border-color: var(--olive); }

.article-foot { width: min(100% - 2.5rem, 680px); margin: 2.5rem auto 0; }
.back-home {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; font-weight: 600; color: var(--olive);
  font-size: var(--step-0);
}
.back-home .arrow { transition: transform 0.35s var(--ease-out); }
.back-home:hover .arrow { transform: translateX(-4px); }

/* ---------- Selettore lingua (articolo multilingua) ---------- */
.lang-switch {
  width: min(100% - 2.5rem, 680px); margin: 0 auto clamp(1.5rem, 3vw, 2.2rem);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.lang-switch .lbl {
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-right: 0.3rem;
}
.lang-switch button {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  color: var(--ink-soft); background: var(--surface-2);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.4rem 0.95rem; cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.lang-switch button:hover { border-color: var(--olive); }
.lang-switch button[aria-pressed="true"] {
  background: var(--olive); color: var(--surface-2); border-color: var(--olive);
}
.lang-block[hidden] { display: none; }

/* video nel corpo articolo (poster + play manuale, niente autoplay) */
.article-video {
  width: min(100% - 2.5rem, var(--maxw)); margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}
.article-video .video-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.article-video video { display: block; width: 100%; height: auto; background: var(--ink); }
.article-video figcaption {
  margin-top: 0.8rem; font-size: var(--step--1); color: var(--ink-faint); text-align: center;
}

/* ---------- Motion entrata ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
}

/* ---------- Immagini: rispetta orientamento EXIF ---------- */
img { image-orientation: from-image; }

/* ---------- Galleria (masonry CSS columns) ---------- */
.gallery-grid {
  columns: 3;
  column-gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 860px) { .gallery-grid { columns: 2; } }
@media (max-width: 500px) { .gallery-grid { columns: 1; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 1.25rem;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-item figcaption {
  padding: 0.75rem 1rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- Layout split articoli (testo + foto affiancati) ---------- */
.article-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  width: min(100% - 2.5rem, var(--maxw));
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.article-content.reverse { direction: rtl; }
.article-content.reverse > * { direction: ltr; }
.article-content .article-img,
.article-content .article-figure { width: 100%; margin: 0; }
/* Stesso box uniforme per le immagini affiancate (.article-img senza .media) */
.article-content .article-img {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--surface-sunk);
}
.article-content .article-img img {
  width: 100%; height: clamp(360px, 58vh, 600px);
  object-fit: contain; display: block; background: var(--surface-sunk);
}
.article-content .article-img figcaption {
  padding: 0.7rem 1rem 0; font-size: var(--step--1);
  color: var(--ink-faint); text-align: center;
}

@media (max-width: 700px) {
  .article-content,
  .article-content.reverse { grid-template-columns: 1fr; direction: ltr; }
  .article-content.reverse .article-img,
  .article-content.reverse .article-figure { order: -1; }
  /* su mobile box piu basso */
  .article-figure .media img,
  .article-content .article-img img { height: clamp(300px, 52vh, 460px); }
}

/* ---------- Nav galleria ---------- */
.nav-gallery {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
}
.nav-gallery:hover { color: var(--olive); }