@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_normal_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arizona Flare";
  src: url("../fonts/arizona_flare_300_italic_headings_h1-h6.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helveesti";
  src: url("../fonts/helveesti_700_normal_body_labels.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Section design tokens (scoped) */
.blog-hero {
  --bh-bg: #F8F2E9;      /* light background */
  --bh-ink: #170B01;     /* primary dark/text */
  --bh-accent: #1C1BAE;  /* action/accent */
  --bh-pink: #BDCFFB;    /* lavender panel */
  --bh-yellow: #EAFD8B;  /* supporting accent */

  --bh-maxw: 1400px;
  --bh-panel-pad-x: 64px;
  --bh-panel-pad-y: 72px;
  --bh-gap: 0px;

  --bh-title-size: clamp(40px, 5.4vw, 64px);
  --bh-title-lh: 1.05;
  --bh-back-size: 16px;
  --bh-pill-size: 13px;
  --bh-pill-radius: 999px;
}

.blog-hero {
  background: transparent;
  color: var(--bh-ink);
}

/* Two-column layout matching reference (approx 62/38 split) */
.blog-hero__grid {
  max-width: var(--bh-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 62% 38%;
  gap: var(--bh-gap);
}

/* Left content panel */
.blog-hero__panel {
  background: #c3bdfb;
  padding: var(--bh-panel-pad-y) var(--bh-panel-pad-x);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.blog-hero__back {
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--bh-back-size);
  line-height: 1.2;
  color: var(--bh-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(23, 11, 1, 0.4);
  padding-bottom: 8px;
  display: inline-block;
  width: fit-content;
  transition: border-color .2s ease, opacity .2s ease;
  margin-bottom: 40px;
}
.blog-hero__back:hover { border-bottom-color: var(--bh-ink); opacity: 0.9; }
.blog-hero__back:focus-visible { outline: 2px solid var(--bh-ink); outline-offset: 3px; }

.blog-hero__title {
  font-family: "Arizona Flare", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: 40px;
  line-height: var(--bh-title-lh);
  letter-spacing: 0;
  margin: 0 0 20px 0;
  color: var(--bh-ink);
}

/* Pills under the title */
.blog-hero__pill-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0 0;
  padding: 0;
}

.blog-hero__pill {
  font-family: "Helveesti", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: var(--bh-pill-size);
  line-height: 1;
  padding: 10px 14px;
  border-radius: var(--bh-pill-radius);
  border: 1px solid rgba(23, 11, 1, 0.18);
  user-select: none;
}

/* Color variants (WCAG-friendly contrast using project palette) */
.blog-hero__pill--magenta {
  background: var(--bh-accent);
  color: var(--bh-bg);
  border-color: transparent;
}
.blog-hero__pill--yellow {
  background: var(--bh-yellow);
  color: var(--bh-ink);
}
.blog-hero__pill--lavender {
  background: #F8F2E9;
  color: var(--bh-ink);
}

/* Right media */
.blog-hero__media {
  margin: 0;
  min-height: 420px;
}
.blog-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-hero__grid { grid-template-columns: 1fr; }
  .blog-hero__media { order: 2; min-height: 360px; }
  .blog-hero__panel { order: 1; padding: 56px 40px; }
}
@media (max-width: 560px) {
  .blog-hero__panel { padding: 40px 24px; }
  .blog-hero__title { font-size: clamp(32px, 8vw, 44px); }
}