/* Tennis home layout. Shared pieces live in site.css; colours come from the band classes. */
body[data-site="tennis"] main{flex:1}

.header-cta{display:none}
.band-paper .btn-primary{border-color:var(--ink)}

.section{padding:var(--space-3xl) var(--space-lg)}
.section-tight{padding-top:0}
.section-inner{max-width:1120px;margin:0 auto}
.section h2,.hero h1,.close-cta h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--display-size);
  line-height:var(--display-line);
  letter-spacing:.01em;
  text-transform:uppercase;
  margin-bottom:var(--space-md);
}
.section-intro{max-width:68ch;margin-bottom:var(--space-xl)}
.section p+p{margin-top:var(--space-md)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:70dvh;
  overflow:hidden;
  padding:var(--space-3xl) var(--space-lg);
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}
.hero-scrim{position:absolute;inset:0;background:rgba(20,20,19,.72)}
.hero-copy{position:relative;max-width:68ch;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.hero h1{margin-bottom:0}
.meta-line{font-weight:800}
.helper{font-size:var(--label-size);font-weight:var(--label-weight);line-height:var(--label-line)}

/* ---------- team strip ---------- */
.team-strip{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--space-md)}
.team-strip ul{display:flex;gap:var(--space-lg);list-style:none;align-items:center}
.team-strip li{flex:0 0 140px;scroll-snap-align:start}
.team-logo{width:100%;height:auto}
/* tall logos (Sure Girls, Judges, Rebels) would tower over the wide ones; size the strip by height */
.team-strip picture{display:flex;justify-content:center}
.team-strip .team-logo{width:auto;max-width:100%;max-height:120px}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:var(--space-xl);list-style:none}
.step h3{font-size:var(--heading-size);font-family:var(--font-display);font-weight:400;line-height:var(--heading-line);text-transform:uppercase;margin:var(--space-md) 0 var(--space-sm)}
.step-num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:var(--heading-size);
  line-height:1;
}

/* ---------- destination ---------- */
.destination{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}
.destination .eyebrow{margin-bottom:var(--space-sm)}
.facts div+div{margin-top:var(--space-md)}
.facts dt{font-size:var(--label-size);font-weight:var(--label-weight);line-height:var(--label-line);letter-spacing:.08em;text-transform:uppercase}
.band-ink .facts dt{color:var(--accent-text-on-ink)}
.facts dd{margin:0}

/* ---------- interest section ---------- */
#interest .eyebrow{margin-bottom:var(--space-sm)}

/* ---------- bracket teaser ---------- */
.bracket-tag{margin-bottom:var(--space-lg)}
.matchups{display:grid;grid-template-columns:1fr;gap:var(--space-md);list-style:none}
.matchup{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-md);
  border-radius:var(--space-sm);
  background:var(--ink-soft);
  color:var(--paper);
  font-weight:800;
  text-align:center;
}
.matchup .side{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}
.matchup .team-logo{width:72px}
.vs{font-size:var(--label-size);text-transform:uppercase;letter-spacing:.08em}
.bracket-closer{margin-top:var(--space-xl);font-weight:800}

/* ---------- close ---------- */
.close-cta .section-inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}
.close-cta h2,.close-cta p{margin:0}

@media (min-width:768px){
  .header-cta{display:inline-flex}
  .hero{min-height:60dvh;padding:var(--space-3xl) var(--space-2xl)}
  .section{padding:var(--space-3xl) var(--space-2xl)}
  .section-tight{padding-top:0}
  .team-strip{overflow:visible}
  .team-strip ul{flex-wrap:wrap;justify-content:center;gap:var(--space-xl) var(--space-lg)}
  .team-strip li{flex:0 0 calc((100% - 4 * var(--space-lg)) / 5)}
  .steps{grid-template-columns:1fr 1fr}
  .destination{grid-template-columns:1.4fr 1fr;align-items:start}
  .matchups{grid-template-columns:1fr 1fr}
}

@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .matchups{grid-template-columns:repeat(3,1fr)}
}