/* Generated by build.mjs from masjids/jsmctampa.json. Do not edit by hand. */
:root {
  --paper: #f7f5ee;
  --ink: #16252c;
  --surface: #e9ece7;
  --muted: #555f62;
  --line: #d3d4cf;
  --edge: #828787;
  --reserved-bar: #d8d8d3;
  --brand: #2f6e87;
  --on-brand: #ffffff;
  --brand-text: #2f6e87;
  --accent: #d6b545;
  --on-accent: #16252c;
  --accent-soft: #f0e8cc;
  --err: #b3261e;
  --focus: #2f6e87;
  --band: #234a5a;
  --on-band: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111c21;
    --ink: #f7f5ee;
    --surface: #15272f;
    --muted: #b7b8b5;
    --line: #363f42;
    --edge: #848988;
    --reserved-bar: #313a3e;
    --brand: #2f6e87;
    --on-brand: #ffffff;
    --brand-text: #6594a6;
    --accent: #d6b545;
    --on-accent: #16252c;
    --accent-soft: #383b28;
    --err: #ff9a8f;
    --focus: #6594a6;
    --band: #204554;
    --on-band: #ffffff;
  }
}
/* Photo band, generated from hero_photo. */
:root {
  --scrim-top: rgb(12 20 24 / 0.18);
  --scrim-mid: rgb(12 20 24 / 0.34);
  --scrim: rgb(12 20 24 / 0.66);
  --scrim-low: rgb(12 20 24 / 0.8);
}
.photo-band img { object-position: 50% 62%; }

/* Ramadan Hub. Colour variables above this line come from the masjid's config (build.mjs).

   Type: Bricolage Grotesque for display, Atkinson Hyperlegible Next for everything people read
   (picked for older congregants reading on phones). Both self-hosted, OFL.

   Shape lock, one radius system for the whole page:
     --r-tile  10px   night tiles, panels, the religious-text box
     --r-input  8px   text inputs, volunteer night boxes, the guardian group
     --r-mini   4px   legend swatches only (a tile at legend scale)
     --r-pill 999px   every button and role chip
*/

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-italic-latin.woff2) format("woff2");
}
/* Atkinson's zero is slashed, and at program-board size 8:30 reads as 8:39. Program times take only their zero from Bricolage. */
@font-face {
  font-family: "Plain Zero";
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range: U+0030;
}

:root {
  --r-tile: 10px;
  --r-input: 8px;
  --r-mini: 4px;
  --r-pill: 999px;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1360px;
  --gut: clamp(20px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--brand-text); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.muted { color: var(--muted); }

/* ---------- header ---------- */
.top { border-bottom: 1px solid var(--line); }
.top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark { display: block; width: 32px; height: 32px; }
.brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.top-nav { display: flex; gap: 30px; }
.top-nav a {
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.top-nav a:hover { border-bottom-color: var(--accent); }

/* ---------- hero: the wall of nights ---------- */
.hero { padding: clamp(24px, 4.5vh, 44px) 0 clamp(48px, 7vw, 88px); }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro wall" "give wall";
  column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: 32px;
}
.hero-intro { grid-area: intro; }
.hero-wall { grid-area: wall; }
.hero-give { grid-area: give; align-self: end; padding-bottom: 46px; }

.kicker {
  margin: 0 0 20px;
  color: var(--brand-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.count {
  font-size: clamp(2rem, 2.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.count-n {
  display: block;
  margin: 0 0 0.1em -0.04em;
  color: var(--brand-text);
  font-size: clamp(5.5rem, 10vw, 9.25rem);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.055em;
}
.count[data-done] .count-n { font-size: clamp(4rem, 7vw, 6.5rem); }
.count-sub {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1.125rem;
  font-weight: 600;
}

.lede { max-width: 34ch; margin-bottom: 26px; }
.price { padding-top: 18px; border-top: 2px solid var(--ink); }
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}
.price-n {
  font-family: var(--display);
  font-size: clamp(2.5rem, 3.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}
.price-per { font-size: 1.125rem; font-weight: 700; }
.price-note {
  max-width: 40ch;
  margin: 8px 0 24px;
  color: var(--muted);
  font-size: 1rem;
}

.hero-wall { container: wall / inline-size; }
.wall-hint {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}
.wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(7px, 0.85vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.night { min-width: 0; }
.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1 / 1.1;
  padding: 10px 12px 11px;
  overflow: hidden;
  border: 2px solid var(--edge);
  border-radius: var(--r-tile);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* The fill: grows from the bottom. Half a tile for partly sponsored, all of it for sponsored. */
.tile::before {
  content: "";
  position: absolute;
  inset: -2px; /* runs under the border so no hairline of paper shows at the edges */
  z-index: -1;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.night[data-state="half"] .tile::before { transform: scaleY(0.5); }
.night[data-state="sponsored"] .tile::before { transform: scaleY(1); }
.night[data-state="half"] .tile,
.night[data-state="sponsored"] .tile { border-color: var(--brand); }
.night[data-state="sponsored"] .tile { color: var(--on-brand); }
/* Reserved: held by the masjid, so no plus and no link. Diagonal bars, so it reads without colour. */
.night[data-state="reserved"] .tile {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, var(--reserved-bar) 0 6px, var(--paper) 6px 12px);
}
/* Nights that can still be sponsored carry a small marigold plus: the accent means "you can give here". */
a.tile::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(var(--on-accent), var(--on-accent)) center / 10px 2px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) center / 2px 10px no-repeat,
    var(--accent);
}

.t-n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.t-w {
  display: block;
  margin-bottom: 3px;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
.t-s, .t-a { display: block; font-size: 0.8125rem; font-weight: 700; line-height: 1.25; }
.night[data-state="open"] .t-s { color: var(--muted); }
.night[data-state="half"] .t-s,
.night[data-state="half"] .t-a { color: var(--on-brand); }
.night[data-state="reserved"] .t-s { color: var(--ink); }
.night[data-state="sponsored"] .t-s::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.38em;
  margin: 0 0.45em 0.18em 0.05em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
/* "Sponsor this night" is always in the link's name; it shows on screen on hover and focus,
   where it takes the place of the state word. */
.t-a,
a.tile:hover .t-s,
a.tile:focus-visible .t-s {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
a.tile:hover .t-a,
a.tile:focus-visible .t-a {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a.tile:hover,
a.tile:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 4px 0 var(--accent);
  transform: translateY(-2px);
}
a.tile:focus-visible { outline-offset: 4px; }

/* Narrow walls (phones, small tablets): number, fill and plus only. The words stay for screen readers. */
@container wall (max-width: 680px) {
  .wall-hint { font-size: 0.9375rem; margin-bottom: 10px; }
  .tile { aspect-ratio: 1 / 1.08; padding: 7px 8px; }
  .t-n { font-size: clamp(1.25rem, 5cqi, 1.75rem); }
  .t-w, .t-s, .t-a,
  a.tile:hover .t-a, a.tile:focus-visible .t-a {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  a.tile::after {
    top: auto; bottom: 6px; right: 6px;
    width: 18px; height: 18px;
    background:
      linear-gradient(var(--on-accent), var(--on-accent)) center / 8px 2px no-repeat,
      linear-gradient(var(--on-accent), var(--on-accent)) center / 2px 8px no-repeat,
      var(--accent);
  }
  .night[data-state="half"] a.tile::after { box-shadow: 0 0 0 2px var(--brand); }
  .night[data-state="sponsored"] .tile::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 11px;
    width: 12px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
  }
}
@container wall (max-width: 560px) {
  .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 600;
}
.legend li { display: flex; align-items: center; gap: 9px; }
.swatch {
  flex: none;
  width: 18px;
  height: 20px;
  border: 2px solid var(--brand);
  border-radius: var(--r-mini);
}
.swatch-sponsored { background: var(--brand); }
.swatch-half { background: linear-gradient(to top, var(--brand) 50%, transparent 50%); }
.swatch-reserved {
  border-style: dashed;
  border-color: var(--edge);
  background: repeating-linear-gradient(135deg, var(--reserved-bar) 0 3px, var(--paper) 3px 6px);
}
.swatch-open { border-color: var(--edge); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 1.0625rem/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.btn-accent { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.16); }
.btn-brand { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22); }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.16), 0 3px 0 rgb(0 0 0 / 0.12); }
.btn[aria-busy="true"] { opacity: 0.75; cursor: progress; transform: none; }
.btn-quiet {
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--edge);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font: 700 0.9375rem/1 var(--body);
  cursor: pointer;
}
.btn-quiet:hover { border-color: var(--ink); }

/* ---------- programs board and dates ---------- */
.board {
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.board-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
#programs { font-family: "Plain Zero", "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif; font-size: 1.0625rem; }
/* The embed sets its accent from data-accent (the brand colour). In dark mode that teal is too
   dim on a dark page, so the page hands it the contrast-checked brand-text colour instead. */
#programs masjid-studio-updates { --a: var(--brand-text) !important; }
.programs-fallback { display: none; }
#programs:not(:has(masjid-studio-updates:not([hidden]))) + .programs-fallback { display: block; }
.programs-fallback h2 { margin-bottom: 10px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.programs-fallback p { color: var(--muted); }
.board-note { max-width: 52ch; margin-top: 14px; color: var(--muted); font-size: 1rem; }

.dates {
  padding: 26px 26px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  background: var(--paper);
}
.dates h2 { margin-bottom: 14px; font-size: 1.5rem; }
.dates dl { margin: 0; }
.dates dl > div { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.dates dt { font-size: 0.9375rem; font-weight: 700; }
.dates dd { margin: 4px 0 0; }

/* ---------- religious text slot ---------- */
.verse { padding: clamp(48px, 7vw, 80px) 0 0; }
.verse-text,
.verse-empty { max-width: 680px; margin: 0 auto; }
.verse-text {
  font-size: 1.375rem;
  line-height: 1.65;
  text-align: center;
  white-space: pre-line;
}
.verse-empty {
  padding: 30px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-tile);
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* ---------- volunteer sign-up sheet ---------- */
.volunteer { padding: clamp(56px, 8vw, 104px) 0; }
/* Headline and intro stacked (one message per section, no split header). */
.vol-head {
  display: grid;
  gap: 14px;
  margin-bottom: 34px;
}
.vol-head h2 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); letter-spacing: -0.035em; }
.vol-head p { max-width: 58ch; }
.sheet {
  display: grid;
  gap: 30px;
  padding-top: 32px;
  border-top: 3px solid var(--ink);
}
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; max-width: 900px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label,
.field > legend {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}
input[type="text"],
input[type="tel"] {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 2px solid var(--edge);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
input[type="text"]:focus-visible,
input[type="tel"]:focus-visible { border-color: var(--focus); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--err); }
.err { margin-top: 6px; color: var(--err); font-size: 0.9375rem; font-weight: 700; }
.err:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip, .chk { position: relative; display: block; }
.chip input, .chk input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border: 2px solid var(--edge);
  border-radius: var(--r-pill);
  font-weight: 700;
}
.chip input:checked + span { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.chip input:checked + span::before {
  content: "";
  width: 0.7em;
  height: 0.36em;
  margin-bottom: 0.2em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.chip input:focus-visible + span,
.chk input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip:hover span, .chk:hover span { border-color: var(--ink); }
.chip input:checked:hover + span, .chk input:checked:hover + span { border-color: var(--brand); }

.night-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.checks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  max-width: 780px;
}
.chk span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 2px solid var(--edge);
  border-radius: var(--r-input);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.chk input:checked + span {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2);
}
.fieldset-invalid .chip span,
.fieldset-invalid .chk span { border-color: var(--err); }

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.privacy { max-width: 58ch; color: var(--muted); font-size: 0.9375rem; }
.status { font-weight: 700; }
.status:empty { display: none; }
.status.is-ok {
  padding: 16px 18px;
  border: 2px solid var(--brand);
  border-radius: var(--r-input);
  color: var(--ink);
}
.status.is-error { color: var(--err); }

/* ---------- i'tikaf ---------- */
.itikaf { padding: 0 0 clamp(56px, 8vw, 104px); }
.itikaf-in { display: flex; justify-content: center; }
.panel {
  width: 100%;
  max-width: 640px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-tile);
  background: var(--surface);
}
.itk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 28px;
}
.itk-head h2 { max-width: 13ch; font-size: clamp(1.75rem, 3.2vw, 2.4rem); }
.spots { max-width: 15ch; text-align: right; }
.spots-n {
  display: block;
  color: var(--brand-text);
  font-family: var(--display);
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.spots-t { color: var(--muted); font-size: 0.9375rem; font-weight: 700; }
.itk-note { margin: 18px 0 0; max-width: 52ch; }
#itk-form { display: grid; gap: 20px; margin-top: 26px; }
.field > label.tick {
  display: flex;
  margin-bottom: 0;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.tick input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--brand); }
.guardian {
  display: grid;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--paper);
}
.guardian[hidden], .field[hidden] { display: none; }
.guardian-why { color: var(--muted); font-size: 0.9375rem; }
#itk-form .btn { justify-self: start; }

/* ---------- last ten nights ---------- */
.last-ten {
  --focus: var(--on-band);
  padding: clamp(56px, 8vw, 100px) 0;
  background: var(--band);
  color: var(--on-band);
}
.last-ten-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px 56px;
  align-items: end;
}
.last-ten h2 { font-size: clamp(2.75rem, 6.4vw, 5.5rem); line-height: 0.92; letter-spacing: -0.045em; }
.lt-body p { max-width: 40ch; margin-bottom: 26px; font-size: 1.25rem; }

/* ---------- footer ---------- */
.foot { padding: 30px 0 40px; color: var(--muted); font-size: 0.9375rem; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.credit a { color: var(--muted); }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .top-nav { gap: 20px; }
}
@media (max-width: 960px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "intro" "wall" "give";
    row-gap: 26px;
  }
  .hero-give { padding-bottom: 0; }
  .board-in, .last-ten-in { grid-template-columns: minmax(0, 1fr); }
  .dates { max-width: 520px; }
}
@media (max-width: 760px) {
  .top-nav { display: none; }
  .top-in { min-height: 60px; }
  .brand-name { font-size: 1.0625rem; }
}
@media (max-width: 600px) {
  body { font-size: 1.0625rem; }
  .hero { padding-top: 22px; }
  .kicker { margin-bottom: 14px; }
  .count { font-size: 1.75rem; }
  .count-n { font-size: 5.5rem; }
  .count-sub { margin-top: 12px; font-size: 1.0625rem; }
  .legend { flex-direction: column; gap: 8px; }
  .lede { margin-bottom: 22px; }
  .hero-give .btn, #itk-form .btn, .form-foot .btn, .lt-body .btn { width: 100%; justify-self: stretch; }
  .row-2 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .checks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .spots { max-width: none; text-align: left; }
  .panel { padding: 24px 20px; }
  .foot-in { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ramadan Hub extras (SHKA-048): the photo band, the suhoor board, and small optional lines.
   build.mjs appends this file only for masjids that use one of them, so every other page's
   hub.css stays exactly as it was. Same shape lock and tokens as hub.css. */

/* ---------- photo band: one of the masjid's own photos, under a contrast-checked scrim ----------
   Text never sits above the point where .photo-cap's gradient reaches --scrim (set by build.mjs at
   the checked minimum), so white text holds 4.5:1 whatever the photo shows behind it. */
.photo-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 34vw, 470px);
  overflow: hidden;
  background: var(--band);
}
.photo-band img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-mid) 55%, var(--scrim-mid) 100%);
}
.photo-cap {
  width: 100%;
  padding: 96px 0 clamp(26px, 3.6vw, 44px);
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0, var(--scrim) 80px, var(--scrim-low) 100%);
  color: #ffffff;
}
.photo-kicker {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.photo-name {
  max-width: 18ch;
  font-family: var(--display);
  font-size: clamp(2.25rem, 5.6vw, 4.75rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.photo-band + .hero { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- small optional lines ---------- */
.wall-note { margin: -4px 0 12px; color: var(--muted); font-size: 0.9375rem; }
.price-half { margin-top: 8px; font-weight: 700; }
.price-half-n {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.lt-body .lt-for {
  max-width: 24ch;
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- suhoor board ----------
   The same four states as the iftar wall, as cards with their own sponsor button. A card is two
   equal rows (night and state on top, the button below), so the half fill sits under the button only. */
.suhoor { padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.suhoor-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 9fr);
  column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: 28px;
  align-items: start;
}
.suhoor-head h2 { margin-bottom: 14px; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; }
.suhoor-note { max-width: 36ch; }
.suhoor-price { margin-top: 12px; font-weight: 700; }
.suhoor-count { margin-top: 14px; color: var(--muted); font-size: 1rem; font-weight: 700; }
.suhoor-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.snight { min-width: 0; }
.s-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  min-height: 212px;
  padding: 14px;
  overflow: hidden;
  border: 2px solid var(--edge);
  border-radius: var(--r-tile);
  background: var(--paper);
  color: var(--ink);
}
.s-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.snight[data-state="half"] .s-card::before { transform: scaleY(0.5); }
.snight[data-state="sponsored"] .s-card::before { transform: scaleY(1); }
.snight[data-state="half"] .s-card,
.snight[data-state="sponsored"] .s-card { border-color: var(--brand); }
.snight[data-state="sponsored"] .s-card { color: var(--on-brand); }
.snight[data-state="reserved"] .s-card {
  border-style: dashed;
  background: repeating-linear-gradient(135deg, var(--reserved-bar) 0 6px, var(--paper) 6px 12px);
}
.s-top { align-self: start; }
.s-n {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.s-w {
  display: block;
  margin-bottom: 3px;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
}
.s-s { display: block; margin-top: 8px; font-size: 0.875rem; font-weight: 700; }
.snight[data-state="open"] .s-s,
.snight[data-state="half"] .s-s { color: var(--muted); }
.snight[data-state="reserved"] .s-s { color: var(--ink); }
.snight[data-state="sponsored"] .s-s::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.38em;
  margin: 0 0.45em 0.18em 0.05em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.s-btn {
  align-self: end;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  font-size: 0.9375rem;
}

@media (max-width: 960px) {
  .suhoor-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .photo-band { min-height: 240px; }
  .photo-cap { padding-top: 88px; }
  .suhoor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .s-card { min-height: 180px; padding: 12px; }
}