/* ================================================================
   Sections — page-section-level layouts
   Extracted from designs/inner-pages-preview.html with token
   substitution applied (hex → var(--token) where a match exists).
   ================================================================ */

/* ----- Body section + content ----- */
.body-section {
  padding: 80px var(--section-pad-x) 96px;
  background: var(--surface-base);
  display: flex;
  justify-content: center;
}
.body-content {
  width: 100%;
  max-width: 720px;
  color: var(--text-base);
}
.body-content h2 {
  font-size: 32px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--text-base);
}
.body-content h2 + p { margin-top: 0; }
.body-content h2:not(:first-child) { margin-top: 56px; }
.body-content p {
  font-size: 18px; line-height: 1.65;
  margin: 0 0 18px;
  max-width: 65ch;
  color: var(--text-base);
  opacity: 0.92;
}

/* ----- CTA panel ----- */
.cta-panel {
  background: var(--surface-section);
  color: var(--text-section);
  padding: 72px var(--section-pad-x);
  text-align: center;
}
@media (max-width: 899px) {
  .cta-panel { padding: 48px var(--section-pad-x); }
  .cta-panel h2 { font-size: 32px; }
}
.cta-panel h2 {
  font-size: 40px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--text-section);
}
.cta-panel h2 em {
  font-style: italic;
  color: var(--accent-primary);
}
.cta-panel p {
  font-size: 17px; line-height: 1.5;
  max-width: 56ch;
  margin: 0 auto 36px;
  text-align: center;
  /* Was opacity 0.85 (5.85:1 on Charcoal teal). Dropped to full
     text-section so paragraph copy on the CTA panel reads firmly on
     mobile — at 7.16:1 / AAA on Charcoal, 13:1+ on light themes. */
}

/* Button row — explicitly centred so the "Click the button below"
   line sits squarely above a centred button, whether there's one
   button or two (Submit + optional info-sheet download). */
.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ----- Sponsor band (single-award template) -----
 * Sub-classes are prefixed `.sponsor-band-*` to avoid collision with the
 * homepage's `.sponsor-card` tile (different visual concept). The rules
 * below match the approved inner-pages-preview design:
 *   - 96px paper-backed logo square (flex-shrink: 0)
 *   - "sponsored by" eyebrow at section text @ 75%, sentence-case
 *   - 22px bold sponsor name in section text colour
 */
.sponsor-band {
  background: var(--surface-section);
  padding: 28px var(--section-pad-x);
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.sponsor-band-card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sponsor-band-logo {
  width: 96px;
  height: 96px;
  background: var(--surface-card);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sponsor-band-logo img {
  max-width: 80%;
  max-height: 80%;
}
.sponsor-band-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sponsor-band-eyebrow {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-section);
  /* Was opacity 0.75 (4.80:1 — just AA on Charcoal teal). Dropped so
     the "Sponsored by" line reads cleanly on mobile screens; the
     22px bold sponsor name below provides hierarchy without a fade. */
}
.sponsor-band-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-section);
}

/* Empty-state variant — "Seeking a sponsor for 2026" */
.sponsor-band-available {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-section);
}
.sponsor-band-available .sponsor-band-eyebrow {
  font-size: 18px;
  margin: 0;
}
.sponsor-band-cta {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-section);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ----- Judges section ----- */
.judges-section {
  padding: 32px var(--section-pad-x) 96px;
  background: var(--surface-base);
}

/* ----- Steps strip (nominate flow) -----
   Equal top/bottom padding so the three step cards sit with a balanced
   gap above and below. */
.steps-strip {
  background: var(--surface-base);
  padding: 40px 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) {
  .steps-strip { padding: 32px var(--section-pad-x); gap: 16px; }
}
@media (max-width: 899px) {
  .steps-strip { grid-template-columns: 1fr; }
}

/* ----- Form section ----- */
.form-section {
  padding: 16px var(--section-pad-x) 80px;
  background: var(--surface-base);
  display: flex; justify-content: center;
}

/* ----- Prose section (generic content pages) ----- */
.prose-section {
  padding: 24px var(--section-pad-x) 96px;
  background: var(--surface-base);
  display: flex; justify-content: center;
}
.prose {
  width: 100%;
  max-width: 720px;
  color: var(--text-base);
}
.prose h2 {
  font-size: 32px; font-weight: 700;
  margin: 56px 0 16px;
  color: var(--text-base);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 22px; font-weight: 700;
  margin: 32px 0 8px;
  color: var(--text-base);
}
.prose p {
  font-size: 18px; line-height: 1.65;
  margin: 0 0 18px;
  max-width: 65ch;
  color: var(--text-base);
  opacity: 0.92;
}
.prose ul {
  font-size: 18px; line-height: 1.65;
  padding-left: 24px;
  max-width: 65ch;
  color: var(--text-base);
  opacity: 0.92;
  list-style: disc;
}
.prose a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Footer ----- */
.footer {
  background: var(--surface-base);
  color: var(--text-base);
  padding: 64px var(--section-pad-x) 48px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 3fr; gap: 64px;
  margin-bottom: 48px;
}
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--text-base); font-size: 14px; opacity: 0.85; text-decoration: none; }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px; opacity: 0.7;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer-credit a:hover,
.footer-credit a:focus { color: var(--accent-warm-text); }

/* Footer logo */
.footer-logo {
  display: flex; align-items: center; gap: 14px;
  color: var(--accent-primary);
  margin-bottom: 24px;
}
.footer-logo svg { display: block; flex-shrink: 0; }
.footer-logo-wordmark {
  font-family: inherit; font-weight: 700;
  color: var(--text-base);
  line-height: 0.95; letter-spacing: -0.01em;
  font-size: 28px;
}


/* ================================================================
   Timeline page — page-timeline.php (slug: timeline)
   Vertical date-led list of 2026 key milestones.
   ================================================================ */

.page-timeline {
  max-width: 980px;
  margin: 0 auto;
  padding: 80px var(--section-pad-x) 96px;
}

.timeline-hero {
  margin-bottom: 56px;
}
.timeline-hero .eyebrow {
  margin-bottom: 16px;
}
.timeline-hero h1 {
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.timeline-lede {
  font-size: 20px;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
  opacity: 0.92;
}

.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}
.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}

.timeline-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-day {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-primary);
}
.timeline-month {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-base);
  opacity: 0.7;
}
.timeline-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm-text);
  margin-top: 4px;
}

.timeline-body h2 {
  margin: 0 0 12px;
}
.timeline-body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 60ch;
  opacity: 0.92;
}
.timeline-body p + p {
  margin-top: 12px;
}
.timeline-body p.timeline-please-note {
  font-size: 15px;
  opacity: 0.78;
  font-style: italic;
}
.timeline-please-note strong {
  font-style: normal;
}

@media (max-width: 899px) {
  .page-timeline { padding: 48px var(--section-pad-x) 64px; }
  .timeline-hero { margin-bottom: 32px; }
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
  .timeline-date {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .timeline-day { font-size: 36px; }
  .timeline-note { margin-top: 0; }
}


/* ================================================================
   About page — page-about.php (slug: about)
   Editorial layout: hero → wide photo → prose → half-width photo →
   prose with subheading → centred pull-quote → closing prose.
   ================================================================ */

.page-about {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px var(--section-pad-x) 96px;
}

.about-hero {
  margin-bottom: 56px;
  max-width: 720px;
}
.about-hero .eyebrow { margin-bottom: 16px; }
.about-hero h1 { margin: 0 0 20px; letter-spacing: -0.01em; }
.about-hero h1 em { color: var(--accent-deep); font-style: italic; }
.about-lede {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.92;
  max-width: 60ch;
}

/* Photo blocks */
.about-pic { margin: 0 0 56px; border-radius: 8px; overflow: hidden; }
.about-pic img { display: block; width: 100%; height: auto; }
.about-pic-wide  { aspect-ratio: 16 / 7; }
.about-pic-wide img { width: 100%; height: 100%; object-fit: cover; }
.about-pic-half {
  max-width: 720px;
  aspect-ratio: 3 / 2;
}
.about-pic-half img { width: 100%; height: 100%; object-fit: cover; }

/* Prose blocks */
.about-prose { margin: 0 0 56px; max-width: 720px; }
.about-prose h2 { margin: 0 0 20px; letter-spacing: -0.01em; }
.about-prose p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 60ch;
  opacity: 0.92;
}
.about-prose p:last-child { margin-bottom: 0; }

/* Centred pull quote — single section-tinted panel wrapping headshot,
   blockquote and the name/role figcaption together. */
.about-quote {
  margin: 0 auto 56px;
  max-width: 760px;
  padding: 40px 32px;
  background: var(--surface-section);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.about-quote-headshot {
  width: 96px; height: 96px;
  border-radius: 50%; object-fit: cover;
  display: block;
}
.about-quote blockquote {
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
  color: var(--text-section);
  font-weight: 400;
  max-width: 56ch;
}
.about-quote figcaption {
  display: flex; flex-direction: column; align-items: center;
  font-size: 14px; gap: 4px;
}
.about-quote-name {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-section);
}
/* Role label — 12px small text. Full text-section (was muted, only
   5.0:1 on Charcoal's deep teal — washed on mobile). The 12px size +
   uppercase + tracking handles hierarchy without needing a colour fade. */
.about-quote-role {
  color: var(--text-section);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* Closing prose — slightly tighter */
.about-prose-close p { font-size: 17px; }
.about-thanks {
  font-size: 18px !important;
  font-style: italic;
  opacity: 1 !important;
  color: var(--accent-primary);
}

@media (max-width: 899px) {
  .page-about { padding: 48px var(--section-pad-x) 64px; }
  .about-hero { margin-bottom: 32px; }
  .about-pic { margin-bottom: 32px; }
  .about-pic-wide { aspect-ratio: 4 / 3; }
  .about-prose { margin-bottom: 32px; }
  .about-quote { padding: 28px 20px; }
  .about-quote blockquote { font-size: 18px; }
}