/* ============================================
   Peer-to-peer fundraising pages (/fundraise/{slug}/)

   Styled to match the embedded Raisely donation widget rather than the rest of
   the site, so the page and the form read as one thing. Tokens below are the
   Fort 2 campaign's own theme, read from the Raisely API:

     fonts        Montserrat:700,900 | Roboto:300,400,700
     primary      #b32a3b   secondary  #686667
     styleRounded false  ->  square corners, no border-radius

   Scoped to .p2p-page so the shared header and footer keep the site's
   Open Sans and #a51c30. Loaded per-page via headScripts.
   ============================================ */

.p2p-page {
  /* Raisely primaryShades */
  --rz-primary: #b32a3b;
  --rz-primary-dark: #861f2c;
  --rz-primary-light: #d13c4e;
  --rz-primary-lightest: #e48a95;
  --rz-primary-superlight: #faebed;

  /* Raisely secondaryShades */
  --rz-secondary: #686667;
  --rz-secondary-dark: #4e4d4d;
  --rz-secondary-darkest: #1a191a;
  --rz-secondary-light: #9b999a;
  --rz-secondary-lightest: #b4b2b3;
  --rz-secondary-superlight: #f2f2f2;

  --rz-heading-font: "Montserrat", "Roboto", Helvetica, Arial, sans-serif;
  --rz-body-font: "Roboto", Helvetica, Arial, sans-serif;

  /* styleRounded: false */
  --rz-radius: 0;

  font-family: var(--rz-body-font);
  color: var(--rz-secondary-darkest);
}

.p2p-page h1,
.p2p-page h2,
.p2p-page h3 {
  font-family: var(--rz-heading-font);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.p2p-section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 20px;
  color: var(--rz-secondary-darkest);
}

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

.p2p-hero {
  position: relative;
  min-height: 720px;
  display: flex;
  /* Content sits at the TOP. The hero art labels the existing fort and the new
     fort along its lower half, and bottom-anchored copy covered both. */
  align-items: flex-start;
  overflow: hidden;
}

.p2p-hero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Anchored low so both forts and their labels stay in frame; centring crops
     the New Fort label off the bottom. */
  background-position: center bottom;
}

/* Inverted from the old bottom-heavy scrim: darkest behind the copy at the top,
   clearing to almost nothing over the forts so the labels stay readable. */
.p2p-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 25, 26, 0.84) 0%,
    rgba(26, 25, 26, 0.6) 34%,
    rgba(26, 25, 26, 0.1) 62%,
    rgba(26, 25, 26, 0.12) 100%
  );
}

.p2p-hero-inner {
  position: relative;
  padding-top: 124px;
  padding-bottom: 40px;
  color: #fff;
  max-width: 720px;
}

.p2p-eyebrow {
  font-family: var(--rz-heading-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  margin: 0 0 12px;
  opacity: 0.92;
}

.p2p-hero-title {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.02;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(26, 25, 26, 0.35);
}

.p2p-hero-sub {
  font-family: var(--rz-body-font);
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  margin: 18px 0 0;
  color: #fff;
  text-shadow: 0 1px 12px rgba(26, 25, 26, 0.4);
}

/* Hero call to action, sits under the campaign bar and jumps past the video
   straight to the cabin list. */
.p2p-page .btn.p2p-hero-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 15px 34px;
  font-family: var(--rz-heading-font);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border-radius: var(--rz-radius);
  background: var(--rz-primary);
  border: 1px solid var(--rz-primary);
  color: #fff;
  box-shadow: 0 6px 22px rgba(26, 25, 26, 0.35);
  transition: background 0.18s ease, transform 0.18s ease;
}

.p2p-page .btn.p2p-hero-cta:hover,
.p2p-page .btn.p2p-hero-cta:focus-visible {
  background: var(--rz-primary-dark);
  border-color: var(--rz-primary-dark);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .p2p-page .btn.p2p-hero-cta {
    transition: none;
  }
  .p2p-page .btn.p2p-hero-cta:hover {
    transform: none;
  }
}

/* The site header is position:fixed, so an anchor jump would otherwise put the
   heading underneath it. */
#cabins {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

/* --- Shared progress bar --------------------------------- */

.p2p-bar {
  font-family: var(--rz-body-font);
}

.p2p-bar-heading {
  font-family: var(--rz-heading-font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--rz-secondary-darkest);
}

.p2p-bar-sub {
  display: block;
  font-family: var(--rz-body-font);
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--rz-secondary);
  margin-top: 2px;
}

.p2p-bar-amounts {
  margin: 0 0 10px;
  line-height: 1.15;
}

.p2p-bar-raised {
  display: block;
  font-family: var(--rz-heading-font);
  font-weight: 900;
  font-size: 2.6rem;
  color: var(--rz-primary);
}

.p2p-bar-goal {
  display: block;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--rz-secondary);
  margin-top: 4px;
}

.p2p-bar-track {
  height: 12px;
  background: var(--rz-secondary-superlight);
  border-radius: var(--rz-radius);
  overflow: hidden;
}

.p2p-bar-fill {
  height: 100%;
  width: 0;
  background: var(--rz-primary);
  border-radius: var(--rz-radius);
  transition: width 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .p2p-bar-fill {
    transition: none;
  }
}

.p2p-bar-pct {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--rz-secondary);
}

.p2p-bar-pct span {
  font-weight: 700;
  color: var(--rz-secondary-dark);
}

.p2p-bar-meta {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--rz-secondary);
}

/* Goal of 0 or null: hide the bar, keep the raised total. */
.p2p-bar--no-goal .p2p-bar-track,
.p2p-bar--no-goal .p2p-bar-pct {
  display: none;
}

/* --- Campaign bar inside the hero -------------------------- */

/* Sits over the hero photo, so it drops the card chrome and keeps only the
   number and the track. Rounded here on purpose, unlike the square sidebar bar:
   the hero is our own design rather than a surface that has to sit flush
   against the Raisely widget. */
.p2p-bar--hero {
  margin-top: 30px;
  max-width: 540px;
}

.p2p-bar--hero .p2p-bar-amounts {
  margin: 0 0 12px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(26, 25, 26, 0.4);
}

.p2p-bar--hero .p2p-bar-raised {
  display: inline;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  color: #fff;
}

.p2p-bar--hero .p2p-bar-goal {
  display: inline;
  margin-left: 7px;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
}

.p2p-bar--hero .p2p-bar-track {
  height: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.p2p-bar--hero .p2p-bar-fill {
  border-radius: 999px;
  /* Camp Grace red needs lifting to stay legible over a dark photo. */
  background: linear-gradient(
    90deg,
    var(--rz-primary) 0%,
    var(--rz-primary-light) 100%
  );
}

/* The hero shows the headline number only; percentage and donor count live
   with the team's bar further down the page. */
.p2p-bar--hero .p2p-bar-pct,
.p2p-bar--hero .p2p-bar-meta,
.p2p-bar--hero .p2p-bar-heading {
  display: none;
}

/* --- Campaign landing: Dave's video ------------------------ */

.p2p-campaign-video {
  /* Generous breathing room: the hero is dark and full-bleed, so the intro
     needs real space above it to read as its own moment rather than spill. */
  padding: 104px 0 16px;
}

/* Centred intro block, shared by the video section and the cabin list.
   Deliberately narrower than the content beneath it, so the text column reads
   as an introduction rather than a caption stretched to full width. */
.p2p-lede {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}

.p2p-lede-eyebrow {
  font-family: var(--rz-heading-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  color: var(--rz-primary);
  margin: 0 0 20px;
}

/* Short rule under the eyebrow ties the block together and gives the red a
   second, quieter appearance. */
.p2p-lede-eyebrow::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  background: var(--rz-primary);
  margin: 16px auto 0;
}

.p2p-lede-heading {
  font-family: var(--rz-heading-font);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--rz-secondary-darkest);
  margin: 0 0 18px;
  text-wrap: balance;
}

.p2p-lede-intro {
  font-family: var(--rz-body-font);
  font-weight: 300;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.75;
  color: var(--rz-secondary);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .p2p-campaign-video {
    padding: 64px 0 8px;
  }

  .p2p-lede {
    margin-bottom: 34px;
  }

  .p2p-teams {
    padding: 48px 0 64px;
  }
}

/* --- Campaign landing: team list --------------------------- */

.p2p-teams {
  padding: 64px 0 88px;
}

.p2p-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rz-secondary-superlight);
}

/* badge | name + amount + bar | button */
.p2p-team-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rz-secondary-superlight);
}

.p2p-team-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--rz-primary);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--rz-heading-font);
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
}

.p2p-team-detail {
  min-width: 0;
}

.p2p-team-name {
  font-family: var(--rz-heading-font);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  margin: 0 0 4px;
  color: var(--rz-secondary-darkest);
}

.p2p-team-amounts {
  margin: 0 0 9px;
  line-height: 1.2;
}

.p2p-team-raised {
  font-family: var(--rz-heading-font);
  font-weight: 900;
  font-size: 1.22rem;
  color: var(--rz-primary);
}

.p2p-team-goal {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--rz-secondary);
  margin-left: 5px;
}

/* Same pill treatment as the hero bar. */
.p2p-team-track {
  height: 12px;
  border-radius: 999px;
  background: var(--rz-secondary-superlight);
  overflow: hidden;
  max-width: 460px;
}

.p2p-team-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--rz-primary) 0%,
    var(--rz-primary-light) 100%
  );
  transition: width 0.8s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .p2p-team-fill {
    transition: none;
  }
}

.p2p-page .btn.p2p-team-btn {
  white-space: nowrap;
  font-family: var(--rz-heading-font);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  border-radius: var(--rz-radius);
  background: var(--rz-primary);
  border-color: var(--rz-primary);
  color: #fff;
}

.p2p-page .btn.p2p-team-btn:hover,
.p2p-page .btn.p2p-team-btn:focus-visible {
  background: var(--rz-primary-dark);
  border-color: var(--rz-primary-dark);
}

/* A fully funded cabin keeps its red bar: the fill shows money raised, so
   greying it out at 100% read as "switched off" rather than "complete". Only
   the button changes state. */
.p2p-page .p2p-team-btn.is-funded-btn {
  background: var(--rz-secondary-superlight);
  border-color: var(--rz-secondary-superlight);
  color: var(--rz-secondary);
  cursor: default;
  pointer-events: none;
}

.p2p-teams-fallback {
  max-width: 320px;
}

@media (max-width: 720px) {
  /* Badge stays beside the name; the button drops to its own full-width row. */
  .p2p-team-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 8px 16px;
  }

  .p2p-team-badge {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .p2p-team-btn {
    grid-column: 1 / -1;
  }

  .p2p-page .btn.p2p-team-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .p2p-team-track {
    max-width: none;
  }
}

/* --- Video ------------------------------------------------ */

/* Sits at the top of the content column, filling its width, so the video's top
   edge aligns with the top of the giving widget in the sidebar. Nothing may be
   placed above it inside .p2p-main or that alignment breaks. */
.p2p-video-frame {
  position: relative;
  width: 100%;
  margin: 0 0 28px;
  background: var(--rz-secondary-darkest);
  border-radius: var(--rz-radius);
  overflow: hidden;
  line-height: 0;
}

/* Centred play target, injected by src/js/p2p-video.js. */
.p2p-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(179, 42, 59, 0.92);
  box-shadow: 0 6px 26px rgba(26, 25, 26, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.25s ease;
}

.p2p-video-play svg {
  width: 44px;
  height: 44px;
  fill: #fff;
  /* Optical centring: a triangle looks left-heavy when centred on its bbox. */
  margin-left: 5px;
}

.p2p-video-play:hover,
.p2p-video-play:focus-visible {
  background: var(--rz-primary);
  transform: translate(-50%, -50%) scale(1.07);
}

.p2p-video-play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Out of the way while playing, and out of the tab order with it. */
.p2p-video-frame.is-playing .p2p-video-play {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .p2p-video-play {
    transition: none;
  }
}

@media (max-width: 720px) {
  .p2p-video-play {
    width: 72px;
    height: 72px;
  }
  .p2p-video-play svg {
    width: 32px;
    height: 32px;
  }
}

.p2p-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--rz-secondary-darkest);
}

/* Stand-in for cabins with no family video. Same frame and same 16:9 box as the
   video so both page variants line up identically against the sidebar. Cropped
   rather than letterboxed, since a still has no bars worth preserving. */
.p2p-feature-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Body layout ----------------------------------------- */

.p2p-body {
  padding: 48px 0 80px;
}

.p2p-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.p2p-blurb,
.p2p-message p {
  font-family: var(--rz-body-font);
  font-weight: 300;
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--rz-secondary-dark);
  margin: 0 0 1.15em;
}

.p2p-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: #fff;
  border: 1px solid var(--rz-secondary-superlight);
  border-top: 4px solid var(--rz-primary);
  border-radius: var(--rz-radius);
  padding: 28px;
  box-shadow: 0 2px 10px rgba(26, 25, 26, 0.06);
}

/* --- Donate ---------------------------------------------- */

.p2p-donate {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rz-secondary-superlight);
}

.p2p-donate-btn,
.p2p-page .btn.p2p-donate-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--rz-heading-font);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--rz-radius);
  background: var(--rz-primary);
  border-color: var(--rz-primary);
  color: #fff;
}

.p2p-page .btn.p2p-donate-btn:hover,
.p2p-page .btn.p2p-donate-btn:focus-visible {
  background: var(--rz-primary-dark);
  border-color: var(--rz-primary-dark);
}

.p2p-donate-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--rz-secondary);
}

/* The Raisely iframe sizes itself via postMessage; just let it be full width. */
.p2p-embed {
  width: 100%;
}

.p2p-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* --- Responsive ------------------------------------------ */

@media (max-width: 900px) {
  .p2p-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .p2p-sidebar {
    position: static;
  }

  /* A 16:9 aerial cropped to a phone-width hero shows one fort and neither
     label, which loses the whole point of the image. Show it whole instead,
     sitting along the bottom, with the copy on flat brand dark above it. */
  .p2p-hero {
    min-height: 0;
    background: var(--rz-secondary-darkest);
    /* The contained 16:9 art occupies 100vw/1.778 = 56.25vw of height along the
       bottom. Clear it so the CTA never sits on top of the render. */
    padding-bottom: 57vw;
  }

  .p2p-hero-photo {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
  }

  .p2p-hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(26, 25, 26, 0.55) 0%,
      rgba(26, 25, 26, 0.2) 55%,
      rgba(26, 25, 26, 0) 72%
    );
  }

  .p2p-hero-inner {
    padding-top: 104px;
    padding-bottom: 26px;
  }

  .p2p-hero-inner {
    padding-top: 80px;
    padding-bottom: 44px;
  }

  .p2p-bar--hero {
    margin-top: 24px;
    max-width: none;
  }
}