/* Two-row team photo: the group sits centre-right with faces in the upper
   half, so bias the cover crop toward the top-right to keep every player's
   head-to-shoulder in view. (On very wide monitors the shortest hero may
   still clip the front row slightly — an accepted trade-off for the fixed
   hero height.) */
.home-hero .page-hero__bg {
  object-position: 64% 25%;
}

/* Home hero tagline (page-specific; the hero component lives in style.css) */
.home-hero__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  color: #fff;
  margin-bottom: 1rem;
}

/* Story + community-moments slider, sharing the row (equal height) */
.home-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.home-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1.25rem 1.4rem;
  justify-content: center;
  background: linear-gradient(150deg, var(--surface-card) 60%, var(--color-primary-soft));
}

.home-story h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

/* Community moments — same card treatment as the story card, framing the
   featured slider inside the gradient background. */
.home-moments {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-small);
  background: linear-gradient(150deg, var(--surface-card) 60%, var(--color-primary-soft));
}

.home-moments > .section-eyebrow {
  margin-bottom: 0;
}

.home-moments .featured {
  flex: 1;
}

/* The tournament photos already carry their own event banner, so hide the
   overlay caption (avoids duplicate text) and turn off the Ken Burns zoom
   so each photo's banner stays fully visible and uncropped. The hidden
   title text is kept for the thumbnail accessible labels. */
.home-moments .featured__caption {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.home-moments .featured__slide img {
  object-position: center;
}

.home-moments .featured__slide.is-active img {
  animation: none;
}

@media (max-width: 767px) {
  .home-duo {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Dark theme overrides for home page
   ============================================================ */
html[data-theme="dark"] .home-story {
  background: linear-gradient(150deg, #1A1A20 60%, rgba(255, 90, 71, 0.14));
}

html[data-theme="dark"] .home-moments {
  background: linear-gradient(150deg, #1A1A20 60%, rgba(255, 90, 71, 0.14));
  border-color: rgba(255, 255, 255, 0.06);
}