/* ==========================================================================
   PAGE: Donate / Checkout — composition only.
   ========================================================================== */

.p-donate { padding-block: var(--sp-6) var(--sp-8); }

/* Stepper — numbered markers are permitted here: this is a genuine sequence. */
.c-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block-end: var(--sp-6);
  overflow-x: auto;
  scrollbar-width: none;
}

.c-stepper::-webkit-scrollbar { display: none; }

.c-stepper__step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.c-stepper__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-line-strong);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.c-stepper__step[aria-current="step"] { color: var(--c-ink); }

.c-stepper__step[aria-current="step"] .c-stepper__num,
.c-stepper__step[data-complete="true"] .c-stepper__num {
  background-color: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-text-inv);
}

.c-stepper__rule {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: 1px;
  background-color: var(--c-line);
}

/* Summary panel */
.c-summary {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}

.c-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}

.c-summary__row dt { color: var(--c-text-muted); }
.c-summary__row dd { font-variant-numeric: tabular-nums; text-align: end; }

.c-summary__total {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--c-line);
  font-family: var(--ff-utility);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.c-summary__impact {
  padding: var(--sp-3);
  background-color: var(--c-verdigris-05);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-verdigris-ink);
}

/* Payment method list — UPI first. */
.c-paymethods { display: grid; gap: var(--sp-2); }

.c-paymethod {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}

.c-paymethod:hover { border-color: var(--c-ink); }

.c-paymethod:has(:checked) {
  border-color: var(--c-ink);
  background-color: var(--surface-raised);
}

.c-paymethod__title { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.c-paymethod__note  { font-size: var(--fs-2xs); color: var(--c-text-muted); }

.c-paymethod__badge {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-verdigris-ink);
  background-color: var(--c-verdigris-05);
  padding: 0.2rem var(--sp-2);
  border-radius: var(--r-sm);
}

/* Mobile: the summary collapses to a sticky bottom bar. */
@media (max-width: 1023px) {
  .c-summary--sticky {
    position: sticky;
    inset-block-end: calc(var(--donatebar-h) + var(--sp-2));
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-2);
  }
}

/* ==========================================================================
   DONATE — PREMIUM LAYER
   --------------------------------------------------------------------------
   The flow was correct and unfurnished: an h1, a stepper, and four fieldsets
   of controls floating on the page ground beside a flat .c-summary. On the one
   page where a stranger is about to hand over money, "unfurnished" reads as
   "unfinished", and that is a conversion problem rather than a taste problem.

   What this adds, and nothing more:
     · a compact photographic masthead — SHORT on purpose, see below
     · the four steps on a paper panel, so the form is an object you work on
     · a summary that looks like a receipt rather than a sidebar
     · trust marks (80G, separate Zakat account, Razorpay) stated where the
       donor is deciding, not only in the footer

   What it deliberately does NOT add: reveal animations on the form. motion.js
   already excludes `form, .c-summary, .c-donate-widget` from auto-arming, and
   the comment there is right — wiping in a field delays the thing the visitor
   came to use. The masthead and the trust row animate; the controls appear
   instantly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COMPACT MASTHEAD
   --------------------------------------------------------------------------
   A full .c-pagehead--media is 16:9 and up to 92svh — on /donate/ that would
   push the amount chips below the fold on every laptop, which is the one thing
   this page must not do. So this is a short band: the photograph earns its
   place by being the reason to give, and it stops at ~15rem.
   -------------------------------------------------------------------------- */

.p-donate__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  /* The band matches the photograph's own ratio, so object-fit has nothing to cut
     and the WHOLE frame is visible — the signer, the register, the volunteer, the
     bundles and the queue.

     This is a deliberate reversal of two earlier attempts, both recorded because
     the reasoning matters. First the band was a 200px strip sized to keep the
     amount chips above the fold; that was measured against a 1000px viewport and
     was wrong, because a 1440x900 laptop has ~780px of viewport and the chips sit
     below the fold at any band height. Then it was a 260px strip with
     `object-position: center 66%`, which recovered the register but still cropped
     roughly half the picture away.

     Showing the whole frame costs vertical space — at 1100px wide the band is
     ~503px tall — and the honest trade is that the donor scrolls once to reach the
     amount chips. What is above the fold is the photograph, the three trust marks
     and the stepper, which is a reasonable thing to see first on a page asking for
     money. */
  aspect-ratio: 2000 / 914;
  border-radius: var(--r-xl);
  background-color: var(--surface-invert);
  color: var(--c-text-inv);
}

.p-donate__head-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.p-donate__head-media picture,
.p-donate__head-media img {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain`, not `cover`. The box already carries the image's ratio, so the two
     agree — but if the asset is ever replaced at a different ratio, `contain` fails
     visibly (letterboxing) rather than silently cropping someone out of frame. */
  object-fit: contain;
}

/* Left-weighted, not bottom-weighted. The type sits at the left edge, so a
   bottom-up gradient would darken the picture where nothing is written and leave
   the words on the brightest part. */
.p-donate__head-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Lightened across the picture side after the asset itself was brightened
     (+1.4 exposure, mean luminance 14 → 25, in family with hero-home at 21). The
     type side stays heavy because that is what the h1 sits on; the right half
     drops from 0.52/0.22 to 0.34/0.08 so the distribution is actually visible
     rather than implied. Re-swept after the change — figures in §14. */
  background:
    linear-gradient(100deg, rgb(14 19 48 / 0.94) 0%, rgb(14 19 48 / 0.86) 34%, rgb(14 19 48 / 0.48) 62%, rgb(14 19 48 / 0.14) 100%);
}

.p-donate__head-inner {
  display: grid;
  gap: var(--sp-3);
  padding: 0 clamp(var(--sp-5), 4vw, var(--sp-7)) clamp(var(--sp-5), 3vw, var(--sp-6));
  max-width: 46rem;
}

.p-donate__head-inner h1 {
  color: var(--c-text-inv);
  font-size: var(--fs-3xl);
}

.p-donate__head-lede {
  font-size: var(--fs-lg);
  color: var(--c-text-muted-inv);
}

/* --------------------------------------------------------------------------
   NARROW SCREENS — image above, words below
   --------------------------------------------------------------------------
   Under 720px the band is only ~340px wide, so a 2.188:1 frame is ~155px tall —
   not enough to hold a 40px h1 and a two-line lede over the top of it, and any
   overlay would sit on the signer's face. So the two stop overlapping: the whole
   photograph on top, the words beneath on the ink ground the card already has.
   Nothing is cropped and nothing is illegible.
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .p-donate__head {
    display: block;
    aspect-ratio: auto;
  }

  .p-donate__head-media {
    position: static;
    aspect-ratio: 2000 / 914;
  }

  .p-donate__head-scrim { display: none; }

  .p-donate__head-inner {
    max-width: none;
    padding: var(--sp-5);
  }

  .p-donate__head-inner h1 { font-size: var(--fs-2xl); }
}

/* --------------------------------------------------------------------------
   TRUST ROW — the three facts a first-time donor checks
   --------------------------------------------------------------------------
   All three already exist on the page: 80G is step 3, the separate Zakat
   account is a field hint, Razorpay is the caption under the pay button. Stating
   them before the form rather than inside it is the whole change.
   -------------------------------------------------------------------------- */

.p-donate__trust {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

@media (min-width: 720px) {
  .p-donate__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.p-donate__trust li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  color: var(--c-text-muted);
}

.p-donate__trust svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-verdigris-ink);
}

.p-donate__trust strong {
  display: block;
  color: var(--c-ink);
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------------------
   FORM PANEL
   -------------------------------------------------------------------------- */

.p-donate__panel {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: linear-gradient(180deg, var(--c-white) 0%, var(--surface-raised) 46%, var(--surface-raised) 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

/* White fields and chips on a raised panel — form.css's ladder starts at
   --c-line-strong on a --surface-page ground, and on this panel that step
   disappears. */
.p-donate__panel .c-input,
.p-donate__panel .c-textarea,
.p-donate__panel .c-select__input,
.p-donate__panel .c-input-group,
.p-donate__panel .c-amount,
.p-donate__panel .c-chip:not([aria-pressed="true"]):not(.is-selected) {
  background-color: var(--c-white);
}

.p-donate__panel .c-input:focus,
.p-donate__panel .c-textarea:focus,
.p-donate__panel .c-select__input:focus {
  box-shadow: 0 0 0 3px var(--c-verdigris-05);
}

/* The amount chips are the primary control on the page and were the same
   height as a text input. Given room they read as choices. */
.p-donate__panel .c-chip {
  min-height: 52px;
  font-size: var(--fs-base);
}

.p-donate__panel .c-chip:hover {
  border-color: var(--c-verdigris);
  box-shadow: var(--shadow-1);
}

.p-donate__panel .c-amount__input { min-height: 52px; }

/* Step heading — the flow's own signpost, so it gets display type. */
.p-donate__step-title {
  font-family: var(--ff-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

/* --------------------------------------------------------------------------
   SUMMARY — a receipt, not a sidebar
   -------------------------------------------------------------------------- */

.c-summary--receipt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: var(--sp-4);
  padding: clamp(var(--sp-5), 2vw, var(--sp-6));
  background:
    radial-gradient(120% 80% at 100% 0%, var(--c-white) 0%, rgb(255 255 255 / 0) 58%),
    linear-gradient(168deg, var(--surface-raised) 0%, var(--c-verdigris-05) 100%);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.c-summary--receipt::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-verdigris) 0%, var(--c-verdigris) 45%, var(--c-marigold) 100%);
  z-index: 2;
}

.c-summary--receipt .c-summary__total {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tr-tight);
  align-items: baseline;
}

.c-summary--receipt .c-summary__total > span:first-child {
  font-family: var(--ff-utility);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* The impact line is the answer to "what does this actually do", so it stops
   being a tinted note and becomes a bordered statement. */
.c-summary--receipt .c-summary__impact {
  padding: var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-weight: var(--fw-medium);
}

.c-summary--receipt .c-summary__impact:empty { display: none; }

.p-donate__secure {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--c-line);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--c-text-muted);
}

.p-donate__secure svg { flex: none; width: 0.875rem; height: 0.875rem; margin-block-start: 2px; }