/* ============================================================================
   PolioPlus giving band - SHARED by FundGuru.org and ClubGuru.org.

   Phase 4.5nx. Lifted out of css/style.css so the two sites cannot drift. The
   original 2026-08-01 handoff said "built so a ClubGuru.org variant can reuse it";
   this is that reuse, and copying the rules a second time would have made the
   sentence false within a week.

   ⚠️⚠️ LOADED BY BOTH index.html AND clubguru.html. Adding a rule here changes
   two live sites. Anything that is true of only ONE of them belongs behind the
   .polio-band--pinned modifier below, not in the base rules.

   ⭐ THE BAND HAS NO BACKGROUND OF ITS OWN. It carries --polio-bg, which each site
   sets to its own darkest token (FundGuru --green-900, ClubGuru --blue-900), so it
   is seamless with whatever sits above and below it. That is the whole design rule:
   no panel, no fill of its own, no border, no rounded corners, no top/bottom rules.
   The fallback exists only so a page that forgets to set it fails LOOKING LIKE
   FundGuru rather than failing transparent over a photograph.
   ============================================================================ */
.polio-band {
    background: var(--polio-bg, #022c22);
    color: #fff;
    position: relative;
    z-index: 10;
}
/* Phase 4.5nw - ⭐⭐ THE RIGHT COLUMN IS PINNED TO THE CHART'S WIDTH.
   It used to be repeat(auto-fit, minmax(340px, 1fr)) with a 56px gap, giving a ~540px right
   column with the figure centred in it - while the hero's chart, capped at 430px and pushed
   to the right edge, centred ~55px further over. The globe could therefore never sit under
   the chart, which is exactly what Bill marked.
   Pinning this column to 430px, ending on the same edge, puts both centres at
   (content right - 215px) BY CONSTRUCTION rather than by a magic offset that drifts.
   ⚠️ A fixed column cannot auto-fit, so the stacking breakpoint that came free with
   auto-fit is now written out in the 992px block - the same width at which .hero-container
   stacks. Giving them different numbers leaves a band of widths where the hero is one
   column and this is two, and the alignment breaks inside it. */
.polio-band-inner {
    padding-top: 44px;
    padding-bottom: 28px;
    display: grid;
    /* ⚠️ THE DEFAULT IS THE PORTABLE ONE. auto-fit needs nothing from the page above it,
       so a new site can drop the band in and it works. */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 34px 56px;
    align-items: center;
}

/* ⭐⭐ FUNDGURU ONLY. Its hero chart is capped at 430px and pushed to the right edge, so
   its right column has to be pinned to the SAME 430px or the globe does not sit under the
   chart. ClubGuru's hero image fills its whole column, and auto-fit already lands within
   ~2px of it, so ClubGuru must NOT wear this - it would misalign the very thing it fixes.
   ⚠️ 430px here and .hero-visual's cap in style.css are ONE number in two files. */
.polio-band--pinned .polio-band-inner {
    grid-template-columns: 1fr 430px;
    gap: 34px 72px;
}
.polio-band--pinned .polio-figure::before { left: -36px; }
.polio-band--pinned .polio-amount { font-size: clamp(2.6rem, 5.6vw, 4.3rem); }

/* Phase 4.5nw - the thin gold rule between the message and the number, from the original
   design.
   ⭐ Drawn in the 72px gutter as a ::before, NOT as a border-left with padding: a border
   would push the number 36px right and unbalance the column it sits in. It fades out top
   and bottom so it reads as a hairline rather than a bar.
   ⚠️ It is switched off with the columns at 992px, or it reappears as a stray line down
   the left of a full-width block. */
.polio-figure::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(212, 175, 55, 0) 0%,
        rgba(212, 175, 55, 0.55) 18%,
        rgba(212, 175, 55, 0.55) 82%,
        rgba(212, 175, 55, 0) 100%);
}

/* ---- left column: the message ---- */
.polio-msg { display: flex; flex-direction: column; gap: 14px; }

.polio-eyebrow {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.12);
    border-radius: 999px;
    padding: 7px 14px;
}
.polio-eyebrow i { color: var(--gold-primary); font-size: 0.8rem; }
.polio-eyebrow span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-primary);
    white-space: nowrap;   /* it wrapped out of its pill before this */
}

.polio-headline {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.05vw, 1.85rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;   /* one line on desktop */
}
.polio-logo { display: block; width: 54px; height: 54px; border-radius: 8px; flex: none; }

.polio-copy {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    max-width: 46ch;
    text-wrap: pretty;
}
.polio-copy strong { color: #fff; font-weight: 600; }

/* Wordmark: Fund|Club white, Guru gold, .Org white 62% at 0.78em. */
.polio-wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
}
.polio-wordmark .wm-guru { color: var(--gold-primary); }
.polio-wordmark .wm-org { color: rgba(255, 255, 255, 0.62); font-size: 0.78em; }
/* the gold "Guru" IS the affordance, so no underline — brighten on hover instead */
a.polio-wordmark:hover .wm-guru { color: var(--gold-light); }
a.polio-wordmark:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 3px; border-radius: 3px; }

.polio-toggle {
    font-family: inherit;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: none;
    padding: 4px 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold-primary);
    cursor: pointer;
    white-space: nowrap;
}
.polio-toggle:hover { color: var(--gold-light); }
.polio-toggle:focus-visible { outline: 2px solid var(--gold-primary); outline-offset: 3px; border-radius: 4px; }
.polio-toggle i { font-size: 0.8rem; transition: transform 0.25s ease; }
.polio-toggle[aria-expanded="true"] i { transform: rotate(90deg); }

/* Expands in place — a modal was considered and rejected, it interrupts a scroll. */
.polio-detail {
    border-left: 2px solid rgba(212, 175, 55, 0.5);
    padding: 2px 0 2px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 52ch;
    overflow: hidden;
    opacity: 1;
    max-height: 40rem;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}
.polio-detail[hidden] {
    display: flex;          /* override [hidden] so it can animate */
    max-height: 0;
    opacity: 0;
    margin-top: -14px;      /* swallow the flex gap while closed */
    pointer-events: none;
}
.polio-detail p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    text-wrap: pretty;
}
.polio-detail strong { color: #fff; font-weight: 600; }
.polio-detail .polio-gold { color: var(--gold-primary); font-weight: 700; }

/* ---- right column: the figure ---- */
.polio-figure {
    position: relative;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
/* wireframe globe watermark — a Font Awesome globe was tried here and rejected
   as too literal. Its alpha is driven by the count-up progress in JS. */
.polio-globe {
    position: absolute;
    left: 50%;
    /* Phase 4.5nw - ⚠️⚠️ at top:44% and up to 26rem across, more than half of this circle
       hung ABOVE a figure only ~200px tall and climbed into the hero image. Centring it on
       the number and sizing it to the box it belongs to is what separated the two. */
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(16rem, 26vw, 20rem);
    height: auto;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    color: rgba(255, 255, 255, 0);   /* JS raises this to 0.04 as the number lands */
}
.polio-amount {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    /* Phase 4.5nw - was clamp(3.2rem, 7.6vw, 5.5rem) = ~490px wide, WIDER than the 430px
       chart above it, so the column read as misaligned even where the centres matched. */
    font-size: clamp(3.2rem, 7.6vw, 5.5rem);
    line-height: 1;
}
/* ⭐ fixed-width cells are what stop the number jittering as it animates */
.polio-amount span { display: inline-block; text-align: center; }
.polio-amount .pd { width: 0.62em; }
.polio-amount .pp { width: 0.3em; color: rgba(255, 255, 255, 0.55); }

.polio-caption {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    white-space: nowrap;
}
.polio-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gold-primary);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22);
    flex: none;
}
/* 66%, not lower — at 45% this failed WCAG AA on the green, and much of the
   audience is 60–80. Do not dim it. */
.polio-provenance {
    position: relative;
    z-index: 1;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.66);
    white-space: nowrap;
}

.polio-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- below 700px: the headline wraps and the logo tops out beside it ---- */
@media (max-width: 700px) {
    .polio-headline { white-space: normal; align-items: flex-start; }
    .polio-provenance, .polio-caption { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .polio-detail { transition: none; }
    .polio-toggle i { transition: none; }
}


/* ⚠️ The gold rule must vanish the moment the columns stop being two, or it reappears as
   a stray line down the left of a full-width block. auto-fit wraps at 340+340+56 = 736px
   of container, i.e. a ~800px viewport. FundGuru overrides BOTH of these together at
   992px in style.css, because its band must stack with its hero. */
@media (max-width: 820px) {
    .polio-figure::before { display: none; }
}