/* ─────────────────────────────────────────────────────────────
   sponsors.css — Partners & Sponsors page
   Extends system.css — do not redefine tokens
   ───────────────────────────────────────────────────────────── */

/* ── Section wrapper ───────────────────────────────────────── */
.sp-section {
  margin: 0 0 4px;
}
.sp-section .section-head {
  padding-top: 24px;
  padding-bottom: 12px;
  align-items: center;
}

/* ── SPONSORS GRID ──────────────────────────────────────────── */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 0 var(--gutter) 8px;
}

@media (min-width: 1024px) {
  .sp-grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 32px 8px;
  }
}

/* Sponsor card — navy bg, logo centred, name below */
.sp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px 14px;
  background: var(--navy);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  border: 1px solid transparent;
  min-height: 100px;
}
.sp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hero);
  border-color: rgba(184,148,54,0.2);
}

.sp-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}
.sp-card__logo {
  max-height: 90px;
  max-width: 80%;
  width: auto;
  object-fit: contain;
  display: block;
}
.spb__logo--invert {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.sp-card__text-badge {
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.3;
}
.sp-card__name {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: rgba(247,244,238,0.5);
  text-transform: uppercase;
  text-align: center;
}

/* CTA / become-a-partner cell */
.sp-card--cta {
  background: rgba(184,148,54,0.06);
  border: 1px dashed rgba(184,148,54,0.25);
  cursor: default;
}
.sp-card--cta:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(184,148,54,0.25);
}
.sp-card__cta-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  text-align: center;
  line-height: 1.5;
}
.sp-card__cta-arrow {
  font-family: var(--t-display);
  font-size: 18px;
  color: var(--yellow);
  line-height: 1;
}
.sp-card__cta-sub {
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(184,148,54,0.45);
  text-align: center;
}

/* ── SPONSOR MODAL ──────────────────────────────────────────── */
.sp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sp-modal-backdrop[data-open] {
  display: flex;
}
.sp-modal {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 280px;
  width: 100%;
  position: relative;
}
.sp-modal__logo {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
}
.sp-modal__text {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: rgba(247,244,238,0.6);
  text-transform: uppercase;
  text-align: center;
}
.sp-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: rgba(247,244,238,0.4);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.sp-modal__close:hover { color: rgba(247,244,238,0.9); }

/* ── THANK YOU PARAGRAPH ────────────────────────────────────── */
.sp-thanks {
  margin: 20px var(--gutter) 0;
  padding-bottom: 8px;
}
.sp-thanks .y-rule {
  margin-bottom: 16px;
}
.sp-thanks__copy {
  font-family: var(--t-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.sp-thanks__copy em {
  font-family: var(--t-italic);
  font-style: italic;
  color: var(--ink);
}

/* ── Footer breathing room ──────────────────────────────────── */
.page-footer-space { height: 24px; }

/* ══════════════════════════════════════════════════════════════
   SPONSOR BAND — two tiers, no cards
   Chosen 2 Sept over the card grid, which has been removed. Prefixed
   spb- and self-contained: this block plus the matching markup in
   sponsors.html are the whole feature.

   Why it sits on a navy band rather than the page ground: most of
   the sponsor artwork is white-on-transparent, which disappears on
   the cream light canvas. The band gives one continuous field for
   the logos to sit on, which reads as "no cards" while still
   working in both themes. It is the cards' job done once instead
   of seven times.
   ══════════════════════════════════════════════════════════════ */

.spb {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 34px var(--gutter) 30px;
  margin: 0 0 8px;
}

.spb__tier { display: block; }

.spb__row {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 26px 20px;
}
.spb__row--1 { grid-template-columns: repeat(3, 1fr); }
.spb__row--2 { grid-template-columns: repeat(4, 1fr); }

/* Hairline between the tiers, gold at low weight so it separates
   without becoming a second border. */
.spb__split {
  height: 1px;
  border: 0;
  margin: 30px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(184,148,54,0.38) 15%,
    rgba(184,148,54,0.38) 85%,
    transparent
  );
}

.spb__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
}

.spb__logo {
  max-width: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.94;
}
/* Sized by height with a percentage width guard, rather than a fixed
   pixel width. The logos run from 1.09:1 (Pumps) to 3.13:1 (Candid),
   so a single max-width either starves the square ones or lets the
   wide ones collide. Height governs; the percentage only catches
   Candid in a narrow column. */
.spb__row--1 .spb__logo { max-height: 58px; max-width: 86%; }
.spb__row--2 .spb__logo { max-height: 44px; max-width: 84%; }

/* Sponsors with no artwork yet — Eastern Promise, ATLS. Deliberately
   warm white, NOT gold: these are stand-ins for logos that are coming,
   and every real logo in this section is white. Gold made them look
   like an intentional treatment, which would then vanish the moment
   the artwork arrived and change how the section reads. Placeholders
   should match what replaces them. */
.spb__word {
  font-family: var(--t-meta);
  color: #F7F4EE;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.06em;
}
.spb__row--1 .spb__word { font-size: 30px; }
.spb__row--2 .spb__word { font-size: 23px; }

/* Gold, matching the hairline that splits the tiers. 5.5:1 on the navy
   band, so it clears AA at this size. The old warm-white at 42% was
   quieter than the rule underneath it, which read as an accident. */
.spb__caption {
  font-family: var(--t-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin: 0 0 20px;
}
.spb__split + .spb__caption { margin-top: -8px; }

/* Mobile. The tier shape IS the design, so the top row stays at three
   rather than collapsing to two and stranding one on its own line.
   The bottom four become a 2x2, which is a tidy block with no orphan.
   Four across does not survive a phone: BSJ's three-line wordmark is
   the constraint, not the logos. */
@media (max-width: 620px) {
  .spb { padding: 26px 14px 24px; }
  .spb__row { gap: 22px 12px; }
  .spb__row--1 { grid-template-columns: repeat(3, 1fr); }
  .spb__row--2 { grid-template-columns: repeat(2, 1fr); }
  .spb__item { min-height: 38px; }
  .spb__split { margin: 24px 0; }
  .spb__row--1 .spb__logo { max-height: 36px; max-width: 90%; }
  .spb__row--2 .spb__logo { max-height: 38px; max-width: 86%; }
  .spb__row--1 .spb__word { font-size: 21px; }
  .spb__row--2 .spb__word { font-size: 22px; }
  /* Deliberately not smaller than desktop. This label was 9px here and
     disappeared on a phone, which is the screen that needs it most. */
  .spb__caption { font-size: 12px; letter-spacing: 0.14em; margin-bottom: 16px; }
}

/* Small phones. Three across still holds, just tighter. */
@media (max-width: 380px) {
  .spb { padding: 22px 10px 20px; }
  .spb__row { gap: 18px 8px; }
  .spb__row--1 .spb__logo { max-height: 30px; max-width: 92%; }
  .spb__row--2 .spb__logo { max-height: 33px; max-width: 88%; }
  .spb__row--1 .spb__word { font-size: 18px; }
  .spb__row--2 .spb__word { font-size: 19px; }
  .spb__caption { font-size: 11px; letter-spacing: 0.12em; }
}

/* Become-a-partner link. This lived inside the old card grid as a
   dashed tile; the band has no cards, so it sits below as a line. */
.sp-cta-row {
  display: flex;
  justify-content: center;
  padding: 4px var(--gutter) 0;
}
.sp-cta-link {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
  text-decoration: none;
  padding: 12px 20px;
  border: 1px dashed rgba(184,148,54,0.45);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.sp-cta-link:hover, .sp-cta-link:focus-visible {
  border-color: var(--yellow);
  background: rgba(184,148,54,0.08);
}