@layer reset, tokens, base, components, responsive, utilities;

@layer responsive {
  @media (min-width: 640px) {
    :root {
      --header-h: 72px;
      --cards-per-view: 3;
      --selection-scale: 1.5;
      --slot-w: calc((100cqw - (var(--cards-per-view) - 1) * var(--rail-gap)) / var(--cards-per-view));
      --hero-pad: var(--space-6);
    }

    .site-header__inner {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "brand nav actions";
      column-gap: var(--space-7);
    }

    .brand__logo {
      height: 26px;
    }

    .site-nav {
      display: flex;
      align-items: center;
      min-height: var(--header-h);
    }

    .site-nav__link {
      min-height: var(--header-h);
      padding-inline: var(--space-3);
      border-radius: 0;
    }

    .site-nav__link[aria-current]::after {
      content: "";
      position: absolute;
      inset-inline: var(--space-3);
      bottom: 18px;
      height: 2px;
      border-radius: 2px;
      background-color: var(--color-primary);
    }

    .site-footer {
      padding-block: var(--space-8) var(--space-7);
    }

    .hero {
      height: clamp(var(--hero-min-h), calc((100vw - var(--gutter-left) - var(--gutter-right)) / var(--hero-ratio)), var(--hero-max-h));
      max-height: min(var(--hero-max-h), 88vh);
      max-height: min(var(--hero-max-h), 88svh);
    }

    .hero__art-img {
      object-position: var(--hero-art-position, 62% center);
    }

    .hero__scrim {
      background-image:
        linear-gradient(
          to top,
          rgb(var(--rgb-canvas-deep) / 0.42) 0%,
          rgb(var(--rgb-canvas-deep) / 0.1) 18%,
          rgb(var(--rgb-canvas-deep) / 0) 34%
        ),
        linear-gradient(
          to right,
          rgb(var(--rgb-canvas-deep) / 0.6) 0%,
          rgb(var(--rgb-canvas-deep) / 0.32) 26%,
          rgb(var(--rgb-canvas-deep) / 0.08) 46%,
          rgb(var(--rgb-canvas-deep) / 0) 64%
        );
    }

    .hero__content {
      max-width: min(max(36rem, 54%), 58rem, calc(100% - 21rem));
    }

    .hero__controls {
      top: auto;
      right: var(--hero-pad);
      bottom: var(--hero-pad);
    }

    .hero__title {
      max-width: none;
    }

    .btn--primary,
    .btn--soon {
      flex: none;
    }

    .rail__pager {
      display: flex;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --cards-per-view: 4;
      --hero-pad: var(--space-7);
    }
  }

  @media (min-width: 1200px) {
    .hero__description {
      max-width: 68ch;
    }
  }

  @media (min-width: 1440px) {
    :root {
      --cards-per-view: 5;
    }
  }

  @media (min-width: 1920px) {
    :root {
      --cards-per-view: 6;
    }
  }

  @supports not (width: 1cqw) {
    @media (min-width: 640px) {
      :root {
        --slot-w: calc(
          (100vw - var(--gutter-left) - var(--gutter-right) - (var(--cards-per-view) - 1) * var(--rail-gap)) / var(--cards-per-view)
        );
      }
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .site-nav__link:hover {
      color: var(--color-text-primary);
    }

    .icon-btn:hover {
      background-color: rgb(var(--rgb-white) / 0.1);
    }

    .btn--primary:hover {
      background-color: rgb(var(--rgb-white) / 0.86);
    }

    .hero__nav:hover {
      background-color: rgb(var(--rgb-white) / 0.2);
    }

    .hero__indicator:hover::before {
      background-color: rgb(var(--rgb-white) / 0.6);
    }

    .hero__indicator.is-active:hover::before {
      background-color: var(--color-primary);
    }

    .card:not(.card--soon):hover,
    .card:not(.card--soon):focus-visible {
      transform: scale(1.025);
      box-shadow: var(--shadow-elevated);
      filter: brightness(1.05) contrast(1.02);
    }

    .rail__nav {
      display: flex;
    }

    .rail:is(:hover, :focus-within) .rail__nav {
      opacity: 1;
    }

    .rail__nav:hover {
      background-color: rgb(var(--rgb-canvas) / 0.55);
    }
  }
}