/*-----------------------------------------------------------------------------
  Ways to Give — Scholarship Fund + School Expansion Project
  Scoped under .gv-* so nothing leaks into the theme's own components.

  This page asks people for money, so the priorities are different from a
  long-form essay: the figures have to be unmissable, the account numbers have
  to be effortless to copy, and every appeal has to be actionable on its own
  (a donor who lands on the second campaign should never have to scroll back
  up to find out where to send funds). Type is kept large and the reading
  column narrow, matching the services page so the two feel like one site.
-----------------------------------------------------------------------------*/

.gv-wrap {
  --gv-primary: var(--tj-color-theme-primary);
  --gv-deep: var(--tj-color-theme-dark-2);
  --gv-ink: var(--tj-color-heading-primary);
  --gv-body: var(--tj-color-text-body);
  --gv-tint: var(--tj-color-theme-bg);
  --gv-tint-2: var(--tj-color-theme-bg-2);
  --gv-line: rgba(162, 53, 143, 0.14);
  --gv-line-strong: rgba(162, 53, 143, 0.26);
  --gv-shadow: 0 18px 50px rgba(31, 12, 28, 0.08);
  --gv-measure: 62ch;
  position: relative;
  overflow: hidden;
}

.gv-wrap::before {
  content: "";
  position: absolute;
  inset-inline-start: -200px;
  top: 60px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, var(--gv-tint-2), transparent 70%);
}

.gv-section {
  padding-block: 50px;
}
.gv-section:first-child {
  padding-top: 90px;
}
.gv-section:last-child {
  padding-bottom: 90px;
}

/* -------------------------------------------------------------- type bits */
.gv-column {
  max-width: 950px;
  margin-inline: auto;
}

.gv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gv-primary);
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--gv-line);
  border-radius: 100px;
  padding: 9px 20px;
  margin-bottom: 20px;
}
.gv-eyebrow i {
  font-size: 12px;
}

.gv-title {
  color: var(--gv-ink);
  font-weight: var(--tj-fw-sbold);
  line-height: 1.18;
  margin-bottom: 18px;
}
.gv-title .accent {
  color: var(--gv-primary);
}

.gv-intro p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--gv-body);
  max-width: 70ch;
}
.gv-intro p:last-child {
  margin-bottom: 0;
}

/* jump links into the two campaigns */
.gv-contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: gv-toc;
}
.gv-contents li {
  counter-increment: gv-toc;
}
.gv-contents a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--gv-line);
  border-radius: 18px;
  padding: 22px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.gv-contents a::before {
  content: "Campaign 0" counter(gv-toc);
  font-size: 12px;
  font-weight: var(--tj-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-primary);
}
.gv-contents-title {
  font-size: 18px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.35;
  color: var(--gv-ink);
}
.gv-contents-meta {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gv-body);
}
.gv-contents a:hover {
  transform: translateY(-4px);
  border-color: var(--gv-line-strong);
  box-shadow: var(--gv-shadow);
}

/* ------------------------------------------------------------- campaign card */
.gv-campaign {
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--gv-line);
  border-radius: 24px;
  padding: 56px 60px 52px;
  /* clears the sticky header when reached via an anchor link */
  scroll-margin-top: 120px;
}
.gv-campaign + .gv-campaign {
  margin-top: 30px;
}

.gv-campaign-head {
  max-width: var(--gv-measure);
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--gv-line);
}
.gv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--gv-primary);
  background-color: var(--gv-tint-2);
  border-radius: 100px;
  padding: 9px 16px;
  margin-bottom: 20px;
}
.gv-campaign-title {
  font-size: 34px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.24;
  color: var(--gv-ink);
  margin-bottom: 14px;
}
.gv-deck {
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: var(--gv-primary);
  margin-bottom: 0;
}

/* the reading column */
.gv-body {
  max-width: var(--gv-measure);
  font-size: 18px;
  line-height: 1.85;
  color: var(--gv-body);
  text-align: start;
  hyphens: none;
  overflow-wrap: break-word;
}
.gv-body > p {
  margin-bottom: 26px;
}
.gv-body > p:last-child {
  margin-bottom: 0;
}
.gv-body strong {
  color: var(--gv-ink);
  font-weight: var(--tj-fw-sbold);
}
.gv-body > .gv-lede {
  font-size: 20px;
  line-height: 1.7;
  color: var(--gv-ink);
}

/* short declarative lines kept one-per-line — the rhythm is the point */
.gv-stanza {
  margin: 0 0 26px;
  padding: 22px 26px;
  list-style: none;
  background-color: var(--gv-tint);
  border-inline-start: 3px solid var(--gv-primary);
  border-radius: 0 14px 14px 0;
  max-width: var(--gv-measure);
}
.gv-stanza li {
  font-size: 18px;
  line-height: 1.7;
  color: var(--gv-ink);
}
.gv-stanza li + li {
  margin-top: 8px;
}

.gv-pull {
  margin: 34px 0;
  padding: 28px 32px;
  background: linear-gradient(140deg, var(--gv-tint) 0%, var(--gv-tint-2) 100%);
  border-radius: 18px;
  max-width: var(--gv-measure);
}
.gv-pull p {
  font-size: 21px;
  font-weight: var(--tj-fw-medium);
  line-height: 1.55;
  color: var(--gv-ink);
  margin-bottom: 0;
}
.gv-pull i {
  display: block;
  font-size: 24px;
  color: var(--gv-primary);
  margin-bottom: 12px;
}

/* ------------------------------------------------------- sub-heading inside a campaign */
.gv-subhead {
  margin-top: 46px;
  margin-bottom: 22px;
}
.gv-subhead-title {
  font-size: 25px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.3;
  color: var(--gv-ink);
  margin-bottom: 8px;
}
.gv-subhead-note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gv-body);
  margin-bottom: 0;
  max-width: var(--gv-measure);
}

/* ------------------------------------------------------------- sponsorship tiers */
.gv-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gv-tier {
  display: flex;
  flex-direction: column;
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--gv-line);
  border-radius: 20px;
  padding: 28px 26px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.gv-tier:hover {
  transform: translateY(-5px);
  border-color: var(--gv-line-strong);
  box-shadow: var(--gv-shadow);
}
.gv-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 20px;
  color: var(--gv-primary);
  background-color: var(--gv-tint-2);
  margin-bottom: 18px;
}
.gv-tier-name {
  font-size: 19px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.35;
  color: var(--gv-ink);
  margin-bottom: 6px;
}
.gv-tier-where {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gv-body);
  margin-bottom: 12px;
}
.gv-tier-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  color: var(--gv-primary);
  background-color: var(--gv-tint);
  border-radius: 100px;
  padding: 8px 14px;
  margin-bottom: 20px;
  align-self: flex-start;
}

/* the figure — the single most important thing in each card */
.gv-tier-price {
  padding-top: 18px;
  border-top: 1px solid var(--gv-line);
  margin-bottom: 20px;
}
.gv-price-label {
  display: block;
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-body);
  margin-bottom: 8px;
}
.gv-price-main {
  display: block;
  font-size: 34px;
  font-weight: var(--tj-fw-bold);
  line-height: 1.1;
  color: var(--gv-ink);
  letter-spacing: -0.01em;
}
.gv-price-alt {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gv-primary);
  margin-top: 6px;
}

.gv-tier-provides {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.gv-tier-provides > span {
  display: block;
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-body);
  margin-bottom: 12px;
}
.gv-tier-provides li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gv-body);
}
.gv-tier-provides li + li {
  margin-top: 9px;
}
/* real <i class="tji-check"> in the markup, as the theme does elsewhere —
   safer than hardcoding a codepoint in a pseudo-element */
.gv-tier-provides li i {
  flex: 0 0 auto;
  margin-top: 5px;
  font-size: 9px;
  color: var(--gv-primary);
}
/* pinned to the bottom so the buttons line up across cards of unequal height.
   Slightly tighter than the page-level button so the longest label
   ("Sponsor a student") stays on one line in a 3-up grid. */
.gv-tier .gv-btn {
  margin-top: auto;
  justify-content: center;
  font-size: 14px;
  padding: 14px 18px;
}

/* ------------------------------------------------------- project investment figure */
.gv-figure {
  margin: 34px 0;
  padding: 38px 40px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(135deg, var(--tj-color-theme-dark) 0%, var(--gv-deep) 60%, var(--gv-primary) 135%);
  color: var(--tj-color-common-white);
}
.gv-figure-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--tj-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tj-color-common-white);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  padding: 9px 16px;
  margin-bottom: 22px;
}
.gv-figure-amount {
  display: block;
  font-size: 52px;
  font-weight: var(--tj-fw-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tj-color-common-white);
}
.gv-figure-alt {
  display: block;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 10px;
}
.gv-figure-note {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 22px 0 0;
  max-width: 60ch;
}

/* ------------------------------------------------------------- facilities grid */
.gv-facilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.gv-facilities li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--gv-body);
}
.gv-facilities li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background-color: var(--gv-tint-2);
  border: 2px solid var(--gv-primary);
}
.gv-facilities li strong {
  color: var(--gv-ink);
  font-weight: var(--tj-fw-sbold);
}

/* ---------------------------------------------------------- partnership options */
.gv-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.gv-options li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gv-body);
  background-color: var(--gv-tint);
  border-radius: 12px;
  padding: 14px 18px;
}
.gv-options li i {
  flex: 0 0 auto;
  margin-top: 5px;
  font-size: 9px;
  color: var(--gv-primary);
}

/* ------------------------------------------------------------------ bank details */
.gv-bank {
  margin: 34px 0 0;
  border: 1px solid var(--gv-line-strong);
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--tj-color-common-white);
}
.gv-bank-head {
  padding: 22px 28px;
  background-color: var(--gv-tint);
  border-bottom: 1px solid var(--gv-line);
}
.gv-bank-head span {
  display: block;
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gv-body);
  margin-bottom: 6px;
}
.gv-bank-head strong {
  font-size: 19px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.4;
  color: var(--gv-ink);
}
.gv-bank-group {
  padding: 24px 28px;
}
.gv-bank-group + .gv-bank-group {
  border-top: 1px solid var(--gv-line);
}
.gv-bank-group > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--tj-fw-sbold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gv-primary);
  margin-bottom: 16px;
}
.gv-bank-group > h4 i {
  font-size: 13px;
}
.gv-accounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gv-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background-color: var(--gv-tint);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.3s ease;
}
.gv-account:hover {
  border-color: var(--gv-line-strong);
}
.gv-account-bank {
  display: block;
  font-size: 14px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1.4;
  color: var(--gv-ink);
  margin-bottom: 4px;
}
.gv-account-number {
  display: block;
  /* tabular figures so the digits line up and are easy to read back */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-size: 19px;
  font-weight: var(--tj-fw-bold);
  line-height: 1.2;
  color: var(--gv-primary);
}
.gv-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  color: var(--gv-primary);
  background-color: var(--tj-color-common-white);
  border: 1px solid var(--gv-line-strong);
  border-radius: 100px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.gv-copy i {
  font-size: 9px;
}
.gv-copy:hover {
  background-color: var(--gv-primary);
  border-color: var(--gv-primary);
  color: var(--tj-color-common-white);
}
.gv-copy.is-copied {
  background-color: var(--gv-primary);
  border-color: var(--gv-primary);
  color: var(--tj-color-common-white);
}

/* ------------------------------------------------------------ call to action */
.gv-cta {
  max-width: var(--gv-measure);
  margin-top: 36px;
  padding: 32px 34px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(135deg, var(--tj-color-theme-dark) 0%, var(--gv-deep) 60%, var(--gv-primary) 135%);
  color: var(--tj-color-common-white);
}
.gv-cta-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: var(--tj-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--tj-color-common-white);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  padding: 9px 16px;
  margin-bottom: 22px;
}
.gv-cta p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
}
.gv-cta p + p {
  margin-top: 14px;
}
.gv-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.gv-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: var(--tj-fw-sbold);
  line-height: 1;
  border-radius: 100px;
  padding: 15px 28px;
  border: 1px solid transparent;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.gv-btn:hover {
  transform: translateY(-3px);
}
.gv-btn-solid {
  background: linear-gradient(140deg, var(--gv-primary), var(--gv-deep));
  color: var(--tj-color-common-white);
}
.gv-btn-solid:hover {
  color: var(--tj-color-common-white);
}
.gv-cta .gv-btn-solid {
  background: var(--tj-color-common-white);
  color: var(--gv-primary);
}
.gv-cta .gv-btn-solid:hover {
  color: var(--gv-deep);
}
.gv-btn-ghost {
  border-color: var(--gv-line-strong);
  color: var(--gv-primary);
}
.gv-btn-ghost:hover {
  background-color: var(--gv-tint);
}
.gv-cta .gv-btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--tj-color-common-white);
}
.gv-cta .gv-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--tj-color-common-white);
}

.gv-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  font-size: 14px;
  font-weight: var(--tj-fw-medium);
  color: var(--gv-primary);
  transition: gap 0.3s ease, color 0.3s ease;
}
.gv-back:hover {
  gap: 12px;
  color: var(--gv-deep);
}
.gv-back i {
  font-size: 11px;
}

/* ------------------------------------------------------------- responsive */
@media only screen and (max-width: 1199px) {
  .gv-campaign {
    padding: 46px 44px 44px;
  }
  .gv-campaign-title {
    font-size: 30px;
  }
  .gv-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gv-figure-amount {
    font-size: 44px;
  }
}

@media only screen and (max-width: 991px) {
  .gv-section {
    padding-block: 40px;
  }
  .gv-section:first-child {
    padding-top: 66px;
  }
  .gv-section:last-child {
    padding-bottom: 66px;
  }
  .gv-campaign-title {
    font-size: 27px;
  }
  .gv-subhead-title {
    font-size: 22px;
  }
  .gv-body,
  .gv-intro p {
    font-size: 17px;
  }
  .gv-body > .gv-lede {
    font-size: 19px;
  }
  .gv-pull p {
    font-size: 19px;
  }
  .gv-figure {
    padding: 30px 28px;
  }
  .gv-figure-amount {
    font-size: 38px;
  }
  .gv-facilities,
  .gv-options {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .gv-campaign {
    padding: 34px 22px 32px;
    border-radius: 20px;
  }
  .gv-campaign-title {
    font-size: 24px;
  }
  .gv-deck {
    font-size: 16px;
  }
  .gv-body {
    line-height: 1.8;
  }
  .gv-contents,
  .gv-tiers,
  .gv-accounts {
    grid-template-columns: 1fr;
  }
  .gv-stanza {
    padding: 18px 20px;
  }
  .gv-stanza li {
    font-size: 16px;
  }
  .gv-pull {
    padding: 22px;
  }
  .gv-pull p {
    font-size: 18px;
  }
  .gv-figure-amount {
    font-size: 33px;
  }
  .gv-bank-head,
  .gv-bank-group {
    padding: 20px 20px;
  }
  /* stack the copy button under the number rather than squeezing it */
  .gv-account {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .gv-cta {
    padding: 26px 22px;
  }
  .gv-cta-actions .gv-btn,
  .gv-tier .gv-btn {
    width: 100%;
    justify-content: center;
  }
}