@layer overrides {
  @media (min-width: 1181px) {
    .hero-grid {
      row-gap: 6px;
      align-items: stretch;
    }

    .hero-actions.hero-actions-stacked-mobile {
      row-gap: 6px;
    }

    .hero-actions-stacked-mobile .btn-driver-day {
      margin-bottom: 0;
    }

    .hero-card .hero-actions.hero-actions-stacked-mobile > .hero-side.hero-side-compact {
      column-gap: 14px;
      row-gap: 8px;
    }

    .hero-hourly-stack {
      display: flex;
      flex-direction: column;
      grid-column: 3;
      grid-row: 2;
      gap: 4px;
      height: var(--hero-panel-height);
      min-height: var(--hero-panel-height);
      align-self: stretch;
    }

    .hero-hourly-promo {
      flex: 0 0 auto;
      height: auto;
      min-height: 0;
      padding-bottom: 0;
      gap: 3px;
    }

    .hero-hourly-winner-card {
      margin-top: 3px;
      padding-top: 6px;
    }

    .hero-hourly-card {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      height: auto;
      min-height: 190px;
      justify-content: space-between;
      align-self: stretch;
    }
  }

  @media (max-width: 1180px) {
    .hero-card { --hero-panel-height: auto; }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items: stretch;
    }

    .hero-copy,
    .hero-actions-row,
    .support-inline-widget.support-center-widget,
    .hero-hourly-stack {
      grid-column: 1;
      grid-row: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      align-self: auto;
    }

    .hero-copy { order: 1; }
    .hero-actions-row { order: 2; }
    .support-inline-widget.support-center-widget { order: 3; }

    .hero-hourly-stack {
      order: 4;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .hero-hourly-promo,
    .hero-hourly-card {
      width: 100%;
      height: auto;
      min-height: 0;
      align-self: auto;
    }

    .hero-hourly-card { min-height: 160px; }
  }

  @media (max-width: 640px) {
    .hero-grid {
      display: flex;
      flex-direction: column;
      gap: 14px;
      height: auto;
      min-height: 0;
      align-items: stretch;
    }

    .hero-copy,
    .hero-actions-row,
    .support-inline-widget.support-center-widget,
    .hero-hourly-stack {
      position: static;
      inset: auto;
      grid-area: auto;
      width: 100%;
      height: auto;
      min-height: 0;
      margin: 0;
      transform: none;
      flex: 0 0 auto;
    }

    .hero-copy { order: 1; }
    .hero-actions-row { order: 2; }
    .support-inline-widget.support-center-widget { order: 3; }
    .hero-hourly-stack { order: 4; }

    .hero-main-column {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
      align-self: stretch;
    }

    .hero-main-column > .hero-copy,
    .hero-main-column > .hero-actions-row,
    .hero-main-column > .support-inline-widget.support-center-widget,
    .hero-main-column > .hero-top3-panel {
      position: static;
      grid-column: auto;
      grid-row: auto;
      width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
      margin: 0;
      transform: none;
      flex: 0 0 auto;
    }

    .hero-main-column > .hero-copy { order: 1; }
    .hero-main-column > .hero-actions-row { order: 2; }
    .hero-main-column > .support-inline-widget.support-center-widget { order: 3; }
    .hero-main-column > .hero-top3-panel { order: 4; }

    .hero-main-column > .hero-actions-row {
      display: block;
      overflow: visible;
      contain: layout;
    }

    .hero-actions.hero-actions-stacked-mobile {
      position: static;
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      height: auto;
      min-height: 0;
      overflow: visible;
      float: none;
    }

    .hero-actions.hero-actions-stacked-mobile > * {
      position: static;
      inset: auto;
      float: none;
      width: 100%;
      max-width: none;
      height: auto;
      min-width: 0;
      margin: 0;
      transform: none;
      flex: 0 0 auto;
    }

    .hero-actions.hero-actions-stacked-mobile > .btn-driver-day { order: 1; }

    .hero-actions.hero-actions-stacked-mobile > .hero-primary-actions {
      display: flex;
      flex-direction: column;
      order: 2;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    .hero-actions.hero-actions-stacked-mobile > .hero-side {
      position: static;
      order: 3;
      width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
      margin: 0;
      transform: none;
      flex: 0 0 auto;
    }

    .hero-actions.hero-actions-stacked-mobile > .hero-online-card {
      order: 4;
      flex: 0 0 auto;
    }

    .hero-actions.hero-actions-stacked-mobile .btn,
    .hero-actions.hero-actions-stacked-mobile .btn-driver-day,
    .hero-actions.hero-actions-stacked-mobile .btn-today-stats,
    .hero-actions.hero-actions-stacked-mobile .btn-last-races {
      position: static;
      width: 100%;
      min-width: 0;
      max-width: none;
      min-height: 48px;
      margin: 0;
      transform: none;
    }

    .hero-actions.hero-actions-stacked-mobile .hero-online-card {
      position: static;
      width: 100%;
      min-width: 0;
      margin: 0;
    }

    .support-inline-widget.support-center-widget .support-widget-card {
      position: relative;
      height: auto;
      min-height: 0;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      margin: 0;
      transform: none;
      overflow: hidden;
    }

    .hero-main-column > .support-inline-widget.support-center-widget {
      position: static;
      display: block;
      clear: both;
      float: none;
      overflow: visible;
    }

    .support-inline-widget.support-center-widget .support-widget-btn {
      width: 100%;
      justify-self: stretch;
    }

    .support-inline-widget.support-center-widget .support-widget-qr-shell {
      grid-column: 1;
      grid-row: auto;
      justify-self: center;
    }

    .hero-hourly-card { min-height: 176px; }
  }

  .hero-hourly-card.is-championship-event {
    border-color: rgba(216, 180, 254, 0.62);
    background:
      radial-gradient(circle at 20% 0%, rgba(168, 85, 247, 0.22), transparent 38%),
      linear-gradient(180deg, rgba(126, 34, 206, 0.18), rgba(30, 18, 48, 0.9));
    box-shadow:
      0 0 0 1px rgba(216, 180, 254, 0.14),
      0 20px 42px rgba(126, 34, 206, 0.28);
  }

  .hero-hourly-card.is-championship-event::before {
    background:
      linear-gradient(160deg, rgba(31, 13, 48, 0.62), rgba(31, 13, 48, 0.18)),
      var(--hero-hourly-track-photo),
      var(--hero-hourly-track-photo);
    background-position: center center, center center, center center;
    background-size: cover, contain, cover;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }

  .hero-hourly-card.is-championship-event .hero-hourly-eyebrow,
  .hero-hourly-card.is-championship-event .hero-hourly-votes {
    color: #f3e8ff;
  }

  .bg-video-sound-toggle {
    top: auto;
    left: clamp(10px, 1.8vw, 22px);
    right: auto;
    bottom: 84px;
    gap: 9px;
    width: min(224px, calc(100vw - 24px));
    padding: 8px 12px 8px 10px;
    border-right: 1px solid rgba(255, 198, 122, 0.42);
    border-left: 0;
    border-radius: 0 18px 18px 0;
    transform: none;
  }

  .bg-video-sound-toggle:hover,
  .bg-video-sound-toggle:focus-visible,
  body.background-audio-focus .bg-video-sound-toggle {
    transform: translateX(4px);
  }
}

/* Mobile hero must remain unlayered until the legacy display:contents rules are removed. */
@media (max-width: 640px) {
  .hero-card .hero-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    align-items: stretch;
  }

  .hero-card .hero-main-column {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .hero-card .hero-main-column > .hero-copy,
  .hero-card .hero-main-column > .hero-actions-row,
  .hero-card .hero-main-column > .support-inline-widget.support-center-widget,
  .hero-card .hero-main-column > .hero-top3-panel {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }

  .hero-card .hero-main-column > .hero-copy { order: 1; }
  .hero-card .hero-main-column > .hero-actions-row { order: 2; }
  .hero-card .hero-main-column > .support-inline-widget.support-center-widget { order: 3; }
  .hero-card .hero-main-column > .hero-top3-panel { order: 4; }

  .hero-card .hero-actions.hero-actions-stacked-mobile {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .hero-card .hero-actions.hero-actions-stacked-mobile > .btn-driver-day { order: 1; }
  .hero-card .hero-actions.hero-actions-stacked-mobile > .hero-primary-actions { order: 2; }
  .hero-card .hero-actions.hero-actions-stacked-mobile > .hero-side { order: 3; }
  .hero-card .hero-actions.hero-actions-stacked-mobile > .hero-online-card { order: 4; }

  .hero-card .hero-actions.hero-actions-stacked-mobile > * {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    min-width: 0;
    margin: 0;
    grid-area: auto;
    transform: none;
    flex: 0 0 auto;
  }

  .hero-card .hero-actions.hero-actions-stacked-mobile > .hero-primary-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hero-card .support-inline-widget.support-center-widget,
  .hero-card .support-inline-widget.support-center-widget .support-widget-card,
  .hero-card .hero-hourly-stack {
    position: static;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    grid-column: auto;
    grid-row: auto;
    transform: none;
  }
}