/* ==========================================================================
   THE AMERICA AWARDS 2026 — Sponsors / Partnerships page
   Page-specific styles only. Extends the existing token/base/component
   system (tokens.css, base.css, components.css) — never overrides them.
   ========================================================================== */

/* ---------------------------------------------------------------------- *
 * PAGE HERO (text-only — no photography until owner-selected images
 * are processed from 09_SPONSORS/PHOTOS)
 * ---------------------------------------------------------------------- */
.spn-hero {
  padding: calc(var(--space-2xl) + 70px) 0 var(--space-2xl);
  text-align: center;
  background: var(--graphite-950);
  color: var(--ink-on-dark);
}
.spn-hero__inner { max-width: 780px; margin-inline: auto; }
.spn-hero h1 { font-size: var(--step-5); text-wrap: balance; }
.spn-hero__sub {
  margin-top: var(--space-md);
  font-size: var(--step-1);
  color: var(--ink-on-dark-muted);
  max-width: 62ch;
  margin-inline: auto;
}
.spn-hero__sub + .spn-hero__sub { margin-top: var(--space-sm); }
.spn-hero .hero__meta { justify-content: center; }
.spn-hero .hero__meta-item { text-align: center; }
.spn-hero .hero__actions { justify-content: center; }

/* ---------------------------------------------------------------------- *
 * THE OPPORTUNITY — simple narrow prose
 * ---------------------------------------------------------------------- */
.spn-copy { max-width: var(--content-narrow); margin-inline: auto; }
.spn-copy p { margin-top: var(--space-sm); font-size: var(--step-1); }
.spn-copy p:first-of-type { margin-top: var(--space-sm); }
.section--light .spn-copy p { color: var(--text-secondary-muted); }
.section:not(.section--light) .spn-copy p { color: var(--ink-on-dark-muted); }

/* ---------------------------------------------------------------------- *
 * OWNER-SELECTED SPONSORSHIP PHOTOGRAPHY (from 09_SPONSORS/PHOTOS)
 * Single feature image for sections with one photo; a two-up pair for the
 * Branded Experiences section. Deliberately restrained — never more than
 * two images per section, natural proportions, no dense grids.
 * ---------------------------------------------------------------------- */
.spn-feature-img {
  margin-top: var(--space-lg);
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spn-feature-img img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  display: block;
}

.spn-image-pair {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-md);
}
.spn-image-pair figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spn-portrait-img {
  margin-top: var(--space-lg);
  max-width: 320px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.spn-portrait-img img {
  width: 100%;
  height: auto;
  display: block;
}

.spn-image-pair img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .spn-image-pair { grid-template-columns: 1fr; }
  .spn-image-pair img { min-height: 260px; max-height: 380px; }
}

/* ---------------------------------------------------------------------- *
 * AUDIENCE BLOCKS ("The Value Is the Room")
 * ---------------------------------------------------------------------- */
.spn-audience-grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(23, 23, 26, 0.12);
  border: 1px solid rgba(23, 23, 26, 0.12);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spn-audience {
  background: var(--bg-secondary);
  padding: var(--space-md);
}
.spn-audience h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-strong);
}
.spn-audience p {
  margin-top: 0.5em;
  font-size: var(--step--1);
  color: var(--text-secondary-muted);
}
@media (max-width: 900px) {
  .spn-audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .spn-audience-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * BEFORE / DURING / AFTER
 * ---------------------------------------------------------------------- */
.spn-bda-grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.spn-bda h3 {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-dark);
}
.spn-bda ul { margin-top: var(--space-sm); display: grid; gap: 0.5em; }
.spn-bda li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-on-dark-muted);
}
.spn-bda li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.spn-bda-note {
  margin-top: var(--space-lg);
  text-align: center;
  font-size: var(--step-0);
  color: var(--ink-on-dark-muted);
  max-width: 62ch;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .spn-bda-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---------------------------------------------------------------------- *
 * PARTNERSHIP LEVELS — vertical stack of tier blocks
 * ---------------------------------------------------------------------- */
.spn-tiers { max-width: 900px; margin-inline: auto; }
.spn-tier {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(23, 23, 26, 0.12);
}
.spn-tier:first-child { padding-top: 0; }
.spn-tier:last-child { border-bottom: none; padding-bottom: 0; }

.spn-tier--flagship {
  padding: var(--space-lg);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--gold-soft), transparent 65%);
}
.spn-tier--flagship:first-child { margin-top: 0; }

.spn-tier__label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-strong);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 0.3em 0.9em;
}
.spn-tier h3 {
  margin-top: 0.5em;
  font-size: var(--step-3);
}
.spn-tier__positioning {
  margin-top: var(--space-xs);
  font-size: var(--step-0);
  color: var(--text-secondary-muted);
  max-width: 62ch;
}
.spn-tier__sub {
  margin-top: var(--space-xs);
  font-size: var(--step-0);
  color: var(--text-secondary-muted);
  max-width: 62ch;
}

.spn-tier__benefits {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5em var(--space-lg);
}
.spn-tier__benefits li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-secondary-muted);
}
.spn-tier__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-strong);
}

.spn-tier__designation {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--gold-strong);
}

.spn-tier__book {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.spn-tier__book-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-strong);
  margin-bottom: 0.3em;
}
.spn-tier__book p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .spn-tier__benefits { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * COMMEMORATIVE BOOK
 * ---------------------------------------------------------------------- */
.spn-book-badge {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 0.6em 1.4em;
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- *
 * BRANDED EXPERIENCES
 * ---------------------------------------------------------------------- */
.spn-branded-grid {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spn-branded {
  background: var(--graphite-900);
  padding: var(--space-md);
}
.spn-branded h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.spn-branded p {
  margin-top: 0.5em;
  font-size: var(--step--1);
  color: var(--ink-on-dark-muted);
}
@media (max-width: 900px) {
  .spn-branded-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .spn-branded-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- *
 * PARTNER BENEFIT COMPARISON TABLE
 * ---------------------------------------------------------------------- */
.spn-table-wrap {
  margin-top: var(--space-lg);
  overflow-x: auto;
  border: 1px solid rgba(23, 23, 26, 0.12);
  border-radius: var(--radius-md);
}
.spn-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.spn-table th,
.spn-table td {
  padding: 0.9em 1em;
  text-align: left;
  border-bottom: 1px solid rgba(23, 23, 26, 0.12);
  white-space: nowrap;
}
.spn-table thead th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--text-secondary);
  background: var(--bg-secondary-raised);
}
.spn-table tbody th {
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-secondary);
}
.spn-table tbody td { color: var(--text-secondary-muted); }
.spn-table tbody tr:last-child th,
.spn-table tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------- *
 * INDEPENDENCE OF SELECTION — discreet but visible institutional note
 * ---------------------------------------------------------------------- */
.spn-independence {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid rgba(23, 23, 26, 0.12);
  border-left: 2px solid var(--gold-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-secondary);
}
.spn-independence h3 {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text-secondary);
}
.spn-independence p {
  margin-top: 0.4em;
  font-size: var(--step--1);
  color: var(--text-secondary-muted);
}
.spn-independence p + p { margin-top: 0.3em; }

/* ---------------------------------------------------------------------- *
 * 10TH EDITION MILESTONE
 * ---------------------------------------------------------------------- */
.spn-milestone { max-width: var(--content-narrow); margin-inline: auto; text-align: center; }
.spn-milestone p {
  margin-top: var(--space-sm);
  font-size: var(--step-1);
  color: var(--ink-on-dark-muted);
}
.spn-metric {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
}