/* ==========================================================================
   RESPONSIVE
   One consistent strategy: the base rules describe the desktop layout and
   each max-width block steps it down. Breakpoints match the design targets
   1440 / 1200 / 992 / 768 / 480 / 360.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1440px — large desktop: let the wide container breathe
   -------------------------------------------------------------------------- */

@media (min-width: 1441px) {
  :root {
    --container-width: 1180px;
    --container-wide: 1320px;
    --phone-width: 310px;
  }
}

/* --------------------------------------------------------------------------
   1200px — desktop
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --phone-width: 272px;
  }

  .matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tournament-dashboard .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   992px — tablet landscape: two-column media splits collapse
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
  /* Hero and other media splits stack */
  .hero {
    min-height: 0;
  }

  .hero__inner,
  .split,
  .split--content-first,
  .split--media-narrow {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Headline stays first; the handset follows it */
  .hero__device {
    margin-top: var(--space-lg);
  }

  .hero__lede,
  .section-head {
    max-width: none;
  }

  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
  }

  /* Grids step down to two columns */
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Profile hub becomes a single column with the dial first */
  .profile-hub {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-hub__dial-col {
    order: -1;
  }

  /* Dense mockups get an internal scroll region */
  .tournament-dashboard .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-strip__item:nth-child(3n) {
    border-right: 0;
  }

  .site-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   768px — tablet portrait
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --phone-width: 264px;
  }

  .compare-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__overlay::after {
    opacity: 0.14;
  }

  /* A narrow viewport squeezes the whole court into a strip. Show it only
     behind the top of the hero and fade it out before the copy begins. */
  .hero__media {
    bottom: auto;
    height: 66%;
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
  }

  .hero__media img {
    object-position: center 32%;
  }

  /* ...and darken further so the headline keeps its contrast */
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(2, 7, 4, 0.82) 0%, rgba(3, 10, 5, 0.7) 45%, rgba(3, 10, 5, 0.97) 100%),
      radial-gradient(80% 45% at 50% 22%, rgba(223, 255, 0, 0.07) 0%, transparent 65%);
  }

  .tournament-dashboard .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip__item:nth-child(3n) {
    border-right: 1px solid var(--color-border-soft);
  }

  .summary-strip__item:nth-child(2n) {
    border-right: 0;
  }

  .flow {
    padding: var(--space-md) var(--space-sm);
  }

  /* Arrows point down once the flow wraps into a column */
  .flow__link {
    transform: rotate(90deg);
  }
}

/* --------------------------------------------------------------------------
   480px — mobile
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --phone-width: 240px;
    --section-space: 3.5rem;
  }

  .hero {
    padding-top: calc(var(--header-height) + 3.5rem);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__stats {
    gap: var(--space-md) var(--space-lg);
  }

  /* Single column everywhere */
  .grid--3,
  .grid--4,
  .grid--5,
  .grid--6,
  .matrix,
  .principles,
  .summary-strip,
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-strip__item {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-soft);
  }

  .summary-strip__item:last-child {
    border-bottom: 0;
  }

  .matrix__cell {
    padding: var(--space-sm);
  }

  /* Reclaim the width for chips — swiping the rail replaces the step buttons */
  .section-nav__step {
    display: none;
  }

  /* Drawer takes most of the screen at this size, so it opens over the lot */
  .deck-drawer {
    --drawer-width: min(78vw, 250px);
  }

  .cta__actions,
  .cta__audience {
    flex-direction: column;
    align-items: stretch;
  }

  .cta__actions .btn {
    width: 100%;
  }

  .cta__audience {
    align-items: center;
  }

  .flow {
    flex-direction: column;
  }

  .flow__node {
    width: 100%;
    justify-content: center;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .device-glow {
    width: 320px;
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------------------
   360px — small mobile: protect legibility and stop any overflow
   -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  :root {
    --gutter: 1rem;
    --phone-width: 218px;
  }

  .logo__word {
    font-size: 0.8125rem;
  }

  .site-header__inner {
    padding-left: 0.85rem;
  }

  .card,
  .panel {
    padding: var(--space-sm);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}