/* Shared visual rhythm across the public pages. */
:root {
  --layout-content: 1200px;
  --layout-gutter: 20px;
  --space-grid: 24px;
  --radius-card: 24px;
  --shadow-card: 0 16px 42px rgba(5, 34, 20, 0.08);
}

/* Keep the main content aligned with the 1200px page heroes. */
:is(.about-container, .seniors-wrapper, .contact-section, .docs-section, .links-section, .news-wrapper) {
  max-width: var(--layout-content);
}

.news-wrapper {
  width: min(var(--layout-content), calc(100% - 2 * var(--layout-gutter)));
}

.news-page .news-wrapper,
.news-page .news-hero__inner {
  width: min(var(--layout-content), calc(100% - 2 * var(--layout-gutter)));
}

:is(.about-hero, .news-hero, .seniors-hero, .contact-hero, .docs-hero, .links-hero) {
  padding-top: 54px;
  padding-bottom: 28px;
}

:is(.about-hero, .news-hero, .seniors-hero, .contact-hero, .docs-hero, .links-hero) h1 {
  font-size: clamp(38px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.news-hero h1 {
  margin: 0;
}

.news-page .news-hero {
  padding: 54px 0 28px;
}

.news-page .news-hero h1 {
  font-size: clamp(38px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

:is(.about-hero__lead, .news-hero p, .seniors-hero p, .contact-hero__lead, .docs-hero__lead, .links-hero__lead) {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}

:is(.about-container, .players-grid, .contact-section, .docs-container, .links-groups, .links-grid, .news-lead-grid, .news-list-grid, .news-grid, .match-center-grid) {
  gap: var(--space-grid);
}

:is(.contact-card, .docs-club, .docs-library, .links-group, .link-card, .player-card, .featured-news, .news-card, .match-center-card, .competition-panel) {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

:is(.featured-news__button, .news-card__button, .article-back, .contact-submit, .contact-map__button, .competition-source-link) {
  min-height: 44px;
  padding-inline: 16px;
}

:is(.contact-card h2, .docs-club h2, .docs-library__header h2, .links-group__header h2, .seniors-intro h2, .news-section-head h2) {
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:is(.about-card, .contact-card, .docs-library, .links-group, .featured-news, .news-card, .competition-panel) {
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  :root {
    --layout-gutter: 16px;
    --space-grid: 16px;
    --radius-card: 20px;
  }

  :is(.about-hero, .news-hero, .seniors-hero, .contact-hero, .docs-hero, .links-hero) {
    padding: 28px var(--layout-gutter) 20px;
  }

  :is(.about-hero, .news-hero, .seniors-hero, .contact-hero, .docs-hero, .links-hero) h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  :is(.about-section, .seniors-wrapper, .contact-section, .docs-section, .links-section) {
    padding-left: var(--layout-gutter);
    padding-right: var(--layout-gutter);
  }

  .news-wrapper {
    width: calc(100% - 2 * var(--layout-gutter));
  }

  .news-page .news-hero {
    padding: 28px 0 20px;
  }

  .news-page .news-wrapper,
  .news-page .news-hero__inner {
    width: calc(100% - 2 * var(--layout-gutter));
  }

  .news-page .news-hero h1 {
    font-size: clamp(36px, 10vw, 44px);
  }

  :is(.contact-card h2, .docs-club h2, .docs-library__header h2, .links-group__header h2, .seniors-intro h2, .news-section-head h2) {
    font-size: clamp(24px, 6.5vw, 28px);
  }
}