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

@layer responsive {
  @media (max-width: 639.98px) {
    :root {
      --rail-cards-visible: 1.6;
      --slot-w: clamp(
        196px,
        calc((100vw - var(--gutter-left) - var(--rail-gap)) / var(--rail-cards-visible)),
        300px
      );
      --ranking-slots-visible: 1.4;

      --rail-header-gap: 0px;
    }

    .rail__header {
      min-height: 0;
    }

    .rail__title {
      font-size: clamp(1.125rem, 4.9vw, 1.1875rem);
      line-height: 1.15;
    }

    .rail__subtitle {
      font-size: 0.78125rem;
      line-height: 1.25;
    }

    .rail__track {
      padding-block: var(--space-2);
    }

    .rail__nav,
    .rail__pager {
      display: none;
    }

    .card {
      -webkit-tap-highlight-color: transparent;
      transition:
        transform var(--motion-micro) var(--ease-enter),
        opacity var(--motion-micro) linear;
    }

    .card:not(.card--soon):active {
      transform: scale(0.985);
      opacity: 0.86;
      transition-duration: var(--motion-instant);
      transition-delay: var(--motion-press-delay);
    }

    .rail--selection {
      --selection-scale: 1.3;
      --slot-w: clamp(
        168px,
        calc(
          (100vw - var(--gutter-left) - var(--rail-gap)) /
          (var(--ranking-slots-visible) * var(--selection-scale))
        ),
        250px
      );
      --color-numeral-stroke: rgb(184 178 190 / 0.62);
      --color-numeral-fill: rgb(184 178 190 / 0.16);
      --numeral-stroke-w: 2.5px;
    }

    .selection {
      --selection-overlap: calc(var(--slot-w) * 0.11);
    }

    .selection__numeral {
      -webkit-mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 58%,
        rgb(0 0 0 / 0.5) 88%,
        rgb(0 0 0 / 0.5) 100%
      );
      mask-image: linear-gradient(
        to right,
        #000 0%,
        #000 58%,
        rgb(0 0 0 / 0.5) 88%,
        rgb(0 0 0 / 0.5) 100%
      );
    }
  }
}