/* ============================================================
   Vidyamrit — pages.css
   Layouts for every inner page:
     · page hero + breadcrumb        · split content blocks
     · spec cards / feature lists     · fee table
     · methodology steps              · FAQ accordion
     · gallery: filters + lightbox    · contact layout
     · faculty / values               · legal prose
   ============================================================ */

/* =========================================================
   1. PAGE HERO (inner header band)
   ========================================================= */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(6rem, 5rem + 4vw, 8rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
  color: #dbe2f6;
  background:
    radial-gradient(80% 130% at 88% -20%, rgba(201, 162, 39, 0.2), transparent 55%),
    linear-gradient(155deg, var(--royal-800), var(--royal-900));
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.4px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000, transparent 90%);
  opacity: 0.6;
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: #a9b3d6; }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current] { color: var(--gold-400); }

.page-hero h1 { color: #fff; margin-top: 1rem; font-size: var(--fs-h1); max-width: 18ch; }
.page-hero__lead { margin-top: 1rem; color: #c3cbe6; max-width: 60ch; font-size: var(--fs-lead); }
.page-hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.page-hero__chips .chip { background: rgba(255,255,255,0.1); color: #e7ecfb; }

/* =========================================================
   2. SPLIT CONTENT BLOCK (text + visual)
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.split.is-reverse .split__media { order: -1; }
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--royal-050), #fff);
  border: 1px solid var(--line);
  min-height: 280px;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.split h2 { margin-bottom: 1rem; }
.split p + p { margin-top: 0.9rem; }

/* =========================================================
   3. SPEC CARDS (eligibility, subjects, timings, duration)
   ========================================================= */
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.spec-card {
  padding: 1.6rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  border-top: 3px solid var(--gold-500);
}
.spec-card h3 {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.08rem; margin-bottom: 0.9rem;
}
.spec-card h3 .ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--royal-050); color: var(--royal-700);
}
.spec-card h3 .ico svg { width: 20px; height: 20px; }

/* checkmark / bullet lists */
.ticks { display: grid; gap: 0.65rem; }
.ticks li { display: flex; gap: 0.6rem; font-size: 0.95rem; }
.ticks li svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--gold-600); margin-top: 2px; }
.subject-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* simple label:value rows */
.spec-list { display: grid; gap: 0.7rem; }
.spec-list div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.7rem; border-bottom: 1px dashed var(--line); }
.spec-list div:last-child { border-bottom: none; padding-bottom: 0; }
.spec-list dt { color: var(--muted); font-size: 0.9rem; }
.spec-list dd { color: var(--ink); font-weight: 600; font-size: 0.92rem; text-align: right; }

/* =========================================================
   4. FEE TABLE
   ========================================================= */
.fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fee-table thead th {
  background: var(--royal-800);
  color: #fff;
  text-align: left;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.95rem 1.1rem;
}
.fee-table tbody td { padding: 0.9rem 1.1rem; font-size: 0.93rem; border-top: 1px solid var(--line); }
.fee-table tbody tr:nth-child(even) { background: var(--mist); }
.fee-table tbody td:first-child { font-weight: 600; color: var(--ink); }
.fee-table .amount { color: var(--royal-700); font-weight: 700; }
.fee-note { margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); }

/* =========================================================
   5. METHODOLOGY STEPS (a real sequence → numbered)
   ========================================================= */
.steps { display: grid; gap: 1.2rem; counter-reset: step; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.step__num {
  counter-increment: step;
  width: 44px; height: 44px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700;
  color: var(--royal-900);
  background: linear-gradient(150deg, var(--gold-400), var(--gold-500));
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.step p { font-size: 0.92rem; }

/* =========================================================
   6. FAQ ACCORDION (native details + progressive enhance)
   ========================================================= */
.faq { display: grid; gap: 0.9rem; max-width: 820px; margin-inline: auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--gold-400); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 600; color: var(--ink);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--royal-050); color: var(--royal-700);
  transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.faq-item[open] summary .chev { transform: rotate(180deg); background: var(--gold-050); color: var(--gold-600); }
.faq-item .faq-body { padding: 0 1.3rem 1.2rem; color: var(--slate); font-size: 0.95rem; }

/* =========================================================
   7. STICKY ENROL CARD (program pages sidebar)
   ========================================================= */
.enrol-card {
  position: sticky; top: 100px;
  padding: 1.8rem;
  border-radius: var(--r-lg);
  color: #eaf0ff;
  background: linear-gradient(155deg, var(--royal-700), var(--royal-900));
  box-shadow: var(--shadow-md);
}
.enrol-card h3 { color: #fff; margin-bottom: 0.4rem; }
.enrol-card p { color: #c3cbe6; font-size: 0.9rem; margin-bottom: 1.2rem; }
.enrol-card .price { font-size: 1.9rem; font-weight: 700; color: var(--gold-400); }
.enrol-card .price small { font-size: 0.85rem; color: #aeb8da; font-weight: 400; }
.enrol-card ul { display: grid; gap: 0.6rem; margin: 1.2rem 0 1.4rem; }
.enrol-card li { display: flex; gap: 0.55rem; font-size: 0.88rem; color: #d4dbf2; }
.enrol-card li svg { width: 18px; height: 18px; color: var(--gold-400); flex-shrink: 0; }

.program-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: start; }

/* =========================================================
   8. GALLERY: filters + grid + lightbox
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.2rem; }
.filter-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem; font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--slate);
  background: #fff;
  transition: all var(--t-fast) var(--ease);
}
.filter-btn:hover { border-color: var(--royal-600); color: var(--royal-700); }
.filter-btn.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--royal-700), var(--royal-800));
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.gallery .moment-tile { aspect-ratio: 1 / 1; cursor: zoom-in; }
.gallery .moment-tile.is-tall { grid-row: span 2; aspect-ratio: auto; }
.gallery .moment-tile.is-hidden { display: none; }

/* placeholder tiles (SVG-free colored panels with a label) */
.ph {
  display: grid; place-items: center;
  text-align: center; padding: 1rem;
  color: #fff; font-weight: 600; font-size: 0.9rem;
  background-size: cover; background-position: center;
}
.ph--a { background: linear-gradient(150deg, #1a3a8f, #0d1f52); }
.ph--b { background: linear-gradient(150deg, #2a4fb0, #12296b); }
.ph--c { background: linear-gradient(150deg, #c9a227, #a9821f); color: var(--royal-900); }
.ph--d { background: linear-gradient(150deg, #3a5bc0, #1a3a8f); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(9, 18, 48, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: 900px; width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--t-med) var(--ease);
  box-shadow: var(--shadow-lg);
}
.lightbox.is-open .lightbox__stage { transform: scale(1); }
.lightbox__stage img, .lightbox__stage .ph { width: 100%; aspect-ratio: 4 / 3; }
.lightbox__cap { padding: 1rem 1.2rem; background: #fff; font-weight: 600; color: var(--ink); }
.lightbox__close, .lightbox__nav {
  position: absolute;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background var(--t-fast) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.3); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__nav.prev { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* =========================================================
   9. FACULTY + VALUES (about)
   ========================================================= */
.faculty-card { text-align: center; padding: 1.8rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.faculty-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.faculty-card .avatar { width: 84px; height: 84px; margin: 0 auto 1rem; font-size: 1.6rem; }
.faculty-card h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.faculty-card .role { color: var(--gold-600); font-weight: 600; font-size: 0.85rem; }
.faculty-card .sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }

.value-item { display: flex; gap: 1rem; padding: 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.value-item .ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--gold-050); color: var(--gold-600); }
.value-item .ico svg { width: 24px; height: 24px; }
.value-item h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.value-item p { font-size: 0.9rem; }

/* =========================================================
   10. CONTACT LAYOUT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: start; }
.contact-info { display: grid; gap: 1.1rem; }
.contact-item { display: flex; gap: 1rem; padding: 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.contact-item .ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--royal-050); color: var(--royal-700); }
.contact-item .ico svg { width: 22px; height: 22px; }
.contact-item b { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 0.2rem; }
.contact-item a, .contact-item span { color: var(--slate); font-size: 0.92rem; }
.contact-item a:hover { color: var(--royal-700); }

.hours-list { display: grid; gap: 0.5rem; }
.hours-list div { display: flex; justify-content: space-between; font-size: 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--line); }
.hours-list dt { color: var(--slate); }
.hours-list dd { color: var(--ink); font-weight: 600; }

.map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

.social-row { display: flex; gap: 0.7rem; }
.social-row a {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--royal-050); color: var(--royal-700);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.social-row a:hover { transform: translateY(-3px); background: var(--royal-700); color: #fff; }
.social-row a svg { width: 20px; height: 20px; }

/* =========================================================
   11b. CONTENT RHYTHM — stacked blocks in a page column
   Used on program + about pages to space sub-sections.
   ========================================================= */
.prog-block + .prog-block { margin-top: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.prog-block > h2 { font-size: var(--fs-h2); margin-bottom: 1rem; }
.prog-block > p + p { margin-top: 0.9rem; }
.prog-block .spec-grid,
.prog-block .fee-table,
.prog-block .steps,
.prog-block .ticks { margin-top: 1.2rem; }
.prog-block .lead { margin-bottom: 0.4rem; }

/* =========================================================
   11. LEGAL PROSE (privacy)
   ========================================================= */
.prose { max-width: 780px; margin-inline: auto; }
.prose h2 { font-size: var(--fs-h3); margin: 2rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1rem; }
.prose ul { display: grid; gap: 0.55rem; margin: 0 0 1rem 0; padding-left: 0; }
.prose ul li { display: flex; gap: 0.6rem; }
.prose ul li::before { content: "◆"; color: var(--gold-500); font-size: 0.7rem; margin-top: 0.4rem; }
.prose a { color: var(--royal-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-400); }