/*
 * Cincinnati Islamic Community Center theme (Sabeel format).
 *
 * Navy and gold come from CICC's own Pre-Ramadan Dinner flyer, the most
 * recent thing they designed themselves. Spacing and components follow the
 * QuranWay system: half of Sabeel's section padding, soft-shadow cards with no
 * coloured stroke, 40px buttons, measured scrims.
 *
 * Contrast, measured (WCAG relative luminance):
 *   gold #C9A24D on white      2.4:1   never text on white or sand
 *   gold #C9A24D on navy #0C1834 7.6:1  may be text on navy
 *   gold-text #7F5F17 on white  5.8:1   the only gold that is text on light
 *   navy #14254D on white      14.9:1
 *   body #3A4660 on white       9.6:1
 */

:root {
  --navy: #14254D;
  --navy-deep: #0C1834;
  --navy-mid: #1E3366;
  --gold: #C9A24D;
  --gold-soft: #E9D7A8;
  --gold-text: #7F5F17;
  --cream: #FDF8EC;
  --sand: #F8F4EA;
  --line: #E6DFCF;
  --body: #3A4660;
  --muted: #5E6A80;
  --white: #fff;

  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --f-arabic: 'Amiri', 'Noto Naskh Arabic', serif;

  --wrap: 1140px;
  --gut: 24px;
  --navh: 78px;

  --sh-card: 0 1px 2px rgba(12,24,52,.05), 0 8px 22px -8px rgba(12,24,52,.16);
  --sh-card-hover: 0 2px 4px rgba(12,24,52,.06), 0 16px 34px -12px rgba(12,24,52,.24);
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navh) + 14px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  color: var(--navy-deep);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-mid); }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }
.wrap--narrow { width: min(780px, 100% - (var(--gut) * 2)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: var(--navy-deep); color: #fff; z-index: 300;
}
.skip:focus {
  width: auto; height: auto; margin: 0; padding: 12px 20px;
  clip-path: none; overflow: visible;
  inset-block-start: 0; inset-inline-start: 0;
  border-radius: 0 0 10px 0; color: #fff;
}
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 20px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 14px 30px; font-size: 16px; line-height: 24px; }
.btn--fill { background: var(--navy); color: #fff; }
.btn--fill:hover { background: var(--navy-deep); color: #fff; }
.btn--ghost { border-color: var(--navy); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: #D8B463; color: var(--navy-deep); }
.btn--onphoto {
  border-color: rgba(255,255,255,.75); color: #fff;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.btn--onphoto:hover { background: #fff; color: var(--navy-deep); border-color: #fff; }
.link-arrow { font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--navy); }
.link-arrow::after { content: ' \2192'; }
.link-arrow--back::after { content: ''; }
.link-arrow--back::before { content: '\2190 '; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 1.4rem; min-height: var(--navh); }
.brand {
  display: flex; align-items: center; gap: .7rem;
  flex-shrink: 0; text-decoration: none; color: var(--navy-deep);
}
.brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.brand-name {
  display: flex; flex-direction: column;
  font-family: var(--f-display); font-size: 1.04rem; line-height: 1.15;
  letter-spacing: .01em; white-space: nowrap;
}
.brand-name span:last-child { color: var(--gold-text); font-size: .86em; letter-spacing: .06em; text-transform: uppercase; }
.nav-links { display: flex; gap: 1.35rem; margin-inline-start: auto; }
.nav-links a {
  color: var(--navy-deep); text-decoration: none;
  font-weight: 500; font-size: .94rem;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav-right { display: flex; align-items: center; gap: .8rem; margin-inline-start: auto; }
.nav-links + .nav-right { margin-inline-start: 0; }
.nav-next {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 7px 14px; border-radius: 999px;
  background: var(--sand); border: 1px solid var(--line);
  color: var(--navy-deep); text-decoration: none; font-size: .86rem; white-space: nowrap;
}
.nav-next b { font-weight: 600; color: var(--navy); }
.nav-next-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-text);
}
.nav-next:hover { border-color: var(--gold); color: var(--navy-deep); }

.burger {
  display: none; width: 44px; height: 44px; flex: 0 0 44px;
  background: none; border: 0; padding: 10px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 6px;
}
.burger span { display: block; height: 2px; background: var(--navy-deep); border-radius: 2px; transition: transform .2s ease; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--navh) 0 0; z-index: 49;
  background: #fff; padding: 1.4rem var(--gut) 2rem;
  display: flex; flex-direction: column; gap: 0;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer a:not(.btn) {
  color: var(--navy-deep); text-decoration: none;
  font-family: var(--f-display); font-size: 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: 1.6rem; align-self: flex-start; }
.drawer a.drawer-sm { font-family: var(--f-body); font-size: 1rem; color: var(--muted); padding: .7rem 0; }

/* Six page links leave no room for the next-prayer pill on a desktop (the
   today strip carries it there). It returns in the burger range, where the
   links have folded away. */
.nav-next { display: none; }
.nav-links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  .nav-links + .nav-right { margin-inline-start: auto; }
  .nav-next { display: inline-flex; }
}
@media (max-width: 700px) { .nav-next { display: none; } }
@media (max-width: 520px) {
  .nav-right > .btn--fill { display: none; }
  .nav-in { gap: .6rem; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .brand-name { font-size: .95rem; }
}
@media (max-width: 340px) { .brand-name { font-size: .86rem; } }

/* ---------- sections ---------- */

.sec { padding: clamp(2.25rem, 4.6vw, 3.75rem) 0; }
/* Gold focus rings only where gold has the contrast: the navy grounds. */
.sec--ink :focus-visible, .foot :focus-visible, .ayah :focus-visible { outline-color: var(--gold); }
.sec--tint { background: var(--sand); }
.sec--ink { background: var(--navy-deep); color: rgba(255,255,255,.84); }
.sec--ink h2, .sec--ink h3 { color: #fff; }
.sec--ink .eyebrow { color: var(--gold); }
.sec--ink .sec-sub { color: rgba(255,255,255,.82); }
.sec--ink a:not(.btn) { color: var(--gold-soft); }
/* The widgets are white cards and keep their own ink when they sit on a navy
   band; without this the band's white headings and gold links bleed in and
   the event titles vanish (white on white). */
.sec--ink .uw { color: var(--uw-body); }
.sec--ink .uw h3 { color: var(--uw-ink); }
.sec--ink .uw a.uw-brand { color: var(--uw-muted); }
.sec--ink .uw a.uw-brand:hover { color: var(--uw-ink); }

.sec-head { margin-bottom: 1.8rem; max-width: 720px; }
.sec-head--center { text-align: center; margin-inline: auto; }
.eyebrow {
  display: inline-block;
  font-family: var(--f-body); font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: .7rem;
}
.sec-sub { font-size: 1.1rem; max-width: 62ch; color: var(--body); }
.sec-sub--center { margin-inline: auto; }
.rule::after {
  content: ''; display: block;
  width: 56px; height: 3px; border-radius: 2px;
  background: var(--gold); margin-top: 1rem;
}
.sec-head--center .rule::after { margin-inline: auto; }

/* Reveal only once we know the script that reveals is running. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid; place-items: center;
  width: 100%;
  min-height: min(82vh, 780px);
  padding: 4rem 0 7.5rem;   /* room underneath for the today strip */
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-deep);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-slide { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 9s linear;
}
.hero-slide.is-on img { transform: scale(1.0); }
@media (prefers-reduced-motion: reduce) { .hero-slide img { transform: none; transition: none; } }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  /* Measured against the brightest pixel under the copy across all four
     slides (the window in the Qur'an photograph): white text holds 4.5:1 or
     better at every point of the block. */
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(12,24,52,.50) 0%, rgba(12,24,52,.18) 100%),
    linear-gradient(180deg, rgba(12,24,52,.50) 0%, rgba(12,24,52,.42) 50%, rgba(12,24,52,.84) 100%);
}
.hero-in { position: relative; max-width: 52rem; }
.hero-bismillah {
  font-family: var(--f-arabic); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.6;
  color: var(--gold-soft); margin: 0;
}
.hero-bismillah-en { font-size: .88rem; font-style: italic; color: #fff; margin: 0 0 1.6rem; }
.hero-kicker {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); margin: 0 0 .9rem;
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: .9rem; text-shadow: 0 2px 24px rgba(12,24,52,.45); }
.hero-sub, .hero-bismillah-en, .hero-kicker { text-shadow: 0 1px 12px rgba(12,24,52,.55); }
.hero-sub { color: #fff; font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 50ch; margin: 0 auto 2.1rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.hero :focus-visible { outline-color: #fff; }

@media (max-width: 760px) {
  .hero { min-height: 0; padding: 3.5rem 0 7rem; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { width: 100%; max-width: 26rem; margin-inline: auto; }
}

/* ---------- today strip ---------- */

.today-wrap { position: relative; z-index: 2; margin-top: -5.25rem; }
.today {
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(12,24,52,.06);
  box-shadow: 0 2px 4px rgba(12,24,52,.05), 0 24px 50px -24px rgba(12,24,52,.45);
  padding: 1.05rem 1.3rem 1.2rem;
}
.today-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .3rem 1rem; margin-bottom: .8rem;
}
.today-label {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}
.today-next { font-size: .92rem; color: var(--muted); }
.today-next b { color: var(--navy); font-weight: 600; }
.today-cells {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
}
.today[data-pending] .today-cells { min-height: 64px; }
.today-cell {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .7rem .3rem; border-radius: 12px;
  background: var(--sand);
  transition: background-color .3s ease;
}
.today-name { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.today-time { font-family: var(--f-display); font-size: 1.32rem; color: var(--navy-deep); line-height: 1.25; }
.today-cell.is-next { background: var(--navy-deep); }
.today-cell.is-next .today-name { color: var(--gold); }
.today-cell.is-next .today-time { color: #fff; }
@media (max-width: 560px) {
  .today { padding: .9rem .75rem 1rem; }
  .today-cells { gap: .3rem; }
  .today-cell { padding: .55rem .1rem; }
  .today-name { font-size: .7rem; letter-spacing: 0; }
  .today-time { font-family: var(--f-body); font-weight: 600; font-size: .8rem; white-space: nowrap; }
}
/* At 320 to 400px "12:59 PM" no longer fits a fifth of the strip: let the
   time wrap to "6:25 / AM" inside its cell rather than spill. */
@media (max-width: 400px) {
  .today-time { white-space: normal; text-align: center; line-height: 1.2; }
}

/* ---------- facts ---------- */

.facts { padding: 2.2rem 0 1.4rem; }
.facts-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; text-align: center; }
.fact { position: relative; }
.fact + .fact::before {
  content: ''; position: absolute; inset-block: 15% 15%; inset-inline-start: -.7rem;
  width: 1px; background: var(--line);
}
.fact-n { font-family: var(--f-display); font-size: 1.6rem; color: var(--navy-deep); margin: 0 0 .1rem; }
.fact-t { font-size: .93rem; color: var(--muted); margin: 0; }
@media (max-width: 680px) {
  .facts-in { grid-template-columns: 1fr; gap: 1rem; }
  .fact + .fact::before { inset: -.5rem 35% auto; width: auto; height: 1px; }
}

/* ---------- prayer times ---------- */

body .uw { --uw-accent: var(--navy); --uw-accent-dark: var(--navy-deep); --uw-muted: var(--muted); }
/* The page's own link colours must not reach the widgets' buttons: a:hover
   was turning the Enroll label navy on a navy button. */
.uw a.uw-btn:not(.uw-btn--ghost), .uw a.uw-btn:not(.uw-btn--ghost):hover { color: #fff; }
.uw a.uw-btn--ghost, .uw a.uw-btn--ghost:hover { color: var(--uw-ink); }
.times-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 600px) minmax(0, 400px);
  justify-content: center; align-items: start;
}
.times-widget { min-width: 0; }
.times-foot { text-align: center; margin: 1rem 0 0; }
.jumuah {
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(12,24,52,.06); box-shadow: var(--sh-card);
  display: flex; flex-direction: column;
}
.jumuah-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
.jumuah-body { padding: 1.3rem 1.4rem 1.5rem; }
.jumuah-body h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.jumuah-body p { font-size: .98rem; }
.jumuah-note { color: var(--muted); font-size: .92rem !important; }
@media (max-width: 960px) {
  .times-grid { grid-template-columns: minmax(0, 600px); }
  .jumuah { flex-direction: row; }
  .jumuah-img { display: block; flex: 0 0 38%; }
  .jumuah-img img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .jumuah { flex-direction: column; }
  .jumuah-img img { aspect-ratio: 16 / 9; }
}

/* ---------- about ---------- */

.about-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  align-items: stretch;
}
.about-body2 { max-width: 62ch; }
.pillars { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(1.8rem, 4vw, 2.75rem); }
.pillar {
  background: var(--sand); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem;
  border-top: 0;
}
.sec--tint .pillar { background: #fff; box-shadow: var(--sh-card); }
.pillar h3 { font-size: 1.3rem; margin-bottom: .4rem; color: var(--navy); }
.pillar p { font-size: .97rem; margin: 0; }
.affil { font-size: .88rem; color: var(--muted); margin: 1.4rem 0 0; }
.affil span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; color: var(--gold-text); margin-inline-end: .4rem; }
.about-media { margin: 0; border-radius: 18px; overflow: hidden; min-height: 320px; max-height: 520px; }
.about-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 16 / 10; min-height: 0; order: -1; }
}

/* ---------- ayah band ---------- */

.ayah {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  text-align: center; color: #fff;
  background: var(--navy-deep);
}
.ayah-bg { display: block; position: absolute; inset: 0; z-index: -2; }
.ayah-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.ayah::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* Measured: the crescent sits behind the copy, so the middle band is dark
     enough for the reference line at 5.4:1 and the quote at 7.6:1. */
  background: linear-gradient(90deg, rgba(12,24,52,.35), rgba(12,24,52,.74) 30%, rgba(12,24,52,.74) 70%, rgba(12,24,52,.35));
}
.ayah-in { max-width: 46rem; }
.ayah-ar { font-family: var(--f-arabic); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.8; color: var(--gold-soft); margin: 0 0 .6rem; }
.ayah-en { margin: 0; }
.ayah-en p { font-family: var(--f-display); font-size: clamp(1.2rem, 2.3vw, 1.6rem); line-height: 1.45; margin: 0 0 .9rem; color: #fff; }
.ayah-ref { font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); margin: 0; }

/* ---------- programs ---------- */

.programs-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: stretch;
}
.programs-media { margin: 0; border-radius: 18px; overflow: hidden; }
.programs-media img { width: 100%; height: 100%; object-fit: cover; }
#ummah-programs { max-width: none; }
@media (max-width: 1000px) {
  .programs-grid { grid-template-columns: 1fr; }
  .programs-media { aspect-ratio: 21 / 9; }
}

/* ---------- events ---------- */

.events-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
}
.feature {
  border-radius: 18px; overflow: hidden;
  background: var(--navy);
  border: 1px solid rgba(201,162,77,.35);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.feature-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature-body { padding: 1.4rem 1.5rem 1.5rem; }
.feature-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .4rem; }
.feature-title { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: .55rem; }
.feature-when { color: var(--gold-soft); font-weight: 500; }
.feature-body p { font-size: .98rem; }
.feature-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  padding-top: 1rem; margin-top: .4rem; border-top: 1px solid rgba(255,255,255,.14);
}
.feature-price { font-weight: 600; color: #fff; }
.feature-vendor { margin: 1rem 0 0; font-size: .86rem !important; color: rgba(255,255,255,.72); }
#ummah-events { max-width: none; }
@media (max-width: 1000px) { .events-grid { grid-template-columns: 1fr; } }

/* ---------- services ---------- */

.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: #fff; border-radius: 16px; padding: 1.5rem 1.4rem 1.5rem;
  border: 1px solid rgba(12,24,52,.06); box-shadow: var(--sh-card);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.card-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-deep); color: var(--gold);
  margin-bottom: 1rem;
}
.card-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.22rem; margin-bottom: .4rem; }
.card p { margin: 0; font-size: .96rem; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* ---------- leadership ---------- */

.people-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.people-grid--solo { grid-template-columns: minmax(0, 1fr); }
.people-grid--solo .people { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)) !important; }
.people-h { font-family: var(--f-body); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); margin-bottom: .9rem; }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.people-grid > div:first-child .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person {
  display: flex; align-items: center; gap: .85rem;
  background: #fff; border-radius: 14px; padding: .8rem 1rem;
  border: 1px solid rgba(12,24,52,.06); box-shadow: 0 1px 2px rgba(12,24,52,.04);
}
.person-mono {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-deep); color: var(--gold);
  font-family: var(--f-display); font-size: 1rem; letter-spacing: .04em;
}
.person-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person-txt b { color: var(--navy-deep); font-weight: 600; font-size: .98rem; }
.person-txt span { color: var(--muted); font-size: .88rem; }
@media (max-width: 900px) { .people-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .people-grid > div:first-child .people { grid-template-columns: 1fr; } }

/* ---------- give ---------- */

.give { position: relative; isolation: isolate; overflow: hidden; }
.give-pattern {
  position: absolute; inset: 0; z-index: -1; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A24D' stroke-width='1.2'%3E%3Crect x='22' y='22' width='36' height='36'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.give-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
}
.ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.ticks li {
  position: relative; padding-inline-start: 1.7rem; margin-bottom: .65rem;
  color: rgba(255,255,255,.88); font-size: .98rem;
}
.ticks li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .55em;
  width: 9px; height: 5px;
  border-inline-start: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
@media (max-width: 900px) {
  .give-grid { grid-template-columns: 1fr; }
  #ummah-donate { max-width: 470px; width: 100%; margin-inline: auto; }
}

/* ---------- visit ---------- */

.visit-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.dl { margin: 1.6rem 0 0; }
.dl > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line);
}
.dl dt { font-weight: 600; font-size: .88rem; color: var(--muted); }
.dl dd { margin: 0; color: var(--navy-deep); }
.visit-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.visit-map { border-radius: 18px; overflow: hidden; min-height: 380px; border: 1px solid var(--line); background: var(--sand); }
.visit-map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.city { margin-top: clamp(1.8rem, 4vw, 2.75rem); }
.city img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 18px; }
.city figcaption { margin-top: .7rem; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
  .visit-grid { grid-template-columns: 1fr; }
  .dl > div { grid-template-columns: 1fr; gap: .15rem; }
  .visit-map, .visit-map iframe { min-height: 300px; }
  .city img { aspect-ratio: 16 / 9; }
}

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600; font-size: 1.04rem; color: var(--navy-deep);
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; position: absolute; inset-inline-end: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--gold-text); line-height: 1;
}
.qa[open] summary::after { content: '\2212'; }
.qa p { margin: 0 0 1.3rem; max-width: 62ch; }

/* ---------- footer ---------- */

.foot { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 2.75rem 0 1.2rem; }
.foot-grid {
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.foot-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.foot-brand img { width: 48px; height: 48px; flex: 0 0 48px; }
.foot-brand span { font-family: var(--f-display); font-size: 1.2rem; color: #fff; line-height: 1.25; }
.foot .foot-blurb { margin-top: 1.1rem; max-width: 36ch; font-size: .92rem; color: rgba(255,255,255,.72); }
.foot-h {
  font-family: var(--f-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 .9rem;
}
.foot p { margin: 0 0 .5rem; font-size: .95rem; }
.foot-grid a:not(.foot-brand) { display: block; color: rgba(255,255,255,.82); text-decoration: none; font-size: .95rem; margin-bottom: .45rem; }
.foot-grid a:not(.foot-brand):hover { color: #fff; text-decoration: underline; }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.4rem; font-size: .86rem; color: rgba(255,255,255,.62);
}
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
.foot-sitemap { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.foot-sitemap a { color: rgba(255,255,255,.62); text-decoration: none; }
.foot-sitemap a:hover { color: #fff; text-decoration: underline; }
.credit a { color: var(--gold); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-id { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- action bar (phones and tablets) ---------- */

.actionbar { display: none; }
@media (max-width: 960px) {
  .actionbar {
    display: flex; gap: .5rem;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 48;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.95);
    border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .actionbar .btn { flex: 1 1 0; min-width: 0; }
  body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
  /* Keyboard focus and the widget toast must clear the bar. */
  html { scroll-padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  .uw-toast { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- timetable page ---------- */

.page-head {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  background:
    radial-gradient(circle at 85% 0%, rgba(201,162,77,.16), transparent 55%),
    var(--sand);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .4rem; }
.tt-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.tt-title { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-align: center; }
.tt-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--sh-card); background: #fff; }
.tt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; }
.tt[hidden] { display: none; }
.tt th, .tt td { padding: .62rem .8rem; text-align: right; white-space: nowrap; font-size: .95rem; }
.tt thead th {
  position: sticky; top: 0;
  background: var(--navy-deep); color: var(--gold-soft);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tt thead th:first-child, .tt tbody th { text-align: left; }
.tt tbody tr { border-top: 1px solid var(--line); }
.tt tbody tr:nth-child(even) { background: #FCFAF5; }
.tt tbody th { font-weight: 600; color: var(--navy-deep); }
.tt-wd { color: var(--muted); font-weight: 400; font-size: .85rem; margin-inline-start: .3rem; }
.tt-sun { color: var(--muted); }
.tt tr[data-friday] .tt-wd { color: var(--gold-text); font-weight: 600; }
.tt tr.is-today { background: var(--navy) !important; }
.tt tr.is-today th, .tt tr.is-today td, .tt tr.is-today .tt-wd { color: #fff; }
.tt-noscript { margin-top: 1rem; }
.tt-back { margin: 1.5rem 0 0; }
@media (max-width: 640px) {
  /* All five prayers on a phone without sideways scrolling: sunrise goes
     (it is on the home page), the table loses its desktop minimum width. */
  .tt { min-width: 0; }
  .tt th, .tt td { padding: .5rem .35rem; font-size: .8rem; }
  .tt thead th { font-size: .62rem; letter-spacing: .04em; }
  .tt thead th:nth-child(3), .tt td.tt-sun { display: none; }
  .tt-ap { display: none; }
  .tt-wd { display: block; margin: 0; font-size: .72rem; }
}
@media (max-width: 600px) {
  .tt-bar .btn { padding: 10px 12px; font-size: 13px; }
  .tt-bar { flex-wrap: wrap; }
  .tt-title { order: -1; width: 100%; }
}

/* ---------- touch sizing ---------- */

@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .qa summary { padding-block: 1.35rem; }
  .foot-grid a:not(.foot-brand), .foot-sitemap a { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
  .foot-sitemap { gap: 0 .9rem; }
  .nav-next { min-height: 44px; }
  .crumbs a { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 360px) {
  .tt th, .tt td { padding: .45rem .22rem; font-size: .76rem; }
}


/* ==================================================================
   Inner pages and the sections that link to them
   ================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.more-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.2rem 0 0; }
.card { display: flex; flex-direction: column; }
.card-more { margin-top: auto; padding-top: .9rem; }
.sec--slim { padding: clamp(1.75rem, 3.6vw, 2.75rem) 0; }

/* Tradition: the flag beside the words. */
.tradition {
  display: grid; gap: clamp(1.8rem, 4vw, 3.25rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center;
}
.flag { margin: 0; }
.flag-svg {
  display: block; width: 100%; height: auto; border-radius: 14px;
  box-shadow: 0 2px 4px rgba(12,24,52,.08), 0 22px 44px -22px rgba(12,24,52,.45);
}
@media (max-width: 860px) { .tradition { grid-template-columns: 1fr; } .tradition .flag { max-width: 460px; } }

/* A call-to-action band. */
.ctaband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem;
}
.ctaband h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .3rem; }
.ctaband p { margin: 0; max-width: 58ch; }
.ctaband--ink {
  background: var(--navy-deep); color: rgba(255,255,255,.84);
  border-radius: 20px; padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2.4rem);
}
.ctaband--ink h2 { color: #fff; }
.ctaband--ink :focus-visible { outline-color: var(--gold); }

/* Page header: the section's photograph under a navy scrim. */
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-deep); color: #fff;
  padding: clamp(3rem, 7vw, 5.25rem) 0 clamp(2.4rem, 5vw, 3.75rem);
}
.phero-bg { display: block; position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; }
.phero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,24,52,.90) 0%, rgba(12,24,52,.78) 55%, rgba(12,24,52,.55) 100%);
}
.phero h1 { color: #fff; max-width: 20ch; margin-bottom: .6rem; }
.phero-sub { color: #fff; font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 56ch; margin: 0; }
.crumbs { font-size: .82rem; margin-bottom: 1rem; color: var(--gold-soft); }
.crumbs a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 .35rem; opacity: .6; }
.phero :focus-visible { outline-color: #fff; }

.pbody { padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2.4rem, 5vw, 4rem); }
.blk { margin-bottom: clamp(1.8rem, 4vw, 2.75rem); }
.blk:last-child { margin-bottom: 0; }
.blk h2 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); }
.blk-center { text-align: center; }
.blk-intro { text-align: center; color: var(--muted); margin: -.3rem auto 1.2rem; max-width: 60ch; }
.blk--prose p { font-size: 1.06rem; line-height: 1.75; }
.blk-sign { font-family: var(--f-display); font-size: 1.15rem; color: var(--navy); }

.pquote { margin-inline: auto; text-align: center; padding: clamp(1.4rem, 3vw, 2rem) 0; border-block: 1px solid var(--line); }
.pquote blockquote { margin: 0; }
.pquote p { font-family: var(--f-display); font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.45; color: var(--navy-deep); margin: 0 0 .7rem; }
.pquote figcaption { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }

.ticks--light li { color: var(--body); font-size: 1.02rem; margin-bottom: .75rem; }
.ticks--light li::before { border-color: var(--gold-text); }

.goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.goal {
  position: relative; background: #fff; border-radius: 16px; padding: 1.4rem 1.4rem 1.3rem 4.4rem;
  border: 1px solid rgba(12,24,52,.06); box-shadow: var(--sh-card);
}
.goal-n {
  position: absolute; inset-inline-start: 1.25rem; top: 1.3rem;
  width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-deep); color: var(--gold); font-family: var(--f-display); font-size: 1.1rem;
}
.goal h3 { margin-bottom: .5rem; }
.goal ul { margin: 0; padding-inline-start: 1.1rem; }
.goal li { margin-bottom: .45rem; font-size: .96rem; }
@media (max-width: 760px) { .goals { grid-template-columns: 1fr; } }

.people--page { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }

.doclinks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.doclink {
  position: relative; display: flex; flex-direction: column; gap: .2rem; height: 100%;
  padding: 1.05rem 3rem 1.1rem 1.2rem; border-radius: 14px; text-decoration: none;
  background: #fff; border: 1px solid rgba(12,24,52,.08); box-shadow: 0 1px 2px rgba(12,24,52,.04);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.doclink:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); border-color: var(--gold); }
.doclink b { color: var(--navy-deep); font-weight: 600; }
.doclink span { color: var(--muted); font-size: .9rem; }
.doclink i { position: absolute; inset-inline-end: 1.1rem; top: 1rem; font-style: normal; color: var(--gold-text); font-size: 1.1rem; }

.vids { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.vid {
  display: flex; align-items: center; gap: .8rem; height: 100%;
  padding: .75rem .9rem; border-radius: 14px; text-decoration: none;
  background: #fff; border: 1px solid rgba(12,24,52,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.vid:hover { border-color: var(--gold); box-shadow: var(--sh-card); }
.vid-play { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-deep); }
.vid-play svg { width: 16px; height: 16px; fill: var(--gold); margin-inline-start: 2px; }
.vid-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.vid-txt b { color: var(--navy-deep); font-weight: 600; font-size: .95rem; }
.vid-txt span { color: var(--muted); font-size: .86rem; }

.pfacts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pfact { background: var(--sand); border-radius: 16px; padding: 1.2rem 1.2rem 1.1rem; text-align: center; }
.pfact-n { font-family: var(--f-display); font-size: 1.55rem; color: var(--navy-deep); margin: 0 0 .15rem; }
.pfact-t { margin: 0; color: var(--muted); font-size: .92rem; }

.contactcard { background: var(--sand); border-radius: 18px; padding: clamp(1.3rem, 3vw, 2rem); }
.contactcard .dl { margin-top: 1rem; }

.flagblock { display: grid; gap: clamp(1.4rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.flagblock--solo { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
@media (max-width: 760px) { .flagblock { grid-template-columns: 1fr; } }

.ctaband .btn { white-space: normal; text-align: center; max-width: 100%; }
.drawer a[aria-current="page"] { color: var(--navy); font-weight: 600; border-bottom-color: var(--gold); }
.doclink--plain { padding-inline-end: 1.2rem; }
@media (max-width: 560px) {
  .goal { padding: 1.2rem 1.15rem 1.1rem; }
  .goal-n { position: static; margin-bottom: .7rem; }
}
@media (min-width: 700px) { .pfacts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }


/* ==================================================================
   Live Ummah portal widgets (2026-10-08)
   ================================================================== */

/* An embedded widget cannot size itself: it is cross-origin and broadcasts
   no height. Every height below was measured against CICC's live widgets
   with their content loaded, indexed by the FRAME's width (not the
   viewport's), worst case in each band plus a little headroom:

     prayers   frame 280:511  320:487  360:487  400+:475
     events    frame 300:445  340:465  400:495  480:535  560:558  600:526
               640:465  700:485  767:490  800:499  900:533  1023:574
     donation  frame 300:871  340:837  380:749  420:749  460:707  540:687

   Events grows when CICC publishes more than a row of events (the widget
   then scrolls inside itself), and prayers grows if Jumu'ah rows are added
   in the portal: re-measure then. */
.uframe { position: relative; width: 100%; }
.uframe iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.uframe-loading {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  font-size: .92rem; color: rgba(255,255,255,.75);
}
.sec:not(.sec--ink) .uframe-loading { color: var(--muted); }

.uframe--prayers { height: 545px; }
@media (max-width: 447px) { .uframe--prayers { height: 560px; } }
@media (max-width: 367px) { .uframe--prayers { height: 585px; } }
@media (max-width: 327px) { .uframe--prayers { height: 605px; } }

/* Events gets room to grow. Its card keeps its natural height (it does not
   stretch to the frame) and scrolls its own list once it is taller than the
   frame. A taller frame only adds navy under the card (tried 1000px,
   2026-10-08). When the widget's card becomes h-[calc(100vh-3rem)] instead
   of max-h (community portal iframe/events/page.tsx), raise this and the
   white card grows with it.
   With one event the spare height is transparent, so the section's own
   bottom padding is dropped to keep the band from looking empty. */
.uframe--events { height: 760px; }
@media (max-width: 847px) { .uframe--events { height: 720px; } }
@media (max-width: 447px) { .uframe--events { height: 700px; } }
#events.sec { padding-bottom: .5rem; }

.uframe--donate { height: 800px; }
@media (max-width: 517px) { .uframe--donate { height: 840px; } }
@media (max-width: 427px) { .uframe--donate { height: 930px; } }
@media (max-width: 387px) { .uframe--donate { height: 965px; } }
@media (max-width: 347px) { .uframe--donate { height: 990px; } }
@media (max-width: 900px) { .give .uframe--donate { max-width: 470px; margin-inline: auto; } }

/* Hero, split: the welcome on the left, today's prayer times on the right. */
.hero--split { text-align: start; padding: clamp(2.5rem, 6vw, 4.5rem) 0; min-height: 0; }
.hero--split .hero-in {
  max-width: none;
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
}
.hero--split .hero-copy { max-width: 40rem; }
.hero--split .hero-sub { margin-inline: 0; }
.hero--split .hero-cta { justify-content: flex-start; }
.hero--split h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }

.hero-prayers { scroll-margin-top: calc(var(--navh) + 14px); }

@media (max-width: 1000px) {
  .hero--split .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero-copy { max-width: none; text-align: center; }
  .hero--split .hero-sub { margin-inline: auto; }
  .hero--split .hero-cta { justify-content: center; }
  .hero-prayers { width: 100%; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero--split { padding: 2.5rem 0 2.25rem; }
}

/* Jumu'ah, as one wide card: photograph, words, two actions. */
.jumuah--wide { flex-direction: row; align-items: stretch; }
/* The photograph fills whatever height the words need and never sets it:
   a portrait image deciding the card's height left a tall white void. */
.jumuah--wide .jumuah-img { display: block; position: relative; flex: 0 0 30%; min-height: 220px; }
.jumuah--wide .jumuah-img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center 35%; }
.jumuah--wide .jumuah-body { padding: clamp(1.3rem, 3vw, 2rem); }
.jumuah--wide h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .5rem; }
@media (max-width: 700px) {
  .jumuah--wide { flex-direction: column; }
  .jumuah--wide .jumuah-img { min-height: 0; }
  .jumuah--wide .jumuah-img img { position: static; aspect-ratio: 16 / 9; height: auto; }
}

/* Programs as the site's own cards. */
.pcards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; padding: 1.3rem 1.3rem 1.2rem;
  border: 1px solid rgba(12,24,52,.06); box-shadow: var(--sh-card);
}
.pcard h3 { margin-bottom: .35rem; }
.pcard > p { font-size: .96rem; margin-bottom: .8rem; }
.pcard-rows { margin: 0 0 1rem; }
.pcard-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.pcard-rows dt { color: var(--muted); }
.pcard-rows dd { margin: 0; color: var(--navy-deep); font-weight: 600; text-align: end; }
.pcard-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 620px) { .pcards { grid-template-columns: 1fr; } }

/* The Arabic line is RTL, so its own start is the right edge; in the split
   hero it must line up with the left-aligned headline under it. */
.hero--split .hero-bismillah { text-align: left; }
@media (max-width: 1000px) { .hero--split .hero-bismillah { text-align: center; } }
/* On the narrowest phones the widget's own table needs every pixel: at a
   272px frame its times wrap and the iqama column clips. Let the panel use
   most of the gutter. */
@media (max-width: 400px) {
  .hero-prayers { width: calc(100% + 24px); max-width: none; margin-inline: -12px; }
}

/* Khutbah player */
button.vid { width: 100%; font: inherit; text-align: start; cursor: pointer; }
.vplayer {
  width: min(960px, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 16px;
  background: var(--navy-deep); color: #fff;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.vplayer::backdrop { background: rgba(7,14,32,.82); }
.vplayer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem .8rem 1.2rem; }
.vplayer-head h2 { margin: 0; font-size: 1.1rem; color: #fff; }
.vplayer-close {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.vplayer-close:hover { background: rgba(255,255,255,.12); }
.vplayer video { display: block; width: 100%; max-height: 72vh; background: #000; }
.vplayer-foot { margin: 0; padding: .7rem 1.2rem .9rem; font-size: .86rem; color: rgba(255,255,255,.75); }
.vplayer-foot a { color: var(--gold-soft); }
.vplayer :focus-visible { outline-color: var(--gold); }

/* Programs without a photograph: the cards on their own, centred. */
.programs-grid--solo { grid-template-columns: minmax(0, 1fr); }
.programs-grid--solo .pcards { width: 100%; max-width: 900px; margin-inline: auto; }

/* The donation widget on an inner page (Vandalism support). */
.blk-donate { max-width: 470px; margin: 1.2rem auto 0; }
.pbody .uframe-loading { color: var(--muted); }