/* =========================================================
   BLOG EDITORIAL OVERRIDES (opt-in via body.blog-editorial)
   ========================================================= */


/* ---------------------------------------------------------
   1) Drop heavy grey panels – move toward editorial “paper”
   --------------------------------------------------------- */
body.blog-editorial .blog-section:nth-of-type(odd) .blog-container,
body.blog-editorial .blog-section:nth-of-type(even) .blog-container,
body.blog-editorial .blog-section:nth-of-type(3n+1) .blog-container,
body.blog-editorial .blog-section:nth-of-type(3n+2) .blog-container,
body.blog-editorial .blog-section:nth-of-type(3n+3) .blog-container {
  background-color: #fff;
}

/* Softer container styling (editorial card feel) */
body.blog-editorial .blog-container {
  border: 1px solid rgba(0,0,0,0.06);
  padding: 2.25rem 2rem;
  border-radius: 10px; /* set to 0 if you want ultra-print look */
}

/* Add more vertical breathing space between sections */
body.blog-editorial .blog-section {
  padding: 1.25rem 0;
}


/* ---------------------------------------------------------
   2) Headline styling – editorial feature look
   --------------------------------------------------------- */
body.blog-editorial .blog-title-area {
  text-align: left;
  margin-bottom: 1rem;
}

body.blog-editorial .first-blog-section .blog-title-area h1 {
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  line-height: 1.12;
  text-align: left;
  text-shadow: none;
  letter-spacing: -0.01em;
  max-width: 18ch;
  font-weight: 700;
  color: #2f2f2f;
  margin-bottom: 0.6rem;
}


/* ---------------------------------------------------------
   3) Editorial kicker label above H1
   --------------------------------------------------------- */
body.blog-editorial .first-blog-section .kicker {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.5rem;
}


/* ---------------------------------------------------------
   4) Lede paragraph (standfirst feel)
   --------------------------------------------------------- */
body.blog-editorial .blog-text-content > p:first-of-type {
  font-size: 1.12rem;
  line-height: 1.6;
  color: #333;
  margin-top: 0.4rem;
}


/* ---------------------------------------------------------
   5) Adjust hero layout proportions (more editorial)
   --------------------------------------------------------- */
body.blog-editorial .first-blog-section .blog-content-split {
  align-items: flex-start;
  gap: 2rem;
}

body.blog-editorial .first-blog-section .blog-text-content {
  flex: 1 1 62%;
}

body.blog-editorial .first-blog-section .hero-image {
  flex: 0 0 38%;
  max-width: 38%;
  margin-top: 8px;
}

body.blog-editorial .first-blog-section .hero-image img {
  display: block;
}


/* ---------------------------------------------------------
   6) Buttons – less UI, more editorial navigation
   --------------------------------------------------------- */
body.blog-editorial .blog-cta-button {
  border-color: rgba(0,0,0,0.25);
  color: #003366;
  box-shadow: none;
  border-radius: 999px;
  background: transparent;
  font-weight: 600;
}

body.blog-editorial .blog-cta-button:hover {
  background-color: #003366;
  border-color: #003366;
  color: #fff;
}

/* Subtle downward arrow indicating article navigation */
body.blog-editorial .blog-cta-button::after {
  content: " ↓";
  margin-left: 2px;
}

/* ---------------------------------------------------------
   7) Paragraph rhythm
   --------------------------------------------------------- */
body.blog-editorial .blog-container p {
  margin-bottom: 0.9rem;
}


/* ---------------------------------------------------------
   8) Editorial section flow (short sections shouldn’t look lost)
   --------------------------------------------------------- */

/* Keep body copy to a readable editorial line length */
body.blog-editorial .blog-content-block {
  max-width: 72ch;
}

/* Section spacing */
body.blog-editorial .blog-section {
  padding: 0rem 0;
}

/* Remove “empty card” feeling for editorial layout */
body.blog-editorial .blog-container {
  border: 0;
  box-shadow: none;
}

/* Make H2 feel like a section start */
body.blog-editorial .blog-container h2 {
  margin-bottom: 0.75rem;
  padding-top: 0.25rem;
}

body.blog-editorial .blog-container h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: rgba(0,0,0,0.12);
  margin-top: 0.75rem;
}

/* Improve anchor jump positioning */
body.blog-editorial .blog-section {
  scroll-margin-top: 110px;
}


/* =========================================================
   9) Editorial figure overrides (for <figure class="blog-figure">)
   ========================================================= */

/* Make editorial figures behave like magazine-style figures */
body.blog-editorial figure.blog-figure {
  margin: 1.8rem auto 1.6rem;
  max-width: 720px;
  width: 100%;
}

/* Ensure the image scales nicely and keeps its aspect ratio */
body.blog-editorial figure.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Make the caption clearly attached to the image */
body.blog-editorial figure.blog-figure .figcaption {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #555;

  font-style: italic;

  padding-top: 0.75rem;
  border-top: 1px solid rgba(0,0,0,0.12);
}

/* Slightly improve spacing around editorial figures */
body.blog-editorial .blog-content-block figure.blog-figure {
  margin-top: 1.6rem;
  margin-bottom: 1.8rem;
}


/* ---------------------------------------------------------
   10) Mobile adjustments
   --------------------------------------------------------- */
@media (max-width: 767px) {

  body.blog-editorial .first-blog-section .blog-title-area h1 {
    font-size: 2rem;
    max-width: none;
  }

  body.blog-editorial .first-blog-section .blog-text-content,
  body.blog-editorial .first-blog-section .hero-image {
    flex: 1 1 100%;
    max-width: 100%;
  }

}