/* Compact spacing is scoped to the homepage; content remains scrollable if needed. */
.home-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.home-page > header,
.home-page > main,
.home-page > footer {
  width: 100%;
}

.home-page > header {
  padding-block: 8px;
}

.home-page > main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: center;
  padding-block: 6px;
}

.home-page .home-hero {
  margin-bottom: 0;
}

.home-page .home-hero-content {
  translate: 0 1cm;
}

.home-page .home-hero-actions .button {
  border-radius: 4.8px;
  font-size: 0.8em;
  min-width: 152px;
  padding: 8px 11.2px;
  width: 152px;
}

/* Match the secondary action's border box without changing its outlined style. */
.home-page .home-hero-actions .button:not(.secondary) {
  border: 1px solid transparent;
}

.home-page > footer {
  padding-block: 0 8px;
}

.home-seo-overview {
  background: linear-gradient(145deg, rgba(30, 46, 63, 0.96), rgba(18, 31, 45, 0.98));
  border: 1px solid rgba(139, 228, 255, 0.16);
  border-radius: 24px;
  color: #eaf4fb;
  margin: 40px auto 56px;
  max-width: 1180px;
  padding: clamp(28px, 5vw, 56px);
}

.home-seo-details {
  margin: 20px auto 0;
  max-width: 1180px;
  width: 100%;
}

.home-seo-details:not([open]) > .home-seo-overview {
  display: none;
}

.home-seo-details > summary {
  color: var(--brand-color-muted);
  cursor: pointer;
  font-size: 0.9rem;
  list-style-position: inside;
  padding: 10px 4px;
  text-align: center;
}

.home-seo-details > summary:hover,
.home-seo-details > summary:focus-visible {
  color: var(--brand-color-ink);
}

.home-seo-details .home-seo-overview {
  margin-top: 12px;
}

.home-seo-overview-heading {
  max-width: 860px;
}

.home-seo-overview h2 {
  color: #ffffff;
  margin-top: 8px;
}

.home-seo-overview p {
  line-height: 1.7;
}

.home-seo-overview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px;
}

.home-seo-overview-grid article {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
}

.home-seo-overview-grid h3 {
  color: #ffffff;
  margin-top: 0;
}

.home-seo-overview a {
  color: #8be4ff;
}

.home-seo-overview-footer {
  margin: 24px 0 0;
}

@media (max-width: 720px) {
  .home-seo-overview {
    border-radius: 18px;
    margin: 24px 0 40px;
  }

  .home-seo-overview-grid {
    grid-template-columns: 1fr;
  }

  .home-page > header {
    align-items: center;
    display: grid;
    gap: 8px 12px;
    grid-template-columns: 32px 1fr 38px 38px;
  }

  .home-page .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .home-page .header-club-links {
    grid-column: 3;
    grid-row: 1;
  }

  .home-page .header-search {
    grid-column: 4;
    grid-row: 1;
  }

  .home-page .home-hero {
    min-height: min(520px, calc(100svh - 260px));
  }

  .home-page .home-hero-content {
    min-height: calc(min(520px, 100svh - 260px) - 48px);
    transform: translateY(clamp(16px, 8svh, 64px));
  }

  .home-page .site-footer {
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .home-page .site-nav {
    gap: 6px 12px;
  }

  .home-page .home-hero {
    min-height: min(520px, calc(100svh - 250px));
  }

  .home-page .home-hero-content {
    min-height: calc(min(520px, 100svh - 250px) - 48px);
    transform: translateY(16px);
  }

  .home-page .footer-company,
  .home-page .footer-contacts,
  .home-page .footer-links {
    gap: 4px 12px;
  }
}

/* Keep both actions visible when the desktop window is unusually short. */
@media (min-width: 721px) and (max-height: 660px) {
  .home-page .home-hero {
    min-height: calc(100svh - 130px);
  }

  .home-page .home-hero-content {
    min-height: calc(100svh - 226px);
    transform: translateY(clamp(24px, calc(50svh - 164px), 96px));
  }
}