/* Homepage: Season Preview banner + Development Scores split (between the hero and the
   podcast callout). Fonts, colors and the pill button come from the site's own CSS
   (rigid-square / proxima-nova via the Typekit kit, --green, .btn--default). */

.home-eyebrow {
  margin: 0 0 8px;
  color: var(--white);
  font-family: rigid-square, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.home-sp h2,
.home-dev h2 { margin: 0 0 16px; }

.home-sp p:not(.home-eyebrow),
.home-dev p:not(.home-eyebrow) { margin: 0 0 28px; color: rgba(255, 255, 255, .84); }

/* Season Preview: full-bleed arena photo that emerges from the page above and dissolves
   into it below. Layers, top to bottom: edge fades that reach the opaque page color (eased
   stops, held solid for the first 1%, so neither edge shows a line), the dark wash that
   keeps the copy legible, the photo.
   It follows the podcast callout, whose section--default bottom padding sets the gap
   above it (the site's own section rhythm), so the banner adds no margin of its own. */
.home-sp {
  position: relative;
  padding: 128px 0;
  text-align: center;
  background-color: var(--background);
  background-image:
    linear-gradient(180deg,
      var(--background) 1%, rgba(18, 18, 18, .74) 8%, rgba(18, 18, 18, .3) 16%, rgba(18, 18, 18, 0) 25%,
      rgba(18, 18, 18, 0) 75%, rgba(18, 18, 18, .3) 84%, rgba(18, 18, 18, .74) 92%, var(--background) 99%),
    linear-gradient(180deg, rgba(18, 18, 18, .82), rgba(18, 18, 18, .6) 40%, rgba(18, 18, 18, .94)),
    url(/site-assets/season-preview-arena.jpg);
  background-position: center;
  background-size: cover;
}
.home-sp .container--default { display: flex; flex-direction: column; align-items: center; }
.home-sp h2 { font-size: 56px; line-height: 1.1; text-align: center; }
.home-sp p { max-width: 34em; }

/* Development Scores: card left, text right; text first when stacked. */
/* Bottom padding mirrors section--default's, so the community section below keeps the
   spacing it had after the podcast callout. */
.home-dev { padding: 128px 0 150px; }
.home-dev-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.home-dev-copy { order: 2; }
.home-dev-board { order: 1; }

.home-dev-board {
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}
/* Same flat school-color wash as the live board's rows (preview.athletorlive.com/development):
   a faint panel with the brand tint layered over it. */
.home-dev-row {
  --panel: rgba(255, 255, 255, .022);
  display: grid;
  grid-template-columns: 24px 28px 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 5px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background-color: var(--panel);
  background-image: linear-gradient(var(--brand-wash, transparent), var(--brand-wash, transparent));
  font-size: 15px;
  line-height: 1.3;
}
.home-dev-row:first-child { margin-top: 0; }
.home-dev-row:last-child { margin-bottom: 0; }
.home-dev-rank { color: #6b737f; font-size: 13px; font-variant-numeric: tabular-nums; }
.home-dev-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
}
.home-dev-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-dev-score {
  color: var(--green);
  font-family: rigid-square, sans-serif;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
/* Ranks 4-5 tease the gated board: no wash, dimmed and slightly soft. */
.home-dev-row.is-faded {
  background-image: none;
  color: rgba(255, 255, 255, .4);
  opacity: .55;
  filter: blur(.6px);
}

@media screen and (min-width: 1280px) {
  .home-dev { padding-bottom: 160px; }
}

@media screen and (max-width: 991px) {
  .home-sp { padding: 96px 0; }
  .home-sp h2 { font-size: 42px; }
  .home-dev { padding-top: 96px; padding-bottom: 96px; }
  .home-dev-split { gap: 40px; }
}

@media screen and (max-width: 767px) {
  .home-sp { padding: 72px 0; }
  .home-sp h2 { font-size: 34px; }
  .home-dev { padding-top: 64px; padding-bottom: 64px; }
  .home-dev-split { grid-template-columns: 1fr; gap: 32px; }
  .home-dev-copy,
  .home-dev-board { order: 0; }
  .home-dev h2 { text-align: left; }
}

@media screen and (max-width: 479px) {
  .home-sp h2 { font-size: 30px; }
  .home-eyebrow { font-size: 12px; }
  .home-dev-row { padding: 11px 12px; gap: 10px; }
}