/*
 * MoFutbol production density system.
 * Loaded after route-level styles so every public route shares the same
 * concise rhythm without flattening its editorial or tournament identity.
 */

:root {
  --mf-production-section-space: clamp(1.35rem, 2.8vw, 3.25rem);
  --mf-production-grid-gap: clamp(0.7rem, 1.45vw, 1.2rem);
  --mf-production-card-pad: clamp(0.8rem, 1.5vw, 1.15rem);
}

html body main#main-content {
  overflow: clip;
}

html body main#main-content > :is(
  .stl-section,
  .mf-v22-section,
  .mf-command-center,
  .mf-newsroom-home,
  .mf-football-redesign,
  .mf-official-content-network,
  .mf-tracker-links-section,
  .mf-diaspora-command,
  .mf-diaspora-authority,
  .mf-afcon-v2-desk,
  .mf-wafcon-v2-desk
) {
  padding-block: var(--mf-production-section-space) !important;
}

/* Keep the reading width intentional while retaining the full-width stadium
   and tournament backgrounds that give key pages their identity. */
html body main#main-content :is(.stl-container, .mf-v22-container, .mf-football-desk, .mf-di-shell) {
  width: min(calc(100% - clamp(1.5rem, 5vw, 4rem)), 82rem) !important;
}

html body main#main-content :is(
  .mf-v22-grid,
  .mf-v22-card-grid,
  .mf-newsroom-story-grid,
  .mf-newsroom-player-grid,
  .mf-football-desk__cards,
  .mf-football-stats,
  .mf-command-grid,
  .mf-club-grid,
  .mf-mwpl-main-grid,
  .mf-matchday-card-grid,
  .mf-di-grid
) {
  align-items: stretch !important;
  gap: var(--mf-production-grid-gap) !important;
  grid-auto-rows: auto !important;
}

/* Eliminate legacy fixed/min heights that leave empty panels under short
   editorial copy. Components retain room for images but grow only as needed. */
html body main#main-content :is(
  .mf-v20-card,
  .mf-v22-card,
  .mf-newsroom-card,
  .mf-football-card,
  .mf-mwpl-panel,
  .mf-matchday-group,
  .mf-di-panel,
  .site-card
) {
  min-height: 0 !important;
  align-content: start;
}

html body main#main-content :is(
  .mf-v20-card__body,
  .mf-v22-card__body,
  .mf-newsroom-card__body,
  .mf-football-card__body,
  .mf-mwpl-panel__body,
  .site-card__body
) {
  padding: var(--mf-production-card-pad) !important;
}

html body main#main-content :is(h1, h2, h3) {
  text-wrap: balance;
}

html body main#main-content :is(p, li) {
  text-wrap: pretty;
}

/* Articles: the lead story copy sits below a bright editorial image. Keep its
   surface intentionally dark so hierarchy and white type remain legible. */
#mf-newsroom-front .mf-newsroom-card--lead .mf-newsroom-card__body,
#mf-newsroom-front .mf-newsroom-front-grid--deduped > .mf-newsroom-card--lead .mf-newsroom-card__body {
  background: linear-gradient(135deg, #07130f 0%, #0a1b19 58%, #10261f 100%);
  color: #f7fbf8;
}

#mf-newsroom-front .mf-newsroom-card--lead :is(h3, p, time) {
  color: #f7fbf8;
  text-shadow: none;
}

#mf-newsroom-front .mf-newsroom-card--lead .mf-newsroom-card__meta {
  color: #d4ed8a;
}

html body main#main-content :is(.mf-section-head, .mf-newsroom-head, .mf-football-desk__masthead, .stl-section__head) {
  margin-bottom: clamp(0.7rem, 1.25vw, 1.05rem) !important;
}

html body main#main-content :is(.mf-v22-actions, .mf-football-desk__actions, .mf-actions, .stl-actions) {
  gap: 0.55rem !important;
  flex-wrap: wrap !important;
}

/* Long accordions and link panels should not manufacture a second internal
   page scroll. The page remains the single, predictable scroll context. */
html body main#main-content :is(.mf-no-internal-scroll, .mf-compact-board, .mf-progressive-section) {
  max-height: none !important;
}

/* Images read as deliberate editorial units rather than creating uneven cards. */
html body main#main-content :is(
  .mf-newsroom-card__media,
  .mf-v22-card__media,
  .mf-football-card__media,
  .mf-mwpl-news-card__media
) {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

html body main#main-content :is(
  .mf-newsroom-card__media img,
  .mf-v22-card__media img,
  .mf-football-card__media img,
  .mf-mwpl-news-card__media img
) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 48rem) {
  :root {
    --mf-production-section-space: 1.15rem;
    --mf-production-grid-gap: 0.7rem;
    --mf-production-card-pad: 0.85rem;
  }

  html body main#main-content :is(.stl-container, .mf-v22-container, .mf-football-desk, .mf-di-shell) {
    width: min(calc(100% - 1.25rem), 82rem) !important;
  }

  html body main#main-content :is(
    .mf-newsroom-story-grid,
    .mf-newsroom-player-grid,
    .mf-football-desk__cards,
    .mf-command-grid,
    .mf-club-grid,
    .mf-matchday-card-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main#main-content :is(h1, h2) {
    letter-spacing: -0.025em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main#main-content *,
  html body main#main-content *::before,
  html body main#main-content *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}