/* =========================
   Blog Hero (BOXED variant)
   ========================= */

/* Optional fonts (rakho agar global me load nahi ho rahe) */
@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: "Helveesti UI";
  src: url("../fonts/helveesti_400_normal_body_ui.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */
.blog-hero {
  --bh-bg: var(--blog-hero-bg, #ACE5FD);
  --bh-ink: var(--blog-hero-ink, var(--page-ink, #170B01));
  --bh-title-size: clamp(44px, 7vw, 72px);
  --bh-sub-size: clamp(16px, 2.2vw, 20px);
  --bh-sub-max: 65ch;
  --bh-radius: var(--radius-xl, 24px);
}

/* Section ab transparent; width & side paddings container handle karega */
.blog-hero {
  position: relative;
  overflow: visible; /* wave ab surface ke andar hai, to overflow yaha needed nahi */
  background: transparent;
  color: var(--bh-ink);
}

/* Boxed surface inside the container */
.blog-hero__surface {
  position: relative;
  overflow: hidden;
  background: var(--bh-bg);
  border-radius: 0;
  box-shadow: var(--bh-shadow);
  /* Vertical spacing yaha; side padding container se mil jayegi */
  padding: 0px 40px;
  padding-block: clamp(48px, 10vw, 96px);
  
}

/* Content wrapper */
.blog-hero__inner {
  margin: 0;
  /* No extra padding; container ki horizontal padding + surface ki vertical padding suffice */
}

/* Typography */
.blog-hero__title {
  font-family: "Arizona Flare", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;
  color: var(--bh-ink);
}

.blog-hero__sub {
  font-family: "Helveesti UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  opacity: 0.9;
  max-width: var(--bh-sub-max);
  margin: 0;
  color: var(--bh-ink);
}

/* Decorative wave: ab surface ke scope me */
.blog-hero__surface .blog-hero__wave {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: auto;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: right top;
  pointer-events: none;
  z-index: 0;
}

.blog-section {
  margin: 24px 10px;
}

/* Make sure text appears above the wave */
.blog-hero__surface > .blog-hero__inner { position: relative; z-index: 1; }

/* Responsive tweaks */
@media (max-width: 1200px) {
  .blog-hero__title { font-size: clamp(40px, 7vw, 64px); }
  .blog-hero__sub   { font-size: clamp(16px, 2.2vw, 20px); }
}
@media (max-width: 820px) {
  .blog-hero__title { font-size: 44px; line-height: 1.02; }
  .blog-hero__sub   { font-size: 18px; }
}

/* === Mobile-only fixes (<=600px) — no other code changes === */
@media (max-width: 430px) {
  .blog-hero { overflow: hidden; }
  
  .blog-hero__surface {
    padding-inline: 16px;   /* left/right */
  }

  /* Text sizes: readable on small screens */
  .blog-hero__title {
    font-size: clamp(28px, 9vw, 36px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .blog-hero__sub {
    font-size: 14px;
    line-height: 1.2;
    max-width: 60ch; /* wrap cleanly */
  }

  /* Wave overlay: mobile par text readability ke liye hide */
  .blog-hero__surface .blog-hero__wave {
    display: none;
  }

  /* Extra safety: avoid accidental horizontal scroll */
  .blog-hero__inner {
    margin: 0;
    max-width: none;
  }
}