/* Layout adjustments. Motion preferences live here as well. */

@media (max-width: 1360px) and (min-width: 1181px) {
  .primary-nav > ul > li > a { font-size: 0.68rem; letter-spacing: 0.1em; }
  .primary-nav ul { gap: 0.85rem; }
  .brand-name { font-size: 0.8rem; }
  .header-tools .btn { padding-inline: 0.75rem; }
}

@media (max-width: 1180px) {
  .primary-nav { display: none; }
  .mega { display: none !important; }
  .nav-toggle { display: inline-grid; }
  .header-tools { margin-left: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .journey { grid-template-columns: repeat(3, 1fr); row-gap: 1.6rem; }
  .journey::before { display: none; }
  .team-grid,
  .award-grid { grid-template-columns: 1fr 1fr; }
  .news-grid,
  .video-grid { grid-template-columns: 1fr 1fr; }
  .story-grid,
  .venue-grid { grid-template-columns: 1fr 1fr; }
  .story-grid .story-card:first-child { grid-column: 1 / -1; min-height: 360px; }
}

@media (max-width: 900px) {
  :root { --header-h: 56px; }
  .intro,
  .countdown,
  .footprint-layout,
  .news-layout,
  .spotlight,
  .video-layout,
  .venue-feature,
  .newsletter,
  .form-panel,
  .contact-grid,
  .split-2,
  .doctrine,
  .story-split,
  .page-split,
  .legal-grid,
  .expect-list,
  .company-band,
  .leaders,
  .score-split { grid-template-columns: 1fr; }
  .pillars li:nth-child(2) { margin-left: 0; }
  .hero-content { max-width: 820px; }
  .hero-float,
  .hero-globe { display: none; }
  .page-hero::before { content: none; }
  .page-hero h1 { max-width: 14ch; }
  .page-hero .lede { max-width: 36rem; }
  .hero-globe { opacity: 0.28; width: 78vw; right: -20vw; top: 8vh; }
  .broadcast-stage { grid-template-columns: 1fr 1fr; }
  .broadcast-board { grid-column: 1 / -1; order: -1; border: 0; border-bottom: 1px solid rgba(198, 161, 91, 0.35); }
  .broadcast-player { min-height: 230px; }
  .broadcast-stage { min-height: 0; }
  .score-side.away,
  .score-side { text-align: left; }
  .vs { width: 44px; height: 44px; }
  .fixture,
  .match-card { grid-template-columns: 1fr; align-items: start; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .form-grid.two { grid-template-columns: 1fr; }
  .player-grid { grid-template-columns: 1fr; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .next-strip { flex-direction: column; align-items: flex-start; }
  .spotlight-photo { min-height: 360px; }
  .video-feature { height: auto; }
  .video-feature .frame { aspect-ratio: 16 / 9; min-height: 0; flex: none; }
  .map-stage { aspect-ratio: 1.35 / 1; }
  .open-tiers { grid-template-columns: repeat(3, 1fr); }
  .score-modules,
  .nation-wall { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .objective-grid,
  .eco-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }

  *, *::before, *::after {
    max-width: 100%;
  }

  img, video, canvas, svg, table, iframe {
    max-width: 100% !important;
  }

  .site-header,
  .site-footer,
  main,
  section,
  .hero,
  .page-hero,
  .band {
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  .header-tools .btn,
  .header-tools .lang { display: none; }

  .hero {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    padding-top: 0;
  }

  .hero-slides-wrapper {
    min-height: calc(100dvh - 80px);
  }

  .hero-content-inner {
    padding-top: calc(var(--header-h) + 2.8rem);
    padding-bottom: 4.8rem;
    padding-inline: 1.1rem;
  }

  .slider-layers {
    max-width: 100%;
    margin-top: 1rem;
  }

  .slider-date {
    font-size: 11px;
    padding: 5px 11px;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }

  .slider-title { margin-bottom: 10px; }
  .slider-title .first_text {
    font-size: clamp(1.35rem, 6.4vw, 2.1rem);
    padding: 6px 12px 5px;
    line-height: 1.2;
    border-left-width: 3px;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .slider-title .second_text {
    font-size: clamp(1.15rem, 5.2vw, 1.75rem);
    padding: 6px 12px 6px;
    margin-top: 4px;
    line-height: 1.2;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .slider-description {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 18px;
    max-width: 100%;
  }

  .slider-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .slider-actions .button {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    font-size: 13px;
    text-align: center;
  }

  .hades-arrow {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.55);
  }

  .hades-arrow svg {
    width: 20px;
    height: 20px;
  }

  .stm-dots {
    bottom: 4.6rem;
    gap: 6px;
  }

  .stm-dot {
    width: 20px;
    height: 3px;
  }

  .stm-dot.is-active {
    width: 32px;
  }

  .nation-wall { grid-template-columns: 1fr 1fr; }
  .open-tiers { grid-template-columns: 1fr !important; }
  .hero-countdown { max-width: none; }
  .hero-stats-grid { grid-template-columns: 1fr 1fr; }
  .broadcast-stage { grid-template-columns: 1fr; }

  .stat { padding: 0.55rem 0.25rem 0.65rem; }
  .stat b { font-size: 1.35rem; }
  .stat span { font-size: 0.52rem; letter-spacing: 0.08em; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(even) { border-left: 1px solid rgba(244, 241, 234, 0.12); }

  .team-grid,
  .award-grid,
  .story-grid,
  .venue-grid,
  .video-layout,
  .video-grid,
  .video-layout .video-grid,
  .news-grid,
  .awards-trophy-grid,
  .news-cards-grid,
  .venues-card-grid,
  .players-premium-grid,
  .teams-premium-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  .team-grid .squad-card:first-child { grid-column: auto; }
  .team-grid .squad-card:first-child .squad-photo { aspect-ratio: 16 / 10; }
  .story-grid .story-card:first-child { grid-column: auto; }
  .home-news .news-stack { height: auto; }
  .home-news .side-story { grid-template-columns: 1fr; flex: none; }
  .home-news .side-story img { width: 100%; height: 180px; }
  .lead-story { min-height: 420px; }
  .home-stories .story-card { min-height: 360px; }
  .inline-form { flex-direction: column; }
  .page-hero { min-height: 420px; padding-top: calc(var(--header-h) + 3rem) !important; padding-bottom: 2.4rem !important; }
  .page-hero .container { margin-top: 0.8rem; }
  .page-hero::before { content: none; }
  .page-hero h1,
  .page-hero .lede { max-width: none; }
  .objective-grid,
  .eco-grid { grid-template-columns: 1fr; }
  .page-rail { position: static; }
  .footer-grid,
  .filter-bar { grid-template-columns: 1fr; }
  .footer-banner,
  .footer-platforms { flex-direction: column; align-items: flex-start; }
  .container.footer-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding-block: 1rem calc(1.15rem + env(safe-area-inset-bottom));
  }
  .footer-base p:first-child { letter-spacing: 0.08em; }
  .footer-base p:last-child { max-width: none; text-align: left; }
  .journey { grid-template-columns: 1fr; }
  .journey li { padding-left: 3.4rem; padding-bottom: 0.4rem; }
  .stage-index { position: absolute; left: 0; top: 0; }
  .journey::before {
    display: block;
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 1px;
    height: auto;
  }
}

@media (max-width: 520px) {
  .countdown-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .count-unit b {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }
  .nation-wall {
    grid-template-columns: 1fr !important;
  }
  .hero-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-metrics-grid,
  .venues-metrics-grid,
  .news-metrics-grid,
  .standings-metrics-grid,
  .player-roster-metrics,
  .team-tournament-metrics,
  .match-overview-metrics {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .metric-pill,
  .stats-metric-pill {
    padding: 10px 12px !important;
  }
  .players-toolbar,
  .teams-toolbar {
    padding: 14px 12px !important;
  }
  .player-search-box,
  .team-search-box {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .page-hero {
    padding-inline: 12px !important;
  }
  .page-hero h1 {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
  }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .slider-title .first_text { font-size: 1.15rem !important; padding: 5px 8px !important; }
  .slider-title .second_text { font-size: 1.05rem !important; padding: 5px 8px !important; }
  .count-unit b { font-size: 1.6rem !important; }
  .container { padding-inline: 12px !important; }
  .stat b { font-size: 1.15rem !important; }
  .stat span { font-size: 0.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-media img { transform: none; }
}

@media print {
  .site-header,
  .site-footer,
  .to-top,
  .no-print { display: none !important; }
  body { background: white; }
  .deck-sheet { width: auto; }
}
