/* ---- intro (static until Task 5) ---- */
.intro { position: relative; }
.intro-stage {
  --p: 1;
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
  /* The stage runs under the sticky header, so centring against the full
     viewport would sit everything half a header-height low. */
  padding-top: var(--nav-h);
}
.intro-logo {
  position: relative;
  /* Matches the logo's viewBox. If the artwork's proportions ever change, this
     and the viewBox attributes in index.html move together, or the four pieces
     letterbox differently and stop reassembling. */
  width: min(78vw, 34rem); aspect-ratio: 915.401 / 1059.17;
}
.logo-piece { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- move announcement ---- */
.transition {
  background: var(--red); color: #fff;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.transition h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.transition p { max-width: 52rem; margin: 0; }

/* ---- teams ---- */
.team-band {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: 0.12em; text-align: center;
  padding: 0.75rem 1rem; margin-bottom: 1.25rem;
}
/* --fg and --bg are the theme's ink/paper pair, so pairing them keeps the
   band readable when --fg inverts under dark mode; --red stays constant, so
   its band keeps the fixed white text. */
.team-band-adults { background: var(--fg); color: var(--bg); }
.team-band-youth { background: var(--red); color: #fff; }

.team-groups { display: grid; gap: 2rem; }
@media (min-width: 44rem) {
  .team-groups { grid-template-columns: 2fr 1fr; align-items: start; }
}
.team-cards { display: grid; gap: 1.25rem; }
@media (min-width: 44rem) {
  .team-cards-adults { grid-template-columns: 1fr 1fr; }
}

.team-card { border: 1px solid var(--rule); background: var(--bg); }
/* A fixed height, not aspect-ratio. The cards sit in columns of different
   widths (the adults pair splits a 2fr track, youth has a 1fr one), so a ratio
   yields three different heights. It was being ignored anyway: the width/height
   attributes on the <img> set a used height, and aspect-ratio only applies when
   height is auto. The attributes stay — they still prevent layout shift. */
.team-card img {
  width: 100%; height: clamp(220px, 23vw, 330px); object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.team-card-body { padding: 0.9rem 1rem 1.1rem; text-align: center; }
.team-card h3 {
  color: var(--red-text); font-style: italic; font-size: 1.35rem; margin-bottom: 0.2rem;
}
.team-card p { margin: 0; font-style: italic; font-size: 0.95rem; color: var(--slate); }

/* ---- training grid ---- */
.grid-wrap { overflow-x: auto; }
.times-grid { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.times-grid th, .times-grid td {
  border: 1px solid var(--rule); padding: 0.7rem 0.5rem; text-align: center;
}
.times-grid thead th {
  background: var(--fg); color: var(--bg);
  font-family: var(--display); font-weight: 600; letter-spacing: 0.08em;
}
.times-grid thead th.weekend { background: var(--red); color: #fff; }
.times-grid tbody th {
  background: var(--surface); font-family: var(--display); font-weight: 500;
  white-space: nowrap;
}
.times-grid td:empty::after { content: '\00a0'; }
.times-venue { margin-top: 1.5rem; font-weight: 700; }
.times-note { margin-top: 0.5rem; font-size: 0.9rem; color: var(--slate); }

/* ---- contact ---- */
.contact-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 44rem) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-card { border-top: 3px solid var(--red); padding-top: 1rem; }
.contact-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.contact-alt { font-size: 0.95rem; line-height: 1.8; }

/* Below 44rem the grid stops being a grid. Each row becomes a team block, and
   each populated cell a line reading "Do · 17:00–18:30". Empty cells vanish
   entirely, so a phone user sees only the 19 sessions that exist rather than
   49 cells of mostly nothing. Same markup, no JS. */
@media (max-width: 43.999rem) {
  .times-grid, .times-grid thead, .times-grid tbody,
  .times-grid tr, .times-grid th, .times-grid td { display: block; }

  .times-grid thead { display: none; }
  .grid-wrap { overflow-x: visible; }

  .times-grid tr {
    border-bottom: 1px solid var(--rule);
    padding-block: 0.35rem;
  }
  .times-grid tbody th {
    background: transparent; text-align: left; border: 0;
    padding: 0.35rem 0; font-size: 1.15rem; color: var(--red-text);
  }
  .times-grid td { border: 0; text-align: left; padding: 0.3rem 0 0.3rem 1rem; }

  /* An empty cell is not a session. */
  .times-grid td:empty { display: none; }

  .times-grid td::before {
    content: attr(data-day) ' · ';
    font-weight: 700;
    color: var(--slate);
  }
}

@media (max-width: 43.999rem) {
  html[lang='en'] .times-grid td::before { content: attr(data-en-day) ' · '; }
}