/* ============================================================
   IRPC India — Enhance layer
   Mobile-first polish · donation emphasis · photo bands · motion
   Loaded AFTER styles.css (and site.css on subpages).
   ============================================================ */

/* ------------------------------------------------------------
   0. NAV OVERLAP FIX  (homepage hero)
   The transparent "on-hero" nav was sitting in a white strip ABOVE
   the hero, so its white links/brand were invisible — only the gold
   Donate button showed. Pull the hero up beneath the nav so the bar
   genuinely overlaps the dark hero image and the white text reads.
   ------------------------------------------------------------ */
body:not(.subpage) .hero{ margin-top: calc(-1 * var(--nav-overlap, 84px)); }
/* keep the very top of the hero readable under the bar */
body:not(.subpage) .hero .hero-scrim{ pointer-events:none; }

/* Tweak: "Solid" top bar — opaque bar with dark text even over the hero */
body.nav-solid .nav{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line),0 8px 30px rgba(11,20,55,.06);
}
body.nav-solid .nav.on-hero:not(.scrolled) .brand-name,
body.nav-solid .nav.on-hero:not(.scrolled) .nav-links a,
body.nav-solid .nav.on-hero:not(.scrolled) .nav-watch{ color:var(--navy-800); }
body.nav-solid .nav.on-hero:not(.scrolled) .brand-tag{ color:var(--muted); }
body.nav-solid .nav.on-hero:not(.scrolled) .brand .mark-img{ filter:none; }
body.nav-solid .nav.on-hero:not(.scrolled) .burger span{ background:var(--navy-800); }

/* Tweak: hide the news ticker */
body.no-ticker .ticker{ display:none; }

/* ------------------------------------------------------------
   1. MOBILE STICKY DONATE DOCK
   ------------------------------------------------------------ */
.mob-dock{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:1190;
  display:none;align-items:stretch;gap:.55rem;
  padding:.55rem .6rem;
  padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
  background:rgba(11,20,55,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(11,20,55,.45);
  transform:translateY(130%);
  transition:transform .55s var(--ease);
}
.mob-dock.show{transform:translateY(0)}
.mob-dock .dock-wa{
  display:grid;place-items:center;width:48px;border-radius:15px;flex-shrink:0;
  background:rgba(37,211,102,.16);color:#3ee37c;border:1px solid rgba(62,227,124,.3);
}
.mob-dock .dock-wa svg{width:22px;height:22px}
.mob-dock .dock-def{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.35rem .9rem;border-radius:15px;flex-shrink:0;
  border:1px solid rgba(230,190,99,.4);color:var(--gold-soft);
  font-weight:700;font-size:.86rem;line-height:1.15;
}
.mob-dock .dock-def small{font-weight:600;font-size:.64rem;opacity:.75;letter-spacing:.04em}
.mob-dock .dock-give{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;border-radius:15px;
  background:var(--gold);color:var(--navy-800);
  font-weight:800;font-size:1.02rem;
  box-shadow:0 8px 22px rgba(216,165,62,.4);
  position:relative;overflow:hidden;
}
.mob-dock .dock-give svg{width:18px;height:18px}
.mob-dock .dock-give::after{
  content:"";position:absolute;top:0;bottom:0;width:46px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  left:-60px;animation:dockSheen 3.2s ease-in-out infinite;
}
@keyframes dockSheen{0%,55%{left:-60px}85%,100%{left:120%}}
@media(max-width:860px){.mob-dock{display:flex}}
@media (prefers-reduced-motion: reduce){
  .mob-dock{transition:none}
  .mob-dock .dock-give::after{animation:none;display:none}
}

/* ------------------------------------------------------------
   2. PHOTO MARQUEE BANDS
   ------------------------------------------------------------ */
.pm-section{padding-block:clamp(60px,9vw,110px);background:var(--ivory);overflow:hidden;position:relative}
.pm-section .girih{position:absolute;inset:0;opacity:.05}
.pm-head{position:relative;margin-bottom:clamp(1.8rem,4vw,3rem)}
.pm-band{position:relative;width:100%;overflow:hidden;margin-top:14px}
.pm-band:first-of-type{margin-top:0}
.pm-track{display:flex;width:max-content;will-change:transform;animation:pmScroll var(--pm-dur,46s) linear infinite}
.pm-band.rev .pm-track{animation-direction:reverse}
.pm-band:hover .pm-track{animation-play-state:paused}
@keyframes pmScroll{to{transform:translateX(-50%)}}
.pm-item{
  position:relative;height:218px;margin-right:14px;border-radius:18px;overflow:hidden;
  flex-shrink:0;cursor:pointer;
}
.pm-item img{height:100%;width:auto;max-width:none;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pm-item:hover img{transform:scale(1.06)}
.pm-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(11,20,55,.08), inset 0 -50px 50px -30px rgba(11,20,55,.35);
  pointer-events:none;
}
.pm-cap{
  position:absolute;left:12px;bottom:10px;color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s;
}
.pm-item:hover .pm-cap{opacity:1;transform:none}
@media(max-width:760px){.pm-item{height:150px;border-radius:14px;margin-right:10px}.pm-band{margin-top:10px}}
@media (prefers-reduced-motion: reduce){.pm-track{animation:none}}

/* ------------------------------------------------------------
   3. GIVE BAND (injected above footer on subpages)
   ------------------------------------------------------------ */
.give-band{background:var(--navy);position:relative;overflow:hidden}
.give-band .girih{position:absolute;inset:0;opacity:.07;background-size:220px}
.gb-inner{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap;padding-block:clamp(1.8rem,4vw,2.6rem);
}
.gb-txt b{display:block;font-family:var(--display);font-weight:500;color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);letter-spacing:-.01em}
.gb-txt span{color:rgba(255,255,255,.65);font-size:.95rem;margin-top:.25rem;display:block}
.gb-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.gb-chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.1em;
  border-radius:100px;border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;font-size:.95rem;
  transition:background .25s,border-color .25s,transform .35s var(--ease);
}
.gb-chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
@media(max-width:680px){
  .gb-inner{flex-direction:column;align-items:flex-start}
  .gb-actions{width:100%}
  .gb-actions .btn{flex:1;justify-content:center}
}

/* ------------------------------------------------------------
   4. MOTION UPGRADES
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .tiltable{transition:transform .5s var(--ease), box-shadow .5s var(--ease);transform-style:preserve-3d}
  .tiltable.tilting{transition:transform .08s linear, box-shadow .5s var(--ease)}
  .btn-gold{position:relative;overflow:hidden}
  .btn-gold::before{
    content:"";position:absolute;top:0;bottom:0;width:44px;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
    left:-60px;animation:dockSheen 4.6s ease-in-out infinite;
  }
  .reveal-img{clip-path:inset(0 100% 0 0 round 18px);transition:clip-path 1.1s var(--ease)}
  .is-in .reveal-img, .reveal-img.is-in{clip-path:inset(0 0 0 0 round 18px)}
}

/* ------------------------------------------------------------
   5. MOBILE-FIRST OVERRIDES
   ------------------------------------------------------------ */
@media(max-width:860px){
  /* generous bottom space so the dock never covers content */
  .footer .f-bottom{padding-bottom:84px}
  /* comfortable tap targets */
  .btn{min-height:48px}
  .chip-btn,.tier,.wtab{min-height:42px}
}
@media(max-width:760px){
  .section{padding-block:clamp(56px,12vw,80px)}
  /* stats: tidy 2-col */
  .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:1.4rem 1rem!important}
  /* story mosaic becomes a swipeable reel */
  .story-mosaic{
    display:flex!important;overflow-x:auto;gap:.8rem!important;
    scroll-snap-type:x mandatory;padding-bottom:.8rem;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .story-mosaic::-webkit-scrollbar{display:none}
  .story-mosaic .story{min-width:76%;scroll-snap-align:center;aspect-ratio:4/3}
  .story-mosaic .story img{height:100%;width:100%;object-fit:cover}
  /* horizontal scrollers bleed to edges */
  .vid-rail,.shorts-rail{
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .vid-rail::-webkit-scrollbar,.shorts-rail::-webkit-scrollbar{display:none}
}
@media(max-width:600px){
  /* full-width stacked CTAs in heroes & cards */
  .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .hero-actions .btn{width:100%;justify-content:center}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{width:100%;justify-content:center}
  .def-actions{flex-direction:column;align-items:stretch}
  .def-actions .btn{width:100%;justify-content:center}
  .countdown{gap:.5rem}
  .cd-cell b{font-size:1.3rem}
  /* newsletter stacks */
  .f-news{flex-direction:column}
  .f-news .btn{width:100%}
}