/* =============================================================
   PISTACCHIO — BLOG / IL DIARIO
   Editorial layer on top of v2.css. Loaded only by /blog/ pages,
   so nothing here can affect the other sixteen pages of the site.

   Restraint is the brief: hairlines instead of boxes, one accent
   colour, one display face, and a measure narrow enough to read.
   ============================================================= */

:root {
  --blog-measure: 34rem;   /* ~66 characters at the mobile body size */
  --blog-rule:    rgba(42, 31, 18, 0.14);
}

/* On a desktop the mobile measure reads as a thin ribbon — 490px of text inside
   1440px of page. Widening the column AND raising the body size together keeps
   the line length in the same comfortable range while the column stops looking
   timid. Changing only one of the two would break the other. */
@media (min-width: 1024px) {
  :root { --blog-measure: 39rem; }
  .article-body                      { font-size: 1.15rem; line-height: 1.75; }
  .article-body > p:first-of-type    { font-size: 1.28rem; line-height: 1.62; }
  .article-body h3                   { font-size: 1.15rem; }
  .article-facts dd,
  .article-faq details p             { font-size: 1.05rem; }
  .article-faq summary               { font-size: 1.08rem; }
  .article-dek                       { max-width: 36rem; }
}

/* Softened corners, using the radii the rest of the site already defines
   (--radius 12px / --radius-lg 20px) rather than inventing new numbers. */
.blog-feature-img,
.article-hero img,
.article-cta        { border-radius: var(--radius-lg); }
.blog-card-img,
.article-related img { border-radius: var(--radius); }

/* A cut-out has no frame of its own, so object-fit: cover would slice the
   subject against the grid's fixed shape. Fit it inside instead, with room. */
.blog-feature-img.is-cut img,
.blog-card-img.is-cut img,
.article-related a.is-cut img { object-fit: contain; padding: 7%; }

/* ---------- shared shell ---------- */
.blog-wrap {
  max-width: var(--blog-measure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.blog-wide {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.blog-kicker {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-deep);
}

/* ---------- index hero ---------- */
.blog-masthead {
  padding: clamp(6rem, 12vw, 9rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  border-bottom: 1px solid var(--blog-rule);
}
.blog-masthead h1 {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 400;
  line-height: 1.02;
  margin: 0.75rem 0 0;
  color: var(--charcoal);
}
.blog-masthead p {
  max-width: 30rem;
  margin: 1.25rem auto 0;
  color: var(--charcoal-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ---------- featured ---------- */
.blog-feature {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--blog-rule);
}
@media (min-width: 860px) {
  .blog-feature { grid-template-columns: 1.15fr 1fr; }
}
.blog-feature-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}
.blog-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.blog-feature:hover .blog-feature-img img { transform: scale(1.03); }
.blog-feature h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.1;
  margin: 0.6rem 0 0;
}
.blog-feature h2 a { color: var(--charcoal); text-decoration: none; }
.blog-feature h2 a:hover { color: var(--green-deep); }
.blog-feature p {
  color: var(--charcoal-soft);
  line-height: 1.7;
  margin: 1rem 0 0;
}

/* ---------- grid ---------- */
.blog-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6rem);
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card { display: flex; flex-direction: column; }
.blog-card-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream-deep);
  margin-bottom: 1.1rem;
}
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.blog-card:hover .blog-card-img img { transform: scale(1.04); }
.blog-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0.5rem 0 0;
}
.blog-card h3 a { color: var(--charcoal); text-decoration: none; }
.blog-card h3 a:hover { color: var(--green-deep); }
.blog-card p {
  color: var(--charcoal-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0.6rem 0 0;
}
.blog-meta {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  margin-top: 0.85rem;
}

/* ---------- journal teaser on the home page ---------- */
/* it sits inside an existing .section, which already supplies the rhythm */
.journal-brief .blog-grid { padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.journal-brief .section-head { margin-bottom: 0; }

/* ---------- article ---------- */
.article-head {
  padding: clamp(5.5rem, 11vw, 8rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.article-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 0.8rem 0 0;
  color: var(--charcoal);
}
.article-dek {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--charcoal-soft);
  margin: 1.25rem auto 0;
  max-width: 32rem;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin-top: 1.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gray);
}
.article-byline span + span::before {
  content: "·";
  margin-right: 1.1rem;
  color: var(--gray-light);
}

.article-hero {
  margin: clamp(1.5rem, 4vw, 3rem) auto clamp(2.5rem, 5vw, 4rem);
  max-width: 68rem;
  padding-inline: 1.5rem;
}
/* The hero keeps the photograph's own proportions. Forcing a 16:9 crop on a
   portrait shot throws away 2.7x of the image — which is how an article about
   the oval shape of a pinsa ended up showing none of it. Width and height
   attributes come from the file itself, so there is no layout shift either. */
.article-hero img {
  width: 100%;
  height: auto;
  display: block;
}
/* A square photograph is not a portrait. Capping both at the same narrow width
   made square heroes look shrunken next to the text below them. */
.article-hero.is-square   { max-width: 48rem; }
.article-hero.is-portrait { max-width: 34rem; }

/* body copy — the part that has to be genuinely comfortable */
.article-body {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--charcoal-soft);
}
.article-body > p:first-of-type { font-size: 1.15rem; line-height: 1.7; color: var(--charcoal); }
.article-body p { margin: 0 0 1.5rem; }
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--charcoal);
  margin: 3rem 0 1.1rem;
}
.article-body h3 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  margin: 2.25rem 0 0.75rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.article-body li { margin-bottom: 0.7rem; padding-left: 0.25rem; }
.article-body li::marker { color: var(--green-deep); }
.article-body strong { color: var(--charcoal); font-weight: 600; }
.article-body em { font-style: italic; }
.article-body a {
  color: var(--charcoal);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--green-deep); }

.article-body blockquote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid var(--green);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  color: var(--charcoal);
}

/* the answer box — also what generative search tends to lift */
.article-facts {
  margin: 3rem 0;
  padding: 1.75rem 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}
.article-facts dl { margin: 0; }
.article-facts dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-top: 1.25rem;
}
.article-facts dt:first-child { margin-top: 0; }
.article-facts dd { margin: 0.35rem 0 0; font-size: 0.9688rem; line-height: 1.6; }

/* FAQ — native <details>, same pattern the home page already uses */
.article-faq { margin: 3.5rem 0 0; }
.article-faq h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.1rem);
  font-weight: 400;
  margin: 0 0 1.25rem;
  color: var(--charcoal);
}
.article-faq details { border-bottom: 1px solid var(--blog-rule); }
.article-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 600;
  color: var(--charcoal);
  position: relative;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--green-deep);
}
.article-faq details[open] summary::after { content: "–"; }
.article-faq details p { margin: 0 0 1.15rem; font-size: 0.9688rem; line-height: 1.7; }

/* ---------- related + CTA ---------- */
.article-foot {
  margin-top: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid var(--blog-rule);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}
.article-related {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (min-width: 700px) { .article-related { grid-template-columns: 1fr 1fr; } }
.article-related a { text-decoration: none; }
.article-related img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  margin-bottom: 0.9rem; background: var(--cream-deep);
}
.article-related h3 {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 400; line-height: 1.2;
  color: var(--charcoal); margin: 0.4rem 0 0;
}
.article-related a:hover h3 { color: var(--green-deep); }

.article-cta {
  margin: clamp(3.5rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem);
  padding: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--cream-light);
  text-align: center;
}
.article-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 400; line-height: 1.15; margin: 0.6rem 0 0.75rem;
  color: var(--charcoal);
}
.article-cta p { color: var(--charcoal-soft); margin: 0 auto 1.6rem; max-width: 26rem; line-height: 1.65; }
.article-cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ---------- breadcrumb ---------- */
.blog-crumb {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gray);
  padding-top: 1rem;
}
.blog-crumb a { color: var(--gray); text-decoration: none; }
.blog-crumb a:hover { color: var(--green-deep); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .blog-feature-img img, .blog-card-img img { transition: none; }
}