/* =====================================================
   SANKALP MARATHI MANDAL — SHARED DESIGN SYSTEM
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tiro+Devanagari+Marathi&display=swap');

:root {
  /* Apple-inspired neutrals */
  --apple-blue: #0071e3;
  --apple-dark: #1d1d1f;
  --apple-gray: #86868b;
  --apple-light-gray: #f5f5f7;
  --apple-white: #fbfbfd;

  /* Brand */
  --brand-gradient-start: #B5171D;
  --brand-gradient-end: #56127D;
  --accent-orange: #E36C18;
  --accent-orange-bright: #ff6b35;
  --accent-purple: #764ba2;

  /* Festive palette */
  --ivory: #FDFAF4;
  --ivory-deep: #F8F2E7;
  --gold: #E9BF28;
  --saffron: #E36C18;
  --saree-border: linear-gradient(90deg, var(--gold), var(--saffron), var(--brand-gradient-start), var(--brand-gradient-end));

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-devanagari: 'Tiro Devanagari Marathi', 'Inter', sans-serif;

  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-card: 0 4px 12px rgba(120,50,20,0.08);
  --shadow-card-hover: 0 20px 40px rgba(120,50,20,0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  font-family: var(--font-family);
  background: var(--ivory);
  color: var(--apple-dark);
  -webkit-font-smoothing: antialiased;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.modal-open { overflow: hidden; }
main { flex: 1; }

/* =====================================================
   NAVIGATION
   ===================================================== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(253, 250, 244, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.site-nav::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--saree-border);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  height: 56px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
}

.nav-brand-logo {
  height: 34px;
  width: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-brand-text {
  font-family: var(--font-devanagari);
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 1150px) and (min-width: 901px) {
  .nav-brand-sub { display: none; }
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: var(--apple-dark);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 980px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover { background: rgba(0,0,0,0.06); }

.nav-links a.active {
  background: var(--apple-dark);
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 22px;
  color: var(--apple-dark);
}

/* Small always-visible CTA at the right edge of the nav (currently used on
   index.html only — add the same markup to another page's <nav> if you
   want it there too, no other wiring needed). */
.nav-cta {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  padding: 8px 18px;
  border-radius: 980px;
  margin-left: auto;
  transition: filter 0.2s ease;
}
.nav-cta:hover { filter: brightness(1.1); }

/* Marathi Shala dropdown (desktop: hover/focus flyout; mobile: always-expanded inline) */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-caret {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.nav-dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 180px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.14);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 950;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--apple-dark);
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover { background: rgba(0,0,0,0.06); }

@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(251, 251, 253, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 20px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    gap: 6px;
    align-items: stretch;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; font-size: 16px; text-align: center; }
  .nav-cta { display: none; }

  /* Dropdown becomes a permanently-expanded, indented sub-list in the mobile menu */
  .nav-dropdown-toggle { justify-content: center; }
  .nav-dropdown-caret { display: none; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    margin-top: 0;
    padding: 0 0 0 16px;
  }
  .nav-dropdown-menu a { text-align: center; font-size: 14px; padding: 10px 16px; }
}

/* =====================================================
   MARQUEE BANNER
   ===================================================== */
.marquee-banner {
  background: linear-gradient(135deg, #FFA34C 0%, #E9BF28 100%);
  color: #fff;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
}

.marquee-track { display: inline-block; animation: marquee 22s linear infinite; }
/* Pause-on-hover only for devices with a real mouse — on touch devices,
   :hover can get "stuck" after a tap (no mouse-leave event ever fires),
   which would otherwise freeze the animation permanently until the user
   taps somewhere else. */
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 32px;
}

.marquee-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 4px;
}

/* =====================================================
   PAGE HERO (subpages)
   ===================================================== */
.page-hero {
  padding: 64px 20px 48px;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2356127D' stroke-opacity='0.08' stroke-width='1.2'%3E%3Ccircle cx='100' cy='100' r='28'/%3E%3Ccircle cx='100' cy='100' r='52'/%3E%3Ccircle cx='100' cy='100' r='76'/%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Cpath d='M100 4 V196 M4 100 H196 M32 32 L168 168 M168 32 L32 168'/%3E%3Ccircle cx='100' cy='24' r='4'/%3E%3Ccircle cx='100' cy='176' r='4'/%3E%3Ccircle cx='24' cy='100' r='4'/%3E%3Ccircle cx='176' cy='100' r='4'/%3E%3Ccircle cx='46' cy='46' r='4'/%3E%3Ccircle cx='154' cy='154' r='4'/%3E%3Ccircle cx='154' cy='46' r='4'/%3E%3Ccircle cx='46' cy='154' r='4'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, var(--ivory-deep) 0%, var(--ivory) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -80px top -80px, center;
  background-size: 340px 340px, cover;
}

.page-hero::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, var(--saffron), var(--brand-gradient-start), var(--brand-gradient-end));
}

/* Text itself carries the ॥ ... ॥ danda brackets (same convention as
   .mr-danda section headers) — uppercase + tracking here matches that
   treatment so every page title, not just in-page section intros, reads
   consistently site-wide. */
.page-hero h1 {
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-hero p {
  font-size: clamp(16px, 3vw, 20px);
  color: var(--apple-gray);
  max-width: 700px;
  margin: 0 auto;
}

/* =====================================================
   PAGE SUB-NAV — in-page anchor pills under a page hero (currently
   shala.html), sticky under the main nav so it's reachable while
   scrolling through a long page. Active section is highlighted via
   IntersectionObserver in initSubnav() (main.js).
   ===================================================== */
.subnav {
  /* .site-nav above is itself sticky at top:0 with a fixed 56px height
     (.nav-inner { height: 56px }) — stick this bar right underneath it,
     not on top of it. */
  position: sticky; top: 56px; z-index: 40;
  background: rgba(253,250,244,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 12px 20px;
}
.subnav-inner {
  /* 1120px matches .shala-hero-wrap / the widest content sections below,
     so the pill bar lines up with the hero and body content instead of
     looking off-center against them. */
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; overflow-x: auto;
  gap: 8px; scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-family); font-size: 13.5px; font-weight: 600;
  line-height: 1;
  color: var(--apple-dark); background: var(--apple-light-gray);
  border-radius: 980px; padding: 10px 18px; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.subnav a:hover { background: #eeeef0; }
.subnav a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
}

/* =====================================================
   SHALA EVENTS (shala.html) — same .ev3-grid/.ev3-card component as the
   homepage, but only ever shows up to 2 cards (current + future — no
   "previous"). Unlike the homepage's featured-vs-small layout, both cards
   sit side by side in one row at the same (smaller) size, so overrides
   below normalize the "upcoming" card down to the "future" card's sizing.
   ===================================================== */
.shala-events-grid.ev3-grid {
  max-width: 900px; margin: 0 auto 16px; padding: 0 24px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "upcoming future";
}
.shala-events-grid .ev3-upcoming .ev3-media { aspect-ratio: 4 / 2.3; }
.shala-events-grid .ev3-upcoming .ev3-name  { font-size: 15.5px; }
.shala-events-grid .ev3-upcoming .ev3-body  { padding: 14px 16px 18px; }
@media (max-width: 700px) {
  .shala-events-grid.ev3-grid { grid-template-columns: 1fr; grid-template-areas: "upcoming" "future"; }
}

/* =====================================================
   SHALA GUIDELINES (shala.html) — Parents / Teachers accordions
   side by side on desktop, stacked on mobile.
   ===================================================== */
.guidelines-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  max-width: 1100px; margin: 0 auto; padding: 0 24px 60px;
}
@media (max-width: 800px) { .guidelines-columns { grid-template-columns: 1fr; } }
.guidelines-column-title {
  font-family: var(--font-family); font-size: 15px; font-weight: 700;
  color: var(--brand-gradient-start); text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}

/* =====================================================
   HOME HERO — single rounded/shadowed card holding the logo (left) and
   headline/CTAs (right). Currently used on index.html only. Colors, fonts
   and radius/shadow tokens are the same ones used everywhere else on the
   site (--font-family / --font-devanagari / --radius-lg / brand gradient) —
   this is a layout change, not a new theme.
   ===================================================== */
.hero2-wrap { max-width: 1040px; margin: 40px auto 64px; padding: 0 24px; }

.hero2 {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
  background: var(--apple-white);
  border-radius: 28px;
  box-shadow: 0 20px 50px rgba(120,50,20,0.12);
  padding: 48px;
}

.hero2-visual { order: -1; display: flex; justify-content: center; }

.hero2-art img {
  width: 100%;
  max-width: 400px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero2-art img:hover { transform: scale(1.02); }

.hero2-eyebrow {
  display: inline-block;
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-orange);
  background: rgba(227,108,24,0.1);
  padding: 5px 12px;
  border-radius: 980px;
  margin-bottom: 18px;
}

.hero2-copy h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  color: var(--apple-dark);
}

.hero2-copy h1 .accent {
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero2-copy .sub {
  font-family: var(--font-devanagari);
  font-size: clamp(16px, 2vw, 19px);
  color: var(--apple-gray);
  max-width: 480px;
  margin: 0 0 28px;
  line-height: 1.6;
}

.hero2-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero2-ctas .cta-button { width: auto; padding: 12px 24px; font-size: 14.5px; }

.hero2-trust {
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-family); font-size: 12.5px; color: var(--apple-gray);
}
.hero2-trust span { display: flex; align-items: flex-start; gap: 8px; }
.hero2-trust i { color: var(--accent-orange); font-size: 13px; margin-top: 2px; }
.hero2-trust b { color: var(--apple-dark); }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The hero logo is intentionally excluded from this fade-in animation —
   it flashed then vanished intermittently on mobile Safari (a WebKit
   compositing quirk with animated transforms), so it just always renders
   at full opacity instead. Everything else keeps the gentle fade-up. */
.hero2-eyebrow, .hero2-copy h1, .hero2-copy .sub, .hero2-ctas, .hero2-trust {
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero2-eyebrow     { animation-delay: 0.1s; }
.hero2-copy h1     { animation-delay: 0.2s; }
.hero2-copy .sub   { animation-delay: 0.3s; }
.hero2-ctas        { animation-delay: 0.4s; }
.hero2-trust       { animation-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero2-eyebrow, .hero2-copy h1, .hero2-copy .sub, .hero2-ctas, .hero2-trust {
    animation: none;
  }
}

@media (max-width: 860px) {
  .hero2 { grid-template-columns: 1fr; text-align: left; padding: 32px 24px; }
  .hero2-wrap { margin: 24px auto 48px; }
}

/* Culture icon ribbon, nested as a third row inside the hero card. Only
   this row needs overflow:hidden — clipping the whole .hero2 card instead
   caused the same WebKit issue with the hero image's animation, so keep
   the clip scoped to just the marquee row. */
.hero2-ribbon {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  border-radius: 0 0 28px 28px;
}
.hero2-ribbon .icon-strip-label {
  text-align: center; font-family: var(--font-devanagari); font-size: 14px; font-weight: 700;
  color: var(--apple-dark); margin-bottom: 16px;
}
.hero2-ribbon .icon-strip-row {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
@media (max-width: 860px) { .hero2-ribbon { margin-top: 4px; padding-top: 24px; } }

.cta-button {
  width: 100%;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.cta-primary {
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  color: #fff;
  box-shadow: 0 4px 16px rgba(86,18,125,0.3);
}

.cta-primary:hover { filter: brightness(1.12); transform: scale(1.02); box-shadow: 0 6px 20px rgba(86,18,125,0.4); }

.cta-secondary {
  background: transparent;
  color: var(--apple-dark);
  border: 2px solid var(--apple-dark);
}

.cta-secondary:hover { background: var(--apple-dark); color: #fff; transform: scale(1.02); }

/* =====================================================
   SECTION TITLES
   ===================================================== */
.section-divider { padding: 60px 24px 40px; text-align: center; }

.section-divider::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, var(--saffron), var(--brand-gradient-start), var(--brand-gradient-end));
}

.section-title {
  font-size: clamp(32px, 6vw, 48px);
  font-weight: 700;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  line-height: 1.1;
}

.section-subtitle { font-size: clamp(16px, 4vw, 20px); color: var(--apple-gray); }

/* =====================================================
   SECTION HEADERS — homepage danda-bracket design language. Borrows the
   "॥ ... ॥" bracket convention from traditional Marathi typesetting
   (e.g. Dnyaneshwari manuscripts) as a deliberate cultural signature for
   homepage section headers, without using scripture typography literally.
   Still just the two site fonts — Inter + Tiro Devanagari Marathi.
   ===================================================== */
.mr-divider { padding: 56px 24px 34px; text-align: center; }
.mr-danda {
  font-weight: 700; letter-spacing: 0.01em; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mr-danda.mr-marathi { font-family: var(--font-devanagari); font-size: clamp(28px, 3.6vw, 40px); }
.mr-danda.mr-english { font-family: var(--font-family); font-size: clamp(22px, 2.6vw, 28px); letter-spacing: 0.06em; text-transform: uppercase; }
/* On a dark panel (Performances section) the gradient text-clip is
   invisible — fall back to a solid light color instead. */
.mr-danda.mr-on-dark { background: none; -webkit-text-fill-color: currentColor; color: #fff; }
.mr-tagline { font-family: var(--font-devanagari); font-size: 15px; color: var(--apple-gray); }
.mr-tagline.mr-plain { font-family: var(--font-family); font-size: 16px; color: var(--apple-gray); }

/* =====================================================
   EVENTS GRID
   ===================================================== */
.events-section { padding: 0 24px 40px; max-width: 1040px; margin: 0 auto; width: 100%; }

/* Featured "Upcoming" card on top, "Previous" + "Future" small below */
.ev3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "upcoming upcoming" "previous future";
  gap: 18px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .ev3-grid { grid-template-columns: 1fr; grid-template-areas: "upcoming" "previous" "future"; }
}
.ev3-upcoming { grid-area: upcoming; }
.ev3-previous { grid-area: previous; }
.ev3-future   { grid-area: future; }

.ev3-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.ev3-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.04); transform: translateY(-2px); }

.ev3-media { position: relative; background: var(--apple-light-gray); overflow: hidden; }
.ev3-upcoming .ev3-media { aspect-ratio: 2.6 / 1; }
.ev3-previous .ev3-media, .ev3-future .ev3-media { aspect-ratio: 4 / 2.3; }
.ev3-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.ev3-card:hover .ev3-media img { transform: scale(1.08); }

/* "Transparent footer" — gradient bar over the bottom of the photo, date left, status pill right */
.ev3-footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
  padding: 18px 14px 9px;
  display: flex; align-items: flex-end; justify-content: space-between;
  color: #fff; font-family: var(--font-family);
}
.ev3-footer-date { font-size: 12px; font-weight: 600; }

.event-badge {
  padding: 3px 11px;
  border-radius: 980px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-previous { background: #6b7280; color: #fff; }
.badge-current  { background: #fbbf24; color: #1f2937; }
.badge-future   { background: #10b981; color: #fff; }

.ev3-body { padding: 14px 16px 18px; }
.ev3-upcoming .ev3-body { padding: 18px 20px 20px; }
.ev3-name { font-family: var(--font-family); font-weight: 700; color: var(--apple-dark); margin-bottom: 6px; }
.ev3-upcoming .ev3-name { font-size: 18px; }
.ev3-previous .ev3-name, .ev3-future .ev3-name { font-size: 15.5px; }

.event-venue-info {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 6px;
  color: #6b7280;
  font-size: 12.5px;
}

.venue-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.venue-pin  { color: #ec4899; }
.location-building { color: #3b82f6; }

.event-description { font-size: 13px; line-height: 1.55; color: #6b7280; margin-top: 8px; }

/* ================= BOOK A PERFORMANCE — homepage teaser (photo left, performance list right) ================= */
.perf-promo { max-width: 1040px; margin: 8px auto 64px; padding: 0 24px; }
.perf-promo-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0;
  border-radius: 28px; overflow: hidden; background: #1a0d0f;
}
@media (max-width: 900px) { .perf-promo-grid { grid-template-columns: 1fr; } }

.perf-promo-photo { position: relative; min-height: 420px; background: var(--apple-light-gray); }
.perf-promo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.perf-promo-side {
  background: linear-gradient(165deg, var(--brand-gradient-start) 0%, #6d0f1c 100%);
  padding: 44px 36px 36px; color: #fff; display: flex; flex-direction: column;
}
.perf-promo-side .hero2-eyebrow { color: var(--gold); }
.perf-promo-title {
  font-family: var(--font-family); font-size: clamp(24px, 3vw, 30px); font-weight: 700;
  color: #fff; margin: 12px 0 10px; line-height: 1.2;
}
.perf-promo-sub {
  font-family: var(--font-family); font-size: 14px; color: rgba(255,255,255,0.8);
  line-height: 1.6; margin: 0 0 26px;
}

.perf-promo-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.perf-promo-item {
  display: flex; gap: 14px; align-items: center;
  background: rgba(255,255,255,0.06); border: none;
  border-radius: 14px; padding: 12px;
}
.perf-promo-item-img { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #fff; }
.perf-promo-item-img img { width: 100%; height: 100%; object-fit: contain; }
.perf-promo-item-title { font-family: var(--font-family); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.perf-promo-item-desc { font-family: var(--font-family); font-size: 12.5px; color: rgba(255,255,255,0.72); line-height: 1.5; }
.perf-promo-item-badge {
  display: inline-block; margin-top: 5px; font-family: var(--font-family); font-size: 10px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.12); padding: 3px 9px; border-radius: 980px;
}

/* Icon-badge variant of .perf-promo-item-img, for promo lists (like Marathi
   Shala highlights) that don't have a per-item photo — same footprint,
   just a centered Font Awesome icon instead of an <img>. */
.perf-promo-item-icon {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
}
.perf-promo-item-icon i { font-size: 19px; color: var(--gold); }

.perf-promo-cta { width: auto; display: inline-block; padding: 14px 28px; margin-top: auto; align-self: flex-start; }

/* Marathi Shala homepage teaser: reuses .perf-promo-grid's dark/light
   split idea but with its own narrow fixed-width logo rail instead of a
   1.3fr photo column — a 110px logo doesn't need a huge column to sit in,
   so forcing it into one just left a big empty gray box. Narrower column
   + shorter copy below keeps the whole card compact instead of matching
   Performances' height artificially. */
.shala-promo .perf-promo-grid { grid-template-columns: 200px 1fr; }
@media (max-width: 900px) { .shala-promo .perf-promo-grid { grid-template-columns: 1fr; } }
.shala-promo .perf-promo-side {
  background: linear-gradient(165deg, var(--saffron) 0%, #5c2c0a 100%);
}
.shala-promo .perf-promo-side .hero2-eyebrow { color: #ffe8c2; }
.shala-logo-panel {
  display: flex; align-items: center; justify-content: center;
  background: var(--apple-light-gray); padding: 24px;
}
.shala-logo-panel img {
  width: 160px; height: 160px; border-radius: 24px; object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

/* Compact icon+label chips, replacing the longer perf-promo-item rows —
   short and scannable instead of four paragraphs of description. */
.shala-highlights { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.shala-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.14); color: #fff;
  font-family: var(--font-family); font-size: 12.5px; font-weight: 600;
  padding: 9px 14px; border-radius: 980px;
}
.shala-chip i { font-size: 12px; opacity: 0.9; }

.timeline-button-container { text-align: center; padding: 8px 0 16px; }

/* Matches the rest of the site's CTA pill treatment (same as
   "Explore All Performances", "Join Us", etc.) instead of the old
   one-off blue/purple gradient with a smaller corner radius. */
.timeline-button-container .cta-button { width: auto; display: inline-block; padding: 16px 40px; }

/* Loading skeleton */
.skeleton-card {
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  height: 420px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================
   MODAL
   ===================================================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: auto;
}

.modal.active { display: flex; justify-content: center; align-items: center; opacity: 1; }

.modal-content {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  max-width: 95vw;
  max-height: 98vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.37);
}

.modal-content.animating-in { animation: modalFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.modal-close {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 32px;
  cursor: pointer;
  z-index: 10;
  background: rgba(255,255,255,0.95);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border: none;
  color: #1f2937;
  font-weight: 300;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.modal-close:hover { background: #fff; transform: rotate(90deg) scale(1.1); }

.modal-layout { display: grid; grid-template-columns: 60% 40%; height: 100%; max-height: 98vh; }

.modal-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  padding: 20px;
}

.modal-media-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.modal-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.view-fullsize-btn {
  position: absolute;
  top: 20px; right: 20px;
  background: rgba(255,255,255,0.95);
  color: #1f2937;
  border: none;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

.view-fullsize-btn:hover { background: #667eea; color: #fff; transform: scale(1.1); }
.view-fullsize-btn svg { width: 22px; height: 22px; stroke-width: 2.5; }

.modal-body {
  padding: 60px 48px;
  overflow-y: auto;
  background: rgba(255,255,255,0.7);
  scrollbar-width: thin;
}

.modal-title { font-size: 40px; font-weight: 700; margin-bottom: 24px; color: #1f2937; }
.modal-desc  { font-size: 18px; line-height: 1.8; color: #4b5563; }
.modal-meta  { margin-top: 32px; padding-top: 32px; border-top: 1px solid #e5e7eb; }

.meta-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #6b7280; font-size: 16px; }
.meta-icon { width: 24px; height: 24px; color: #8b5cf6; flex-shrink: 0; }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

/* Flat, Apple-style card: fill-color contrast instead of a border/shadow,
   no decorative quote mark — quiet and uncluttered. */
.testimonial-card {
  position: relative;
  overflow: hidden;
  background: var(--apple-light-gray);
  padding: 22px 22px 20px;
  border-radius: 18px;
  box-shadow: none;
  border: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.testimonial-card:hover { background: #eeeef0; transform: translateY(-2px); }

.testimonial-profile { display: flex; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; }
.testimonial-profile img { width: 48px; height: 48px; border-radius: 50%; margin-right: 12px; object-fit: cover; }
.testimonial-name {
  font-family: var(--font-devanagari);
  font-size: 13px; font-weight: 700;
  color: var(--brand-gradient-start);
  background: none;
  margin-bottom: 10px;
  position: relative; z-index: 1;
}
.testimonial-text {
  color: var(--apple-dark);
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.6;
  position: relative; z-index: 1;
}

/* =====================================================
   IMPACT SLIDER
   ===================================================== */
.impact-slider-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  position: relative;
}

.slider-wrapper { position: relative; height: 600px; overflow: hidden; background: #000; border-radius: 16px; }

.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; display: flex; justify-content: center; align-items: center; }
.slide.active { opacity: 1; z-index: 1; }

.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(35px); transform: scale(1.2); opacity: 0.6; }
.fg-img { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; z-index: 2; cursor: pointer; }

.slide-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 25px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: #fff;
  font-size: 22px;
  text-align: center;
  z-index: 3;
}

.slider-controls {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  pointer-events: none;
  z-index: 5;
}

.slider-btn {
  pointer-events: all;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  cursor: pointer;
  background: rgba(255,255,255,0.9);
  transition: all 0.3s ease;
}

.slider-btn:hover { background: #fff; transform: scale(1.1); }

.thumbnails {
  display: flex;
  gap: 10px;
  padding: 15px;
  justify-content: center;
  background: #f4f4f4;
  overflow-x: auto;
  border-radius: 0 0 16px 16px;
  scrollbar-width: thin;
}

.thumbnail {
  width: 120px; height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.thumbnail.active { border-color: var(--brand-gradient-start); }
.thumbnail:hover  { transform: scale(1.05); }
.thumbnail img    { width: 100%; height: 100%; object-fit: cover; }

.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup.active { display: flex; }
.popup img    { max-width: 90%; max-height: 90%; border-radius: 10px; }

/* =====================================================
   PRESENTING SPONSORS — replaces the old plain logo wall. Each sponsor's
   own brand color (--accent, set per-card via inline style from the
   AccentColor field) drives the top bar/badge/CTA, so every card reads as
   that business's own identity rather than a forced site color. Card
   chrome itself (radius, hairline border, no heavy shadow) matches the
   flat Apple-style treatment used for event cards elsewhere on the page.
   ===================================================== */
/* Deliberately compact/quiet — sponsors are supporting content on this
   page, not the headline (Events is). Smaller type scale, lighter outline
   pills instead of solid color blocks, capped tag count, tighter section
   padding, so this section doesn't visually out-compete Events above it. */
.partners-section { padding: 40px 0; background: var(--ivory-deep); overflow: hidden; }
.partners-container { max-width: 900px; margin: 0 auto; padding: 0 24px; }

.sponsors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

/* Bottom accent bar is an inset box-shadow, not a separate element — a
   shadow is clipped by the element's own border-radius automatically, so
   there's no separate corner to misalign. */
.sponsor-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: inset 0 -3px 0 0 var(--accent, var(--brand-gradient-start));
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.sponsor-card:hover { box-shadow: inset 0 -3px 0 0 var(--accent, var(--brand-gradient-start)), 0 6px 18px rgba(0,0,0,0.07); border-color: rgba(0,0,0,0.04); transform: translateY(-1px); }
.sponsor-card-body { padding: 18px 20px 18px; }

.sponsor-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sponsor-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--apple-light-gray);
  background: color-mix(in srgb, var(--accent, var(--brand-gradient-start)) 14%, #fff);
  border: 2px solid var(--accent, var(--brand-gradient-start));
  overflow: hidden;
}
.sponsor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sponsor-avatar i { color: var(--accent, var(--brand-gradient-start)); font-size: 17px; }
.sponsor-name { font-size: 15px; font-weight: 700; color: var(--apple-dark); line-height: 1.3; }
.sponsor-name-icon { font-size: 11px; color: var(--accent, var(--brand-gradient-start)); margin-left: 4px; vertical-align: middle; }
.sponsor-role { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent, var(--brand-gradient-start)); margin-top: 1px; }

.sponsor-divider { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 0 0 12px; }

/* Logo + business name/tagline sit side by side, same left-aligned
   pattern as the avatar/name row above — not centered/stacked. */
.sponsor-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sponsor-icon-badge {
  width: 56px; height: 44px; flex-shrink: 0; padding: 5px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}
.sponsor-icon-badge i { color: var(--accent, var(--brand-gradient-start)); font-size: 15px; }
.sponsor-icon-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sponsor-business-name { font-size: 15px; font-weight: 700; color: var(--accent, var(--brand-gradient-start)); margin-bottom: 2px; }
.sponsor-tagline { font-style: italic; font-size: 11.5px; color: var(--apple-gray); line-height: 1.35; }

.sponsor-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sponsor-tier, .sponsor-category {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 980px; border: 1px solid;
  background: transparent;
}
.sponsor-tier { color: #a8790a; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, #fff); }
.sponsor-category { color: var(--accent, var(--brand-gradient-start)); border-color: var(--accent, var(--brand-gradient-start)); background: color-mix(in srgb, var(--accent, var(--brand-gradient-start)) 8%, #fff); }

.sponsor-description { font-size: 12.5px; line-height: 1.5; color: var(--apple-dark); margin-bottom: 10px; }

.sponsor-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.sponsor-tag {
  font-size: 10.5px; color: var(--apple-dark); background: var(--apple-light-gray);
  border: 1px solid rgba(0,0,0,0.06); padding: 3px 9px; border-radius: 980px;
}
.sponsor-tag-more { color: var(--apple-gray); }

.sponsor-contact-divider { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 0 0 10px; }
.sponsor-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sponsor-contact-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--apple-dark); overflow: hidden; }
.sponsor-contact-item a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sponsor-contact-item a:hover { text-decoration: underline; }
.sponsor-contact-item i { color: var(--accent, var(--brand-gradient-start)); font-size: 10.5px; width: 12px; flex-shrink: 0; }

@media (max-width: 640px) {
  .sponsor-contact { grid-template-columns: 1fr; }
}

/* =====================================================
   CULTURE ICON RIBBON (homepage, right after the hero)
   Auto-loads from data/culture-icons.json, which GitHub Actions
   regenerates whenever a file is added to or removed from
   assets/images/culture-icons/. No coding needed — just drop an
   image in that folder (or use the admin panel) and it flows in
   automatically. Deliberately no captions, same as the Community
   Pride Wall below it — icons only.
   ===================================================== */
.icon-strip-section {
  background: var(--apple-white);
  padding: 28px 0 32px;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.icon-strip-label {
  max-width: 1040px; margin: 0 auto 18px; padding: 0 24px;
  font-family: var(--font-devanagari); font-size: 14px; font-weight: 700;
  color: var(--apple-dark); text-align: center;
}

.icon-strip-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.icon-strip-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: icon-strip-scroll 50s linear infinite;
}

@media (hover: hover) and (pointer: fine) {
  .icon-strip-row:hover .icon-strip-track { animation-play-state: paused; }
}

@keyframes icon-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.icon-strip-item {
  flex-shrink: 0;
  width: 48px; height: 48px;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}
.icon-strip-item:hover { opacity: 1; filter: grayscale(0); transform: translateY(-2px); }
.icon-strip-item img { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .icon-strip-track { animation: none; }
}

@media (max-width: 640px) {
  .icon-strip-item { width: 38px; height: 38px; }
  .icon-strip-track { gap: 32px; }
}

/* =====================================================
   COMMUNITY PRIDE WALL (homepage)
   ===================================================== */
.pride-river {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 0 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pride-row {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.pride-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: pride-scroll-left 42s linear infinite;
}

.pride-row.reverse .pride-track { animation-name: pride-scroll-right; }
@media (hover: hover) and (pointer: fine) {
  .pride-row:hover .pride-track { animation-play-state: paused; }
}

@keyframes pride-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pride-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.pride-chip {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
}

.pride-chip:hover { transform: translateY(-8px) scale(1.08); box-shadow: var(--shadow-card-hover); }
.pride-chip img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .pride-track { animation: none; }
}

@media (max-width: 640px) {
  .pride-chip { width: 76px; height: 76px; padding: 8px; }
  .pride-track { gap: 14px; }
  .pride-river { gap: 16px; }
}

/* =====================================================
   ABOUT
   ===================================================== */
.about-section { padding: 20px 0 60px; }
.about-container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

.about-intro {
  color: var(--apple-gray);
  line-height: 1.8;
  font-size: clamp(15px, 3vw, 17px);
  margin: 0 auto 40px;
  text-align: center;
  max-width: 900px;
}

.about-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.about-card {
  background: #f9fafb;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid #e5e7eb;
}

.about-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,0.1); border-color: var(--accent-orange-bright); }

.about-icon {
  width: 70px; height: 70px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--accent-orange-bright) 0%, #f7931e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.about-card:hover .about-icon { transform: scale(1.1); }
.about-icon i  { font-size: 2em; color: #fff; }
.about-card h4 { font-size: 1.4em; margin-bottom: 12px; font-weight: 700; }
.about-card p  { color: var(--apple-gray); line-height: 1.7; font-size: 0.95em; }

/* =====================================================
   EVENT TIMELINE PAGE — flat, single-column, Apple-style editorial
   timeline. Matches the homepage design language (ivory background,
   danda-bracket header, flat cards with a hairline border instead of
   heavy glassmorphism/shadow, badge colors reused from the homepage
   event cards) instead of the old purple-gradient/blur look.
   ===================================================== */
.timeline-page { background: var(--ivory); }

.timeline-page main { position: relative; z-index: 1; }

.timeline-page-wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px 80px; }

.timeline-container { padding: 0; }

.year-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.year-tab {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--apple-dark);
  background: var(--apple-light-gray);
  border: none;
  border-radius: 980px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.year-tab:hover { background: #eeeef0; }

.year-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
}

.timeline-loading { text-align: center; color: var(--apple-gray); font-size: 16px; padding: 40px; }

.timeline { position: relative; max-width: 720px; margin: 0 auto; padding: 4px 0; }

.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(0,0,0,0.08);
}

.timeline-item {
  position: relative;
  padding-left: 42px;
  margin-bottom: 24px;
  opacity: 0;
  animation: tlFadeIn 0.5s ease forwards;
}

@keyframes tlFadeIn { to { opacity: 1; } }

.timeline-content {
  background: #fff;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: none;
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.timeline-content:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.04); transform: translateY(-2px); }

.timeline-marker {
  position: absolute;
  left: 2px;
  top: 22px;
  width: 16px;
  height: 16px;
  background: #6b7280;
  border: 3px solid var(--ivory);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 50%;
  z-index: 1;
}

/* Same semantic colors as the homepage event-card badges, for consistency */
.timeline-item.previous .timeline-marker { background: #6b7280; }
.timeline-item.current  .timeline-marker { background: #fbbf24; }
.timeline-item.future   .timeline-marker { background: #10b981; }

.month-label {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-gradient-start);
  margin-bottom: 10px;
}

.timeline-event-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.timeline-event-title { font-size: 19px; color: var(--apple-dark); font-weight: 700; margin-bottom: 8px; text-align: left; }
.timeline-event-summary { color: var(--apple-gray); line-height: 1.6; font-size: 14px; }

@media (max-width: 768px) {
  .timeline-event-image { height: 170px; }
  .timeline-event-title { font-size: 17px; }
}

@media (max-width: 480px) {
  .timeline-event-image { height: 150px; }
}

/* Section group heading (used on team/FAQ pages) */
.timeline-year {
  font-size: 28px;
  font-weight: 700;
  margin: 48px 0 24px;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =====================================================
   TEAM PAGE
   ===================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.team-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }

.team-avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  margin: 0 auto 18px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
}

.team-name { font-size: 19px; font-weight: 700; }
.team-role { font-size: 14px; color: var(--accent-orange); font-weight: 600; margin: 4px 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.team-bio  { font-size: 14px; color: var(--apple-gray); line-height: 1.6; }

/* =====================================================
   FAQ PAGE
   ===================================================== */
.faq-section { max-width: 800px; margin: 0 auto; padding: 40px 20px 80px; }

.faq-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  font-family: var(--font-family);
  color: var(--apple-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq-question::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-orange);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item.open .faq-question::after { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

/* white-space:pre-line preserves the line breaks/bullet formatting typed
   into the Answer cell in the xlsx (e.g. the Shala Guidelines, which are
   long multi-bullet blocks) instead of collapsing them into one run-on
   paragraph like normal HTML would. */
.faq-answer-inner { padding: 0 24px 20px; color: var(--apple-gray); line-height: 1.7; font-size: 15px; white-space: pre-line; }

/* Category groups (Shala FAQs — General, Academic, Enrollment, etc.) —
   each category heading is itself an expand/collapse toggle for its
   questions, on top of the individual question accordion above. Uses a
   grid-template-rows 0fr->1fr transition instead of max-height so it keeps
   animating correctly even as individual questions inside open/close and
   change the group's content height. */
.faq-category { margin-bottom: 14px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }

.faq-category-header {
  width: 100%;
  background: var(--apple-light-gray);
  border: none;
  text-align: left;
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-family);
  color: var(--apple-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-category-header i { font-size: 13px; color: var(--apple-gray); transition: transform 0.3s ease; }
.faq-category.open .faq-category-header i { transform: rotate(180deg); }

.faq-category-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.faq-category.open .faq-category-body { grid-template-rows: 1fr; }
.faq-category-body-inner { overflow: hidden; }
.faq-category.open .faq-category-body-inner { padding-top: 14px; }
.faq-category-body-inner .faq-item:last-child { margin-bottom: 0; }

/* =====================================================
   SHOWCASE PAGE
   ===================================================== */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.showcase-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }

.showcase-media {
  height: 220px;
  background: var(--apple-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.showcase-media img { width: 100%; height: 100%; object-fit: cover; }
.showcase-media i { font-size: 48px; color: #d1d5db; }

/* Distinct box treatment per media type — dark tile for video, plain for
   photo, light icon tile for documents. Type is auto-detected in main.js
   from which URL column is filled; no new spreadsheet column needed. */
.showcase-card.type-video .showcase-media { background: #1d1d1f; }
.showcase-card.type-video .showcase-media img { opacity: 0.82; }

.showcase-body { padding: 20px 24px 24px; }

.showcase-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 980px;
  background: rgba(227,108,24,0.1);
  color: var(--accent-orange);
  margin-bottom: 10px;
}
.showcase-type-badge i { font-size: 10px; }

.showcase-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.showcase-meta  { font-size: 13px; color: var(--accent-orange); font-weight: 600; margin-bottom: 10px; }
.showcase-desc  { font-size: 14px; color: var(--apple-gray); line-height: 1.6; }

.showcase-clickable-media { position: relative; cursor: pointer; }
.showcase-clickable-media:focus-visible { outline: 3px solid var(--accent-purple); outline-offset: -3px; }

.showcase-hover-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcase-hover-icon i {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all 0.25s ease;
}

.showcase-hover-icon .fa-play { padding-left: 4px; }

.showcase-clickable-media:hover .showcase-hover-icon i,
.showcase-clickable-media:focus-visible .showcase-hover-icon i {
  background: var(--brand-gradient-start);
  transform: scale(1.1);
}

/* Video modal (Showcase) */
.video-modal-content {
  width: min(960px, 92vw);
  max-width: 960px;
  background: #000;
  padding: 0;
}

.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =====================================================
   CONSTITUTION PAGE
   ===================================================== */
.doc-section { max-width: 820px; margin: 0 auto; padding: 40px 24px 80px; }

.doc-article {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 32px 36px;
  margin-bottom: 24px;
}

.doc-article h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--brand-gradient-start);
}

.doc-article p, .doc-article li { color: #4b5563; line-height: 1.8; font-size: 15px; }
.doc-article ul, .doc-article ol { padding-left: 24px; margin-top: 8px; }
.doc-article li { margin-bottom: 6px; }

/* =====================================================
   SHALA PAGE
   ===================================================== */

/* SHALA HERO — replaces the shared .page-hero on shala.html only, styled
   after the reference sankalpmarathi.org/marathi-shala hero (orange-to-pink
   gradient card, Marathi headline, email CTA). The content column also
   folds in the BMM Curriculum / Five-Level / Schedule / Volunteer Teacher
   highlight boxes that used to be their own section further down the page,
   positioned left of the logo image — same "content + boxes one side,
   image the other" pattern as the homepage hero (.hero2). */
.shala-hero-wrap { max-width: 1120px; margin: 32px auto 56px; padding: 0 24px; }

.shala-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(150deg, #f7a928 0%, #f4767e 55%, #ee5fa0 100%);
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(230,90,120,0.28);
  padding: 52px 48px;
  color: #fff;
}

.shala-hero-emojis { font-size: 28px; margin-bottom: 14px; letter-spacing: 4px; }

.shala-hero-title {
  font-family: var(--font-devanagari);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.2;
}

.shala-hero-subtitle {
  font-family: var(--font-family);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 700;
  color: #fff;
  opacity: 0.95;
  margin-bottom: 18px;
}

.shala-hero-desc {
  font-family: var(--font-devanagari);
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  margin-bottom: 24px;
}

.shala-hero-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #db2777;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 980px;
  text-decoration: none;
  margin-bottom: 30px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.2s ease;
}
.shala-hero-email:hover { transform: translateY(-2px); }

.shala-hero-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shala-hero-box {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 16px;
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.shala-hero-box i { font-size: 16px; color: #fff; margin-bottom: 8px; display: block; }
.shala-hero-box h4 { font-family: var(--font-family); font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.shala-hero-box p  { font-family: var(--font-family); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.88); margin: 0; }

/* order:-1 pulls the logo to the first grid track (left on desktop, top on
   mobile) despite coming second in the markup — same pattern as .hero2-visual
   on the homepage hero, so this matches "logo left, content right" there. */
.shala-hero-visual { display: flex; justify-content: center; order: -1; }
.shala-hero-logo-card {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.18);
  max-width: 300px;
}
.shala-hero-logo-card img { width: 100%; display: block; border-radius: 12px; }

@media (max-width: 860px) {
  .shala-hero { grid-template-columns: 1fr; text-align: left; padding: 36px 26px; }
  .shala-hero-wrap { margin: 20px auto 40px; }
  .shala-hero-desc { max-width: none; }
  .shala-hero-logo-card { max-width: 220px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .shala-hero-boxes { grid-template-columns: 1fr; }
}

.shala-highlight {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 36px 32px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-radius: var(--radius-lg);
  border: 2px solid #fdba74;
  text-align: center;
}

.shala-highlight h3 { font-size: 24px; margin-bottom: 10px; }
.shala-highlight p  { color: #78716c; margin-bottom: 20px; }

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

.info-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  transition: all 0.3s ease;
}

@media (min-width: 880px) {
  .info-cards--four { grid-template-columns: repeat(4, 1fr); max-width: 1200px; }
}

.info-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.info-card .about-icon { margin-bottom: 16px; }
.info-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.info-card p  { font-size: 14px; color: var(--apple-gray); line-height: 1.7; }

/* =====================================================
   SHALA CALENDAR PAGE
   ===================================================== */
.calendar-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 20px 80px;
  display: grid;
  gap: 28px;
}

.calendar-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ivory-deep);
  color: var(--brand-gradient-start);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.calendar-nav-btn:hover { background: var(--brand-gradient-start); color: #fff; }

.calendar-month-label {
  font-size: 22px;
  font-weight: 700;
  min-width: 200px;
  text-align: center;
  background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--apple-gray);
}

.calendar-legend-item { display: flex; align-items: center; gap: 6px; }

.calendar-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--apple-gray);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-day {
  min-height: 84px;
  border-radius: 10px;
  background: var(--ivory);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: background 0.2s ease;
}

.calendar-day.other-month { background: transparent; opacity: 0.35; }

.calendar-day.today { background: #fff; box-shadow: inset 0 0 0 2px var(--brand-gradient-start); }

.calendar-day.has-events { cursor: pointer; }
.calendar-day.has-events:hover { background: var(--ivory-deep); }

.calendar-day.selected { background: var(--ivory-deep); box-shadow: inset 0 0 0 2px var(--accent-purple); }

.calendar-day-num { font-size: 12px; font-weight: 600; color: var(--apple-dark); }
.calendar-day.other-month .calendar-day-num { color: var(--apple-gray); }

.calendar-chip {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-chip-more { font-size: 10px; color: var(--apple-gray); font-weight: 600; padding: 0 4px; }

.calendar-day-dots { display: none; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.calendar-day-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.calendar-agenda-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.calendar-agenda-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }

.calendar-agenda-list { display: grid; gap: 12px; }

.calendar-agenda-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ivory);
}

.calendar-agenda-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }

.calendar-agenda-date { font-size: 12px; font-weight: 700; color: var(--apple-gray); text-transform: uppercase; letter-spacing: 0.03em; }
.calendar-agenda-name { font-size: 15px; font-weight: 600; margin: 2px 0; }
.calendar-agenda-meta { font-size: 13px; color: var(--apple-gray); }

.calendar-agenda-empty { color: var(--apple-gray); font-size: 14px; text-align: center; padding: 12px 0; }

@media (max-width: 640px) {
  .calendar-card { padding: 18px 14px; }
  .calendar-day { min-height: 56px; padding: 4px; }
  .calendar-day-chips { display: none; }
  .calendar-day-dots { display: flex; }
  .calendar-weekdays { font-size: 10px; }
  .calendar-month-label { font-size: 18px; min-width: 160px; }
}

/* =====================================================
   PLACEHOLDER NOTICE
   ===================================================== */
.placeholder-notice {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 14px 20px;
  background: #fffbeb;
  border: 1px dashed #f59e0b;
  border-radius: var(--radius-md);
  color: #92400e;
  font-size: 14px;
  text-align: center;
}

/* =====================================================
   BOOK A PERFORMANCE PAGE (book-a-performance.html)
   ===================================================== */
.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 380px));
  justify-content: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.program-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-card-hover); }

.program-media {
  height: 200px;
  background: var(--apple-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.program-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.program-media i { font-size: 48px; color: #d1d5db; }

.program-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.program-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.program-title { font-size: 18px; font-weight: 700; }

.program-price-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 980px;
  white-space: nowrap;
}
.program-price-badge.free { background: #e6f6ec; color: #1e7a3d; }
.program-price-badge.paid { background: #fdf0e2; color: var(--accent-orange); }

.program-insta-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.program-insta-link:hover { text-decoration: underline; }

.program-desc { font-size: 14px; color: var(--apple-gray); line-height: 1.6; }

.program-participants {
  border-top: 1px solid #eee6d8;
  padding-top: 10px;
  margin-top: 4px;
}
.program-participants-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--apple-gray);
  margin-bottom: 6px;
}
.program-participants ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.program-participants li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.program-participant-name { font-weight: 600; color: var(--apple-dark); }
.program-participant-role { color: var(--apple-gray); }

.program-request-btn {
  width: auto;
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 14px;
  margin-top: auto;
}

/* =====================================================
   FORMS (join.html + sponsor.html + book-a-performance.html)
   ===================================================== */
.form-page-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.form-card {
  background: var(--apple-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px;
  border-top: 3px solid transparent;
  border-image: var(--saree-border) 1;
}

.site-form { display: flex; flex-direction: column; gap: 20px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field { display: flex; flex-direction: column; gap: 6px; }

.form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--apple-dark);
}

.form-field .required { color: var(--brand-gradient-start); }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  font-family: var(--font-family);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #e5e0d5;
  border-radius: var(--radius-md);
  background: var(--ivory);
  color: var(--apple-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(118,75,162,0.15);
}

.form-field textarea { resize: vertical; min-height: 96px; }

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--apple-dark);
  cursor: pointer;
}

.checkbox-option input { width: 16px; height: 16px; accent-color: var(--accent-purple); cursor: pointer; }

.form-submit-btn {
  border: none;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
}

.form-status {
  font-size: 14px;
  min-height: 20px;
}

.form-status-success { color: #15803d; font-weight: 600; }
.form-status-error { color: #b91c1c; font-weight: 600; }

.form-success {
  text-align: center;
  padding: 24px 8px 8px;
}

.form-success i {
  font-size: 44px;
  color: #15803d;
  margin-bottom: 14px;
}

.form-success h3 { font-size: 20px; margin-bottom: 8px; }
.form-success p { color: var(--apple-gray); font-size: 15px; }

@media (max-width: 640px) {
  .form-card { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
  width: 100%;
  padding: 2rem 24px 1.5rem;
  background: var(--ivory-deep);
  text-align: center;
  margin-top: auto;
  border-top: 3px solid transparent;
  border-image: var(--saree-border) 1;
}

.footer-inner { max-width: 900px; margin: 0 auto; }

.footer-welcome { font-size: 16px; font-weight: 500; color: var(--apple-dark); line-height: 1.7; margin-bottom: 10px; }
.footer-tagline { padding-top: 12px; font-family: var(--font-devanagari); font-size: 18px; font-weight: 700; margin-bottom: 20px; }

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 20px; }
.footer-nav a { color: #6b7280; font-size: 13px; text-decoration: none; }
.footer-nav a:hover { color: var(--apple-dark); text-decoration: underline; }

.footer-copyright { font-size: 13px; color: #6b7280; margin-bottom: 20px; }

.footer-social { display: flex; align-items: center; justify-content: center; gap: 6px; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin: 6px;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.footer-social a:hover { transform: scale(1.15); opacity: 0.85; }

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--apple-dark);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 800;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.back-to-top.visible { opacity: 1; pointer-events: all; }
.back-to-top:hover { transform: translateY(-3px); }

/* =====================================================
   RESPONSIVE + MOTION
   ===================================================== */
@media (max-width: 1024px) {
  .modal-layout { grid-template-columns: 1fr; grid-template-rows: 60% 40%; }
  .modal-body   { padding: 32px 24px; }
  .modal-title  { font-size: 32px; }
}

@media (max-width: 768px) {
  .events-section   { padding: 16px; }
  .ev3-upcoming .ev3-name { font-size: 17px; }
  .ev3-upcoming .ev3-media { aspect-ratio: 16 / 10; }
  .slider-wrapper   { height: 400px; }
  .about-cards-wrapper { grid-template-columns: 1fr; }
  .sponsors-grid { grid-template-columns: 1fr; gap: 18px; }
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}