/* ==========================================================================
   Vidyodaya Academy — homepage-only styles
   Loaded only on index.php (via $extraStyles in partials/header.php), after
   assets/style.css. Reuses the shared design system/tokens and as many
   existing components (course-card, faculty-card, topper-card,
   testimonial-card, stat-strip, gallery-slide, contact-grid, form-field...)
   as possible — new rules here mostly extend those components rather than
   replace them, so the homepage stays visually consistent with the rest of
   the site.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Header: transparent over the cinematic hero until the visitor scrolls
   The header is fixed and out of flow (see style.css), so the hero just
   needs its own top padding to clear it — no negative-margin overlap
   trick, and no risk of a gap opening above the header.
   ========================================================================== */
body.is-home .hero__grid { padding-top: calc(72px + clamp(64px, 9vw, 120px)); }

body.is-home .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.is-home .site-header:not(.is-scrolled) .nav-link { color: rgba(248, 250, 252, 0.88); }
body.is-home .site-header:not(.is-scrolled) .nav-link:hover,
body.is-home .site-header:not(.is-scrolled) .nav-link.is-active { color: #fff; }
body.is-home .site-header:not(.is-scrolled) .nav-link::after { background: #fff; }
body.is-home .site-header:not(.is-scrolled) .brand__name { color: #fff; }
body.is-home .site-header:not(.is-scrolled) .nav-phone { color: #fff; }
body.is-home .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(248, 250, 252, 0.4); }
body.is-home .site-header:not(.is-scrolled) .nav-toggle:hover { background: rgba(248, 250, 252, 0.12); }
body.is-home .site-header:not(.is-scrolled) .nav-toggle__bar { background: #fff; }
body.is-home .site-header:not(.is-scrolled) .btn-whatsapp { background: rgba(248, 250, 252, 0.16); }

/* The mobile dropdown (.primary-nav) always sits on its own solid
   var(--bg) panel — even before scrolling — so it must never inherit the
   white/transparent text meant for the desktop row over the dark hero
   photo. Without this, white nav links render invisible on that light
   panel. Higher specificity (extra .primary-nav) + later in the cascade
   wins over the rules above. */
@media (max-width: 767.98px) {
  body.is-home .site-header:not(.is-scrolled) .primary-nav .nav-link { color: var(--ink-soft); }
  body.is-home .site-header:not(.is-scrolled) .primary-nav .nav-link:hover,
  body.is-home .site-header:not(.is-scrolled) .primary-nav .nav-link.is-active { color: var(--accent); }
  body.is-home .site-header:not(.is-scrolled) .primary-nav .nav-phone { color: var(--navy); }
  body.is-home .site-header:not(.is-scrolled) .primary-nav .btn-whatsapp { background: var(--navy); }
  body.is-home .site-header:not(.is-scrolled) .primary-nav .btn-whatsapp:hover { background: var(--navy-dark); }
}
body.is-home .site-header:not(.is-scrolled) .btn-whatsapp:hover { background: rgba(248, 250, 252, 0.26); }

/* ==========================================================================
   Hero — cinematic photo treatment, layered visual, floating badges
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
}
.hero::before { display: none; } /* replaces the light decorative glow below */

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(12, 37, 64, 0.96) 5%, rgba(12, 37, 64, 0.88) 34%, rgba(12, 37, 64, 0.58) 64%, rgba(12, 37, 64, 0.32) 100%);
}
.hero > .container-xl { position: relative; z-index: 2; padding-bottom: clamp(56px, 8vw, 88px); }

.hero .eyebrow { color: var(--yellow); }
.hero__title { color: #fff; }
.hero__subhead { color: var(--on-navy-soft); }
.hero__cta-row { margin-bottom: 16px; }
.hero__call-hint { color: var(--on-navy-soft); font-size: 0.92rem; margin-bottom: 32px; }
.hero__call-hint a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero__trust-row { border-top-color: rgba(248, 250, 252, 0.2); }
.hero__trust-item dt { color: #fff; }
.hero__trust-item dd { color: var(--on-navy-soft); }

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(248, 250, 252, 0.75);
  transition: color var(--dur-fast) var(--ease);
}
.hero__scroll-cue:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-cue svg { animation: heroScrollBounce 2.2s ease-in-out infinite; }
  @keyframes heroScrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }
}
@media (max-width: 767.98px) {
  .hero__scroll-cue { display: none; }
}

.hero__visual { position: relative; padding: 20px; max-width: 420px; margin-inline: auto; }
.hero__visual-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(248, 250, 252, 0.14);
  aspect-ratio: 4 / 5;
}
.hero__visual-frame img { width: 100%; height: 100%; object-fit: cover; }

/* .hero__badge* now lives in assets/style.css (shared with about.php's hero). */
@media (max-width: 991.98px) {
  .hero__visual { padding: 32px 16px 16px; max-width: 360px; margin-inline: auto; }
}

/* ==========================================================================
   Institute introduction (reuses .story-grid / .story-content)
   ========================================================================== */
.intro-visual { position: relative; }
.intro-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.intro-visual__badge {
  position: absolute;
  left: 20px;
  bottom: -18px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
@media (max-width: 991.98px) {
  .intro-visual { max-width: 420px; margin-inline: auto; order: -1; }
}

/* .stat-strip--light now lives in assets/style.css (shared with gallery.php). */

/* .course-card__media / __body / __meta / __cta now live in assets/style.css
   (shared with courses.php). */

/* ==========================================================================
   Why choose us — subtle card-on-hover
   ========================================================================== */
.why-item {
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.why-item:hover { border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Achievements / results — photo + stats split, above the topper grid
   ========================================================================== */
.achieve-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  margin-bottom: clamp(40px, 6vw, 56px);
}
.achieve-visual { position: relative; }
.achieve-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 5 / 4;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}
.achieve-visual__ribbon {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--yellow);
  color: var(--on-yellow);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.achieve-stats.stat-strip {
  grid-template-columns: 1fr;
  gap: 22px;
  border-bottom: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767.98px) {
  .achieve-grid { grid-template-columns: 1fr; }
}

/* .faculty-card__photo-wrap / __badge now live in assets/style.css. */

/* ==========================================================================
   Testimonials (homepage) — avatar + star rating
   ========================================================================== */
.testimonial-card__rating {
  color: var(--yellow);
  letter-spacing: 2px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.testimonial-card__author { flex-direction: row; align-items: center; gap: 12px; }
.testimonial-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent-soft);
}
span.testimonial-card__author-text {
  display: flex; flex-direction: column; min-width: 0;
  font-weight: 700; font-size: 0.9rem; color: var(--accent);
}
.testimonial-card__author-text span { font-weight: 500; color: var(--ink-faint); font-size: 0.82rem; margin-top: 2px; }

/* Gallery grid, lightbox and the CTA banner's photo variant now live in
   assets/style.css — gallery.php reuses them too, so they're shared. */

/* ==========================================================================
   Homepage contact teaser
   ========================================================================== */
.home-contact__note { color: var(--ink-soft); font-size: 0.9rem; margin-top: -12px; }
.contact-info__cta { display: inline-flex; margin-top: 20px; }