/* ============================================================================
   sponsor.html: which surfaces are glass.

   The recipe lives in glass.css, which must be loaded before this. This file
   only decides what becomes a pane on this page and keeps each panel's colour
   identity. Remove the one <link> and the page returns to what it was.
   ========================================================================= */

/* The contact section shipped with an opaque inline background. The inline style is gone from the
   HTML now; this keeps the band readable as a faint depth change instead. */
#sponsor-contact {
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-elevated) 55%, transparent) 22%, transparent) !important;
}

/* ---------- 2. The glass itself -------------------------------------------
   .spg-pane is the shared look. Panels opt in by selector below rather than by
   class, so no HTML has to change and nothing breaks if a block is removed. */
.spx-reach,
.sp-give,
.sp-claim,
.spx-wall,
.sp-card,
.community-panel,
.spx-q,
.spx-tier,
.sp-method,
.sp-modal {
  background: var(--g-grain), var(--g-sheen), var(--g-fill) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow:
    inset 0  1px 0 var(--g-rim),
    inset 0 -1px 0 var(--g-rim-lo),
    var(--g-cast);
}

/* Nested panes sit on top of a pane that is already blurred, so they stay
   lighter. Blurring a second time just muddies what is underneath. */
.sp-method,
.spx-q,
.sp-claim-file {
  background: var(--g-grain), var(--g-sheen), var(--g-fill-2) !important;
  -webkit-backdrop-filter: var(--g-blur-s);
  backdrop-filter: var(--g-blur-s);
}

/* The lit top edge. A real sheet of glass catches light along its upper
   border and loses it toward the middle, which a flat 1px border cannot do. */
.spx-reach, .sp-give, .sp-claim, .spx-wall, .sp-card, .community-panel { position: relative; isolation: isolate; }
.spx-reach::after, .sp-give::after, .sp-claim::after,
.spx-wall::after, .sp-card::after, .community-panel::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; z-index: 2;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
/* The globe panel keeps its night sky, because the globe is drawn for a dark
   backdrop and reads as a hole punched through the page. Glass edge, own sky. */
.spx-reach {
  background:
    var(--g-sheen),
    var(--g-grain),
    radial-gradient(80% 120% at 0% 0%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(217,70,239,.16), transparent 60%),
    rgba(5, 13, 36, .68) !important;
}

/* Keep each panel's colour identity as a tint laid over the glass, not as a
   solid fill. Gold for giving, pink for the wall, green for organisations. */
.sp-give    { border-color: color-mix(in srgb, var(--gold) 34%, var(--g-edge)); }
.sp-claim   { border-color: color-mix(in srgb, var(--gold) 30%, var(--g-edge)); }
.spx-wall   { border-color: color-mix(in srgb, #ec4899 28%, var(--g-edge)); }
.sp-give::before, .sp-claim::before, .spx-wall::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: .9;
}
.sp-give::before  { background: radial-gradient(60% 70% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
                                radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.sp-claim::before { background: radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 70%); }
.spx-wall::before { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, #ec4899 15%, transparent), transparent 70%); }

/* ---------- 3. Liquid: a slow light moving under the surface ---------------
   Only on the three largest panes. On a card the size of a pill it is noise. */
.spx-reach, .sp-give, .spx-wall { overflow: hidden; }
.sp-give > .spg-caustic, .spx-wall > .spg-caustic { display: none; }
.sp-give, .spx-wall, .spx-reach { background-attachment: local; }
.sp-give::before, .spx-wall::before {
  animation: spgFloat 18s ease-in-out infinite alternate;
}
@keyframes spgFloat {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d( 1.5%,  1%, 0) scale(1.12); }
}

/* ---------- 4. Small parts: lit, translucent, not blurred ------------------ */
.sp-who li,
.spx-top li,
.spx-sh,
.sp-copy,
.spx-cur,
.spx-chip,
.spx-tier-ic,
.sp-tag {
  background: var(--g-sheen), var(--g-fill-2);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
}
/* A flex item is blockified, so inline-flex did not stop these stretching: the "For Everyone" tag ran
   the full width of its column as a bar rather than sitting there as a pill. Long standing, not new. */
.sp-tag, .sp-give .sp-tag, .sp-card .sp-tag { align-self: flex-start; width: -moz-fit-content; width: fit-content; }

/* These three carry their own colour and must keep it. */
.sp-tag       { background: var(--g-sheen), color-mix(in srgb, var(--accent-2) 14%, var(--g-fill-2)); border-color: color-mix(in srgb, var(--accent-2) 30%, var(--g-edge)); }
.sp-tag-gold  { background: var(--g-sheen), color-mix(in srgb, var(--gold) 16%, var(--g-fill-2)); border-color: color-mix(in srgb, var(--gold) 40%, var(--g-edge)); }
.sp-org .sp-tag { background: var(--g-sheen), color-mix(in srgb, #10b981 14%, var(--g-fill-2)); border-color: color-mix(in srgb, #10b981 32%, var(--g-edge)); }
.spx-tier-ic  { background: radial-gradient(circle at 32% 28%, #fff7c2, #f5b82e 50%, #c2780a); border: 0; }
.spx-chip     { background: var(--g-sheen), color-mix(in srgb, var(--gold) 14%, var(--g-fill)); border-color: color-mix(in srgb, var(--gold) 38%, var(--g-edge)); }

/* Inputs read as recessed glass: darker than the pane, same lit top edge. */
.sp-claim-form input, .sp-claim-form select, .sp-claim-form textarea,
.sp-field input, .sp-field select, .sp-field textarea,
.spx-gift input {
  background: color-mix(in srgb, var(--g-fill) 70%, transparent) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sp-claim-form input:focus, .sp-claim-form select:focus, .sp-claim-form textarea:focus,
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
  border-color: color-mix(in srgb, var(--accent-2) 70%, transparent) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

/* Hover: the pane lifts and its edge catches more light. */
.spx-tier, .sp-card, .spx-q, .spx-sh, .sp-method {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.spx-tier:hover, .sp-card:hover {
  border-color: color-mix(in srgb, #fff 26%, var(--g-edge));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 var(--g-rim-lo),
              0 40px 84px -44px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
}

/* ---------- 5. Text: one row where it fits, two where it does not ----------
   The brief was literal. balance splits a heading into even halves instead of
   leaving one word stranded on its own line, and pretty does the same for the
   last line of a paragraph. Where a string is short and the box is now wide
   enough to hold it, nowrap keeps it honest on a single row. */
.page-header h1,
.section-head h2,
.spx-reach h2,
.sp-give h3, .sp-card h3, .sp-claim h3,
.spx-wall-head h3, .spx-gift-head h3, .spx-faq h3,
.spx-q summary,
.spx-empty strong,
.sp-thanks strong {
  text-wrap: balance;
}
.page-header .lede,
.section-head > p,
.spx-reach-lead,
.sp-give-intro > p,
.sp-claim-intro p,
.spx-wall-head p,
.sp-card > p,
.spx-a p,
.sp-list li,
.spx-tier > span:not(.spx-tier-ic),
.sp-claim-steps li {
  text-wrap: pretty;
}

/* Single row, because each of these is short and the box now has the width.
   Guarded at 1240px and up, which is the same point the page goes full width,
   so a narrow window is still free to wrap rather than overflow. */
@media (min-width: 1240px) {
  .spx-gift-head h3,
  .spx-wall-head h3,
  .spx-faq h3,
  .sp-method-head strong,
  .sp-method-head span,
  .spx-wall-stats span,
  .spx-reach-nums span,
  .sp-rows dt,
  .spx-empty strong,
  .spx-live,
  .sp-tag { white-space: nowrap; }
  /* Two balanced rows for the card titles, which are the longest short strings
     on the page and look wrong broken after a single word. */
  .sp-card h3, .sp-give h3 { text-wrap: balance; }
}

/* An account number, a Cashtag and an email are each one unbroken token to a
   reader. Breaking them mid string is worse than letting the row scroll. */
.sp-acct, .sp-rows dd > strong:not(.sp-wrap) { white-space: nowrap; }

/* ---------- 6. When glass is the wrong answer -----------------------------
   Reduced transparency is an accessibility setting, not a preference: someone
   has told their system that translucent layers make text hard to read. Give
   them solid panes. Same for browsers with no backdrop-filter at all, where
   a translucent pane has nothing to separate it from the page behind. */
@media (prefers-reduced-transparency: reduce) {
  .spx-reach, .sp-give, .sp-claim, .spx-wall, .sp-card,
  .community-panel, .spx-q, .spx-tier, .sp-method, .sp-modal {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .spx-reach, .sp-give, .sp-claim, .spx-wall, .sp-card,
  .community-panel, .spx-q, .spx-tier, .sp-method, .sp-modal { background: var(--surface) !important; }
  .spx-reach { background: #050d24 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-give::before, .spx-wall::before { animation: none; }
}


/* ---------- 7. Individual Giving at full width ----------------------------
   Stacking the two payment methods in a narrow right column left roughly 230px
   of dead space beside them, because the left column runs out of content long
   before the right one does. At full width the card has room to put all three
   blocks on one line instead.
   display: contents dissolves the .sp-pay wrapper so its two methods become
   grid items of the card itself. The alternative was a nested grid, which
   cannot line its rows up with the column next to it. */
@media (min-width: 1240px) {
  .sp-give { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .sp-pay { display: contents; }
  .sp-give-intro { align-self: stretch; }
  /* The methods are their own columns now, so each one carries its own floor
     and the thank-you note no longer has to stretch to meet them. */
  .sp-give-intro .sp-thanks { margin-top: auto; }
}
/* The QR sits beside the Zelle and Cash App rows. In a third-width column that
   leaves too little for an email address, so it drops under them and centres. */
@media (min-width: 1240px) and (max-width: 1699px) {
  .sp-us-body { flex-direction: column; align-items: stretch; gap: 14px; }
  .sp-us-body .sp-qr { align-self: center; }
}