/* STL Soccer hub: desktop-first editorial grid. Loaded after legacy page layers. */

body.stl-soccer-hub-page main#main-content {
  --stl-editorial-gap: clamp(.8rem, 1.35vw, 1.25rem);
  display: grid !important;
  grid-template-columns: minmax(1rem, 1fr) repeat(12, minmax(0, 6.5rem)) minmax(1rem, 1fr);
  column-gap: var(--stl-editorial-gap);
  grid-auto-flow: row dense;
  align-items: start;
  overflow: clip;
}

body.stl-soccer-hub-page main#main-content > :is(
  .mf-daily-hero,
  .mf-stl-discovery,
  .mf-stl-section-nav,
  .section--sm
) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

body.stl-soccer-hub-page main#main-content > .mf-daily-hero {
  order: -3;
}

body.stl-soccer-hub-page main#main-content > .mf-stl-discovery {
  order: -2;
}

body.stl-soccer-hub-page main#main-content > .mf-stl-section-nav {
  order: -1;
}

body.stl-soccer-hub-page main#main-content > .section--sm {
  order: 7;
}

body.stl-soccer-hub-page main#main-content > .stl-section {
  position: relative;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: clamp(1.25rem, 2.2vw, 2rem) 0 !important;
  border-top: 1px solid rgba(244, 196, 48, .24);
  background: transparent !important;
}

body.stl-soccer-hub-page main#main-content > .stl-section::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(3.5rem, 26%, 9rem);
  height: 2px;
  content: "";
  background: #46a83e;
}

body.stl-soccer-hub-page main#main-content > .stl-section > .stl-container {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding-inline: 0 !important;
}

body.stl-soccer-hub-page main#main-content > #tier-pro {
  grid-column: 2 / span 7;
  order: 1;
  padding-right: clamp(.25rem, .7vw, .65rem) !important;
}

body.stl-soccer-hub-page main#main-content > #tier-tryouts {
  grid-column: 9 / -2;
  order: 1;
  padding-left: clamp(.7rem, 1.35vw, 1.2rem) !important;
  border-left: 1px solid rgba(247, 247, 244, .1);
}

body.stl-soccer-hub-page main#main-content > #tier-tryouts::before {
  left: clamp(.7rem, 1.35vw, 1.2rem);
  background: #f4c430;
}

body.stl-soccer-hub-page main#main-content > #tier-elite-youth {
  grid-column: 2 / -2;
  order: 2;
}

body.stl-soccer-hub-page main#main-content > #tier-hscl {
  grid-column: 2 / span 6;
  order: 3;
  padding-right: clamp(.25rem, .7vw, .65rem) !important;
}

body.stl-soccer-hub-page main#main-content > #tier-college {
  grid-column: 2 / -2;
  order: 4;
}

body.stl-soccer-hub-page main#main-content > #tier-college::before {
  background: #f4c430;
}

body.stl-soccer-hub-page main#main-content > #tier-pathway {
  display: block !important;
  grid-column: 2 / -2;
  order: 5;
}

body.stl-soccer-hub-page main#main-content > #stl-newsletter {
  grid-column: 8 / -2;
  order: 3;
  padding-left: clamp(.7rem, 1.35vw, 1.2rem) !important;
  border-left: 1px solid rgba(247, 247, 244, .1);
}

body.stl-soccer-hub-page main#main-content > #stl-newsletter::before {
  left: clamp(.7rem, 1.35vw, 1.2rem);
  background: #e53935;
}

body.stl-soccer-hub-page main#main-content > #stl-news-feed {
  display: block !important;
  grid-column: 2 / -2;
  order: 6;
}

body.stl-soccer-hub-page main#main-content > #stl-news-feed::before {
  background: #f4c430;
}

body.stl-soccer-hub-page main#main-content > #back-to-top {
  position: fixed;
}

body.stl-soccer-hub-page .stl-section-header-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end !important;
  gap: .8rem !important;
  margin-bottom: .85rem !important;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(247, 247, 244, .1);
}

body.stl-soccer-hub-page .stl-section-header-row > div {
  min-width: 0;
}

body.stl-soccer-hub-page .stl-section-header-row .stl-subheading {
  max-width: 22ch;
  margin: .2rem 0 .28rem !important;
  font-size: clamp(1.75rem, 2.45vw, 2.55rem) !important;
  line-height: .93 !important;
  text-wrap: balance;
}

body.stl-soccer-hub-page .stl-section-header-row .stl-muted {
  max-width: 64ch;
  margin: 0 !important;
  font-size: .74rem !important;
  line-height: 1.46 !important;
}

body.stl-soccer-hub-page :is(#tier-tryouts, #stl-newsletter) .stl-section-header-row {
  grid-template-columns: 1fr;
  align-items: start !important;
}

body.stl-soccer-hub-page :is(#tier-tryouts, #stl-newsletter) .stl-section-header-row .stl-subheading {
  max-width: 14ch;
  font-size: clamp(1.6rem, 2vw, 2.05rem) !important;
}

body.stl-soccer-hub-page #stl-hub-pro .stl-pro-desk,
body.stl-soccer-hub-page #stl-hub-tryouts .stl-hub-tryout-board,
body.stl-soccer-hub-page #stl-hub-pathways .stl-hub-pathway-platform {
  border-radius: 5px !important;
  box-shadow: none !important;
}

body.stl-soccer-hub-page #stl-hub-pro .stl-pro-profile-row {
  grid-template-columns: minmax(9.25rem, .34fr) minmax(0, 1fr) !important;
  gap: .72rem !important;
}

body.stl-soccer-hub-page #stl-hub-pro .stl-pro-profile-tabs {
  grid-template-columns: 1fr !important;
}

body.stl-soccer-hub-page #stl-hub-pro .stl-hub-tier-grid,
body.stl-soccer-hub-page #stl-hub-pro .stl-pro-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .65rem !important;
}

body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout-toolbar {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: .55rem !important;
}

body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout-filters {
  display: flex !important;
  flex-wrap: wrap;
  gap: .3rem !important;
}

body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .6rem !important;
}

body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout {
  min-height: 0 !important;
  border-radius: 5px !important;
}

/* The legacy card rule forces display:grid even when the filter marks a card
   hidden. Restore the native hidden contract so "Show all" is truthful and
   the tryout rail does not become several screens taller than the pro desk. */
body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout[hidden] {
  display: none !important;
}

body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .8rem;
  align-items: stretch !important;
}

body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > .stl-hub-league {
  min-width: 0;
  margin: 0 !important;
  border-radius: 5px !important;
}

html body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > .stl-hub-league--mls-next {
  grid-column: 1 / span 5 !important;
}

html body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > .stl-hub-slysa {
  grid-column: 6 / -1 !important;
}

html body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > .stl-hub-league--ecnl-boys-and-girls {
  grid-column: 1 / -1 !important;
}

body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-youth-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-slysa-club-grid,
body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-slysa-route-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.stl-soccer-hub-page #tier-hscl .stl-hub-tier-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .62rem !important;
}

body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: .62rem !important;
}

body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-toolbar {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .5rem !important;
}

body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.stl-soccer-hub-page #stl-hub-pathways .stl-pathway-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(14rem, .8fr) !important;
  gap: .75rem !important;
}

body.stl-soccer-hub-page #stl-newsletter .site-newsletter-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start;
  gap: .7rem !important;
  min-height: 100%;
  padding: clamp(.85rem, 1.5vw, 1.1rem) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

body.stl-soccer-hub-page #stl-newsletter form {
  grid-template-columns: 1fr !important;
}

body.stl-soccer-hub-page #stl-news-feed .mf-home-spotlight-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}

body.stl-soccer-hub-page #stl-news-feed .mf-home-spotlight-card {
  min-height: 0 !important;
  border-radius: 5px !important;
}

body.stl-soccer-hub-page .stl-section :is(
  .stl-hub-tier-card,
  .stl-hub-youth-card,
  .stl-hub-college-card,
  .stl-hub-slysa-card,
  .stl-hub-slysa-club-tile
) {
  border-radius: 5px !important;
  box-shadow: none !important;
}

@media (max-width: 1120px) {
  body.stl-soccer-hub-page main#main-content {
    grid-template-columns: minmax(1rem, 1fr) repeat(12, minmax(0, 1fr)) minmax(1rem, 1fr);
  }

  body.stl-soccer-hub-page main#main-content > #tier-pro {
    grid-column: 2 / span 7;
  }

  body.stl-soccer-hub-page main#main-content > #tier-tryouts {
    grid-column: 9 / -2;
  }

  body.stl-soccer-hub-page #stl-hub-pro .stl-hub-tier-grid,
  body.stl-soccer-hub-page #stl-hub-pro .stl-pro-card-grid,
  body.stl-soccer-hub-page #tier-hscl .stl-hub-tier-grid {
    grid-template-columns: 1fr !important;
  }

  body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  body.stl-soccer-hub-page main#main-content {
    grid-template-columns: 1rem minmax(0, 1fr) 1rem;
    column-gap: 0;
  }

  body.stl-soccer-hub-page main#main-content > :is(
    #tier-pro,
    #tier-tryouts,
    #tier-elite-youth,
    #tier-hscl,
    #tier-college,
    #tier-pathway,
    #stl-newsletter,
    #stl-news-feed
  ) {
    grid-column: 2 !important;
    padding-inline: 0 !important;
    border-left: 0;
  }

  body.stl-soccer-hub-page main#main-content > :is(#tier-tryouts, #tier-college, #stl-newsletter)::before {
    left: 0;
  }

  html body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > :is(.stl-hub-league--mls-next, .stl-hub-slysa) {
    grid-column: 1 / -1 !important;
  }

  body.stl-soccer-hub-page #stl-hub-pro .stl-pro-profile-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.stl-soccer-hub-page main#main-content {
    grid-template-columns: .75rem minmax(0, 1fr) .75rem;
  }

  body.stl-soccer-hub-page main#main-content > .stl-section {
    padding-block: 1.15rem !important;
  }

  body.stl-soccer-hub-page .stl-section-header-row,
  body.stl-soccer-hub-page #stl-news-feed .mf-home-spotlight-grid,
  body.stl-soccer-hub-page #stl-hub-pathways .stl-pathway-layout {
    grid-template-columns: 1fr !important;
  }

  body.stl-soccer-hub-page .stl-section-header-row {
    align-items: start !important;
  }

  body.stl-soccer-hub-page #stl-hub-pro .stl-pro-profile-row {
    grid-template-columns: 1fr !important;
  }

  body.stl-soccer-hub-page #stl-hub-pro .stl-pro-profile-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.stl-soccer-hub-page #stl-hub-elite-youth {
    grid-template-columns: 1fr !important;
  }

  html body.stl-soccer-hub-page #tier-elite-youth #stl-hub-elite-youth > :is(
    .stl-hub-league--mls-next,
    .stl-hub-slysa,
    .stl-hub-league--ecnl-boys-and-girls
  ) {
    grid-column: 1 / -1 !important;
  }

  body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-youth-grid,
  body.stl-soccer-hub-page #tier-tryouts #stl-hub-tryouts .stl-hub-tryout-grid,
  body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-slysa-club-grid,
  body.stl-soccer-hub-page #stl-hub-elite-youth .stl-hub-slysa-route-grid,
  body.stl-soccer-hub-page #tier-hscl .stl-hub-tier-grid,
  body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-card-grid,
  body.stl-soccer-hub-page #stl-hub-college .stl-hub-college-summary {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.stl-soccer-hub-page .stl-section * {
    scroll-behavior: auto !important;
  }
}