/* ============================================================
   pages.css — page-specific layouts (home sections, FAQs,
   placeholder, page headers).
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   Shared section scaffolding
   ────────────────────────────────────────────────────────── */
.section {
  padding: var(--space-16) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--space-20) 0; }
}

.section__inner { width: 100%; }
.section__inner--narrow { max-width: 760px; margin: 0 auto; }
.section__inner--centered { text-align: center; }

.section__header {
  margin-bottom: var(--space-10);
}
.section__header--centered {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.15;
}

.section__subtitle,
.section__lead {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Sub-heading inside a section — the group headings on /donate (h3, under
   the h2 .section__title) and on a category page (h2, under the h1). Sized
   explicitly so both tags render alike: below .section__title, whose
   smallest size is 1.75rem, and above .donation-card__title at 1.35rem.

   Space BELOW equals the grid gap (--space-6), so the heading reads as the
   first row of its own grid. Space ABOVE is twice that (--space-12), so it
   belongs to what follows rather than floating between two grids — and it
   applies only after a grid: the first heading in a section already sits
   under .section__header's --space-10 on /donate, or under the section
   padding on a category page, and a blanket margin-top would double it. */
.section__group-heading {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 var(--space-6);
}
.donation-grid + .section__group-heading {
  margin-top: var(--space-12);
}
.section__lead {
  font-size: 1.15rem;
  margin-bottom: var(--space-4);
}

.section__footer {
  margin-top: var(--space-10);
  text-align: center;
}

/* ──────────────────────────────────────────────────────────
   HOME — Why Us grid
   (the listing-style grid further down is the sole catalog section)
   ────────────────────────────────────────────────────────── */
.section--why {
  background: var(--color-bg);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

/* ──────────────────────────────────────────────────────────
   TRUST BAR — neutral elevated surface in both themes
   ────────────────────────────────────────────────────────── */
.trust-bar {
  background: var(--color-surface-cool);
  color: var(--color-text);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  text-align: center;
}
@media (min-width: 768px) {
  .trust-bar__inner { grid-template-columns: repeat(4, 1fr); }
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.trust-bar__item strong {
  font-family: var(--font-heading);
  /* ⚠️ --color-accent on --color-surface-cool measures 4.48:1 in light mode,
     just under AA's 4.5 for normal text. It passes because 1.5rem at weight
     600 is WCAG "large text", whose threshold is 3:1. If this font-size is
     ever reduced, the pairing drops below AA — switch to --color-primary
     (5.75:1) rather than shrinking the type. */
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
}
.trust-bar__item span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────
   PAGE HEADER (basket, checkout)
   ────────────────────────────────────────────────────────── */
.section--page-header {
  padding: var(--space-16) 0 var(--space-10);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
/* No margin-top here on purpose: basket and checkout share this class and
   have no ornament above the title (checkout has a back link there instead).
   The gap belongs to the ornament-title pairing, and lives beside the
   ornament's own rule in components.css. */
.page-header__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}
.page-header__subtitle {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────
   FAQs
   ────────────────────────────────────────────────────────── */
.section--faqs {
  padding-top: var(--space-12);
  background: var(--color-surface-cool);
  border-top: 1px solid var(--color-border);
}

/* ──────────────────────────────────────────────────────────
   PLACEHOLDER (coming soon)
   ────────────────────────────────────────────────────────── */
.section--placeholder {
  padding: var(--space-20) 0;
  background: var(--color-bg);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.placeholder__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  margin: 0 auto var(--space-6);
}
.section--placeholder .section__lead { margin-bottom: var(--space-8); }

.section--donation-listing {
  background: var(--color-bg);
  padding: var(--space-16) 0 var(--space-20);
  /* Each category section carries id="{category-slug}", so /donate#basic-needs
     is a real target. The header is position:sticky, so without this a jump
     lands the heading underneath it. Targeting the class rather than listing
     ids means adding a category needs no CSS change.

     72px header + 1px border = 73px occupied; --space-6 leaves 23px of
     breathing room. The rule this replaces used --space-16 (136px total,
     63px of slack) — tuned for the inherited landing page, not this header. */
  scroll-margin-top: calc(var(--site-header-height) + var(--space-6));
}

.donation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px)  { .donation-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .donation-grid { grid-template-columns: repeat(3, 1fr); } }

.donation-card--listing .donation-card__image-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.donation-card--listing .donation-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.donation-card--listing .donation-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.donation-card--listing:hover .donation-card__image img { transform: scale(1.03); }
/* No picture: the detail page's gradient-and-watermark treatment at card
   proportions. The watermark is .home-hero__watermark, whose offsets are sized
   for a full-width hero; a ~380px card needs them pulled in so the logo still
   sits in the corner rather than mostly outside the box. The card's own hover
   rule above targets .donation-card__image img, which would scale the
   watermark too — pinned back here. */
.donation-card--listing .donation-card__image--placeholder {
  position: relative;
  background-image: linear-gradient(140deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
}
.donation-card--listing .donation-card__image--placeholder .home-hero__watermark {
  right: calc(-1 * var(--space-6));
  bottom: calc(-1 * var(--space-6));
  width: 220px;
  max-width: 60%;
}
.donation-card--listing:hover .donation-card__image--placeholder img { transform: none; }

.donation-card--listing .donation-card__cta {
  margin-top: var(--space-4);
  align-self: flex-start;
}

/* ──────────────────────────────────────────────────────────
   DONATION ITEM DETAIL PAGE
   ────────────────────────────────────────────────────────── */
.section--donation-detail {
  padding: var(--space-10) 0 var(--space-20);
  background: var(--color-bg);
}

.donation-detail__breadcrumb {
  margin-bottom: var(--space-6);
  font-size: 0.9rem;
}
.donation-detail__breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.donation-detail__breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.donation-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .donation-detail__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
  }
}

.donation-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Mobile IA: image → purchase → description.
   Dissolve .donation-detail__main so its children become direct grid
   children of .donation-detail__grid, then reorder with `order`.
   Desktop (>= 1024px) keeps the two-column layout untouched.

   ⚠ The wrapper selector here must be the SAME name the view renders.
   From the fork until #3.4 this block said .donation-detail__left while
   donate-item.php rendered .donation-detail__main, so `display: contents`
   never fired, the children never became grid children, and `order` had
   nothing to act on. The page shipped image → description → purchase and
   this comment described a layout the site had never had. */
@media (max-width: 1023.98px) {
  .donation-detail__main { display: contents; }
  .donation-detail__image       { order: 1; }
  .donation-detail__purchase    { order: 2; }
  .donation-detail__main .donation-detail__prose { order: 3; }
}
.donation-detail__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.donation-detail__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No photograph yet (#2C converts them): the home hero's gradient-and-
   watermark treatment in the image slot, so the gap reads as deliberate.
   The view reuses .home-hero__watermark inside, which needs this box to be
   the positioning context. */
.donation-detail__image--placeholder {
  position: relative;
  background-image: linear-gradient(140deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
}

.donation-detail__purchase {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  .donation-detail__purchase {
    position: sticky;
    top: var(--space-6);
    padding: var(--space-8);
  }
}

.donation-detail__eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}
.donation-detail__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
}
.donation-detail__tagline {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.donation-price {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-6);
}
/* The unit qualifier ("per Qur'an") under the figure. Without this it inherits
   the headline size above. */
.donation-price__note {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.donation-form { margin-top: var(--space-4); }
.donation-form__submit {
  width: 100%;
  margin-top: var(--space-4);
}
.form-field--quantity { align-items: flex-start; }

/* ──────────────────────────────────────────────────────────
   BASKET PAGE (/basket)
   ────────────────────────────────────────────────────────── */
.section--basket {
  padding: var(--space-10) 0 var(--space-20);
  background: var(--color-bg);
}

.basket-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.basket-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}
.basket-empty__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.basket-empty__body {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--space-6);
  max-width: 440px;
}

.basket-lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.basket-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .basket-line {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
  }
}
.basket-line__body { flex: 1; min-width: 0; }
.basket-line__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.basket-line__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}
.basket-line__meta-row {
  display: flex;
  gap: var(--space-2);
  margin: 0;
}
.basket-line__meta-row dt {
  flex-shrink: 0;
  min-width: 96px;
  font-weight: 500;
  color: var(--color-text);
}
.basket-line__meta-row dd {
  flex: 1;
  margin: 0;
  color: var(--color-text-muted);
}
.basket-line__dedication {
  white-space: pre-line;
}

.basket-line__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .basket-line__aside {
    align-items: flex-end;
    padding-top: 0;
    border-top: none;
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-5);
    min-width: 160px;
  }
}
.basket-line__total {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.basket-line__total-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.basket-line__total-amount {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
}

.basket-line__remove-form { margin: 0; }
.basket-line__remove-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.basket-line__remove-btn:hover {
  color: var(--color-error);
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.basket-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.basket-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.basket-summary__label {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.basket-summary__amount {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-primary);
}
.basket-summary__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.basket-summary__continue {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.basket-summary__continue:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   CHECKOUT PAGE (/checkout)
   ────────────────────────────────────────────────────────── */
.section--checkout {
  padding: var(--space-10) 0 var(--space-20);
  background: var(--color-bg);
}

.checkout__back {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.checkout__back:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1fr 360px;
    gap: var(--space-10);
  }
}

.checkout-form {
  order: 2;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  .checkout-form {
    order: 1;
    padding: var(--space-8);
  }
}

.checkout-form__section-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.checkout-form__submit {
  margin-top: var(--space-4);
}

.checkout-summary {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1024px) {
  .checkout-summary {
    order: 2;
    position: sticky;
    top: var(--space-6);
  }
}
.checkout-summary__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.checkout-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checkout-summary__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.9rem;
}
.checkout-summary__item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.checkout-summary__item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.checkout-summary__item-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.checkout-summary__dedication {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  word-break: break-word;
}
.checkout-summary__item-total {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.checkout-summary__divider {
  height: 1px;
  background: var(--color-border);
}
.checkout-summary__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.checkout-summary__total-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.checkout-summary__total-amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
}
.checkout-summary__footnote {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Payment page ─────────────────────────────────── */
.payment-page {
  padding: var(--space-8) var(--space-4);
}
.payment-page__container {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.payment-page__header {
  text-align: center;
}
.payment-page__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.payment-page__group-id {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}
.payment-page__group-id-value {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--color-text);
  user-select: all;
}

/* Payment summary — mirrors checkout summary pattern */
.payment-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.payment-summary__heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.payment-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.payment-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}
.payment-summary__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.payment-summary__item-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.payment-summary__item-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.payment-summary__dedication {
  display: block;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  word-break: break-word;
}
.payment-summary__item-total {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.payment-summary__divider {
  height: 1px;
  background: var(--color-border);
}
.payment-summary__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.payment-summary__total-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.payment-summary__total-amount {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* GCash card */
.gcash-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.gcash-card__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.gcash-card__qr {
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: inline-block;
}
.gcash-card__qr-img {
  display: block;
  max-width: 100%;
  height: auto;
}
.gcash-card__detail {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}
.gcash-card__detail-value {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--color-text);
}
.gcash-card__detail-value--name {
  font-family: var(--font-body);
}
.gcash-card__amount {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
}

.gcash-card__reference {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
}
.gcash-card__reference-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  max-width: 34ch;
}

/* Bank transfer — secondary, collapsed by default so it never competes
   with GCash. Contents arrive in a later prompt. */
.bank-transfer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
}
.bank-transfer__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}
.bank-transfer__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.bank-transfer__body {
  margin-top: var(--space-3);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.payment-proof-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
}
/* `color` is re-declared here, and it is not redundant. This element is an
   <a>, so base.css's `a:hover, a:focus-visible` is in the cascade at (0,1,1)
   — one element, one pseudo-class — which beats .payment-proof-cta at (0,1,0).
   Omit `color` from this rule and the LABEL takes the site's link colour while
   the BACKGROUND takes the accent hover: 1.24:1 in light and 1.04:1 in dark,
   unreadable in both. Declaring it here at (0,2,0) wins outright.
   Focus shares the rule because a keyboard user meets the same failure. */
.payment-proof-cta:hover,
.payment-proof-cta:focus-visible {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  text-decoration: none;
}
.payment-confirmation__pending {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Confirmation block */
.payment-confirmation {
  background: var(--color-surface-cool, var(--color-surface-elevated));
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.payment-confirmation__heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.payment-confirmation__body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* WhatsApp CTA button */
.payment-whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--color-whatsapp);
  color: var(--color-on-primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease;
}
.payment-whatsapp-cta:hover,
.payment-whatsapp-cta:focus,
.payment-whatsapp-cta:focus-visible,
.payment-whatsapp-cta:active {
  background: color-mix(in srgb, var(--color-whatsapp) 88%, black);
  color: var(--color-on-primary);
  text-decoration: none;
}
.payment-whatsapp-cta svg {
  flex-shrink: 0;
}
.payment-whatsapp-cta__label {
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .payment-whatsapp-cta {
    font-size: 0.9rem;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    gap: var(--space-2);
  }
}

/* Footer / back link */
.payment-page__footer {
  text-align: center;
}
.payment-page__back {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.payment-page__back:hover {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .payment-page {
    padding: var(--space-12) var(--space-6);
  }
  .payment-page__title {
    font-size: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════
   Merged in from main-site.css, which loaded immediately after this
   file. Appended verbatim — no rule, selector, value or order
   changed — so the cascade is identical to the two-file version.
   ══════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────
   MAIN NAV — small refinements over the shared .site-nav.
   Keep overrides minimal; anything structural belongs in layout.css.
   ────────────────────────────────────────────────────────── */
.main-nav__external-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: currentColor;
  opacity: 0.65;
}

/* ──────────────────────────────────────────────────────────
   HOME — HERO
   ────────────────────────────────────────────────────────── */
.main-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--color-gold) 18%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 50%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
@media (min-width: 768px) { .main-hero { padding: var(--space-20) 0 var(--space-16); } }
@media (min-width: 1024px) { .main-hero { padding: var(--space-20) 0; min-height: 600px; display: flex; align-items: center; } }

.main-hero__inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.main-hero__eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
}

.main-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.main-hero__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0 auto var(--space-8);
  max-width: 560px;
}

.main-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-10);
}

/* ──────────────────────────────────────────────────────────
   HOME — MISSION BAND
   ────────────────────────────────────────────────────────── */
.mission-band {
  background: var(--color-surface-cool);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.mission-band__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 auto var(--space-3);
  max-width: 760px;
}
.mission-band__subtitle {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   HOME — ABOUT EXCERPT (2-col desktop / stacked mobile)
   ────────────────────────────────────────────────────────── */
.section--about-excerpt {
  padding: var(--space-16) 0;
  background: var(--color-bg);
}
@media (min-width: 768px) {
  .section--about-excerpt { padding: var(--space-20) 0; }
}

.about-excerpt__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1024px) {
  .about-excerpt__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

.about-excerpt__copy p {
  color: var(--color-text-muted);
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0 0 var(--space-4);
}

.about-excerpt__read-more {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.about-excerpt__read-more:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.about-excerpt__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.about-excerpt__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ──────────────────────────────────────────────────────────
   HOME — ACTIVITIES (4 cards)
   ────────────────────────────────────────────────────────── */
.section--activities {
  padding: var(--space-16) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .section--activities { padding: var(--space-20) 0; } }

.activities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (min-width: 640px)  { .activities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .activities-grid { grid-template-columns: repeat(3, 1fr); } }

.activity-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.activity-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.activity-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.activity-card:hover .activity-card__media img { transform: scale(1.03); }

.activity-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.activity-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.activity-card__desc {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.activity-card__cta {
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}
.activity-card__cta:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   MAIN PLACEHOLDER — used by about/teaching-quran/etc stubs
   ────────────────────────────────────────────────────────── */
.main-placeholder {
  padding: var(--space-20) 0;
  background: var(--color-bg);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.main-placeholder__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.main-placeholder__note {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 var(--space-6);
}

/* ──────────────────────────────────────────────────────────
   CONTACT CARDS — center-aligned channel cards (Prompt #10.1)
   Live inside .info-box-grid.--cols-3 for responsive 1/2/3-col layout.
   ────────────────────────────────────────────────────────── */
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  gap: var(--space-3);
  height: 100%;
}
.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.contact-card__icon svg {
  width: 24px;
  height: 24px;
}
.contact-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.contact-card__body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}
/* Push the CTA to the bottom of equal-height cards so grid rows align. */
.contact-card > .btn {
  margin-top: auto;
}

/* ──────────────────────────────────────────────────────────
   CONTACT MAP — responsive 16:9 iframe wrapper (Prompt #10.1)
   ────────────────────────────────────────────────────────── */
.contact-map-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.contact-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ──────────────────────────────────────────────────────────
   CONTACT SOCIAL BAR — centered Facebook + Instagram (Prompt #10.1)
   ────────────────────────────────────────────────────────── */
.contact-social-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.contact-social-bar__heading {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}
.contact-social-bar__icons {
  display: flex;
  gap: var(--space-3);
}
.contact-social-bar__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.contact-social-bar__link:hover,
.contact-social-bar__link:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.contact-social-bar__link svg {
  width: 20px;
  height: 20px;
}

/* ──────────────────────────────────────────────────────────
   NOT FOUND — CTA spacing under page-hero subtitle (Prompt #10.1)
   ────────────────────────────────────────────────────────── */
.not-found__actions {
  margin-top: var(--space-8);
}

/* ──────────────────────────────────────────────────────────
   LEGAL PAGES — Privacy / Terms (Prompt #11 Task 5)
   Prose-style legal content below .page-hero.
   ────────────────────────────────────────────────────────── */
.legal-page {
  padding: var(--space-12) 0 var(--space-16);
}
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
  line-height: 1.7;
  font-size: 1rem;
}
.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}
.legal-content h2:first-of-type {
  margin-top: var(--space-6);
}
.legal-content p {
  margin: 0 0 var(--space-4);
}
.legal-content ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}
.legal-content li {
  margin-bottom: var(--space-2);
}
.legal-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content__updated {
  margin-top: var(--space-8);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────
   HOME — PHOTO HERO

   The photograph is applied as a background-image layer, not an
   <img>, for two reasons: it is decorative (the heading carries the
   meaning), and a missing file simply fails to paint, revealing the
   gradient beneath instead of a broken-image icon.

   Layer order, top to bottom:
     1. the scrim            — always present, 66% -> 76%
     2. --home-hero-image    — set inline by the view, ONLY when the
                               file exists on disk
     3. the placeholder gradient — navy to deep teal, always present

   All three colours are theme-invariant on purpose; see the
   --color-hero-* block in variables.css.
   ────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: var(--space-16) 0;
  background-color: var(--color-hero-scrim);
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-hero-scrim) 66%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-scrim) 76%, transparent) 100%
    ),
    linear-gradient(140deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
/* The view adds this modifier only when images/home-hero.jpg exists, and
   supplies the URL as --home-hero-image. */
.home-hero--photo {
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-hero-scrim) 66%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-scrim) 76%, transparent) 100%
    ),
    var(--home-hero-image),
    linear-gradient(140deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
}
@media (min-width: 768px)  { .home-hero { min-height: 520px; padding: var(--space-20) 0; } }
@media (min-width: 1024px) { .home-hero { min-height: 600px; } }

/* The logo watermark only appears while there is no photograph, so the
   placeholder reads as a designed state rather than a gap. */
.home-hero__watermark {
  position: absolute;
  right: calc(-1 * var(--space-10));
  bottom: calc(-1 * var(--space-10));
  width: 340px;
  max-width: 55%;
  opacity: 0.08;
  pointer-events: none;
}
.home-hero__watermark img { display: block; width: 100%; height: auto; }

.home-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}
.home-hero__eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-on-primary);
  opacity: 0.85;
  margin: 0 0 var(--space-3);
  letter-spacing: 0.02em;
}
.home-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--color-on-primary);
  margin: 0 0 var(--space-4);
}
.home-hero__lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--color-on-primary);
  opacity: 0.92;
  margin: 0 auto var(--space-8);
  max-width: 580px;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
/* .btn--outline resting state is transparent, which over a dark hero needs
   the light treatment rather than the navy one. Scoped to the hero only. */
.home-hero .btn--outline {
  color: var(--color-on-primary);
  border-color: var(--color-on-primary);
}
.home-hero .btn--outline:hover {
  background: var(--color-on-primary);
  color: var(--color-hero-from);
  border-color: var(--color-on-primary);
}

/* ──────────────────────────────────────────────────────────
   HOME — DONATION CATEGORIES
   Cards are generated from DonationItemService, so the count is
   whatever the catalog holds. auto-fit means adding a fifth
   category needs no CSS change.
   ────────────────────────────────────────────────────────── */
.section--categories {
  padding: var(--space-16) 0;
  background: var(--color-bg);
}
@media (min-width: 768px) { .section--categories { padding: var(--space-20) 0; } }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-decor);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  border-left-color: var(--color-accent);
  text-decoration: none;
}
.category-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.category-card__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.category-card:hover .category-card__title { color: var(--color-accent); }
.category-card__blurb {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.category-card__cue {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-accent);
}

/* Single-column variant of the about excerpt, for when there is no
   photograph to sit beside the copy. */
.about-excerpt__grid--single {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 1024px) {
  .about-excerpt__grid--single { grid-template-columns: 1fr; }
}