/* ══════════════════════════════════════════════════════════════════
   pages.css · per-page styling
   Phase 1: HOME (hero · prayer strip · countdown · about · programs)
   ══════════════════════════════════════════════════════════════════ */

/* ══ HERO ══════════════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 130px var(--pad) 90px;
  overflow: hidden;
}

/* night-sky base wash */
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--navy3), transparent 55%),
    radial-gradient(80% 70% at 80% 110%, rgba(212,165,72,0.10), transparent 60%),
    radial-gradient(70% 70% at 15% 100%, rgba(16,185,129,0.12), transparent 60%),
    var(--midnight);
}

/* three.js canvas mounts here; CSS-3D fallback lives inside */
#hero3d {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none;
}
#hero3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* faint construction grid (kept, refined) */
.hero-grid-pattern {
  position: absolute; inset: 0; z-index: -2; opacity: 0.4;
  background-image:
    linear-gradient(var(--white-ultra) 1px, transparent 1px),
    linear-gradient(90deg, var(--white-ultra) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask: radial-gradient(circle at 50% 40%, #000, transparent 75%);
          mask: radial-gradient(circle at 50% 40%, #000, transparent 75%);
}

/* CSS-3D girih fallback — shows instantly + when WebGL/reduced-motion off */
.hero-geo {
  position: absolute; top: 50%; right: clamp(-180px, 2vw, 4%); z-index: -2;
  width: clamp(420px, 52vw, 760px); aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.5;
  color: var(--brass-light);
  filter: drop-shadow(0 0 50px var(--brass-glow));
  animation: spin-slow 90s linear infinite;
}
body.webgl-on .hero-geo { opacity: 0.18; }

.hero-content { position: relative; max-width: var(--maxw); margin: 0 auto; width: 100%; }

.hero-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.hero-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-light); box-shadow: 0 0 14px var(--green-glow);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.hero h1.display {
  font-size: var(--fs-display);
  font-weight: 600;
  max-width: 16ch;
}
.hero-sub { margin: 30px 0 40px; max-width: 54ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* quick-facts badge */
.hero-badge {
  position: relative; margin-top: clamp(46px, 7vw, 78px);
  display: inline-flex; gap: clamp(26px, 5vw, 56px);
  padding: 22px clamp(26px, 4vw, 44px);
  border: 1px solid var(--white-ultra); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 55%, transparent);
  backdrop-filter: blur(10px);
}
.hero-badge-num {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 46px);
  background: linear-gradient(135deg, var(--green-light), var(--brass-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-badge-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-secondary); margin-top: 8px;
}

/* ══ PRAYER STRIP ══════════════════════════════════════════════ */
.prayer-strip {
  max-width: var(--maxw); margin: -40px auto 0; position: relative; z-index: 2;
  padding: 22px clamp(20px, 4vw, 40px); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy3) 90%, transparent);
  border: 1px solid var(--green-line); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.7);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  width: calc(100% - 2 * var(--pad));
}
.prayer-strip-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass-light); white-space: nowrap;
}
.prayer-strip-times { display: flex; gap: clamp(16px, 3vw, 34px); flex-wrap: wrap; flex: 1; }
.prayer-strip-times .ps-item { text-align: center; }
.prayer-strip-times .ps-name {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary);
}
.prayer-strip-times .ps-time { font-weight: 700; font-size: 16px; color: var(--pearl); margin-top: 3px; }
.prayer-strip-times .ps-item.current .ps-time { color: var(--green-light); }
.prayer-strip-times .ps-item.current .ps-name { color: var(--green-light); }

/* ══ NEXT EVENT COUNTDOWN ══════════════════════════════════════ */
.next-event-banner {
  display: none; max-width: var(--maxw);
  margin: 40px auto 0; width: calc(100% - 2 * var(--pad));
  padding: 26px clamp(22px, 4vw, 42px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy3), var(--navy2));
  border: 1px solid var(--brass-glow);
  align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.next-event-banner.visible { display: flex; }
.next-event-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 8px;
}
.next-event-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 3vw, 30px); color: var(--pearl); }
.next-event-meta { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }
.next-event-cta { margin-top: 12px; color: var(--green-light); font-weight: 600; cursor: pointer; font-size: 14px; }
.next-event-countdown { display: flex; gap: 12px; }
.next-event-countdown .countdown-unit {
  min-width: 62px; text-align: center; padding: 12px 10px; border-radius: var(--radius);
  background: var(--midnight); border: 1px solid var(--white-ultra);
}
.next-event-countdown .countdown-number { font-family: var(--font-mono); font-weight: 700; font-size: 26px; color: var(--brass-light); }
.next-event-countdown .countdown-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }

/* ══ HOME ABOUT ════════════════════════════════════════════════ */
.home-about {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.about-visual-block {
  position: relative; aspect-ratio: 1; max-width: 460px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px;
}
.av-box {
  border-radius: var(--radius-lg); display: grid; place-items: center;
  border: 1px solid var(--white-ultra);
  background: color-mix(in srgb, var(--navy3) 70%, transparent);
}
.av-box-1 { background: linear-gradient(135deg, var(--green-deep), var(--navy3)); animation: float-slow 8s ease-in-out infinite; }
.av-box-2 { background: linear-gradient(135deg, var(--brass), var(--navy3)); animation: float-slow 10s ease-in-out infinite reverse; }
.av-icon { font-size: clamp(34px, 5vw, 58px); }
.av-quote {
  grid-column: 1 / -1; padding: 22px 26px; border-radius: var(--radius-lg);
  background: var(--midnight); border: 1px solid var(--green-line);
  display: grid; place-items: center; text-align: center;
}
.av-quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 2vw, 21px); color: var(--brass-light); }

/* ══ PROGRAMS GRID ═════════════════════════════════════════════ */
.programs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; margin-top: 44px;
}
.program-card {
  position: relative; padding: 34px 30px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 60%, transparent);
  border: 1px solid var(--white-ultra); overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.program-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--green-dim), transparent 50%);
  opacity: 0; transition: opacity 0.5s;
}
.program-card:hover {
  transform: translateY(-8px);
  border-color: var(--green-line);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
}
.program-card:hover::before { opacity: 1; }
.program-icon { font-size: 40px; display: block; margin-bottom: 18px; }
.program-title { font-family: var(--font-display); font-weight: 600; font-size: 23px; color: var(--pearl); margin-bottom: 10px; }
.program-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.program-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--brass-light); }

@media (max-width: 820px) {
  .home-about { grid-template-columns: 1fr; }
  .about-visual-block { max-width: 380px; margin: 0 auto; }
  .next-event-banner { flex-direction: column; align-items: flex-start; }
  .hero-geo { opacity: 0.28; right: -120px; }
}

/* ══════════════════════════════════════════════════════════════════
   INTERIOR PAGES (Phase 3)
   ══════════════════════════════════════════════════════════════════ */

/* ── ABOUT ─────────────────────────────────────────────────────── */
.about-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); }
.quote-block {
  background: var(--navy4); border-left: 3px solid var(--green);
  padding: 24px 28px; border-radius: 0 var(--radius) var(--radius) 0;
}
.quote-block p.q { font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--pearl); line-height: 1.5; }
.quote-block p.cite { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--green-light); text-transform: uppercase; }

.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin-top: 42px; }
.value-card {
  position: relative; padding: 38px 32px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 60%, transparent);
  border: 1px solid var(--white-ultra); overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s;
}
.value-card:hover { transform: translateY(-6px); border-color: var(--green-line); }
.value-num {
  font-family: var(--font-display); font-weight: 700; font-size: 58px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--green-line); margin-bottom: 10px;
}
.value-card h3 { font-size: 24px; margin-bottom: 10px; color: var(--pearl); }
.value-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.7; }

/* ── PROGRAMS ──────────────────────────────────────────────────── */
.programs-cta {
  text-align: center; padding: clamp(28px, 5vw, 48px) var(--pad);
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  border-top: 1px solid var(--green-light); border-bottom: 1px solid var(--green-light);
}
.programs-cta-inner { max-width: 760px; margin: 0 auto; }
.programs-cta .pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 100px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(8px); margin-bottom: 16px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--midnight);
}
.programs-cta h3 { font-size: clamp(24px, 4vw, 36px); color: var(--midnight); margin-bottom: 12px; }
.programs-cta p { color: rgba(6,13,26,0.82); margin-bottom: 22px; max-width: 60ch; margin-inline: auto; }
.programs-cta .btn { background: var(--midnight); color: var(--pearl); }

.programs-full-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; margin-top: 8px; }
.program-card-full {
  position: relative; overflow: hidden; padding: 32px 30px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 62%, transparent); border: 1px solid var(--white-ultra);
  transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
}
.program-card-full::after {
  content: ''; position: absolute; top: -30px; right: -30px; width: 150px; height: 150px;
  background: radial-gradient(circle, var(--green-dim), transparent 70%); pointer-events: none;
}
.program-card-full:hover { transform: translateY(-6px); border-color: var(--green-line); box-shadow: 0 28px 56px -24px rgba(0,0,0,0.6); }
.pcf-header { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.pcf-icon {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center;
  font-size: 27px; background: var(--green-dim); border: 1.5px solid var(--green-line);
}
.pcf-icon.gold { background: var(--gold-dim); border-color: rgba(245,158,11,0.28); }
.pcf-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--pearl); margin-bottom: 5px; }
.pcf-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 100px;
  background: var(--green-dim); border: 1px solid var(--green-line); color: var(--green-light);
}
.pcf-badge.gold { background: var(--gold-dim); border-color: rgba(245,158,11,0.28); color: #fbbf24; }
.pcf-desc { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.pcf-meta { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--white-ultra); display: flex; gap: 18px; flex-wrap: wrap; }
.pcf-meta span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--white-dim); }
.pcf-meta svg { stroke: var(--brass-light); }

/* ── PRAYER ────────────────────────────────────────────────────── */
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 14px; margin: 26px 0 34px; }
.prayer-card {
  text-align: center; padding: 26px 16px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 64%, transparent); border: 1px solid var(--white-ultra);
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.prayer-card:hover { transform: translateY(-5px); border-color: var(--green-line); }
.prayer-card.current { border-color: var(--green); background: var(--green-dim); box-shadow: 0 0 0 1px var(--green-line), 0 18px 40px -18px var(--green-glow); }
.p-arabic { font-family: var(--font-arabic); font-size: 30px; color: var(--brass-light); line-height: 1.4; }
.p-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); margin-top: 6px; }
.prayer-card.current .p-name { color: var(--green-light); }
.p-time { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--pearl); margin-top: 8px; }
.p-iqama { font-size: 12px; color: var(--white-faint); margin-top: 6px; }

.jumuah-card {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 48px); align-items: center;
  padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--navy3), var(--navy2)); border: 1px solid var(--brass-glow);
}
.jc-left h2 { font-size: clamp(28px, 4vw, 44px); color: var(--pearl); }
.jc-left p { color: var(--text-secondary); max-width: 46ch; }
.jc-right { display: flex; gap: 16px; flex-wrap: wrap; }
.jc-item { text-align: center; padding: 18px 22px; border-radius: var(--radius); background: var(--midnight); border: 1px solid var(--white-ultra); }
.jc-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-light); }
.jc-value { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--pearl); margin-top: 6px; }
.prayer-note-box {
  margin-top: 24px; padding: 20px 24px; border-radius: var(--radius); font-size: 13px; line-height: 1.7;
  color: var(--text-secondary); background: var(--green-dim); border: 1px solid var(--green-line);
}

/* ── DONATE ────────────────────────────────────────────────────── */
.donate-page-inner { max-width: 620px; margin: 0 auto; }
.donate-amounts-large { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.amount-card {
  text-align: center; padding: 22px 12px; border-radius: var(--radius); cursor: pointer;
  background: color-mix(in srgb, var(--navy2) 64%, transparent); border: 1.5px solid var(--white-ultra);
  transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s;
}
.amount-card:hover { transform: translateY(-4px); border-color: var(--brass); }
.amount-card.selected { border-color: var(--brass); background: var(--gold-dim); }
.ac-num { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--pearl); }
.amount-card.selected .ac-num { color: var(--brass-light); }
.ac-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-top: 4px; }
.bank-panel { background: var(--navy3); border: 1px solid var(--white-ultra); border-radius: var(--radius); padding: 26px 30px; max-width: 480px; margin: 0 auto; }
.bank-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 14px; border-bottom: 1px solid var(--white-ultra); }
.bank-row:last-child { border-bottom: 0; }
.bank-row .k { color: var(--white-faint); }
.bank-row .v { font-weight: 600; color: var(--pearl); }
.secure-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; font-size: 12px; color: var(--white-faint); }
.secure-row svg { stroke: var(--green-light); }

/* ── CONTACT ───────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.contact-item { display: flex; gap: 16px; align-items: flex-start; margin-top: 22px; }
.contact-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--green-dim); border: 1px solid var(--green-line); }
.contact-detail-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-light); }
.contact-detail-value { color: var(--pearl); margin-top: 4px; line-height: 1.6; }
.contact-detail-value a { color: var(--green-light); text-decoration: none; }
.map-frame { margin-top: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--white-ultra); }
.map-frame iframe { display: block; filter: grayscale(0.3) brightness(0.85) contrast(1.1); }
.contact-success { display: none; text-align: center; padding: 48px 20px; }
.contact-success .star { font-size: 46px; margin-bottom: 16px; color: var(--brass-light); }
.contact-success h3 { font-family: var(--font-display); font-size: 24px; color: var(--green-light); margin-bottom: 12px; }

/* ── EVENTS ────────────────────────────────────────────────────── */
.events-controls-wrapper { margin-bottom: 24px; }
.event-search-bar {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding: 4px 6px 4px 18px; border-radius: 100px;
  background: var(--midnight); border: 1px solid var(--white-ultra);
  transition: border-color 0.3s, box-shadow 0.3s; max-width: 620px;
}
.event-search-bar:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-dim); }
.event-search-bar svg { stroke: var(--brass-light); }
.event-search-input { flex: 1; background: none; border: 0; color: var(--pearl); font-size: 15px; padding: 12px 0; }
.event-search-input:focus { outline: none; }
.event-search-clear { display: none; background: var(--navy4); border: 0; color: var(--white-dim); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.event-search-clear.visible { display: block; }

.events-filter { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 36px; }
.filter-btn {
  padding: 9px 18px; border-radius: 100px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--navy2) 60%, transparent); border: 1px solid var(--white-ultra);
  color: var(--text-secondary); transition: all 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--green-line); color: var(--pearl); }
.filter-btn.active { background: var(--green); border-color: var(--green); color: var(--midnight); font-weight: 700; }

.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; align-items: start; }
.event-card {
  position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--navy2) 62%, transparent); border: 1px solid var(--white-ultra);
  transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s;
}
.event-card:hover { transform: translateY(-6px); border-color: var(--green-line); box-shadow: 0 28px 56px -24px rgba(0,0,0,0.6); }
/* poster image (only present for show_poster events) */
.event-card > img { width: 100%; height: 200px; object-fit: cover; display: block; }
/* tag row pills */
.event-tag-past, .event-tag-reg, .event-tag-closed, .event-tag-lang {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 100px; line-height: 1.5;
}
.event-tag-past   { background: var(--white-ultra); color: var(--white-dim); }
.event-tag-reg    { background: var(--green-dim); border: 1px solid var(--green-line); color: var(--green-light); }
.event-tag-closed { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.30); color: #f87171; }
.event-tag-lang   { background: var(--gold-dim); border: 1px solid rgba(245,158,11,0.28); color: var(--brass-light); }
/* date chip — sits in normal flow between tags and body */
.event-card-date {
  display: inline-flex; align-items: baseline; gap: 8px; margin: 12px 20px 0;
  padding: 7px 13px; border-radius: var(--radius-sm); width: auto;
  background: var(--midnight); border: 1px solid var(--green-line);
}
.event-day { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--green-light); line-height: 1; }
.event-month-year { display: inline-flex; align-items: baseline; gap: 5px; }
.event-month { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-light); }
.event-year { font-family: var(--font-mono); font-size: 10px; color: var(--white-faint); }
.event-body { padding: 14px 20px 22px; }
.event-category { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-light); }
.event-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--pearl); margin: 6px 0 8px; line-height: 1.15; }
.event-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-time-loc { font-size: 13px; color: var(--white-dim); margin-top: 10px; }
.events-empty, .events-empty * { text-align: center; color: var(--text-secondary); }
.events-empty { padding: 60px 20px; grid-column: 1 / -1; }

/* ── EVENT DETAIL ──────────────────────────────────────────────── */
.event-detail-hero { position: relative; padding: clamp(110px, 16vh, 180px) var(--pad) 40px; max-width: var(--maxw); margin: 0 auto; }
.event-detail-back { background: none; border: 1px solid var(--white-ultra); color: var(--text-secondary); padding: 8px 16px; border-radius: 100px; cursor: pointer; font-size: 13px; margin-bottom: 24px; transition: border-color 0.3s, color 0.3s; }
.event-detail-back:hover { border-color: var(--green); color: var(--green-light); }
.event-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.event-detail-cat, .event-detail-date-badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 100px; }
.event-detail-cat { background: var(--green-dim); border: 1px solid var(--green-line); color: var(--green-light); }
.event-detail-date-badge { background: var(--gold-dim); border: 1px solid rgba(245,158,11,0.28); color: var(--brass-light); }
.event-detail-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 6vw, 68px); color: var(--pearl); line-height: 1.05; }
.event-detail-body { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 52px); align-items: start; }
.event-detail-info { display: grid; gap: 16px; margin-bottom: 28px; }
.edi-row { display: flex; gap: 14px; align-items: flex-start; }
.edi-icon { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--green-dim); border: 1px solid var(--green-line); }
.edi-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-light); }
.edi-value { color: var(--pearl); margin-top: 3px; }
.event-detail-desc { color: var(--text-secondary); font-size: 16px; line-height: 1.8; white-space: pre-wrap; }

.reg-card { padding: 28px 26px; border-radius: var(--radius-lg); background: var(--navy3); border: 1px solid var(--white-ultra); position: sticky; top: 90px; }
.reg-card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--pearl); }
.reg-card-sub { color: var(--text-secondary); font-size: 14px; margin: 8px 0 18px; }
.reg-form { display: flex; flex-direction: column; gap: 14px; }
.reg-jotform-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--white-ultra); }
.reg-closed-notice { padding: 18px; border-radius: var(--radius); background: var(--gold-dim); border: 1px solid rgba(245,158,11,0.28); color: var(--brass-light); font-size: 14px; text-align: center; }
.reg-success { text-align: center; padding: 30px 16px; }
.reg-success-icon { font-size: 42px; margin-bottom: 12px; color: var(--green-light); }

/* ── GALLERY ───────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; border: 1px solid var(--white-ultra); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 14px; font-size: 13px; color: var(--pearl); background: linear-gradient(transparent, rgba(6,13,26,0.9)); opacity: 0; transition: opacity 0.4s; }
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-empty { grid-column: 1/-1; text-align: center; padding: 70px 20px; color: var(--text-secondary); }
.gallery-empty-icon { font-size: 50px; margin-bottom: 14px; opacity: 0.6; }

/* ── LIGHTBOX ──────────────────────────────────────────────────── */
.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 4000; background: rgba(4,8,16,0.94); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.lightbox-overlay.open { display: flex; animation: rise-fade 0.3s var(--ease); }
.lightbox-inner { max-width: 90vw; max-height: 86vh; text-align: center; }
.lightbox-inner img { max-width: 90vw; max-height: 78vh; border-radius: var(--radius); }
.lightbox-caption { color: var(--pearl); margin-top: 14px; font-size: 14px; }
.lightbox-counter { color: var(--white-faint); font-family: var(--font-mono); font-size: 12px; margin-top: 6px; }
.lightbox-close, .lightbox-nav { position: fixed; background: rgba(255,255,255,0.06); border: 1px solid var(--white-ultra); color: var(--pearl); cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background 0.3s, border-color 0.3s; }
.lightbox-close { top: 24px; right: 24px; width: 46px; height: 46px; font-size: 18px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 26px; }
.lightbox-prev { left: 24px; } .lightbox-next { right: 24px; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--green-dim); border-color: var(--green); }

/* ── Interior responsive ───────────────────────────────────────── */
@media (max-width: 820px) {
  .about-detail-grid, .contact-grid { grid-template-columns: 1fr; }
  .event-detail-body { grid-template-columns: 1fr; }
  .reg-card { position: static; }
  .jumuah-card { grid-template-columns: 1fr; }
  .donate-amounts-large { grid-template-columns: repeat(2, 1fr); }
  .lightbox-nav { width: 44px; height: 44px; }
}

/* ── Small phones ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding-top: 110px; }
  .hero-badge { gap: 18px; padding: 16px 20px; width: 100%; justify-content: space-between; }
  .hero-badge-num { font-size: 28px; }
  .prayer-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
  .prayer-strip-times { gap: 14px 20px; }
  .next-event-countdown { gap: 8px; }
  .next-event-countdown .countdown-unit { min-width: 54px; padding: 10px 6px; }
  .jc-right { width: 100%; }
  .jc-item { flex: 1; }
  .event-card > img { height: 160px; }
  .lightbox-nav { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .lightbox-prev { left: 30%; } .lightbox-next { right: 30%; }
}

/* ── Event-detail banner — show the COMPLETE poster (no crop) ───── */
#ed-banner-wrap { margin: 0 auto 8px; }
#ed-banner-img {
  width: 100%; height: auto; max-height: none; object-fit: contain;
  border-radius: var(--radius);
  background: var(--midnight); border: 1px solid var(--white-ultra);
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN REFINEMENT PASS — community-centre polish
   Readability, rhythm, warmth, welcoming details
   ══════════════════════════════════════════════════════════════════ */

/* Interior page heroes — tighten the empty void, keep them breathing */
.page-hero { padding: clamp(116px, 13vh, 150px) var(--pad) clamp(36px, 5vw, 60px); }
.page-hero .tag { margin-bottom: 18px; }

/* Section rhythm — slightly calmer max so pages don't feel stretched */
.section { padding: clamp(64px, 9vw, 120px) var(--pad); }

/* Body copy — a touch larger line-height for older readers */
.body-text { line-height: 1.75; }

/* Prayer strip — make today's times feel important & legible */
.prayer-strip-times .ps-time { font-size: 17px; }
.prayer-strip-label { font-size: 11px; color: var(--brass-light); }
.prayer-strip { box-shadow: 0 24px 60px -26px rgba(0,0,0,0.65), 0 0 0 1px var(--green-line); }

/* Buttons — larger, friendlier tap targets (mobile-first community use) */
.btn { padding: 16px 32px; font-size: 15.5px; }
.nav-links a.nav-donate { padding: 11px 22px; }

/* Cards — unify the lift + soften corners for a warmer feel */
.program-card, .program-card-full, .value-card, .event-card, .prayer-card { will-change: transform; }

/* Links inside prose — clearer affordance */
.contact-detail-value a, .footer-col a, .body-text a { text-underline-offset: 3px; }

/* ── FOOTER (community layout) ─────────────────────────────────── */
footer { text-align: left; padding-top: clamp(56px, 8vw, 90px); }
.footer-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 5vw, 64px);
}
.footer-brand .footer-logo { margin-bottom: 14px; }
.footer-tagline { color: var(--text-secondary); font-size: 14px; line-height: 1.7; max-width: 38ch; margin-bottom: 22px; }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--brass-light); margin-bottom: 16px;
}
.footer-col p { color: var(--text-secondary); font-size: 14px; line-height: 1.8; margin-bottom: 8px; }
.footer-col a { color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--green-light); }
.footer-hours { color: var(--white-faint) !important; font-size: 13px !important; }
.footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer-bottom {
  max-width: var(--maxw); margin: clamp(40px, 6vw, 70px) auto 0; padding-top: 24px;
  border-top: 1px solid var(--white-ultra);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-bottom p { color: var(--white-faint); font-size: 12px; line-height: 1.6; }
.footer-ack { max-width: 52ch; font-style: italic; }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer { text-align: center; }
  .footer-tagline { margin-inline: auto; }
  .footer-links { align-items: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-ack { margin-inline: auto; }
}
body.has-announcement .page-hero { padding-top: clamp(150px, 17vh, 185px); }
body.has-announcement .hero { padding-top: 156px; }

/* ── Loading skeletons (events / gallery grids) ────────────────── */
.skeleton {
  border-radius: var(--radius-lg); border: 1px solid var(--white-ultra);
  background: linear-gradient(100deg, var(--navy2) 28%, var(--navy3) 50%, var(--navy2) 72%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-event   { height: 168px; }
.skeleton-gallery { aspect-ratio: 4 / 3; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }