/* ===========================================================
   Sport Assist — Design System
   Brand colors extracted from client logo (SPORT ASSIST - FINAL 1.eps)
   =========================================================== */

:root {
  /* Brand */
  --color-crimson: #D7354F;
  --color-crimson-dark: #B0293F;
  --color-crimson-light: #F0C3CC;
  --color-ink: #1A1A1A;
  --color-ink-soft: #211E1E;
  --color-slate: #6B6E70;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-cream: #F7F5F3;
  --color-cream-deep: #EFEBE8;
  --color-border: #E2DEDA;
  --color-border-dark: #35312F;

  /* Semantic text */
  --text-on-dark: #F5F3F1;
  --text-on-dark-muted: #B9B5B2;
  --text-on-light: var(--color-ink);
  --text-on-light-muted: var(--color-slate);

  /* Type */
  --font-display: 'Bebas Neue', 'Archivo Black', sans-serif;
  --font-heading: 'Archivo', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-base: 1rem;
  --lh-body: 1.65;

  /* Spacing (8pt rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3.25rem;
  --space-7: 4.5rem;

  /* Vertical rhythm between sections. Fixed pixels gave a 13" laptop the same
     144px between every section as a 27" monitor, and gave phones desktop-sized
     gaps on a small screen. These scale with the viewport instead. */
  --space-section: clamp(1.75rem, 1.2rem + 2.33vw, 4rem);
  --space-section-tight: clamp(1.25rem, 0.8rem + 1.8vw, 3rem);
  --space-head: clamp(1.25rem, 1rem + 0.9vw, 2.5rem);
  --space-8: 8rem;

  /* Layout */
  --container-max: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 12px 32px -12px rgba(26, 26, 26, 0.18);
  --shadow-card-hover: 0 20px 44px -14px rgba(26, 26, 26, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Set by header.php when returning from a form submission. Without this the
   jump to the confirmation animates the entire page height, which looks like
   the page is scrolling away from the form the visitor just submitted. */
html.sa-anchor-jump { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-on-light);
  background: var(--color-white);
  min-height: 100dvh;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 800; line-height: 1.1; }
p { margin: 0 0 var(--space-2); max-width: 68ch; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ---------- Focus & a11y ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-crimson);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-crimson);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- Type scale ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-crimson);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-crimson);
}
.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(2.75rem, 6vw + 1rem, 6rem);
  line-height: 0.98;
  text-transform: uppercase;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  line-height: 1.02;
  text-transform: uppercase;
}
h2.section-title {
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  letter-spacing: -0.01em;
}
h3.card-title { font-size: 1.25rem; }
.lede {
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.3rem);
  color: var(--text-on-light-muted);
  line-height: 1.6;
}
.on-dark .lede { color: var(--text-on-dark-muted); }

/* ---------- Layout ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-4); } }

.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-section-tight); }
.on-dark { background: var(--color-ink); color: var(--text-on-dark); }
.on-cream { background: var(--color-cream); }

.grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-head);
  max-width: 640px;
}
.section-head.center { margin-inline: auto; text-align: center; align-items: center; }
/* The last thing in a heading block should not add a trailing margin on top of
   the block's own spacing. */
.section-head > :last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-crimson); color: #fff; }
.btn-primary:hover { background: var(--color-crimson-dark); }
.btn-outline-light { border-color: rgba(245,243,241,0.4); color: var(--text-on-dark); }
.btn-outline-light:hover { border-color: var(--text-on-dark); background: rgba(245,243,241,0.08); }
.btn-outline-dark { border-color: var(--color-border); color: var(--text-on-light); }
.btn-outline-dark:hover { border-color: var(--color-ink); }
.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(26,26,26,0.92);
  backdrop-filter: blur(10px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  color: var(--text-on-dark);
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}
.brand__logo {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.footer-col .brand__logo {
  height: 48px;
}
.nav-toggle {
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  color: #fff;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.primary-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--color-ink);
  padding: calc(var(--space-2) + 56px) var(--space-3) var(--space-4);
  overflow-y: auto;
}
.primary-nav.is-open { display: block; }
.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
}
.primary-nav__list a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--text-on-dark);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.primary-nav__list a[aria-current="page"] { color: var(--color-crimson); }
.primary-nav__cta { margin-top: var(--space-4); }

@media (min-width: 1024px) {
  .primary-nav {
    display: block;
    position: static;
    background: transparent;
    padding: 0;
    overflow: visible;
  }
  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.95rem;
  }
  .primary-nav__list a {
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
  }
  .primary-nav__list a:hover,
  .primary-nav__list a[aria-current="page"] { border-color: var(--color-crimson); }
  .primary-nav__cta { margin-top: 0; }
  .primary-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--color-ink);
}
.hero__media {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26,26,26,0.55) 0%, rgba(26,26,26,0.72) 55%, rgba(26,26,26,0.94) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-7) var(--space-6);
  max-width: 820px;
}
.hero__tag {
  font-family: var(--font-display);
  color: var(--color-crimson);
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}
/* The global .lede colour is tuned for light backgrounds, so inside the hero
   it renders as dark grey on a dark photo and all but disappears. Colour only
   - the scrim behind it is deliberately left at its original strength. */
.hero__content .lede {
  color: var(--text-on-dark);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Photo placeholder (swap for real photography via WP featured image) */
.photo-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(215,53,79,0.35), transparent 55%),
    linear-gradient(135deg, #2a2626 0%, #1a1a1a 60%, #100f0f 100%);
}
.photo-placeholder--light {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(215,53,79,0.12), transparent 55%),
    linear-gradient(135deg, #EFEBE8 0%, #E2DEDA 100%);
}
.photo-placeholder__label {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,243,241,0.55);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.photo-placeholder--light .photo-placeholder__label { color: rgba(26,26,26,0.45); }
.photo-placeholder__label svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- Sold-out stamp (Golf event details) ---------- */
.sold-out-stamp {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-4);
  padding: 0.9rem 1.9rem 0.75rem;
  border: 4px solid var(--color-crimson);
  border-radius: 8px;
  background: rgba(215, 53, 79, 0.05);
  color: var(--color-crimson);
  text-align: center;
  line-height: 1;
  transform: rotate(-6deg);
}
.sold-out-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px solid var(--color-crimson);
  border-radius: 4px;
  opacity: 0.6;
  pointer-events: none;
}
.sold-out-stamp__top,
.sold-out-stamp__sub {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sold-out-stamp__main {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.form-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 2px 16px rgba(26,26,26,0.06); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img, .card__media picture, .sa-fill-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.card__link {
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-crimson);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.card:hover .card__link svg { transform: translateX(3px); }

/* Board member card */
.person-card { text-align: left; }
.person-card__media { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
.person-card__name { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; margin-top: var(--space-2); transition: color var(--dur-base) var(--ease-out); }
.person-card__role { color: var(--text-on-light-muted); font-size: 0.9rem; }

.person-card--link { display: block; }
.person-card--link:hover .person-card__name,
.person-card--link:focus-visible .person-card__name { color: var(--color-crimson); }
.person-card--link:focus-visible { outline: 3px solid var(--color-crimson); outline-offset: 4px; border-radius: var(--radius-sm); }

.person-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  margin-top: var(--space-1);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-crimson);
  cursor: pointer;
}
.person-card__toggle svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.person-card__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.person-card__bio { margin-top: var(--space-1); color: var(--text-on-light-muted); font-size: 0.95rem; }
.person-card__bio p { margin-bottom: var(--space-2); }
.person-card__bio p:last-child { margin-bottom: 0; }
.person-card__bio:not(.is-expanded) p:first-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.person-card__bio:not(.is-expanded) p:not(:first-child) { display: none; }
.person-card__bio.is-expanded p:first-child { display: block; }

/* Testimonial card */
.quote-card {
  background: var(--color-ink);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}
.quote-card__mark { font-family: var(--font-display); font-size: 3rem; color: var(--color-crimson); line-height: 0.6; }
.quote-card__text { font-size: 1.05rem; }
.quote-card__by { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-3); }
.form-field label { font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; }
.form-field label .required-mark { color: var(--color-crimson); margin-left: 0.15em; }
.form-field label .optional-mark { color: var(--text-on-light-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 0.4em; }
.form-field input, .form-field textarea {
  min-height: 48px;
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.on-dark .form-field input, .on-dark .form-field textarea {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--color-crimson);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-crimson-light);
}
.form-note { font-size: 0.85rem; color: var(--text-on-light-muted); }

/* Submission confirmation / error banner, shown at the top of a form after
   submitting. The redirect targets its #sa-form-status anchor, so scroll-margin
   keeps it clear of the sticky site header when the browser jumps to it. */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius-md);
  scroll-margin-top: 110px;
}
.form-status:focus { outline: none; }
.form-status__icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.15rem; }
.form-status__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; }
.form-status__text { font-size: 0.95rem; margin-top: 0.15rem; }
.form-status--ok { background: #EAF7EF; border-color: #A8DBBC; color: #14572B; }
.form-status--ok .form-status__icon { color: #1A7A3C; }
.form-status--error { background: #FDECEF; border-color: var(--color-crimson-light); color: #8A1F30; }
.form-status--error .form-status__icon { color: var(--color-crimson); }

/* Currency-prefixed input (e.g. registration cost, amount requested) */
.input-prefix { position: relative; }
.input-prefix__symbol {
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-on-light-muted);
  font-weight: 700;
  pointer-events: none;
}
.input-prefix input { padding-left: 1.9em; }
.on-dark .form-note { color: var(--text-on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink-soft); color: var(--text-on-dark); padding-block: var(--space-section-tight) var(--space-4); }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-col h4 { font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a:hover { color: var(--color-crimson); }
.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-on-dark-muted);
}
.social-row { display: flex; gap: var(--space-2); }
.social-row a {
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: grid; place-items: center;
}
.social-row a:hover { border-color: var(--color-crimson); background: var(--color-crimson); }
.social-row svg { width: 18px; height: 18px; }

/* ---------- Page header (inner pages) ---------- */
.page-header {
  background: var(--color-ink);
  color: #fff;
  padding-block: calc(var(--space-section) + 20px) var(--space-section-tight);
}

/* ---------- Stat row ---------- */
.stat-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
/* auto-fit rather than a fixed 4, so removing a number in Site Settings
   leaves the remaining ones evenly spread instead of an empty column. */
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.5rem); color: var(--color-crimson); }
.stat__label { font-size: 0.85rem; color: var(--text-on-dark-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.max-w-prose { max-width: 62ch; }
.tag-pill {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--color-crimson-light);
  color: var(--color-crimson-dark);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Sponsorship Tiers ---------- */
/* Single responsive row, however many tiers exist. Mobile = full-width stack, tablet+ = auto-fit columns (~300px min each). */
.tier-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* Two levels per row on desktop, never more - five across put the benefit
   lists in ~200px columns, unreadable at any font size. Below 900px it drops
   to one per row: two columns in a tablet-width window is worse than one, at
   31 characters a line against 58. */
@media (min-width: 900px) { .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Every card keeps the same size — a full-width donation box would stretch its
   text to a line length no one wants to read. */
.tier-grid + .tier-grid { margin-top: var(--space-4); }

.tier-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.06), var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-card:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.08), var(--shadow-card-hover); }
/* The ring has to be drawn as a shadow rather than a border, or it would sit
   inside the rounded corner and clip the full-bleed artwork. */
.tier-card--diamond-plus { box-shadow: 0 0 0 3px var(--color-crimson), var(--shadow-card); }
.tier-card--diamond-plus:hover { box-shadow: 0 0 0 3px var(--color-crimson), var(--shadow-card-hover); }
/* The tier graphics are finished poster artwork carrying their own logo, level
   and price, so the box takes its height from the image rather than imposing a
   shape on it. A fixed ratio here would either crop the artwork or letterbox
   it, and the square and portrait versions in use do not share one. */
.tier-card__media {
  position: relative;
  background: var(--color-ink);
}
.tier-card__media picture { display: block; }
.tier-card__media img { width: 100%; height: auto; display: block; }
/* No graphic yet: the placeholder is absolutely positioned, so the box needs a
   shape of its own or it would collapse to nothing. */
.tier-card__media--empty { aspect-ratio: 600 / 960; width: 100%; }
/* Tighter padding on phones: at 375px every pixel of it comes straight off the
   line length of the benefit list. */
.tier-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
@media (min-width: 640px) { .tier-card__body { padding: var(--space-4); } }
.tier-card__name { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.75rem); }
.tier-card__blurb { font-size: 1rem; color: var(--text-on-light-muted); }
/* What the sponsorship includes is the reason anyone reads this card, so it is
   set at full body size in the main text colour rather than as muted fine
   print. */
.tier-card__blurb, .tier-card__benefits { max-width: 58ch; }
.tier-card__benefits { display: grid; gap: 0.6rem; }
.tier-card__benefits li {
  position: relative;
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-on-light);
}
.tier-card__benefits li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.55em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--color-crimson);
}
/* The amount sits on a plate of its own, centred, echoing the price panel on
   the poster artwork so the card and the graphic read as one piece. The white
   inner ring and crimson halo are the same double border the posters use. */
.tier-card__price {
  margin-top: auto;
  margin-bottom: 0;
  align-self: center;
  text-align: center;
  padding: 0.5em 1.3em 0.4em;
  border-radius: 14px;
  background: linear-gradient(150deg, var(--color-crimson) 0%, var(--color-crimson-dark) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.6rem + 1vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(215, 53, 79, 0.4),
    0 12px 24px -10px rgba(26, 26, 26, 0.5);
}
/* On the donation card the plate is a link rather than a label. */
.tier-card__donate {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tier-card__donate:hover,
.tier-card__donate:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px rgba(215, 53, 79, 0.6),
    0 16px 30px -10px rgba(26, 26, 26, 0.55);
}

/* Donation card artwork: a crimson heart carrying the word, on the same dark
   ground as the tier posters, with the charity's tagline beneath it. */
.tier-donate-art {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: var(--space-4);
  text-align: center;
  background:
    radial-gradient(135% 85% at 50% 8%, rgba(215, 53, 79, 0.5), transparent 60%),
    linear-gradient(160deg, #3b3230 0%, #1a1a1a 55%, #0d0c0c 100%);
}
.tier-donate-art__heart {
  width: 78%;
  max-width: 460px;
  filter: drop-shadow(0 14px 30px rgba(215, 53, 79, 0.45));
}
.tier-donate-art__shape { fill: var(--color-crimson); }
.tier-donate-art__word {
  font-family: var(--font-display);
  font-size: 3.9px; /* in the SVG's own 24-unit space, so it scales exactly with the heart */
  letter-spacing: 0.06px;
  text-transform: uppercase;
  fill: #fff;
}
.tier-donate-art__tagline {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.72rem, 0.6rem + 0.35vw, 0.95rem);
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--color-crimson-light);
}

/* The poster runs edge to edge at every size. Capping and centring it left a
   ~136px white gutter either side on desktop; full bleed is both larger and
   cleaner, and two cards per row keeps it from getting out of hand. */

/* One call to action for the whole grid rather than one per card. */
.tier-cta {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.tier-cta__copy { max-width: 54ch; margin: 0; }
.tier-card__note {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-light-muted);
}

/* Placeholder graphic that still communicates desktop/mobile asset slots */
.tier-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: var(--space-2);
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(215,53,79,0.28), transparent 55%),
    linear-gradient(150deg, #2a2626 0%, #1a1a1a 65%, #100f0f 100%);
  color: var(--text-on-dark);
}
.tier-placeholder__icon { width: 34px; height: 34px; color: var(--color-crimson); }
.tier-placeholder__title { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; text-transform: uppercase; }
.tier-placeholder__hint { font-size: 0.7rem; color: var(--text-on-dark-muted); letter-spacing: 0.04em; text-transform: uppercase; max-width: 20ch; }
.tier-placeholder__price { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--color-crimson); }
/* Warmer, crimson-lit variant so the donation box reads as part of the same
   set as the photographic tier posters instead of an empty slot. */
.tier-placeholder--donate {
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(215,53,79,0.45), transparent 62%),
    linear-gradient(155deg, #38312e 0%, #1a1a1a 55%, #0e0d0d 100%);
}
.tier-placeholder--donate .tier-placeholder__icon { width: 42px; height: 42px; fill: var(--color-crimson); }

/* ---------- Infinite sponsor slider ---------- */
.sponsor-slider {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sponsor-slider__track {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: max-content;
  animation: sponsor-scroll var(--marquee-duration, 32s) linear infinite;
}
.sponsor-slider__track--reverse { animation-direction: reverse; }
.sponsor-slider:hover .sponsor-slider__track { animation-play-state: paused; }
@keyframes sponsor-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sponsor-slider__track { animation: none; overflow-x: auto; }
}
.sponsor-slide {
  flex: 0 0 auto;
  width: 180px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.sponsor-slide img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* ---------- Sponsor logos grouped by tier ---------- */
.sponsor-tier-row { margin-bottom: var(--space-5); }
.sponsor-tier-row:last-child { margin-bottom: 0; }
.sponsor-tier-row__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: var(--space-2);
}
.sponsor-tier-row__label {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}
.sponsor-tier-row--diamond-plus .sponsor-tier-row__label { color: var(--color-crimson); }
.sponsor-tier-row--diamond-plus .sponsor-slide { border-color: var(--color-crimson); }

/* ---------- Golf tournament year archive ---------- */
.year-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .year-grid { grid-template-columns: repeat(4, 1fr); } }
.year-card__media { aspect-ratio: 4 / 3; position: relative; }
.year-card__year {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  background: var(--color-crimson);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  padding: 0.15em 0.7em;
  border-radius: var(--radius-sm);
}

/* ---------- Gallery page: year boxes ---------- */
.gallery-year-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .gallery-year-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-year-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-year-card { text-decoration: none; color: inherit; }
.gallery-year-card__media { aspect-ratio: 4 / 3; position: relative; }

/* Subtle-but-noticeable logo watermark on the featured photo */
.gallery-year-card__watermark {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  z-index: 1;
  display: flex;
  align-items: center;
  background: rgba(16,15,15,0.55);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.55em;
}
.gallery-year-card__watermark img { height: 20px; width: auto; display: block; opacity: 0.92; }

/* "Photos Coming Soon" card — a year with no Tournament Year post yet, static, not clickable */
.gallery-year-card--soon { cursor: default; }
.gallery-year-card--soon:hover { transform: none; box-shadow: none; }
.gallery-year-card--soon .btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.recap-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--color-ink);
}

/* ---------- Forms: multi-column & policy lists ---------- */
.form-grid { display: grid; gap: var(--space-3) var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.form-fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin: 0 0 var(--space-4); background: #FBFAF9; }
.form-fieldset legend {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0 0.6rem;
  color: var(--color-ink);
}
.form-fieldset__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-crimson);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}
.form-fieldset > .form-grid:first-of-type,
.form-fieldset > .form-field:first-of-type,
.form-fieldset > .form-note:first-of-type { margin-top: var(--space-1); }

.policy-list { display: flex; flex-direction: column; gap: 0.85rem; margin: var(--space-3) 0 var(--space-4); }
.policy-list li { padding-left: 1.6rem; position: relative; }
.policy-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-crimson);
}
.reference-grid { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: 1fr; margin: var(--space-2) 0 var(--space-4); }
@media (min-width: 640px) { .reference-grid { grid-template-columns: 1fr 1fr; } }
.reference-grid li { padding-left: 1.4rem; position: relative; }
.reference-grid li::before {
  content: "✓";
  position: absolute;
  left: 0; color: var(--color-crimson); font-weight: 700;
}