/*
  UPI QR donation block. Same component on both pages.

  Compact two-column on desktop: copy + live figure + action on the left, QR card
  on the right. Height is content-driven — there is no min-height and no fixed
  height anywhere in this file, which is what previously left a tall empty column
  beside an isolated QR poster.

  On a phone it stacks, and the component puts the CTA before the QR because a
  phone cannot scan a QR on its own screen.
*/
.donate-qr {
  padding: clamp(40px, 5vw, 68px) 0;
  background: var(--background, #fff9f6);
}
.donate-qr__inner {
  display: grid;
  gap: clamp(24px, 3.5vw, 48px);
  width: min(var(--content-max-width, 1380px), calc(100% - 40px));
  margin: 0 auto;
  align-items: center;
}

/* Two columns once there is room for a scannable QR beside real copy. Below
   this the columns would both be too narrow to be useful, so it stays stacked. */
@media (min-width: 900px) {
  .donate-qr__inner { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
}

/* ---------- Left column ---------- */
.donate-qr__main { min-width: 0; }
.donate-qr__eyebrow {
  margin: 0;
  color: var(--primary, #b5475a);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.donate-qr__title {
  margin: 12px 0 0;
  color: var(--text, #202936);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.donate-qr__intro {
  max-width: 48ch;
  margin: 12px 0 0;
  color: var(--text-secondary, #667085);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---------- Message + action ---------- */
.donate-qr__emphasis {
  max-width: 46ch;
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  color: var(--text, #202936);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.4;
}
.donate-qr__scan {
  max-width: 46ch;
  margin: 8px 0 0;
  color: var(--text-secondary, #667085);
  font-size: 14px;
  line-height: 1.6;
}
.donate-qr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 22px);
}
.donate-qr__cta { min-height: 52px; padding-inline: 26px; }
.donate-qr__intent { min-height: 52px; padding-inline: 22px; }
.donate-qr__trust {
  margin: 12px 0 0;
  color: var(--text-secondary, #667085);
  font-size: 11.5px;
}

/* ---------- QR card ---------- */
.donate-qr__card {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
  padding: clamp(14px, 1.6vw, 18px);
  border: 1px solid var(--border, #e9e2de);
  border-radius: var(--card-radius, 18px);
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgba(120, 50, 64, .08);
}
/*
  `contain`, never `cover`: the QR must not lose a module to a crop, and the
  white quiet zone around it is part of what makes it scannable. The intrinsic
  ratio is preserved, so the card is exactly as tall as the image needs.
*/
.donate-qr__image {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  /* A QR must stay crisp; never let a browser smooth it. */
  image-rendering: -webkit-optimize-contrast;
}
.donate-qr__payee {
  display: grid;
  gap: 3px;
  margin: 0;
  max-width: 34ch;
  text-align: center;
}
.donate-qr__payee-label {
  color: var(--text-secondary, #667085);
  font-size: 11px;
  font-weight: 600;
}
.donate-qr__payee-name {
  color: var(--text, #202936);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.donate-qr__payee-note {
  margin-top: 2px;
  color: var(--text-secondary, #667085);
  font-size: 10.5px;
  line-height: 1.5;
}
.donate-qr__download {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--border, #e9e2de);
  border-radius: 9px;
  color: var(--text-secondary, #667085);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
}
.donate-qr__download:hover { border-color: var(--primary, #b5475a); color: var(--primary, #b5475a); }

/* ---------- Stacked ---------- */
@media (max-width: 899px) {
  /*
    The Assam page insets every <main> section by 20px, the homepage does not.
    Left alone, this component's own gutter stacked on top of that and the same
    block sat at 36px from the edge on one page and 16px on the other. The
    inherited inset is neutralised so both pages land on the same gutter.
  */
  .donate-qr {
    width: auto;
    margin-inline: 0;
    padding-inline: clamp(16px, 4vw, 24px);
  }
  .donate-qr__inner { width: 100%; }
  /* The component already emits the CTA before the QR in source order, so the
     stacked view needs no reordering: copy, figure, action, then the QR. */
  .donate-qr__card { justify-self: stretch; }
  .donate-qr__image { max-width: 340px; }
}

@media (max-width: 480px) {
  .donate-qr__inner { gap: 20px; }
  .donate-qr__image { max-width: 100%; }
  .donate-qr__actions { display: grid; }
  .donate-qr__cta, .donate-qr__intent { width: 100%; }
}