/* ===========================================================
   Page-specific layout rules (loaded after theme.css).
   =========================================================== */

/* ===== index.html — Home: glossy video/photo slider hero ===== */
.hero{ position:relative; padding:160px 0 130px; overflow:hidden; min-height:660px; display:flex; align-items:center; }
.hero-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:0 0 36px 36px; background:#0A1226; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.hero-slide.active{ opacity:1; z-index:1; }
.hero-slide video, .hero-slide .hero-slide-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
  background-size:cover; background-position:center 30%;
}
/* Theme-reactive glossy scrim — covers the WHOLE hero (no boxed panel), strongest
   behind the text on the left, easing off (but never fully clear) toward the right
   so the video/photo still reads while staying one cohesive glassy surface. */
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:0 0 36px 36px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  background:
    linear-gradient(100deg, rgba(6,20,48,.82) 0%, rgba(6,20,48,.58) 30%, rgba(9,30,66,.4) 52%, rgba(9,30,66,.32) 100%),
    linear-gradient(0deg, rgba(4,14,34,.55) 0%, transparent 38%, transparent 80%, rgba(4,14,34,.35) 100%),
    linear-gradient(215deg, rgba(255,255,255,.12), transparent 40%);
  transition: opacity var(--transition), background var(--transition);
}
[data-theme="day"] .hero-scrim{
  background:
    linear-gradient(100deg, rgba(6,20,48,.68) 0%, rgba(11,47,107,.42) 32%, rgba(11,47,107,.24) 55%, rgba(240,215,123,.14) 100%),
    linear-gradient(0deg, rgba(4,14,34,.34) 0%, transparent 38%, transparent 80%, rgba(4,14,34,.2) 100%),
    linear-gradient(215deg, rgba(255,255,255,.16), transparent 40%);
}
.hero-rays{
  position:absolute; top:-30%; left:50%; width:900px; height:900px; transform:translateX(-50%);
  background:conic-gradient(from 0deg, transparent 0deg, rgba(240,215,123,calc(.08 + var(--dome-glow)*.16)) 8deg, transparent 16deg, transparent 40deg, rgba(240,215,123,calc(.06 + var(--dome-glow)*.14)) 48deg, transparent 56deg, transparent 90deg, rgba(240,215,123,calc(.08 + var(--dome-glow)*.16)) 98deg, transparent 106deg, transparent 140deg, rgba(240,215,123,calc(.06 + var(--dome-glow)*.14)) 148deg, transparent 156deg, transparent 200deg);
  animation: rotateRays 60s linear infinite; pointer-events:none; z-index:2; mix-blend-mode:screen;
}
.hero .wrap{ position:relative; z-index:3; }

/* Text sits directly on the scrim — no boxed glass panel to obstruct the media */
.hero-content{ max-width:600px; }
.hero .eyebrow{ color:var(--gold-1); }
.hero .eyebrow::before{ background:var(--gold-1); }
.hero h1{ font-size:50px; font-weight:500; line-height:1.12; margin-bottom:20px; color:#FFFFFF; text-shadow:0 4px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); }
.hero h1 em{ font-style:normal; color:var(--gold-1); }
.hero p.lede{ font-size:15.5px; color:#F0F3FA; line-height:1.75; max-width:460px; margin-bottom:32px; font-weight:300; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-ghost{ border-color:rgba(246,238,214,.55); color:#F6EFD6; }
.hero .btn-ghost:hover{ border-color:var(--gold-1); color:var(--gold-1); }
.hero .btn-primary{ box-shadow:0 10px 30px rgba(6,20,48,.5); }

.hero-dots{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4; display:flex; gap:9px; }
.hero-dots button{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:rgba(255,255,255,.4); cursor:pointer; transition:.3s; }
.hero-dots button.active{ width:24px; border-radius:6px; background:var(--gold-1); }

@media(prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}
@media(max-width:880px){
  .hero{ padding:120px 0 90px; min-height:600px; }
  .hero h1{ font-size:32px; }
}

/* ===== Inner-page intro banners: SAME whole-banner glossy scrim technique as
   the home hero — no boxed glass chip, text sits straight on the gradient. ===== */
.page-hero{ position:relative; overflow:hidden; border-radius:0 0 30px 30px; }
.page-hero-photo{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.page-hero-photo::after{
  content:''; position:absolute; inset:0; backdrop-filter:blur(2px);
  background:
    linear-gradient(180deg, rgba(6,20,48,.62) 0%, rgba(9,30,66,.32) 45%, rgba(6,20,48,.66) 100%),
    linear-gradient(215deg, rgba(255,255,255,.12), transparent 40%);
  transition:opacity var(--transition), background var(--transition);
  opacity: calc(.7 + var(--dome-glow) * .22);
}
[data-theme="day"] .page-hero-photo::after{
  background:
    linear-gradient(180deg, rgba(6,20,48,.5) 0%, rgba(11,47,107,.22) 45%, rgba(6,20,48,.52) 100%),
    linear-gradient(215deg, rgba(255,255,255,.16), transparent 40%);
}
.page-hero.has-photo .wrap{ position:relative; z-index:1; }
.page-hero.has-photo{ padding:130px 0 100px; display:flex; align-items:center; justify-content:center; text-align:center; }
.page-hero-glass{ max-width:640px; }
.page-hero.has-photo .eyebrow{ color:var(--gold-1); justify-content:center; }
.page-hero.has-photo h1{ color:#FFFFFF; text-shadow:0 4px 22px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); }
.page-hero.has-photo p{ color:#F0F3FA; text-shadow:0 2px 12px rgba(0,0,0,.45); }
@media(max-width:880px){
  .page-hero.has-photo{ padding:96px 0 70px; }
}

/* ===== Inner-page banner photo assignments (relative to assets/css/) ===== */
.about-hero-photo{ background-image:url('../images/hero/day.jpg'); }
.hukam-hero-photo{ background-image:url('../images/gallery/03.jpg'); }
.seva-hero-photo{ background-image:url('../images/gallery/07.jpg'); }
.events-hero-photo{ background-image:url('../images/gallery/05.jpg'); }
.live-hero-photo{ background-image:url('../images/gallery/08.jpg'); }
.radio-hero-photo{ background-image:url('../images/hero/night.jpg'); }

/* ===== live.html — Live Kirtan + Archives ===== */
.live-embed-wrap{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 50px rgba(6,26,62,.2); }
.live-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.live-now-head{ display:flex; align-items:center; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.archive-embed-wrap{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 20px 50px rgba(6,26,62,.14); }
.archive-embed-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.jatha-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.jatha-card{ padding:22px 18px; text-align:center; }
.jatha-card .initial{
  width:52px; height:52px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; font-family:'Jost'; font-weight:600; font-size:18px;
}
.jatha-card h4{ font-family:'Jost'; font-size:13.5px; line-height:1.4; }
.schedule-list{ display:flex; flex-direction:column; gap:2px; }
.schedule-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; }
.schedule-row .name{ font-family:'Jost'; font-size:14.5px; }
.schedule-row .time{ font-size:13px; color:var(--gold-2); font-weight:600; letter-spacing:.03em; }
.radio-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 40px; flex-wrap:wrap; }
.radio-cta h3{ font-size:22px; margin-bottom:6px; }
.radio-cta p{ font-size:13px; color:var(--text-soft); }
@media(max-width:880px){
  .jatha-grid{ grid-template-columns:repeat(2,1fr); }
  .radio-cta{ flex-direction:column; align-items:flex-start; text-align:left; }
}
@media(max-width:520px){
  .jatha-grid{ grid-template-columns:1fr; }
  .schedule-row{ padding:14px 18px; }
  .live-now-head{ gap:10px; }
}

/* ===== radio.html — dedicated minimal player ===== */
.radio-page-shell{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:60px 0; }
.radio-player-card{
  width:100%; max-width:440px; padding:48px 40px; text-align:center; position:relative;
}
.radio-player-card .radio-disc{ width:150px; height:150px; margin:0 auto 28px; box-shadow:0 0 0 8px rgba(201,162,39,.1), 0 20px 50px rgba(6,26,62,.2); }
.radio-player-card .radio-disc::after{ inset:32%; }
.radio-station{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-bottom:8px; }
.radio-now-playing{ font-size:20px; margin-bottom:6px; }
.radio-sub{ font-size:12.5px; color:var(--text-soft); margin-bottom:30px; }
.radio-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:26px; }
.radio-play-btn{
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(201,162,39,.35);
}
.radio-play-btn svg{ width:26px; height:26px; }
.radio-volume{ display:flex; align-items:center; gap:10px; max-width:220px; margin:0 auto; }
.radio-volume input[type="range"]{ flex:1; accent-color:var(--gold-2); }
.radio-status-note{ margin-top:26px; font-size:12px; color:var(--text-soft); min-height:18px; }
.radio-bars-lg{ display:flex; gap:5px; align-items:flex-end; height:34px; justify-content:center; margin-bottom:22px; }
.radio-bars-lg span{ width:4px; background:var(--gold-2); animation:bar 1s infinite ease-in-out; animation-play-state:paused; border-radius:2px; }
.radio-bars-lg.playing span{ animation-play-state:running; }
.radio-bars-lg span:nth-child(1){height:35%; animation-delay:0s;}
.radio-bars-lg span:nth-child(2){height:90%; animation-delay:.15s;}
.radio-bars-lg span:nth-child(3){height:55%; animation-delay:.3s;}
.radio-bars-lg span:nth-child(4){height:100%; animation-delay:.45s;}
.radio-bars-lg span:nth-child(5){height:60%; animation-delay:.6s;}
@media(max-width:520px){
  .radio-player-card{ padding:36px 24px; }
  .radio-player-card .radio-disc{ width:120px; height:120px; }
}

/* ===== hukamnama.html — Hukamnama archive ===== */
.hukam-archive-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.hukam-archive-grid .hukam-card{ padding:34px 36px; }
.archive-note{ max-width:720px; margin:0 auto 44px; text-align:center; font-size:13.5px; color:var(--text-soft); line-height:1.8; }

.archive-controls{ display:flex; flex-direction:column; gap:16px; align-items:center; margin-bottom:40px; }
.archive-filters{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.archive-filter-btn{
  font-family:'Poppins'; font-size:12px; letter-spacing:.02em; padding:9px 18px; border-radius:30px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:.2s;
}
.archive-filter-btn.active{ background:var(--author-accent, var(--blue-1)); border-color:var(--author-accent, var(--blue-1)); color:#fff; }
.archive-sort{ display:flex; gap:2px; background:var(--bg-2); border-radius:20px; padding:3px; }
.sort-btn{ font-family:'Poppins'; font-size:11px; padding:7px 16px; border-radius:20px; border:none; background:transparent; color:var(--text-soft); cursor:pointer; }
.sort-btn.active{ background:var(--surface); color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.archive-sentinel{ height:4px; }
.archive-loading, .archive-end{ text-align:center; font-size:12.5px; color:var(--text-soft); padding:20px 0; }
.archive-loading::before{
  content:''; display:inline-block; width:12px; height:12px; margin-right:8px; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--gold-2); animation:spin .8s linear infinite; vertical-align:middle;
}

@media(max-width:880px){
  .hukam-archive-grid{ grid-template-columns:1fr; }
}

/* ===== seva.html — Seva & Giving ===== */
.seva-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:48px; flex-wrap:wrap; }
.seva-tabs button{
  font-family:'Poppins'; font-size:13px; letter-spacing:.03em; padding:12px 26px; border-radius:30px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-soft); cursor:pointer; transition:.25s;
}
.seva-tabs button.active{ background:var(--blue-1); color:#fff; border-color:var(--blue-1); }
.seva-panel{ display:none; }
.seva-panel.active{ display:block; animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.seva-highlights{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px; }
.seva-highlight{ padding:28px 24px; text-align:center; }
.seva-highlight .ico{ width:44px; height:44px; margin:0 auto 16px; }
.seva-highlight h4{ font-family:'Jost'; font-size:16px; margin-bottom:10px; }
.seva-highlight p{ font-size:13px; color:var(--text-soft); line-height:1.7; }

.give-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:30px; align-items:start; }
.fund-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.fund-card{ padding:20px 22px; }
.fund-card h4{ font-family:'Jost'; font-size:14.5px; margin-bottom:6px; }
.fund-card p{ font-size:12px; color:var(--text-soft); line-height:1.6; }
.qr-card{ padding:30px; text-align:center; }
.qr-box{ width:170px; height:170px; margin:0 auto 16px; border-radius:var(--radius-md); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; background:var(--bg-2); font-size:11px; color:var(--text-soft); padding:12px; text-align:center; }
.bank-details{ margin-top:22px; text-align:left; font-size:12.5px; color:var(--text-soft); line-height:2; border-top:1px solid var(--border); padding-top:18px; }
.bank-details b{ color:var(--text); font-weight:500; }

.volunteer-checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); }

@media(max-width:880px){
  .seva-highlights, .fund-list, .volunteer-checks{ grid-template-columns:1fr; }
  .give-grid{ grid-template-columns:1fr; }
}

/* ===== connect.html — About & Connect ===== */
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:start; }
.about-grid p{ font-size:14.5px; color:var(--text-soft); line-height:1.85; margin-bottom:16px; }
.about-facts{ display:flex; flex-direction:column; gap:14px; }
.fact-card{ padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.fact-card .k{ font-size:12px; color:var(--text-soft); }
.fact-card .v{ font-family:'Jost'; font-size:15px; }

.pillars-detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar-detail{ padding:32px 28px; }
.pillar-detail .tag{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin-bottom:10px; display:block; }
.pillar-detail h3{ font-size:19px; margin-bottom:12px; }
.pillar-detail ul{ margin:0; padding-left:18px; }
.pillar-detail li{ font-size:13.5px; color:var(--text-soft); line-height:1.8; }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card{ padding:28px 26px; }
.testimonial-card .stars{ color:var(--gold-2); font-size:13px; margin-bottom:12px; letter-spacing:.1em; }
.testimonial-card p{ font-size:13.5px; color:var(--text); line-height:1.7; font-style:italic; margin-bottom:14px; }
.testimonial-card .src{ font-size:11.5px; color:var(--text-soft); }

.map-embed{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; box-shadow:0 20px 50px rgba(6,26,62,.14); }
.map-embed iframe{ width:100%; height:100%; border:0; }

.committee-note{ padding:30px 32px; text-align:center; max-width:720px; margin:0 auto; }
.committee-note p{ font-size:13.5px; color:var(--text-soft); line-height:1.8; }

/* ===== Follow-us highlight (Instagram / YouTube) ===== */
.follow-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:18px; }
.follow-card{
  position:relative; overflow:hidden; padding:32px 34px; display:flex; align-items:center; gap:20px;
  border:none; color:#fff;
}
.follow-card.instagram{ background:linear-gradient(135deg,#4f5bd5,#962fbf 30%,#d62976 55%,#fa7e1e 78%,#feda75); }
.follow-card.youtube{ background:linear-gradient(135deg,#3a0a0a,#c4302b 60%,#8a1f1f); }
.follow-card .ic{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; backdrop-filter:blur(6px); }
.follow-card .ic svg{ width:26px; height:26px; }
.follow-card .count{ font-family:'Jost'; font-size:22px; font-weight:600; }
.follow-card .label{ font-size:12.5px; opacity:.9; margin-bottom:2px; }
.follow-card .cta{ margin-left:auto; font-size:12px; padding:9px 16px; border-radius:20px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); white-space:nowrap; }
.follow-card .cta:hover{ background:rgba(255,255,255,.3); }
.follow-minor{ display:flex; gap:14px; justify-content:center; }
.follow-minor a{
  display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:30px; border:1px solid var(--border);
  font-size:13px; color:var(--text-soft);
}
.follow-minor a:hover{ border-color:var(--gold-2); color:var(--gold-2); }
.follow-minor svg{ width:16px; height:16px; }

@media(max-width:520px){
  .follow-card{ flex-wrap:wrap; padding:26px; }
  .follow-card .cta{ margin-left:0; }
}
@media(max-width:880px){
  .about-grid{ grid-template-columns:1fr; }
  .pillars-detail-grid, .testimonial-grid, .follow-grid{ grid-template-columns:1fr; }
  .follow-minor{ flex-wrap:wrap; }
}