/* =====================================================================
   MGC — KEY ENHANCEMENTS LAYER (mgc-key-enhancements.css)
   =====================================================================
   Purely additive final-pass polish layer. Loads AFTER mgc-combined.css
   (and after every in-page <style> block), so it is the authoritative
   layer for the rules below. It does not remove or fight earlier
   layers — it standardises and refines six areas that had grown
   inconsistent across the 14 stacked layers already in mgc-combined.css:

     1. Smooth scrolling               (site-wide navigation feel)
     2. Typography & spacing           (scannability + contrast)
     3. Header CTA + sticky nav        (Fees Payment button, .mgc-nav-stuck)
     4. Hero notice board              (tab focus + panel transitions,
                                         responsive slide-in)
     5. Card grids                     (Vision/Mission/Objectives,
                                         Academic Programmes, Facilities)
     6. Overlays                       (lightbox / modals / the
                                         "College at a Glance" FAB)

   No selectors are renamed and no markup changes are required — every
   rule here targets classes that already exist in Default.aspx.
   ===================================================================== */


/* =====================================================================
   1. SMOOTH SCROLLING
   ---------------------------------------------------------------------
   scroll-behavior:smooth already ships in mgc-combined.css. The one
   real gap was that anchor jumps (in-page nav links, "skip to
   section" links, footer quick-links) land content directly under the
   sticky nav bar. scroll-padding-top fixes that without any JS.
   ===================================================================== */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px; /* clears .mgc-nav + .mgc-nav-stuck height */
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   2. TYPOGRAPHY & SPACING — scannability + contrast
   ---------------------------------------------------------------------
   Small, global refinements: slightly deeper body-copy colour for
   contrast, a touch more breathing room around headings, and a
   consistent max-width/measure for long-form paragraphs so text
   blocks don't stretch edge-to-edge on wide screens.
   ===================================================================== */
body{
  text-rendering:optimizeLegibility;
}
.mgc-section-head p,
.mgc-intro-card-body p,
.mgc-dept-card p,
.mgc-vma-lead,
.mgc-glance-fact .val{
  color:var(--mgc-ink-soft);
}
/* Slightly stronger contrast than the default --mgc-ink-soft (#5c5c6b
   on #fffdf8 / #ffffff is ~4.4:1 — nudging it down improves body-copy
   legibility at the 13–15px sizes used throughout the page). */
:root{
  --mgc-ink-soft-contrast:#4c4c5c;
}
.mgc-section-head p,
.mgc-facilities-strip p,
.mgc-vma-section p{
  color:var(--mgc-ink-soft-contrast);
}
h2, h3, h4{
  text-wrap:balance;
}
p{
  text-wrap:pretty;
  max-width:72ch;
}
.mgc-section-head p{
  max-width:62ch;
}
/* Cards already center their own text; don't force a measure there */
.mgc-intro-card-body p,
.mgc-dept-card p,
.mgc-facility-card p,
.mgc-vma-lead,
.mgc-vma-list li{
  max-width:none;
}
/* Consistent vertical rhythm between stacked sections */
.mgc-section + .mgc-section,
.mgc-section + section,
section + .mgc-section{
  scroll-margin-top:96px;
}

/* =====================================================================
   3a. HEADER CTA — Fees Payment button: smoother hover/focus elevation
   ---------------------------------------------------------------------
   The button already lifts on hover; this refines the easing curve so
   the lift/settle reads as one continuous motion, adds a matching
   "pressed" state, and gives keyboard focus its own clearly visible
   (but still on-brand) ring rather than relying only on the hover
   styles doubling as focus styles.
   ===================================================================== */
.mgc-feesbtn{
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    filter .28s ease;
}
.mgc-feesbtn:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 30px -10px rgba(122,31,43,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
  filter:saturate(1.08);
}
.mgc-feesbtn:focus-visible{
  transform:translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 30px -10px rgba(122,31,43,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
  outline:2px solid var(--mgc-gold-soft,#eecb85);
  outline-offset:3px;
}
.mgc-feesbtn:active{
  transform:translateY(-1px) scale(1.005);
  transition-duration:.12s;
}

/* =====================================================================
   3b. STICKY NAVIGATION — one crisp, final drop shadow
   ---------------------------------------------------------------------
   Earlier layers each nudged .mgc-nav-stuck's shadow (soft glow,
   double-line accents, a colour-matched glow). This collapses that
   history into one clean, crisp shadow plus a hairline gold seam, and
   makes sure the bar itself pins cleanly with no reflow/jitter as it
   becomes "stuck".
   ===================================================================== */
.mgc-nav{
  will-change:box-shadow;
}
.mgc-nav.mgc-nav-stuck{
  box-shadow:
    0 10px 24px -10px rgba(6,12,28,.55),
    0 1px 0 var(--mgc-gold-soft,#eecb85) !important;
  transition:box-shadow .25s ease !important;
}
@media print{
  .mgc-nav.mgc-nav-stuck{ box-shadow:none !important; }
}

/* =====================================================================
   4a. NOTICE BOARD TABS — standardised focus indicator
   ---------------------------------------------------------------------
   One consistent, visible focus-visible treatment across all three
   tabs (College Notice / Latest Events / Tender Notice), independent
   of which additive layer last touched .mgc-notice-tab.
   ===================================================================== */
.mgc-notice-tab{
  border-radius:4px 4px 0 0;
  transition:color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.mgc-notice-tab:focus-visible{
  outline:none;
  color:var(--mgc-indigo-deep);
  box-shadow:0 0 0 2px var(--mgc-gold,#d6a13c);
  background:rgba(214,161,60,.14);
}

/* =====================================================================
   4b. NOTICE BOARD — smooth panel switching transition
   ---------------------------------------------------------------------
   The tab-switch script only toggles the `is-active` class, so the
   incoming panel can play a CSS entrance animation the moment it goes
   display:none → display:flex. Kept short and subtle so it reads as
   a "switch", not a slideshow.
   ===================================================================== */
.mgc-notice-panel.is-active{
  animation:mgcNoticePanelIn .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mgcNoticePanelIn{
  0%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){
  .mgc-notice-panel.is-active{ animation:none; }
}

/* =====================================================================
   4c. HERO SLIDER — image slide-in transitions, optimised for mobile
   ---------------------------------------------------------------------
   trans-fade / trans-collapse / trans-roll are tuned for a full-width
   desktop slider. On phones/tablets the extra blur and long durations
   just cost paint time without adding much, so this trims them down
   and speeds up the crossfade for a snappier feel on small screens.
   ===================================================================== */
@media (max-width:760px){
  .mgc-slide{
    transition:opacity .7s ease, transform .7s ease, filter .7s ease;
  }
  .mgc-slide.trans-collapse{
    filter:brightness(1.15) saturate(1.08); /* drop the blur(3px) on mobile */
  }
  .mgc-slide.trans-collapse.is-active{
    transition:transform .8s cubic-bezier(.4,0,.2,1), opacity .5s, filter .5s;
  }
  .mgc-slide.trans-roll{
    transform:translateY(-8%) rotate(-2deg); /* smaller travel distance */
  }
  .mgc-slide.trans-roll.is-active{
    transition:transform .85s cubic-bezier(.22,1,.36,1), opacity .6s;
  }
  .mgc-slide.is-active .mgc-slide-bg{
    animation-duration:5s; /* faster Ken Burns zoom to match shorter dwell time */
  }
}

/* =====================================================================
   5. CARD GRIDS — Vision/Mission/Objectives, Academic Programmes,
      Facilities: consistent flex/grid layout, responsive breakpoints,
      unified hover behaviour
   ---------------------------------------------------------------------
   These three grids each evolved their own hover-lift amount and
   breakpoint steps. This section doesn't change their visual identity
   (colours, icons, card shape) — it standardises timing/easing and
   adds a missing tablet step so nothing jumps straight from 3/4
   columns to 1 on medium screens.
   ===================================================================== */
.mgc-vma-card,
.mgc-acad-card,
.mgc-facility-card,
.mgc-dept-card{
  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    box-shadow .3s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    background .3s ease;
}

/* Vision / Mission / Objectives — add a 2-column tablet step */
@media (max-width:900px) and (min-width:641px){
  .mgc-vma-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .mgc-vma-card.vma-vision{
    grid-column:1 / -1;
  }
}
@media (max-width:640px){
  .mgc-vma-grid{
    grid-template-columns:1fr;
  }
}

/* Academic Programmes "at a glance" cards — smoother 3 → 2 → 1 */
@media (max-width:1100px) and (min-width:981px){
  .mgc-acad-glance{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Facilities grid — smoother 4 → 3 → 2 → 1 instead of 4 → 2 → 1 */
@media (max-width:1080px) and (min-width:901px){
  .mgc-facilities-grid{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media (max-width:900px) and (min-width:561px){
  .mgc-facilities-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* Flex-based fallback safety net: any card grid explicitly opted into
   a flex layout (rather than CSS grid) wraps cleanly and keeps equal
   card heights per row. */
.mgc-grid.flex,
.mgc-vma-grid.flex,
.mgc-facilities-grid.flex{
  display:flex;
  flex-wrap:wrap;
}
.mgc-grid.flex > *,
.mgc-vma-grid.flex > *,
.mgc-facilities-grid.flex > *{
  flex:1 1 260px;
}

/* =====================================================================
   6. OVERLAYS — lightbox, modals (Intake / "College at a Glance") and
      the floating action button: accessibility + focus polish
   ---------------------------------------------------------------------
   Visual/focus refinements only — the open/close/Escape-key JS for
   each dialog already exists per-component in Default.aspx. This adds
   a consistent focus-visible ring for every close control and trigger,
   a subtle scale-based FAB hover/focus lift, and a stronger, uniform
   backdrop so overlay content reliably reads as "on top" of the page.
   ===================================================================== */
.mgc-lightbox-close:focus-visible,
.mgc-intake-close:focus-visible,
.mgc-glance-modal-close:focus-visible,
.mgc-achieve-lightbox-close:focus-visible{
  outline:3px solid var(--mgc-gold,#d6a13c);
  outline-offset:2px;
}

/* Floating "College at a Glance" trigger — align its elevation
   language with the rest of the site's buttons/cards. */
.mgc-glance-fab{
  transition:
    transform .25s cubic-bezier(.22,1,.36,1),
    box-shadow .25s cubic-bezier(.22,1,.36,1);
}
.mgc-glance-fab:hover,
.mgc-glance-fab:focus-visible{
  transform:translateY(-3px);
}
.mgc-glance-fab:focus-visible{
  outline:3px solid var(--mgc-gold,#d6a13c);
  outline-offset:3px;
}
.mgc-glance-fab:active{
  transform:translateY(-1px);
}

/* Backdrops: consistent dim + blur, and make sure they always sit on
   their own stacking context above the sticky nav (z-index:60) and
   the back-to-top button (z-index:80). */
.mgc-intake-backdrop,
.mgc-lightbox-backdrop,
.mgc-glance-modal{
  z-index:1000;
}
.mgc-glance-modal-backdrop{
  background:rgba(13,22,46,.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* =====================================================================
   7. "WELCOME TO MGC" STRIP — pill drop-in entrance (scroll-triggered)
   ---------------------------------------------------------------------
   The six .mgc-wtab pills (First women's college… / 19 UG departments…
   / etc.) get a "drop-in" entrance — falling from above and settling
   with a slight bounce/overshoot on landing — staggered left-to-right,
   top-to-bottom so they read as a quick cascade.

   IMPORTANT: this is driven by an `.is-in` class toggled from an
   IntersectionObserver (added in Default.aspx just after the welcome
   strip markup), NOT a load-time @keyframes animation. The strip sits
   below the fold, and this codebase already hit this exact bug with
   the Academic Programmes cards (see the comment above that section's
   own <style> block): a fire-on-load keyframe animation finishes
   playing off-screen before anyone scrolls down, so it looks like
   nothing happens. Using a transition + `.is-in` class, replayed on
   every scroll pass via the same IntersectionObserver pattern already
   used elsewhere on this page, is what actually makes it visible.
   ===================================================================== */
.mgc-welcome-tabs .mgc-wtab{
  --wtab-delay:0s;
  opacity:0;
  transform:translateY(-130px) scale(.94);
  transition:
    transform .75s cubic-bezier(.34,1.56,.64,1),
    opacity .45s ease;
  transition-delay:var(--wtab-delay);
  will-change:transform,opacity;
}
.mgc-welcome-tabs .wtab-1{ --wtab-delay:0s;   }
.mgc-welcome-tabs .wtab-2{ --wtab-delay:.09s; }
.mgc-welcome-tabs .wtab-3{ --wtab-delay:.18s; }
.mgc-welcome-tabs .wtab-4{ --wtab-delay:.27s; }
.mgc-welcome-tabs .wtab-5{ --wtab-delay:.36s; }
.mgc-welcome-tabs .wtab-6{ --wtab-delay:.45s; }
.mgc-welcome-tabs .mgc-wtab.is-in{
  opacity:1;
  transform:translateY(0) scale(1);
}
/* Higher specificity than the base .mgc-wtab:hover rule (mgc-combined.css
   line ~414) so the existing hover-lift still works once a pill has
   dropped into view — same convention used for the acad-card reveal. */
.mgc-welcome-tabs .mgc-wtab.is-in:hover{
  transform:translateY(-5px) scale(1.02);
}
@media (max-width:560px){
  .mgc-welcome-tabs .mgc-wtab{ transform:translateY(-70px) scale(.96); }
}

/* Respect reduced motion across every entrance/hover animation added
   in this file. */
@media (prefers-reduced-motion:reduce){
  .mgc-feesbtn,
  .mgc-nav,
  .mgc-nav.mgc-nav-stuck,
  .mgc-notice-tab,
  .mgc-vma-card,
  .mgc-acad-card,
  .mgc-facility-card,
  .mgc-dept-card,
  .mgc-glance-fab,
  .mgc-welcome-tabs .mgc-wtab{
    transition:none !important;
  }
  .mgc-welcome-tabs .mgc-wtab{
    opacity:1;
    transform:none;
  }
}