/* blog_hero — insight-post hero. All selectors scoped under the component root
   (.c-blog_hero__media-wrap-3) so the shared canonical utility classes it reuses
   (c-about_info__heading-wrap-5 = padding-global, c-about_info__heading-wrap =
   container-large) never bleed and never pick up about_info's own scoped rules.
   Computed styles from the spec's ## Computed Styles, per viewport
   (1440 base / 768 tablet@991 / 375 mobile@479). Numeric values token-snapped to
   tokens.css where an exact match exists; the sparse dimensional values
   (96/80/56/32/24/20px spacers, 1280/1024 caps) are inlined per this run's
   established convention (see hero.css). */

.c-blog_hero__media-wrap-3 {
  display: block;
  /* Bare-preview neutraliser for the 8px UA body margin the source lacks;
     zeroed on composed pages by the .region-content reset below (framework-11
     fix #1). margin is not a sizing property, so this stays clear of the
     unscoped-utility lint. */
  margin: -8px -8px 0 -8px;
  background-color: var(--color-bg-hero);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-body);
  color: var(--color-text-primary);
}

/* ---- Outer padding wrapper (padding-global) --------------------------- */
.c-blog_hero__media-wrap-3 .c-about_info__heading-wrap-5 {
  display: block;
  padding: 0 var(--space-40);
}

/* ---- Top spacer (spacer-huge) ----------------------------------------- */
.c-blog_hero__media-wrap-3 .c-blog_hero__spacer-huge {
  display: block;
  padding-top: 96px;
}

/* ---- Content column (container-large) --------------------------------- */
.c-blog_hero__media-wrap-3 .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

/* ---- Flex-centered parent (blog-hero_content) ------------------------- */
.c-blog_hero__media-wrap-3 .c-blog_hero__blog-hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

/* ---- Centered child column (blog-hero_header) — own width is the
   load-bearing centering signal (rule 19); max-width:100% lets it collapse to
   the container at tablet (688) / mobile (343) exactly as the spec records. */
.c-blog_hero__media-wrap-3 .c-blog_hero__blog-hero-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 1024px;
  max-width: 100%;
}

/* ---- Meta row (blog-post_details) ------------------------------------- */
.c-blog_hero__media-wrap-3 .c-blog_hero__blog-post-details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-secondary);
}
.c-blog_hero__media-wrap-3 .c-blog_hero__category {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-h1);
}
.c-blog_hero__media-wrap-3 .c-blog_hero__sep {
  color: var(--color-text-secondary);
}
.c-blog_hero__media-wrap-3 .c-blog_hero__read-time,
.c-blog_hero__media-wrap-3 .c-blog_hero__dates {
  color: var(--color-text-secondary);
}

/* ---- Heading wrapper (the H1 wrapper's source class is a dropped utility;
   keeps its own BEM class here) ---------------------------------------- */
.c-blog_hero__media-wrap-3 .c-blog_hero__heading-center {
  display: block;
  width: 100%;
  text-align: center;
}
.c-blog_hero__media-wrap-3 .c-blog_hero__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 60px;
  line-height: 68px;
  font-weight: var(--font-weight-h1);
  letter-spacing: -3px;
  color: var(--color-text-h1);
}

/* ---- Media wrapper (padding-top padding-large) ------------------------ */
.c-blog_hero__media-wrap-3 .c-blog_hero__media-wrap-2 {
  display: block;
  padding-top: 40px;
  width: 100%;
  min-width: 0;
}

/* ---- Hero image (media-1 _2-1) — 2:1 lock drives responsive height ----- */
.c-blog_hero__media-wrap-3 .c-blog_hero__media-2 {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* ---- Bottom spacer (spacer-medium) ------------------------------------ */
.c-blog_hero__media-wrap-3 .c-blog_hero__spacer-medium {
  display: block;
  padding-top: 32px;
}

/* ---- Composed-page reset (framework-11 fix #1) ------------------------ */
.region-content .c-blog_hero__media-wrap-3 {
  margin: 0;
  width: 100%;
}

/* ======================================================================= */
/* Tablet — 768 viewport (canonical boundary 991)                          */
/* ======================================================================= */
@media (max-width: 991px) {
  .c-blog_hero__media-wrap-3 .c-blog_hero__spacer-huge {
    padding-top: 80px;
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__heading {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -2px;
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__spacer-medium {
    padding-top: var(--space-24);
  }
}

/* ======================================================================= */
/* Mobile — 375 viewport (canonical boundary 479)                          */
/* ======================================================================= */
@media (max-width: 479px) {
  .c-blog_hero__media-wrap-3 .c-about_info__heading-wrap-5 {
    padding: 0 var(--space-16);
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__spacer-huge {
    padding-top: 56px;
  }
  /* meta row stacks to two centered lines (spec: display block, ~48px tall). */
  .c-blog_hero__media-wrap-3 .c-blog_hero__blog-post-details {
    display: block;
    text-align: center;
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__heading {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -1px;
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__media-wrap-2 {
    padding-top: var(--space-24);
  }
  .c-blog_hero__media-wrap-3 .c-blog_hero__spacer-medium {
    padding-top: var(--space-20);
  }
}