/* ==========================================================================
   Te Anau Rugby Football Club — stylesheet
   Palette: club green + gold (from the crest)
   ========================================================================== */

/* ===== LOCAL FONT TEST — Barlow Condensed (self-hosted). To revert: delete
   this whole block and restore --font-body to the Inter stack below. ===== */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 900;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Barlow Condensed"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../fonts/fonts/BarlowCondensed-Italic.ttf") format("truetype");
}

:root {
  /* Brand */
  --green:        #1c5231;
  --green-dark:   #123a22;
  --green-deep:   #0d2a18;
  --gold:         #e6b23e;
  --gold-light:   #f4cf6a;
  --gold-dark:    #c8901f;

  /* Neutrals */
  --ink:          #1a1f1c;
  --body:         #3a423d;
  --muted:        #6b746d;
  --line:         #e3e7e4;
  --surface:      #ffffff;
  --surface-2:    #f4f7f4;
  --surface-3:    #eef2ee;

  /* System */
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(13,42,24,.06), 0 8px 24px rgba(13,42,24,.08);
  --shadow-lg:    0 12px 40px rgba(13,42,24,.16);
  --container:    1150px;
  --header-h:     72px;

  --font-head: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  /* LOCAL FONT TEST — body switched to Barlow Condensed. Original was:
     --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; */
  --font-body: "Barlow Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Global type scale — bump this % to grow/shrink all rem-based sizes site-wide */
html { scroll-behavior: smooth; font-size: 112.5%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--surface-2);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.05;
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: .5px;
}
h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); text-transform: uppercase; font-weight: 900; }
h3 { font-size: 1.35rem; letter-spacing: .3px; }
p  { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--green);
  border-bottom: 4px solid var(--gold);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); gap: 16px;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand__logo {
  height: 52px; width: 52px; flex: none;
  border-radius: 50%; background: #fff;
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gold);
}
.brand__logo img { height: 100%; width: 100%; object-fit: contain; padding: 3px; }
.brand__text { min-width: 0; }
/* Both lines are display:block with line-height:1, so the space between the club name
   and the tagline is set by margin-top on .brand__tag alone. Previously .brand__name was
   an inline span, so its line box took the body's 1.65 line-height as leading rather than
   its own line-height:1 — that leading, plus the tagline's, padded the two lines apart.
   Change the tagline's margin-top to adjust the spacing. */
.brand__name {
  display: block;
  font-family: var(--font-head); font-weight: 900; text-transform: uppercase;
  color: #fff; font-size: 1.35rem; line-height: 1; letter-spacing: 1px;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.brand__name .accent { color: var(--gold-light); }
.brand__tag {
  display: block; font-size: .92rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-light); font-family: var(--font-body); font-weight: 700;
  line-height: 1; margin-top: 5px;
}

/* ---------- Nav ---------- */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; border-radius: 8px;
}
.nav-toggle span { display: block; height: 2.5px; background: #fff; border-radius: 2px; transition: .25s; }
.nav-toggle span + span { margin-top: 5px; }

.main-nav ul {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav a {
  display: block; padding: 10px 12px; border-radius: 8px; white-space: nowrap;
  color: rgba(255,255,255,.86); font-family: var(--font-head);
  font-size: 1rem; letter-spacing: .3px; text-transform: uppercase; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.main-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.main-nav a.is-active { background: var(--gold); color: var(--green-deep); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; text-align: center;
  padding: clamp(56px, 10vw, 104px) 0;
  min-height: clamp(420px, 70vh, 720px);
  display: flex; align-items: center;
  background-color: var(--green);
  background-size: cover; background-position: center;
  overflow: hidden;
}
/* dark overlay so heading text stays legible over any hero photo */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* soft green vignette behind the overlaid text, image stays full-colour at edges */
  background: radial-gradient(ellipse 110% 85% at 50% 50%,
    rgba(13,42,24,.74) 0%, rgba(13,42,24,.58) 26%, rgba(13,42,24,.36) 46%,
    rgba(13,42,24,.16) 66%, rgba(13,42,24,.04) 82%, rgba(13,42,24,0) 92%);
}
.hero > .container { position: relative; z-index: 3; width: 100%; }

/* Hero slideshow */
.hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--gold-light); }

/* Home hero — crest lockup: crest + gold divider + stacked two-tone title */
.hero__lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 34px); text-align: left; margin-bottom: 4px;
}
.hero__crest {
  flex: none; width: clamp(120px, 17vw, 230px); height: auto;
}
.hero__lockup-text {
  border-left: 3px solid var(--gold); padding-left: clamp(18px, 3vw, 34px);
}
.hero__lockup-text .eyebrow { margin-bottom: 10px; }
.hero__title {
  font-size: clamp(2.8rem, 8vw, 6rem); line-height: .86; letter-spacing: .5px;
  font-style: normal; font-weight: 900; text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.5); margin-bottom: 0;
}
.hero__title .hero__title-top { display: block; color: #fff; }
.hero__title .accent { display: block; color: var(--gold); }
@media (max-width: 560px) {
  .hero__lockup { flex-direction: column; gap: 16px; text-align: center; }
  .hero__lockup-text { border-left: 0; padding-left: 0; }
}
.hero p.lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 620px; margin: .4rem auto 1.8rem;
  color: rgba(255,255,255,.9);
}
.hero--sub { padding: clamp(40px, 7vw, 68px) 0; min-height: clamp(300px, 45vh, 460px); }

/* Full-viewport heroes — image fills the first screen, content follows on scroll */
.hero--slideshow, .hero--full { min-height: calc(100vh - var(--header-h)); }

/* Animated scroll cue (home hero) */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; opacity: .92;
  font-family: var(--font-head); font-weight: 900; text-transform: uppercase;
  letter-spacing: 3px; font-size: clamp(1.3rem, 3vw, 2rem);
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  animation: scrollCue 1.9s ease-in-out infinite;
}
.scroll-cue:hover { opacity: 1; color: var(--gold-light); }
.scroll-cue svg { width: clamp(48px, 7vw, 72px); height: clamp(48px, 7vw, 72px); }
/* keep the cue absolutely positioned even as a direct child of .immersive */
.immersive > .scroll-cue { position: absolute; z-index: 4; }
@keyframes scrollCue {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 9px); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
.hero--sub h1 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.45);
}
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: 3px; font-size: .78rem;
  color: var(--gold-light); margin-bottom: 14px;
}

/* ===== Immersive full-page hero (Senior page experiment) =====
   The hero photo runs as one continuous background from header to footer,
   with the hero + content section overlaid on top. Remove this block and the
   <div class="immersive"> wrapper in senior.html to revert. */
.immersive {
  position: relative; background-size: cover; background-repeat: no-repeat; color: #fff;
  min-height: calc(100vh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
}
.immersive::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: transparent; /* no full overlay — each content piece gets its own green panel */
}
/* Soft green vignette behind each overlaid content piece (hero text + left column) */
.immersive .hero > .container,
.immersive .split > div:not(.card) {
  background: radial-gradient(ellipse closest-side at center,
    rgba(13,42,24,.76) 0%, rgba(13,42,24,.66) 42%, rgba(13,42,24,.44) 64%,
    rgba(13,42,24,.2) 82%, rgba(13,42,24,.06) 93%, rgba(13,42,24,0) 100%);
}
.immersive .hero > .container { max-width: 760px; padding: 28px 54px 10px; }
.immersive .split > div:not(.card) { padding: 40px 48px; }
.immersive > * { position: relative; z-index: 1; }
/* hero sits on the shared wrapper background — drop its own bg/overlay */
.immersive .hero { background: none; min-height: 0; overflow: visible; padding-bottom: 0; }
.immersive .hero::before, .immersive .hero::after { display: none; }
/* Tighten the stack so the content panels sit up close under the hero title. This keeps
   the whole block inside one screen — junior's second coordinator card was pushing it
   ~200px past the fold, which stranded the scroll cue below the bottom of the screen. */
.immersive .hero { padding-top: clamp(20px, 3vw, 40px); }
.immersive .section { padding-top: clamp(6px, 1vw, 10px); padding-bottom: clamp(14px, 2vw, 24px); }
/* Top-align the two columns instead of centring them, so the contact card hangs from the
   top of the row rather than sinking toward the bottom of the taller column. Without this
   junior's card drops far enough to sit behind the scroll cue's text. */
.immersive .split { align-items: start; }
/* content section becomes transparent and light-on-dark */
.immersive .section { background: transparent; }
.immersive .section h2 { color: #fff; }
.immersive .section .eyebrow { color: var(--gold-light) !important; }
.immersive .section p { color: rgba(255,255,255,.9); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; cursor: pointer; border: 2px solid transparent;
  font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .5px;
  text-transform: uppercase; font-weight: 600; transition: transform .12s ease, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--green-deep); box-shadow: 0 6px 18px rgba(230,178,62,.35); }
.btn--gold:hover { background: var(--gold-light); color: var(--green-deep); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); color: #fff; }
.btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 8vw, 84px) 0; }
.section--tint { background: var(--surface); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 5vw, 52px); }
.section-head .eyebrow { color: var(--gold-dark); }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section-head h2::after {
  content: ""; display: block; width: 60px; height: 4px; border-radius: 2px;
  background: var(--gold); margin: 14px auto 0;
}

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h3 { color: var(--green); margin-bottom: .5rem; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--green); margin-bottom: 16px;
}
.card__icon svg { width: 24px; height: 24px; }

/* Contact / person card */
.person {
  display: grid; grid-template-columns: 1fr auto; column-gap: 18px;
  grid-template-areas: "role avatar" "name avatar" "contact avatar";
  align-items: center;
}
.person__role { grid-area: role; }
.person__name { grid-area: name; }
.person__contact { grid-area: contact; }
.person__avatar {
  grid-area: avatar; align-self: center;
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: var(--surface-3); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.person__avatar svg { width: 54px; height: 54px; color: var(--muted); }
.person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.person__role {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; font-size: .72rem; color: var(--gold-dark); margin-bottom: 6px;
}
.person__name { font-family: var(--font-head); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.person__contact { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: .96rem; }
.person__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--body); }
.person__contact a:hover { color: var(--green); }
.person__contact svg { width: 16px; height: 16px; color: var(--gold-dark); flex: none; }

/* ---------- Info list (training etc.) ---------- */
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }
.info-list .k {
  flex: none; width: 130px; font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: .5px; color: var(--green); font-size: 1.05rem;
}
.info-list .v { color: var(--body); }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.pill {
  background: var(--surface-3); color: var(--green-dark); border-radius: 999px;
  padding: 7px 16px; font-size: .9rem; font-weight: 600;
}

/* ---------- Split / feature ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.split--stretch { align-items: stretch; }
.split--stretch .card { display: flex; flex-direction: column; justify-content: center; }
.split--stretch .info-list li { padding: 20px 0; }
.split--stretch .info-list .k { width: 150px; font-size: 1.25rem; }
.split--stretch .info-list .v { font-size: 1.2rem; }
.split--stretch .socials { margin-top: 26px !important; }
.split--stretch .socials a { width: 48px; height: 48px; }
.split--stretch .socials svg { width: 23px; height: 23px; }
.split__media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--surface-3); aspect-ratio: 4/3; display: grid; place-items: center;
}
.split__media img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }

/* ---------- Sponsors ---------- */
.sponsor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sponsor {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  width: 200px; max-width: 100%; aspect-ratio: 3/2; display: grid; place-items: center; padding: 22px;
  box-shadow: var(--shadow); transition: transform .18s;
}
.sponsor:hover { transform: translateY(-3px); }
.sponsor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sponsor--placeholder {
  color: var(--muted); font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 1px; text-align: center; font-size: 1rem; border-style: dashed;
}

/* Sponsor tiers */
.tier { margin-bottom: 46px; }
.tier:last-child { margin-bottom: 0; }
.tier__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.tier__badge {
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  padding: 6px 18px; border-radius: 999px; font-size: 1.05rem; white-space: nowrap; flex: none;
  box-shadow: var(--shadow);
}
.tier__badge--platinum { background: linear-gradient(135deg,#f4f5f7,#d9dce1); color: #40454d; }
.tier__badge--gold     { background: linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color: var(--green-deep); }
.tier__badge--silver   { background: linear-gradient(135deg,#d7dade,#b0b5bd); color: #363b42; }
.tier__badge--bronze   { background: linear-gradient(135deg,#e0a366,#b06a2c); color: #fff; }
.tier__badge--services { background: linear-gradient(135deg,var(--green),var(--green-deep)); color: #fff; }
.tier__line { flex: 1 1 auto; height: 2px; background: var(--line); }
.tier__count { flex: none; color: var(--muted); font-size: .85rem; font-family: var(--font-body); }

/* Per-tier tile sizing (bigger for higher tiers) */
.sponsor-grid--platinum .sponsor { width: 260px; }
.sponsor-grid--gold     .sponsor { width: 220px; }
.sponsor-grid--silver   .sponsor { width: 175px; }
.sponsor-grid--bronze   { gap: 14px; }
.sponsor-grid--bronze   .sponsor { width: 150px; aspect-ratio: 2/1; padding: 16px; }

/* Major sponsor spotlight */
.major-sponsor {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  border: 2px solid var(--gold); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg); color: #fff;
}
.major-sponsor__badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: var(--gold); color: var(--green-deep); font-family: var(--font-head);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; font-size: 1rem;
  padding: 7px 18px; border-radius: 999px; margin-bottom: 16px;
}
.major-sponsor__badge svg { width: 18px; height: 18px; }
.major-sponsor h3 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 10px; }
.major-sponsor p { color: rgba(255,255,255,.85); margin: 0; }
.major-sponsor__logo {
  background: #fff; border-radius: var(--radius-sm); padding: 28px; min-height: 180px;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.major-sponsor__logo img { max-height: 200px; object-fit: contain; }
.major-sponsor__logo .sponsor--placeholder {
  border: 2px dashed #cbd3cc; width: 100%; height: 100%; min-height: 140px;
  display: grid; place-items: center; border-radius: var(--radius-sm);
}
@media (max-width: 720px) {
  .major-sponsor { grid-template-columns: 1fr; text-align: center; }
  .major-sponsor__badge { align-self: center; }
}

/* ---------- What's On / Events ---------- */
.events-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
  max-width: 1100px; margin: 0 auto;
}
.events { display: grid; gap: 14px; }
.events-media { display: flex; }
.events-media__img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius, 14px); box-shadow: var(--shadow-lg);
}
.events-media--empty {
  display: grid; place-items: center; text-align: center; min-height: 260px;
  border: 2px dashed var(--line); border-radius: var(--radius, 14px);
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 1px; font-size: .85rem;
}
.events-media--empty svg { width: 34px; height: 34px; display: block; margin: 0 auto 8px; opacity: .5; }
@media (max-width: 820px) {
  .events-layout { grid-template-columns: 1fr; gap: 28px; }
  .events-media { order: -1; }
  .events-media__img { height: 220px; }
}
.event {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 16px 22px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.event:hover { transform: translateX(4px); box-shadow: var(--shadow-lg); }
.event__date {
  flex: none; width: 68px; text-align: center; border-radius: 12px; padding: 9px 4px;
  background: linear-gradient(160deg, var(--green), var(--green-dark)); color: #fff;
}
.event__day { display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1; }
.event__mon { display: block; text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; margin-top: 3px; color: var(--gold-light); }
.event__body { flex: 1 1 auto; min-width: 0; }
.event__title { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); line-height: 1.1; }
.event__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .92rem; margin-top: 5px; }
.event__meta span { display: inline-flex; align-items: center; gap: 6px; }
.event__meta svg { width: 15px; height: 15px; color: var(--gold-dark); flex: none; }
.event__tag {
  flex: none; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .5px;
  font-size: .82rem; padding: 5px 13px; border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.event__tag--home { background: var(--green); color: #fff; }
.event__tag--away { background: var(--surface-3); color: var(--green-dark); border: 1px solid var(--line); }
.event__tag--training { background: #fff3d6; color: var(--gold-dark); }
.event__tag--event { background: var(--gold); color: var(--green-deep); }

@media (max-width: 560px) {
  .event { flex-wrap: wrap; gap: 14px; }
  .event__date { width: 58px; }
  .event__body { flex-basis: calc(100% - 78px); }
  .event__tag { order: 3; margin-left: 78px; }
}

/* ---------- Honours / Awards ---------- */
.honours-group { margin-bottom: 40px; }
.honours-group > h3 {
  display: inline-block; color: var(--green); text-transform: uppercase;
  border-bottom: 3px solid var(--gold); padding-bottom: 6px; margin-bottom: 20px; font-size: 1.5rem;
}
.honour-list { list-style: none; margin: 0; padding: 0; }
.honour-list li {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.honour-list .award { color: var(--body); }
.honour-list .winner { font-weight: 700; color: var(--ink); text-align: right; }
/* Two-column list for the wide Juniors tile */
.honour-list--cols { column-count: 2; column-gap: 48px; }
.honour-list--cols li { break-inside: avoid; }
@media (max-width: 620px) { .honour-list--cols { column-count: 1; } }

.rep-block { margin-bottom: 22px; }
.rep-block h4 {
  font-family: var(--font-head); font-size: 1.2rem; color: var(--green); text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 6px;
}
.rep-block p { color: var(--body); margin: 0; }

.note {
  background: #fff8e8; border: 1px solid var(--gold); border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm); padding: 14px 18px; color: #7a5c12; font-size: .92rem; margin: 0 0 28px;
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.gtile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm);
  aspect-ratio: 4/3; background: var(--surface-3); box-shadow: var(--shadow); cursor: pointer;
}
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gtile:hover img { transform: scale(1.06); }
.gtile::after {
  content: ""; position: absolute; inset: 0; background: rgba(13,42,24,0);
  transition: background .2s ease;
}
.gtile:hover::after { background: rgba(13,42,24,.18); }
.gtile--empty {
  display: grid; place-items: center; text-align: center; cursor: default;
  border: 2px dashed var(--line); box-shadow: none; background: var(--surface-2);
  color: var(--muted); font-family: var(--font-head); text-transform: uppercase;
  letter-spacing: 1px; font-size: .85rem;
}
.gtile--empty::after { display: none; }
.gtile--empty svg { width: 30px; height: 30px; display: block; margin: 0 auto 6px; opacity: .5; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 30px;
  background: rgba(8,20,12,.92); opacity: 0; transition: opacity .2s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close {
  position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 0; color: #fff; font-size: 1.6rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.lightbox__close:hover { background: var(--gold); color: var(--green-deep); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 2rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.lightbox__nav:hover { background: var(--gold); color: var(--green-deep); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

/* ---------- Map ---------- */
.map-embed {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); line-height: 0;
}
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

@media (max-width: 820px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.5rem; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
  color: #fff; text-align: center; padding: clamp(48px, 8vw, 80px) 0;
  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
}
.cta-band h2 { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.45); }
.cta-band p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 1.6rem; font-size: 1.1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,.72); padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.site-footer h4 {
  color: #fff; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 1px; margin-bottom: 16px;
}
.site-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover { color: var(--gold-light); }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .brand__logo { height: 46px; width: 46px; }
.footer-brand strong { color: #fff; font-family: var(--font-head); text-transform: uppercase; font-size: 1.2rem; letter-spacing: 1px; }
.footer-brand .brand__text { text-align: center; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 3px; }
.socials { display: flex; gap: 12px; margin-top: 6px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: #fff;
}
.socials a:hover { background: var(--gold); color: var(--green-deep); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center;
  font-size: .85rem; color: rgba(255,255,255,.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--green-dark); border-bottom: 3px solid var(--gold);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
    box-shadow: 0 12px 24px rgba(0,0,0,.3);
  }
  .main-nav.is-open { max-height: 80vh; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 10px; gap: 2px; }
  .main-nav a { padding: 14px 16px; font-size: 1.15rem; }
  .brand__tag { display: none; }
}
@media (max-width: 620px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .honour-list .winner { text-align: left; }
  .brand__name { font-size: 1.1rem; }
  .info-list li { flex-direction: column; gap: 2px; }
  .info-list .k { width: auto; }
}

/* ---------- Holding page — single screen, no scroll ----------
   Scoped to <body class="holding">. A "What's On" landing page sized to sit inside one
   viewport: the senior hero photo full-bleed behind, content vertically centred over a
   dark scrim, a row of event tiles as the main event, and no footer block.
   Sizes are in vh rather than rem so the page shrinks to fit the screen height instead
   of pushing content below the fold. Below 780px wide it stacks and is allowed to
   scroll, because a phone cannot fit this much in one screen legibly.
   Delete this whole section (and index.html's holding markup) when the site unparks. */
.holding__stage {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex; align-items: center;
  padding: clamp(16px, 3vh, 40px) 0;
  background-color: var(--green-deep);
  background-size: cover; background-position: center 35%;
  color: #fff; overflow: hidden;
}
.holding__stage::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(13,42,24,.74) 0%, rgba(13,42,24,.56) 40%, rgba(13,42,24,.88) 100%);
}
.holding__inner { position: relative; z-index: 1; width: 100%; text-align: center; }

/* Crest + title lockup, scaled off viewport height */
.holding .hero__lockup { margin-bottom: clamp(20px, 4vh, 56px); }
.holding .hero__crest { width: clamp(82px, 12.5vh, 190px); }
.holding .hero__title { font-size: clamp(2.1rem, 7.4vh, 5.4rem); white-space: nowrap; }
/* one line, not the stacked two-tone title the other pages use */
.holding .hero__title .hero__title-top,
.holding .hero__title .accent { display: inline; }

/* Event tiles — the main event, and on this page the only event.
   Two wide tiles, laid out date-block left / details right like the .event rows on the
   rest of the site. Empty slots keep --empty (dashed outline) until the club fills them
   in; dropping that class gives the solid gold-edged tile so a confirmed event stands
   out from an unfilled one. */
.holding__tiles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.2vh, 26px);
  max-width: 880px; margin: 0 auto clamp(16px, 2.6vh, 32px);
}
.holding__tile {
  display: flex; align-items: center; text-align: left;
  gap: clamp(14px, 2vw, 22px);
  min-height: clamp(112px, 19vh, 200px);
  padding: clamp(14px, 2vh, 24px) clamp(16px, 2vw, 26px);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-left: 3px solid var(--gold);
}
.holding__tile--empty {
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.28);
  border-left: 3px solid rgba(230,178,62,.5);
}
.holding__tile-date {
  flex: none; text-align: center; line-height: 1;
  font-family: var(--font-head);
  padding: clamp(8px, 1.2vh, 13px) clamp(10px, 1.2vw, 15px);
  border-radius: var(--radius-sm);
  background: rgba(230,178,62,.14);
  border: 1px solid rgba(230,178,62,.3);
}
.holding__tile-date .d { display: block; font-weight: 900; color: var(--gold); font-size: clamp(1.55rem, 3.5vh, 2.6rem); }
.holding__tile-date .m {
  display: block; margin-top: 5px; color: var(--gold-light);
  text-transform: uppercase; letter-spacing: 2px; font-size: clamp(.6rem, 1.1vh, .74rem);
}
.holding__tile-body { min-width: 0; }
.holding__tile-name {
  display: block; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: #fff; line-height: 1.15;
  font-size: clamp(1rem, 2vh, 1.4rem);
}
.holding__tile-meta {
  display: block; margin-top: clamp(4px, .8vh, 8px);
  color: rgba(255,255,255,.62); line-height: 1.35; font-size: clamp(.8rem, 1.45vh, .95rem);
}
.holding__tile--empty .holding__tile-date,
.holding__tile--empty .holding__tile-name,
.holding__tile--empty .holding__tile-meta { opacity: .55; }

/* On the holding pages the header bar runs the full width of the screen: the crest
   anchors hard left and the "coming soon" badge hard right, instead of both floating
   inward to the 1150px .container. Only the header is unpinned — the stage below it
   keeps the normal centred container. The gutter is a small clamp rather than 0 so
   the two ends breathe and clear rounded/notched phone screens. */
.holding .site-header .container {
  max-width: none;
  padding: 0 clamp(12px, 2vw, 30px);
}

/* "Full club site coming soon" — the right-hand end of the header bar on the two
   live pages. Set in the tagline's gold so it reads as part of the brand lockup
   rather than a notification. It shrinks before it wraps: on a narrow phone the
   club name has priority, so the badge drops its pill and sits under nothing. */
.holding__badge {
  flex: 0 1 auto; min-width: 0; text-align: right;
  font-family: var(--font-body); font-weight: 700;
  font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-light); line-height: 1.25;
  padding: 7px 14px; border: 1px solid rgba(230,178,62,.45); border-radius: 999px;
}

/* One-line footer strip. Currently unused — index.html's contact line was removed
   when the "coming soon" note moved up to the header — but kept for whenever the
   club wants an address or email back under the tiles. */
.holding__foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 16px; margin: clamp(12px, 2vh, 24px) 0 0;
  font-size: clamp(.76rem, 1.35vh, .9rem); color: rgba(255,255,255,.62);
}
.holding__foot a { color: rgba(255,255,255,.84); }
.holding__foot a:hover { color: var(--gold-light); }
.holding__foot .sep { opacity: .35; }

/* 404 while the site is parked — reuses the holding stage, so it only needs a
   readable message line and room under it for the single button. */
.holding__msg {
  margin: clamp(12px, 2vh, 24px) 0 0;
  font-size: clamp(.95rem, 1.9vh, 1.15rem); color: rgba(255,255,255,.82);
}
.holding__stage .btn-row { margin-top: clamp(16px, 2.6vh, 30px); }

@media (max-width: 780px) {
  .holding__stage { min-height: 0; padding: 30px 0 38px; }
  /* Pill border and padding cost more width than they're worth next to the crest
     and club name on a phone — keep the words, drop the chrome. */
  .holding__badge {
    font-size: .62rem; letter-spacing: 1px;
    padding: 0; border: 0; max-width: 8.5em;
  }
  }

/* ---------- Print (for exporting the site to PDF) ---------- */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .site-header { position: static; }
  .scroll-cue { display: none; }
  .hero--slideshow, .hero--full, .immersive { min-height: auto; }
  .immersive { display: block; }
}