@layer components {
  img[loading] {
    background-color: var(--line);
  }
}

@layer composition {
  @media (min-width: 480px) {
    .signal-strip {
      grid-template-columns: repeat(2, 1fr);
    }
    .feature-tile {
      grid-template-columns: repeat(2, 1fr);
    }
    .pass-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .catalog-strip {
      grid-template-columns: repeat(2, 1fr);
    }
    .cookie-bar__inner {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  @media (min-width: 760px) {
    .hero__grid {
      grid-template-columns: 1.25fr 0.75fr;
    }
    .hero__stamp {
      font-size: 1.1rem;
    }
    .signal-strip {
      grid-template-columns: repeat(4, 1fr);
    }
    .rank-deck {
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--s-sm);
    }
    .rank-card:nth-child(even) {
      transform: translateY(var(--s-sm));
    }
    .feature-tile {
      grid-template-columns: repeat(4, 1fr);
    }
    .route-panels {
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
    }
    .step-card {
      grid-template-columns: repeat(3, 1fr);
    }
    .split {
      grid-template-columns: 1fr 1fr;
    }
    .split--reverse .split__media {
      order: 2;
    }
    .mosaic {
      grid-template-columns: 1.4fr 0.6fr;
    }
    .site-footer__grid {
      grid-template-columns: 1.4fr 1fr 1fr;
    }
    .weekly-rail {
      grid-auto-columns: minmax(0, 1fr);
      grid-template-columns: repeat(4, 1fr);
      overflow-x: visible;
    }
  }

  @media (min-width: 1040px) {
    .pass-grid {
      grid-template-columns: repeat(4, 1fr);
    }
    .catalog-strip {
      grid-template-columns: repeat(3, 1fr);
    }
    .contact-sheet {
      grid-template-columns: 1.1fr 0.9fr;
      align-items: start;
    }
    .mast__nav {
      display: block;
      border-block-start: 1px solid var(--line);
    }
    .mast__nav ul {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-sm);
      padding-block: var(--s-2xs);
    }
    .mast__nav a {
      font-family: var(--display);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-size: 1.05rem;
      padding-block: var(--s-3xs);
      box-shadow: inset 0 -3px 0 transparent;
    }
    .mast__nav a:hover,
    .mast__nav a:focus-visible {
      box-shadow: inset 0 -3px 0 var(--signal);
    }
    .mast__nav a[aria-current="page"] {
      box-shadow: inset 0 -3px 0 var(--signal);
    }
    .mast__aux-link {
      display: inline-block;
    }
    .mast__burger {
      display: none;
    }
    .mast__panel {
      display: none !important;
    }
    .rank-card:nth-child(even) {
      transform: translateY(var(--s-md));
    }
  }

  @media (min-width: 1360px) {
    .rank-deck {
      column-gap: var(--s-lg);
    }
    .hero__grid {
      gap: var(--s-lg);
    }
  }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    .rank-card:nth-child(even) {
      transform: none;
    }
    .hero__route,
    .hero__stamp {
      transform: none;
    }
  }
}

@media print {
  .mast,
  .cookie-bar,
  .site-footer,
  .breadcrumb,
  .hero__actions,
  .topic-map__controls {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    text-decoration: underline;
  }

  .rank-card,
  .catalog-card,
  .notice-panel {
    break-inside: avoid;
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .region {
    padding-block: 12px;
  }
}