/* FBB_NORMAL_DETAIL_LCP_CLS_FIX */

/* Header: stop logo/actions shift */
header,
header.site-header,
.fbb-header,
.normal-header {
  min-height: 68px !important;
  height: 68px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  contain: layout paint !important;
}

header .logo,
header a.logo,
.logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 180px !important;
  min-width: 180px !important;
  height: 48px !important;
  min-height: 48px !important;
  flex: 0 0 180px !important;
  overflow: hidden !important;
}

header .logo img,
header a.logo img,
.logo img {
  display: block !important;
  width: 180px !important;
  height: 40px !important;
  object-fit: contain !important;
  max-width: 180px !important;
  max-height: 40px !important;
}

.header-actions,
.lang-actions,
.nav-actions {
  min-width: 92px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  contain: layout paint !important;
}

/* LCP h1: make it paint immediately, independent of external font timing */
#fbbSeoH1,
h1#fbbSeoH1,
.hero h1,
h1[data-i18n="heroTitle"] {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  text-rendering: optimizeSpeed !important;
  line-height: 1.12 !important;
  min-height: 2.35em !important;
  margin-top: 0 !important;
  contain: layout paint !important;
}

/* Hero/card reservation */
.hero,
section.hero,
#hero,
.fbb-hero,
.prediction-hero {
  min-height: 360px !important;
  contain: layout paint !important;
  overflow-anchor: none !important;
}

.premium-scoreboard,
.premium-score-card,
.scoreboard,
.match-scoreboard,
.hero-scoreboard {
  min-height: 150px !important;
  contain: layout paint !important;
  overflow-anchor: none !important;
}

.premium-score-middle,
.score-center,
.match-score,
.score-display {
  min-width: 92px !important;
  min-height: 70px !important;
  contain: layout paint !important;
}

/* Main prediction layout reservation: this was the big CLS cluster */
.prediction-layout,
section.prediction-layout,
.fbb-seo-alignment-parent {
  min-height: 720px !important;
  contain: layout paint !important;
  overflow-anchor: none !important;
}

/* Avoid lower sections shifting the hero area */
#fbbPredictionEvidence,
#fbbPredictionLeagueGrid,
#matchHighlights,
#fbbEditorialTransparency,
#fbbMorePredictions {
  content-visibility: auto !important;
  contain-intrinsic-size: 520px !important;
  overflow-anchor: none !important;
}

/* Images/logos inside hero should never resize after load */
.hero img,
.prediction-hero img,
.premium-scoreboard img,
.premium-score-card img,
.team-logo,
.team-crest {
  width: auto;
  max-width: 64px !important;
  max-height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  header,
  header.site-header,
  .fbb-header,
  .normal-header {
    min-height: 68px !important;
    height: 68px !important;
  }

  header .logo,
  header a.logo,
  .logo {
    width: 180px !important;
    min-width: 180px !important;
    height: 48px !important;
    flex-basis: 180px !important;
  }

  .header-actions,
  .lang-actions,
  .nav-actions {
    min-width: 92px !important;
  }

  #fbbSeoH1,
  h1#fbbSeoH1,
  .hero h1 {
    min-height: 2.25em !important;
    line-height: 1.12 !important;
  }

  .hero,
  section.hero,
  #hero,
  .fbb-hero,
  .prediction-hero {
    min-height: 390px !important;
  }

  .prediction-layout,
  section.prediction-layout,
  .fbb-seo-alignment-parent {
    min-height: 820px !important;
  }

  #fbbPredictionEvidence,
  #fbbPredictionLeagueGrid,
  #matchHighlights,
  #fbbEditorialTransparency,
  #fbbMorePredictions {
    contain-intrinsic-size: 620px !important;
  }
}

/* FBB_DETAIL_HEADER_CLS_HARDENING_20260703
   Extra CLS fix for logo/header-actions/lang-switch on normal detail pages. */

body.normal-fbb-layout header,
body.fbb-prediction-detail-page header,
header[style] {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-sizing: border-box !important;
  contain: layout paint !important;
  overflow: visible !important;
}

body.normal-fbb-layout header .nav,
body.fbb-prediction-detail-page header .nav,
body.normal-fbb-layout header > div,
body.fbb-prediction-detail-page header > div {
  height: 56px !important;
  min-height: 56px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Reserve exact logo area */
body.normal-fbb-layout a.logo,
body.fbb-prediction-detail-page a.logo,
body.normal-fbb-layout .logo,
body.fbb-prediction-detail-page .logo {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  flex: 0 0 180px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

body.normal-fbb-layout a.logo img,
body.fbb-prediction-detail-page a.logo img,
body.normal-fbb-layout .logo img,
body.fbb-prediction-detail-page .logo img {
  display: block !important;
  width: 180px !important;
  height: 40px !important;
  min-width: 180px !important;
  min-height: 40px !important;
  max-width: 180px !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

/* Reserve exact language button/action area */
body.normal-fbb-layout .header-actions,
body.fbb-prediction-detail-page .header-actions,
body.normal-fbb-layout .lang-switch,
body.fbb-prediction-detail-page .lang-switch,
body.normal-fbb-layout .fbb-global-language-host,
body.fbb-prediction-detail-page .fbb-global-language-host {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 92px !important;
  contain: layout paint !important;
}

body.normal-fbb-layout .lang-switch button,
body.fbb-prediction-detail-page .lang-switch button,
body.normal-fbb-layout .fbb-global-language-host button,
body.fbb-prediction-detail-page .fbb-global-language-host button {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex: 0 0 40px !important;
  box-sizing: border-box !important;
}

/* Reserve more for the prediction content area to avoid lower-layout movement */
body.normal-fbb-layout section.prediction-layout,
body.fbb-prediction-detail-page section.prediction-layout,
body.normal-fbb-layout .prediction-layout.fbb-seo-alignment-parent,
body.fbb-prediction-detail-page .prediction-layout.fbb-seo-alignment-parent {
  min-height: 900px !important;
  contain: layout paint !important;
  overflow-anchor: none !important;
}

/* Prevent hidden sections from pulling/pushing while tabs initialize */
body.normal-fbb-layout #fbbPredictionEvidence,
body.fbb-prediction-detail-page #fbbPredictionEvidence,
body.normal-fbb-layout #fbbPredictionLeagueGrid,
body.fbb-prediction-detail-page #fbbPredictionLeagueGrid,
body.normal-fbb-layout #matchHighlights,
body.fbb-prediction-detail-page #matchHighlights {
  contain: layout paint !important;
  overflow-anchor: none !important;
}

@media (max-width: 760px) {
  body.normal-fbb-layout header,
  body.fbb-prediction-detail-page header,
  header[style] {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  body.normal-fbb-layout a.logo,
  body.fbb-prediction-detail-page a.logo,
  body.normal-fbb-layout .logo,
  body.fbb-prediction-detail-page .logo {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    flex-basis: 180px !important;
  }

  body.normal-fbb-layout .header-actions,
  body.fbb-prediction-detail-page .header-actions,
  body.normal-fbb-layout .lang-switch,
  body.fbb-prediction-detail-page .lang-switch,
  body.normal-fbb-layout .fbb-global-language-host,
  body.fbb-prediction-detail-page .fbb-global-language-host {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex-basis: 92px !important;
  }

  body.normal-fbb-layout section.prediction-layout,
  body.fbb-prediction-detail-page section.prediction-layout,
  body.normal-fbb-layout .prediction-layout.fbb-seo-alignment-parent,
  body.fbb-prediction-detail-page .prediction-layout.fbb-seo-alignment-parent {
    min-height: 980px !important;
  }
}

/* FBB_REMOVE_PREDICTION_LAYOUT_BIG_GAP_20260703
   Remove excessive reserved height that created a large empty gap
   between AI Prediction and Editorial Transparency. */

body.normal-fbb-layout section.prediction-layout,
body.fbb-prediction-detail-page section.prediction-layout,
body.normal-fbb-layout .prediction-layout.fbb-seo-alignment-parent,
body.fbb-prediction-detail-page .prediction-layout.fbb-seo-alignment-parent,
section.prediction-layout,
.prediction-layout.fbb-seo-alignment-parent {
  min-height: 0 !important;
  height: auto !important;
  contain: none !important;
  overflow-anchor: auto !important;
}

@media (max-width: 900px) {
  body.normal-fbb-layout section.prediction-layout,
  body.fbb-prediction-detail-page section.prediction-layout,
  body.normal-fbb-layout .prediction-layout.fbb-seo-alignment-parent,
  body.fbb-prediction-detail-page .prediction-layout.fbb-seo-alignment-parent,
  section.prediction-layout,
  .prediction-layout.fbb-seo-alignment-parent {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 760px) {
  body.normal-fbb-layout section.prediction-layout,
  body.fbb-prediction-detail-page section.prediction-layout,
  body.normal-fbb-layout .prediction-layout.fbb-seo-alignment-parent,
  body.fbb-prediction-detail-page .prediction-layout.fbb-seo-alignment-parent,
  section.prediction-layout,
  .prediction-layout.fbb-seo-alignment-parent {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* FBB_REMOVE_EMPTY_HIGHLIGHTS_BIG_GAP_20260703
   Remove big desktop/mobile gap when #matchHighlights has no media content. */

#matchHighlights:empty,
#matchHighlights:not(:has(*)),
div#matchHighlights.fbb-media-fields-visible:empty,
div#matchHighlights.fbb-section-nav-target:empty {
  display: none !important;
  visibility: hidden !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: none !important;
}

/* If the highlights container exists but only page scripts left it blank,
   do not reserve artificial CLS space. */
#matchHighlights,
#fbbSection-highlights,
div#matchHighlights.fbb-media-fields-visible,
div#matchHighlights.fbb-section-nav-target {
  min-height: 0 !important;
  contain-intrinsic-size: auto !important;
}

/* Keep actual highlight content visible if children are present. */
#matchHighlights:has(*) {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  margin-top: 14px !important;
  overflow: visible !important;
}

/* Editorial section should sit naturally after the previous real section. */
#fbbEditorialTransparency {
  margin-top: 18px !important;
}