/* nb-trace: theme/site-fundraiser.css */

/*
  September campaign fundraiser (/september-fundraiser).

  Everything that could reach another donation page is scoped under
  .slug-september-fundraiser, so /donate and /join keep the shared treatment in
  site-donation.css and site-engagement.css untouched. The amount pills are the
  deliberate exception: #donation-v2-amounts in site-donation.css already
  renders the purple pill / teal-selected design, so this file does not restate
  it.
*/

.slug-september-fundraiser {
  /*
    layout.html routes donation_v2 pages through .donation-standard-content,
    which adds pale padding above the fold. The fundraiser hero is full-bleed
    teal and owns its own vertical rhythm.
  */
  & .donation-standard-content {
    padding-block-start: 0;
    background: #fff;
  }
}

/* Hero ------------------------------------------------------------------ */

.fundraiser-hero {
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(9rem, 13vw, 13rem);
  padding-inline: var(--page-inline-padding, 1.5rem);
  background: var(--brand-teal);
  color: #fff;

  & .fundraiser-hero__inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    max-width: var(--page-max-width, 90rem);
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media (width >= 600px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      flex-direction: row;

      & .fundraiser-tracker {
        justify-self: start;
        width: min(100%, 26rem);
        margin-inline: 0;
      }
    }
  }

  & .fundraiser-hero__headline {
    margin: 0;
    color: #fff;
    font-family: var(--bs-font-family-headline);
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
  }

  /*
    One inline span for the whole headline. box-decoration-break: clone repeats
    the padding and background on every line fragment, which is what gives each
    line its own purple block with a ragged right edge. Explicit <br> in the
    markup controls where the blocks break.
  */
  & .fundraiser-hero__headline-text {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.1em 0.35em;
    background: var(--brand-purple);
  }

  & .fundraiser-hero__subhead {
    max-width: 30rem;
    margin-block: 1.75rem 0;
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: 1.5;
  }
}

/* Tracker --------------------------------------------------------------- */

.fundraiser-tracker {
  display: grid;
  /*
    Below 992px .fundraiser-hero__inner is a single stacked column, so
    without an explicit width this stretches to the full inline size and
    justify-items: center just centers each child individually within that
    full width - on a narrow phone the bar (100% width, 26rem cap) ends up
    running edge-to-edge against the page's inline padding instead of
    reading as one contained block. The same 26rem cap as the bar, centered
    as a block, keeps it a comfortable width and centered like the intro
    copy above it.
  */
  width: min(100%, 26rem);
  margin-inline: auto;
  justify-items: center;
  font-family: var(--bs-font-family-headline);
  text-align: center;

  & .fundraiser-tracker__amount {
    margin: 0;
    font-size: clamp(3rem, 7.5vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  & .fundraiser-tracker__label {
    margin-block: 0.5rem 0;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    text-transform: uppercase;
  }

  & .fundraiser-tracker__goal {
    margin-block: 0.75rem 0;
    padding: 0.3em 0.6em;
    background: var(--brand-purple);
    font-size: clamp(1rem, 1.6vw, 1.375rem);
    font-weight: 700;
    text-transform: uppercase;
  }

  /*
    Overrides Bootstrap's .progress/.progress-bar (flex, 1rem tall, grey, 4px
    radius). Nesting gives the two-class specificity needed to win.
  */
  & .fundraiser-tracker__bar {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: 1.5rem;
    overflow: hidden;
    margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-pill);
    background: #fff;
  }

  & .fundraiser-tracker__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-purple);
    transition: width 400ms ease-out;
  }

  @media (prefers-reduced-motion: reduce) {
    & .fundraiser-tracker__fill {
      transition: none;
    }
  }
}

/* Donation card --------------------------------------------------------- */

.fundraiser-donate {
  position: relative;
  margin-block-start: calc(-1 * clamp(6rem, 9vw, 9rem));
  padding-inline: var(--page-inline-padding, 1.5rem);

  /* Square corners are deliberate — the rounded card on /donate is not wanted here. */
  & .fundraiser-donate__card {
    max-width: 52rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid var(--brand-teal);
    background: #f7fafa;
  }

  & .fundraiser-donate__heading {
    margin-block: 0 1.5rem;
    color: var(--brand-purple);
    font-family: var(--bs-font-family-headline);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
  }

  & .fundraiser-donate__section-heading {
    margin-block: 0 1rem;
    color: var(--brand-purple);
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 700;
  }

  /*
    Custom amount row. NationBuilder renders the input itself via
    page.donation_v2.amount_other, so the currency prefix is our own element and
    the input is reached by type rather than by a class we control.
  */
  & .fundraiser-donate__custom {
    display: flex;
    align-items: stretch;
    max-width: 26rem;
    margin-block-start: 1rem;
    margin-inline: auto;
  }

  & .fundraiser-donate__currency {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 3rem;
    background: var(--brand-purple);
    color: #fff;
    font-weight: 700;
  }

  & .fundraiser-donate__custom input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.25rem;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: #fff;
  }

  & .fundraiser-donate__divider {
    margin-block: clamp(1.5rem, 3vw, 2.5rem);
    border: 0;
    border-block-start: 1px solid var(--input-border-color-subtle);
  }
}

/* Goal ------------------------------------------------------------------ */

.fundraiser-goal {
  padding-block: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--page-inline-padding, 1.5rem);
  text-align: center;

  & .fundraiser-goal__inner {
    max-width: 52rem;
    margin-inline: auto;
  }

  & .fundraiser-goal__eyebrow {
    margin: 0;
    color: var(--brand-teal);
    font-family: var(--bs-font-family-headline);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  & .fundraiser-goal__amount {
    margin-block: 0.25rem 0;
    color: var(--brand-purple);
    font-family: var(--bs-font-family-headline);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
  }

  & .fundraiser-goal__prompt {
    margin-block: clamp(2rem, 4vw, 3.5rem) 0;
    padding-block: clamp(1.5rem, 3vw, 2.5rem);
    border-block: 1px solid var(--brand-teal);
    color: var(--brand-purple);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  }
}

/* Story ----------------------------------------------------------------- */

.fundraiser-story {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  padding-inline: var(--page-inline-padding, 1.5rem);

  & .fundraiser-story__inner {
    display: grid;
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    max-width: 70rem;
    margin-inline: auto;

    @media (width >= 992px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  & .fundraiser-story__collage {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr 1fr;
  }

  & .fundraiser-story__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .fundraiser-story__image--lead,
  & .fundraiser-story__image--close {
    aspect-ratio: 16 / 11;
    grid-column: 1 / -1;
  }

  & .fundraiser-story__image--support {
    aspect-ratio: 4 / 3;
  }

  & .fundraiser-story__heading {
    margin-block: 0 1.25rem;
    color: var(--brand-purple);
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
  }

  & .fundraiser-story__copy {
    color: var(--brand-purple);

    & p {
      margin-block-end: 1rem;
    }

    & p:last-child {
      margin-block-end: 0;
    }
  }
}

/* Campaign -------------------------------------------------------------- */

.fundraiser-campaign {
  padding-block: clamp(3rem, 6vw, 6rem);
  padding-inline: var(--page-inline-padding, 1.5rem);
  background: var(--brand-pale);

  & .fundraiser-campaign__inner {
    max-width: 64rem;
    margin-inline: auto;
  }

  & .fundraiser-campaign__heading {
    margin-block: 0 clamp(1.5rem, 3vw, 2.5rem);
    color: var(--brand-purple);
    font-family: var(--bs-font-family-headline);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
  }

  & .fundraiser-campaign__video {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    border: 0;
  }

  & .fundraiser-campaign__body {
    display: grid;
    align-items: start;
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-block-start: clamp(2.5rem, 5vw, 5rem);

    @media (width >= 992px) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
  }

  & .fundraiser-campaign__heading-sub {
    margin-block: 0 1.25rem;
    color: var(--brand-purple);
    font-size: clamp(1.25rem, 2.1vw, 1.625rem);
    font-weight: 700;
    line-height: 1.3;
  }

  & .fundraiser-campaign__copy {
    color: var(--brand-purple);

    & p {
      margin-block-end: 1rem;
    }

    & p:last-child {
      margin-block-end: 0;
    }
  }

  & .fundraiser-campaign__aside {
    display: grid;
    gap: 0.75rem;
  }

  & .fundraiser-campaign__image {
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Closing call to action ------------------------------------------------ */

.fundraiser-cta {
  padding-block: clamp(3rem, 7vw, 7rem);
  padding-inline: var(--page-inline-padding, 1.5rem);
  text-align: center;

  & .fundraiser-cta__heading {
    margin: 0;
    color: var(--brand-teal);
    font-family: var(--bs-font-family-headline);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
  }

  & .fundraiser-cta__lead {
    max-width: 34rem;
    margin-block: 1.5rem 2.5rem;
    margin-inline: auto;
    color: var(--brand-purple);
    font-size: clamp(1.125rem, 2vw, 1.625rem);
    font-weight: 500;
    line-height: 1.35;
  }

  /*
    Stated rather than reusing .btn-primary: the theme's primary is teal and the
    design calls for purple on a white band.
  */
  & .fundraiser-cta__button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--brand-purple);
    color: #fff;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    font-weight: 700;
    text-decoration: none;

    &:hover,
    &:focus-visible {
      background: var(--brand-deep-purple);
      color: #fff;
      text-decoration: none;
    }
  }
}