/* MoFutbol v8 shared systems */
:root {
  --mf-hero-title: clamp(1.35rem, 2.05vw, 2.15rem);
  --mf-hero-subhead: clamp(.84rem, 1.05vw, .96rem);
  --mf-section-y: clamp(1rem, 2.5vw, 2.15rem);
  --mf-card-pad: clamp(.78rem, 1.6vw, 1.05rem);
  --mf-radius-tight: .72rem;
  --mf-radius-panel: 1.05rem;
  --mf-ease: cubic-bezier(.16, 1, .3, 1);
}

.hero--editorial,
.hero--utility,
.hero--match,
.hero--directory,
.hero--media,
body.mf-page-shell :where(.mf-unified-hero, .mf-editorial-hero, .stl-city-hero, .mf-world-hero, .mf-africa-hero, .mf-player-directory-hero) {
  padding-block: var(--mf-section-y) !important;
}

body.mf-page-shell :where(.mf-unified-hero-title, .stl-heading, .mf-hero-copy h1, .mf-media-hero-copy h1, .mf-africa-hero-copy .stl-heading) {
  max-width: 34ch !important;
  font-family: var(--f-heading) !important;
  font-size: var(--mf-hero-title) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.018em !important;
  text-wrap: balance;
}

body.mf-page-shell :where(.mf-lede, .stl-muted, .mf-unified-hero-copy, .mf-hero-copy p, .mf-media-hero-copy p, .mf-africa-hero-copy p) {
  max-width: 62ch !important;
  font-size: var(--mf-hero-subhead) !important;
  line-height: 1.45 !important;
  text-wrap: balance;
}

body.mf-page-shell :where(.mf-page-actions, .hero-ctas, .mf-unified-hero-actions, .mf-home-hero-actions, .mf-chip-row, .mf-hero-chip-row) {
  gap: .5rem !important;
}

body.mf-page-shell :where(.mf-editorial-hero__panel, .mf-hero-side, .mf-unified-hero-badge, .mf-africa-hero-panel) {
  padding: var(--mf-card-pad) !important;
  border-radius: var(--mf-radius-panel) !important;
}

body.mf-page-shell :where(.stl-section, .mf-daily-section, .mf-section) {
  padding-block: var(--mf-section-y) !important;
}

body.mf-page-shell :where(.mf-link-tile, .mf-wire-card, .mf-daily-signal-card, .mf-media-card, .mf-player-card, .stl-directory-card) {
  transition: transform .22s var(--mf-ease), border-color .22s var(--mf-ease), background-color .22s var(--mf-ease);
}

body.mf-page-shell :where(.mf-link-tile, .mf-wire-card, .mf-daily-signal-card, .mf-media-card, .mf-player-card, .stl-directory-card):hover {
  transform: translateY(-2px);
}

body.mf-page-shell :where(.stl-btn, .site-button, .mf-chip, .filter-btn):active {
  transform: translateY(1px) scale(.985);
}

[data-daily-desk]:not([data-mf-ready]) > *,
[data-football-wire]:not([data-mf-ready]) > *,
[data-signal-lane]:not([data-mf-ready]) > *,
[data-world-cup-matchday]:not([data-mf-ready]) > *,
[data-next-match]:not([data-mf-ready]) > *,
[data-upcoming-schedule]:not([data-mf-ready]) > * {
  display: none !important;
}

.mf-v8-fallback {
  display: grid;
  gap: .45rem;
  padding: .85rem;
  border: 1px solid rgba(245, 200, 66, .18);
  border-radius: var(--mf-radius-panel);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}

.mf-v8-fallback span {
  color: var(--brand-yellow);
  font: 800 .62rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mf-v8-social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .65rem;
}

.mf-v8-social-card {
  display: grid;
  gap: .25rem;
  padding: .75rem;
  border: 1px solid rgba(245, 200, 66, .16);
  border-radius: .9rem;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,.025);
}

.mf-v8-social-grid--media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mf-v8-social-card--media {
  gap: .55rem;
  padding: .55rem;
  border-radius: 1rem;
  overflow: hidden;
}

.mf-v8-social-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .72rem;
  background: rgba(255,255,255,.04);
}

.mf-v8-social-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mf-v8-social-card__copy {
  display: grid;
  gap: .22rem;
  padding: .08rem .18rem .18rem;
}

.mf-v8-social-card span {
  color: var(--brand-yellow);
  font: 800 .62rem/1 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.mf-v8-social-card small {
  color: var(--muted);
}

@media (max-width: 640px) {
  .mf-v8-social-grid--media {
    grid-template-columns: 1fr;
  }
}

.mf-no-logo {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid rgba(245, 200, 66, .2);
  border-radius: .75rem;
  color: var(--brand-yellow);
  font: 900 .72rem/1 var(--f-heading);
  background: rgba(255,255,255,.03);
}

@media (max-width: 760px) {
  body.mf-page-shell :where(.mf-unified-hero-title, .stl-heading, .mf-hero-copy h1, .mf-media-hero-copy h1, .mf-africa-hero-copy .stl-heading) {
    max-width: 24ch !important;
    font-size: clamp(1.22rem, 6vw, 1.65rem) !important;
  }

  body.mf-page-shell :where(.mf-editorial-hero__panel, .mf-hero-side, .mf-unified-hero-badge, .mf-africa-hero-panel, [data-sponsor-zone]) {
    order: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Late hero type normalization for legacy v8 pages */
body.mf-college-soccer-page .mf-simple-page-hero .stl-heading,
body.mf-college-soccer-page .mf-simple-page-hero .mf-unified-hero-title,
body.city2-page:not(.citysc-page) .city2-hero .stl-heading,
body.citysc-page .city2-hero .stl-heading,
body.city2-page .city2-hero .stl-heading,
body.mf-npsl-page .npsl-hero .stl-heading,
body.mf-us-open-cup-page .stl-city-hero .stl-heading,
body.mf-us-soccer-page .us-hero h1,
body.mf-us-soccer-page .us-hero .stl-heading,
body.mf-bracket-page .mf-world-hero .stl-heading,
body.mf-team-highlights-page .mf-world-hero .stl-heading {
  font-size: clamp(2.5rem, 4.2vw, 4.25rem) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 760px) {
  body.mf-college-soccer-page .mf-simple-page-hero .stl-heading,
  body.mf-college-soccer-page .mf-simple-page-hero .mf-unified-hero-title,
  body.city2-page:not(.citysc-page) .city2-hero .stl-heading,
  body.citysc-page .city2-hero .stl-heading,
  body.city2-page .city2-hero .stl-heading,
  body.mf-npsl-page .npsl-hero .stl-heading,
  body.mf-us-open-cup-page .stl-city-hero .stl-heading,
  body.mf-us-soccer-page .us-hero h1,
  body.mf-us-soccer-page .us-hero .stl-heading,
  body.mf-bracket-page .mf-world-hero .stl-heading,
  body.mf-team-highlights-page .mf-world-hero .stl-heading {
    font-size: clamp(2.25rem, 10vw, 2.8rem) !important;
  }
}

/* Keep v8 pages on the unified centered image-banner hero. */
body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero),
body.mf-home-taste .mf-daily-hero {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(250px, 31vh, 340px) !important;
  padding: calc(var(--nav-height, 72px) + clamp(1rem, 2vw, 1.6rem)) clamp(1rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.2rem) !important;
  text-align: center !important;
}

body.mf-page-shell :where(.stl-city-layout, .stl-local-hero__grid, .mf-world-hero .stl-container, .mf-africa-hero-grid, .mf-unified-hero-grid, .mf-media-hero-grid, .mf-editorial-hero__grid, .mf-player-directory-hero-grid, .mf-player-profile-grid, .yp-hero > .stl-container),
body.mf-home-taste :where(.mf-home-hero-grid, .mf-daily-grid) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  width: min(100% - 2rem, 780px) !important;
  max-width: 780px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body.mf-page-shell :where(.mf-editorial-hero__panel, .mf-africa-hero-panel, .mf-unified-hero-badge, .mf-hero-side, .stl-city-badge, .mf-media-hero-screen, .mf-player-hero-crest, .bio-photo),
body.mf-home-taste :where(.mf-home-hero-rail, .mf-daily-board, .mf-home-worldcup-wrap, .mf-daily-ticker) {
  display: none !important;
}

body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero) :where(h1, .stl-heading, .stl-heading-xl, .mf-unified-hero-title),
body.mf-home-taste :where(.mf-home-hero-copy h1, .mf-daily-lead h1) {
  max-width: 14ch !important;
  margin: .25rem auto .65rem !important;
  font-size: clamp(2.15rem, 4.2vw, 3.35rem) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero) :where(p, .stl-muted, .mf-lede, .mf-unified-hero-copy, .hero-desc),
body.mf-home-taste :where(.mf-home-hero-copy p, .mf-daily-lead p) {
  max-width: 58ch !important;
  margin-inline: auto !important;
  font-size: clamp(.9rem, 1.2vw, 1rem) !important;
  line-height: 1.5 !important;
  text-align: center !important;
}

body.mf-page-shell :where(.hero-ctas, .stl-hero-actions, .mf-page-actions, .mf-home-hero-actions, .mf-daily-actions, .mf-home-quicklinks, .mf-chip-row, .mf-system-meta, .mf-hero-tags, .mf-hero-chip-row, .mf-unified-hero-actions, .mf-media-hero-actions, .site-status-row, .yp-stat-strip),
body.mf-home-taste :where(.mf-home-hero-actions, .mf-daily-actions, .mf-home-quicklinks) {
  justify-content: center !important;
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero),
  body.mf-home-taste .mf-daily-hero {
    min-height: clamp(255px, 44vh, 380px) !important;
    padding: calc(var(--nav-height, 68px) + 1rem) 1rem 1.5rem !important;
  }

  body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero) :where(h1, .stl-heading, .stl-heading-xl, .mf-unified-hero-title),
  body.mf-home-taste :where(.mf-home-hero-copy h1, .mf-daily-lead h1) {
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
  }
}
body.mf-page-shell .mf-media-hero .mf-media-hero-grid,
body.mf-page-shell .mf-media-hero .mf-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  width: min(100% - 2rem, 780px) !important;
  max-width: 780px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body.mf-page-shell .mf-media-hero .mf-media-hero-copy {
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

/* Wider centered hero format */
body.mf-page-shell :where(.stl-city-layout, .stl-local-hero__grid, .mf-world-hero .stl-container, .mf-africa-hero-grid, .mf-unified-hero-grid, .mf-media-hero-grid, .mf-editorial-hero__grid, .mf-player-directory-hero-grid, .mf-player-profile-grid, .yp-hero > .stl-container),
body.mf-page-shell .mf-media-hero .mf-hero-grid {
  width: min(100% - 2rem, 1080px) !important;
  max-width: 1080px !important;
}

body.mf-page-shell :where(.mf-hero-copy, .mf-home-hero-copy, .mf-daily-lead, .mf-africa-hero-copy, .mf-media-hero-copy, .mf-unified-hero-grid > div:first-child, .mf-editorial-hero__grid > div:first-child, .stl-city-info, .stl-local-hero__content, .mf-world-hero__content, .hero-content),
body.mf-page-shell .mf-media-hero .mf-media-hero-copy {
  width: min(100%, 960px) !important;
  max-width: 960px !important;
}

body.mf-page-shell :where(.mf-unified-hero-title, .stl-heading, .mf-hero-copy h1, .mf-media-hero-copy h1, .mf-africa-hero-copy .stl-heading) {
  max-width: 22ch !important;
}

/* Full-width centered hero format */
body.mf-page-shell :where(.stl-city-layout, .stl-local-hero__grid, .mf-world-hero .stl-container, .mf-africa-hero-grid, .mf-unified-hero-grid, .mf-media-hero-grid, .mf-editorial-hero__grid, .mf-player-directory-hero-grid, .mf-player-profile-grid, .yp-hero > .stl-container),
body.mf-page-shell .mf-media-hero .mf-hero-grid {
  width: min(100% - 2rem, 1920px) !important;
  max-width: 1920px !important;
}

body.mf-page-shell :where(.mf-hero-copy, .mf-home-hero-copy, .mf-daily-lead, .mf-africa-hero-copy, .mf-media-hero-copy, .mf-unified-hero-grid > div:first-child, .mf-editorial-hero__grid > div:first-child, .stl-city-info, .stl-local-hero__content, .mf-world-hero__content, .hero-content),
body.mf-page-shell .mf-media-hero .mf-media-hero-copy {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
}

body.mf-page-shell :where(.mf-unified-hero-title, .stl-heading, .mf-hero-copy h1, .mf-media-hero-copy h1, .mf-africa-hero-copy .stl-heading) {
  max-width: 30ch !important;
}

/* Top-centered hero quote treatment */
body.mf-page-shell :where(.stl-city-hero, .stl-local-hero, .mf-world-hero, .mf-africa-hero, .mf-unified-hero, .mf-media-hero, .mf-editorial-hero, .hero, .page-hero, .us-hero, .league-hero, .hs-hero, .hscl-hero-bg, .yp-hero, .mf-player-directory-hero, .mf-contact-hero, .mf-simple-page-hero) {
  place-items: start center !important;
  align-content: start !important;
}

body.mf-page-shell :where(.mf-lede, .stl-muted, .mf-unified-hero-copy, .mf-hero-copy p, .mf-media-hero-copy p, .mf-africa-hero-copy p, .hero-desc) {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  max-width: 82ch !important;
  text-align: center !important;
}
