/* =============================================================================
   St. Philomena's, Vidyaranyapura — enhance.css
   ADDITIVE visual layer. Loads AFTER style.css and only adds depth, motion and
   polish on top of the existing design. It does not redefine layout or the grid,
   so the current structure and load speed stay intact. Palette is inherited from
   style.css variables (navy / sky / teal) with safe fallbacks.
   ============================================================================= */

:root{
  --e-navy:var(--navy,#003459);
  --e-sky:var(--sky,#00A7E1);
  --e-teal:var(--teal,#007EA7);
  --e-line:var(--line,#e6edf2);
  --e-soft:var(--bg-soft,#ecf7fd);
  --e-shadow:0 22px 48px -26px rgba(0,52,89,.45);
  --e-shadow-sm:0 12px 26px -18px rgba(0,52,89,.38);
}

/* ---------------------------------------------------------------------------
   1. Scroll-reveal motion (gated on .fx, added by enhance.js → no-JS safe)
   --------------------------------------------------------------------------- */
.fx .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.fx .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fx .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------------------------------------------------------------------------
   2. Header — gains a soft shadow once the page is scrolled
   --------------------------------------------------------------------------- */
header.site{transition:box-shadow .25s ease,background .25s ease}
header.site.scrolled{box-shadow:0 10px 30px -20px rgba(0,52,89,.45)}

/* ---------------------------------------------------------------------------
   3. Hero — a quiet animated glow behind the content (decor only)
   --------------------------------------------------------------------------- */
.hero{position:relative}
.hero::after{content:"";position:absolute;z-index:0;top:-120px;right:-80px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at center,rgba(0,167,225,.16),transparent 68%);
  filter:blur(6px);pointer-events:none;animation:eFloat 11s ease-in-out infinite}
.hero .wrap{position:relative;z-index:1}
@keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none}}
/* hero image frame gets real depth */
.hero .ph{box-shadow:var(--e-shadow)}

/* ---------------------------------------------------------------------------
   4. Buttons — a touch more lift + shadow
   --------------------------------------------------------------------------- */
.btn{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease}
.btn-primary,.btn-navy{box-shadow:0 10px 22px -12px rgba(0,52,89,.55)}
.btn-primary:hover,.btn-navy:hover{box-shadow:0 16px 30px -12px rgba(0,52,89,.6)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------------------------------------------------------------------------
   5. Cards — richer resting state, clearer hover, image zoom
   --------------------------------------------------------------------------- */
.card,.feature{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card:hover,.feature:hover{transform:translateY(-6px);box-shadow:var(--e-shadow);border-color:transparent}
/* image inside any placeholder gently zooms on card hover */
.ph img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.card:hover .ph img,.gitem:hover .ph img,.media .ph:hover img{transform:scale(1.06)}
/* a slim accent that grows along the top of feature cards on hover */
.feature{position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--e-sky),var(--e-teal));transition:transform .3s ease}
.feature:hover::before{transform:scaleX(1)}

/* feature icon tile — give it the brand gradient */
.feature .icon{background:linear-gradient(135deg,var(--e-soft),#dff1fb);color:var(--e-teal);transition:transform .25s ease}
.feature:hover .icon{transform:scale(1.08) rotate(-3deg)}

/* ---------------------------------------------------------------------------
   6. Eyebrow — small leading rule for an editorial feel
   --------------------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--e-teal);border-radius:2px;display:inline-block}
.head-wrap.center .eyebrow{justify-content:center}

/* ---------------------------------------------------------------------------
   7. Info list (contact) — colourful icon chips
   --------------------------------------------------------------------------- */
.info-list .ic{background:linear-gradient(135deg,var(--e-soft),#dff1fb);border-radius:12px;transition:transform .2s ease}
.info-list li:hover .ic{transform:scale(1.1)}

/* ---------------------------------------------------------------------------
   8. Gallery — overlay caption + clearer hover
   --------------------------------------------------------------------------- */
.gitem{position:relative}
.gitem .ph{transition:box-shadow .22s ease}
.gitem:hover .ph{box-shadow:var(--e-shadow)}
.gitem[data-cap]::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 14px 12px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.8rem;color:#fff;
  background:linear-gradient(to top,rgba(0,52,89,.82),transparent);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.gitem:hover[data-cap]::after{opacity:1;transform:translateY(0)}

/* ---------------------------------------------------------------------------
   9. CTA band — gradient + subtle texture so it reads as a finish line
   --------------------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--e-navy) 0%,var(--e-teal) 118%);color:#fff;
  border-radius:20px;padding:40px 36px;box-shadow:var(--e-shadow)}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(520px 200px at 100% 0,rgba(0,167,225,.5),transparent 70%)}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:#d6eefb;margin:6px 0 0}

/* ---------------------------------------------------------------------------
   10. NEW decorative components used by the rewritten pages
   --------------------------------------------------------------------------- */
/* Stat / proof row */
.estat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.estat{background:#fff;border:1px solid var(--e-line);border-radius:16px;padding:22px 18px;text-align:center;box-shadow:var(--e-shadow-sm);transition:transform .22s ease,box-shadow .22s ease}
.estat:hover{transform:translateY(-5px);box-shadow:var(--e-shadow)}
.estat b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2rem;line-height:1;
  background:linear-gradient(120deg,var(--e-navy),var(--e-teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.estat span{display:block;margin-top:8px;color:var(--muted,#5a6b76);font-size:.88rem;font-weight:600}
@media(min-width:760px){.estat-row{grid-template-columns:repeat(4,1fr)}}

/* Pill tag */
.epill{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.7rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--e-teal);background:var(--e-soft);padding:5px 12px;border-radius:999px}

/* Promise / assurance cards (child safety, teaching quality …) */
.epromise{background:#fff;border:1px solid var(--e-line);border-radius:16px;padding:26px 22px;height:100%;
  transition:transform .22s ease,box-shadow .22s ease;position:relative;overflow:hidden}
.epromise:hover{transform:translateY(-6px);box-shadow:var(--e-shadow)}
.epromise .pic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--e-navy),var(--e-teal));color:#fff}
.epromise h3{font-size:1.18rem;margin:0 0 8px}
.epromise p{margin:0;color:var(--muted,#5a6b76);font-size:.95rem}

/* Clean event calendar */
.ecal{max-width:760px;margin:0 auto;border:1px solid var(--e-line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--e-shadow-sm)}
.ecal-row{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:16px 22px;border-top:1px solid var(--e-line);align-items:center}
.ecal-row:first-child{border-top:none}
.ecal-row:hover{background:var(--e-soft)}
.ecal-when{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--e-teal);font-size:.92rem}
.ecal-what{font-weight:600;color:var(--head,#0b2a3a)}

/* Transport route chips */
.eroutes{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.eroutes li{background:#fff;border:1px solid var(--e-line);border-radius:999px;padding:9px 16px;font-weight:600;
  color:var(--e-navy);font-size:.9rem;box-shadow:var(--e-shadow-sm)}

/* Section lead paragraph */
.elead{color:var(--muted,#5a6b76);font-size:1.02rem;max-width:62ch}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}