/* =================================================================
   HERO — Independence Day banner, restyled to the Shiksha Seva theme
   (uses --pink / Fraunces / Inter / Space Grotesk from style.css)
================================================================= */

.idhero{
  --nav-h: 92px;
  position:relative;
  overflow:hidden;
  background:var(--pink-30);
  height:100vh;
  height:100svh;
  min-height:560px;
}

.idhero-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:0;
  background:var(--pink-60);
}

.idhero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.idhero-bg img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:75% center;
  display:block;
}
.idhero-stage::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.88) 34%,
    rgba(255,255,255,.35) 58%,
    rgba(255,255,255,0) 78%);
  pointer-events:none;
}

.idhero-inner{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:calc(var(--nav-h) + clamp(20px, 4vh, 48px)) 40px clamp(90px, 14vh, 140px);
  display:flex;
  align-items:center;
}

/* ---------- copy column ---------- */
.idhero-copy {
  max-width: 620px;
  margin-top: clamp(-40px, -4vh, -16px);
}

.idhero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 18px;
}

.idhero-eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
  opacity: .65;
}

.idhero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 75px;   /* was 75px */
  line-height: 67px; /* was 67px */
  letter-spacing: -1px;
  color: var(--black);
}

.idhero-title .line {
  display: block;
  overflow: hidden;
}

.idhero-title .line > span {
  display: block;
}

.idhero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--pink);
}

.idhero-sub {
  margin: 25px 0 0;
  max-width: 400px;
  font-size: 22px;   /* was 25px */
  line-height: 29px; /* was 29px */
  color: var(--ink-550);
}
.idhero-sub b {
  color: var(--pink);
  font-weight: 500;
}

.idhero-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.idhero-actions .btn{
  font-size:19px;
  padding:18px 30px;
}

.idhero-note {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-550);
  margin-top: 2px;
}
/* ---------- pledge badge ---------- */
.idhero-badge-wrap{
  position:absolute;
  z-index:3;
  /* Was clamp(320px, 35vw, 580px) — that range sat inside the copy
     column's own max-width (620px), so on most desktop screens the
     badge landed on top of the heading/paragraph text. Pushed the
     whole range past 620px + the column's left padding so the badge
     always clears the text, however long a line renders. */
  left:clamp(660px, 42vw, 820px);
  bottom:clamp(90px, 16vh, 150px);
  animation:idBadgeFloat 3.6s ease-in-out 1.5s infinite;
}

.idhero-badge{
  position:relative;
  width:clamp(160px, 14vw, 210px);
  text-align:center;
  color:#fff;
  background:linear-gradient(150deg, var(--pink), var(--pink-450));
  border-radius:18px;
  padding:18px 16px 16px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 22px 46px -16px rgba(236,0,140,.55), 0 0 0 6px rgba(255,255,255,.14);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
}
.idhero-badge:hover{
  transform:scale(1.06) translateY(-6px);
  box-shadow:0 30px 60px -16px rgba(236,0,140,.7), 0 0 0 8px rgba(255,255,255,.22);
}
.idhero-badge::before{
  content:"";
  position:absolute;
  top:0; left:-160%;
  width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-18deg);
  transition:left .75s ease;
}
.idhero-badge:hover::before{ left:160%; }

@keyframes idBadgeFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.idhero-badge .bg-heart{ font-size:.9rem; line-height:1; display:inline-block; animation:idHeartBeat 1.6s ease-in-out infinite; }
@keyframes idHeartBeat{
  0%, 100%{ transform:scale(1); }
  25%{ transform:scale(1.22); }
  40%{ transform:scale(1); }
  60%{ transform:scale(1.14); }
}
.idhero-badge .bg-t1{
  margin-top:6px;
  font-family:var(--mono); font-size:.6rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.92;
}
.idhero-badge .bg-t2{
  margin-top:4px;
  font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.15;
}
.idhero-badge .bg-t3{
  margin-top:8px;
  font-family:var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.idhero-badge .bg-price{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem, 2.1vw, 1.9rem); line-height:1.05;
}
.idhero-badge .bg-limit{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.3);
  font-family:var(--mono); font-size:.58rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; opacity:.9;
}

/* ---------- feature icons ---------- */
.idhero-features{
  position:absolute;
  z-index:3;
  left:0; right:0; bottom:0;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(10px, 2vh, 20px) 40px clamp(20px, 4vh, 40px);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.idhero-feature{
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--pink-150);
  border-radius:16px;
  padding:14px 16px;
  backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -14px rgba(32,33,33,.25);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.idhero-feature:hover{
  transform:translateY(-6px);
  border-color:var(--pink);
  background:#fff;
  box-shadow:0 18px 34px -14px rgba(236,0,140,.4);
}
.idhero-feature:hover .ic{
  transform:scale(1.14) rotate(-6deg);
  box-shadow:0 8px 18px -6px rgba(236,0,140,.6);
}
.idhero-feature .ic{
  flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.idhero-feature span{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--black); line-height:1.28;
}

/* ---------- entrance animation ---------- */
.idhero-title .line > span,
.idhero-sub,
.idhero-actions,
.idhero-badge,
.idhero-feature{
  opacity:0;
}
.idhero-title .line > span{ transform:translateY(110%); }
.idhero-sub, .idhero-actions{ transform:translateY(14px); }
.idhero-badge{ transform:scale(.86); }
.idhero-feature{ transform:translateY(16px); }

.idhero.is-in .idhero-title .line > span{
  animation:heroRise .8s var(--ease-soft) forwards;
}
.idhero.is-in .idhero-title .l1 > span{ animation-delay:.10s; }
.idhero.is-in .idhero-title .l2 > span{ animation-delay:.20s; }
.idhero.is-in .idhero-title .l3 > span{ animation-delay:.30s; }
.idhero.is-in .idhero-title .l4 > span{ animation-delay:.40s; }

.idhero.is-in .idhero-sub{ animation:heroFade .7s var(--ease-soft) .52s forwards; }
.idhero.is-in .idhero-actions{ animation:heroFade .7s var(--ease-soft) .64s forwards; }
.idhero.is-in .idhero-badge{ animation:heroPop .8s cubic-bezier(.17,.9,.3,1.15) .7s forwards; }
.idhero.is-in .idhero-feature{ animation:heroFade .6s var(--ease-soft) forwards; }
.idhero.is-in .idhero-feature:nth-child(1){ animation-delay:.86s; }
.idhero.is-in .idhero-feature:nth-child(2){ animation-delay:.96s; }
.idhero.is-in .idhero-feature:nth-child(3){ animation-delay:1.06s; }
.idhero.is-in .idhero-feature:nth-child(4){ animation-delay:1.16s; }

@keyframes heroRise{ to{ transform:translateY(0); opacity:1; } }
@keyframes heroFade{ to{ transform:translateY(0); opacity:1; } }
@keyframes heroPop{
  0%{ opacity:0; transform:scale(.86); }
  60%{ opacity:1; transform:scale(1.04); }
  100%{ opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .idhero-title .line > span, .idhero-sub, .idhero-actions,
  .idhero-badge, .idhero-feature, .idhero-badge-wrap, .idhero-badge .bg-heart{ opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .idhero{ height:auto; min-height:0; padding-top:var(--nav-h); }
  .idhero-stage{ position:relative; inset:auto; min-height:clamp(420px, 60vw, 560px); }
  .idhero-inner{ height:auto; position:relative; padding:36px 28px 30px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; }
  .idhero-badge-wrap{ position:relative; right:auto; bottom:auto; grid-column:2; align-self:center; justify-self:center; }
  .idhero-features{ position:relative; left:auto; right:auto; bottom:auto; padding:20px 28px 36px; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .idhero-stage::after{
    background:linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.3) 76%, rgba(255,255,255,0) 96%);
  }
}

@media (max-width:760px){
  .idhero{ background:#fff; }
  .idhero-stage{
    position:relative;
    inset:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:none;
  }

  /* image becomes a rounded card at the top, no more full-bleed background */
  .idhero-bg{
    position:relative;
    order:1;
    width:calc(100% - 32px);
    aspect-ratio:4/5;
    height:auto;
    margin:16px auto 0;
    border-radius:22px;
    box-shadow:0 14px 32px rgba(0,0,0,.14);
    overflow:hidden;
  }
  .idhero-bg img{ object-position:center; }

  .idhero-stage::after{ display:none; }

  .idhero-inner{
    order:2;
    position:relative;
    height:auto;
    padding:0 20px 24px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }

  .idhero-copy{ order:2; max-width:none; margin-top:22px; }

  .idhero-eyebrow{ margin-bottom:14px; }

  .idhero-title{ font-size:clamp(34px, 9vw, 42px); line-height:1.05; }

  .idhero-sub{ font-size:.97rem; max-width:none; }

  .idhero-actions{ width:100%; margin-top:22px; }
  .idhero-actions .btn{ width:100%; justify-content:center; }

  /* stationery-kit badge — positioned lower-left over the image */
  .idhero-badge-wrap{
    position:absolute;
    z-index:5;
    top:-235px;
    left:20px;
    right:auto;
    bottom:auto;
    animation:idBadgeFloat 3.6s ease-in-out 1.5s infinite;
  }
  .idhero-badge{ width:auto; max-width:190px; padding:16px 14px; text-align:left; }
  .idhero-badge .bg-t2{ font-size:.82rem; }
  .idhero-badge .bg-price{ font-size:1.4rem; }

  .idhero-features{ position:relative; left:auto; right:auto; bottom:auto; padding:4px 20px 28px; grid-template-columns:repeat(2, minmax(0,1fr)); }
  .idhero-feature{ padding:10px 12px; }
  .idhero-feature span{ font-size:.68rem; }
}