@layer base, components, utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    font-family: var(--font-main);
    font-size: var(--fz-16);
    line-height: 1.6;
    color: var(--text-main);
    background: var(--bg-page);
    container-type: inline-size;
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
  }

  a {
    transition: opacity .2s var(--ease);
  }

  :focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    a {
      transition: none;
    }
  }
}

@layer components {
  /* Header */
  .site-header {
    display: grid;
    place-items: center;
    height: 122px;
    background: var(--primary-color);

    @media (width < 768px) {
      height: 76px;
    }
  }

  .site-header__logo {
    width: 233px;

    @media (width < 768px) {
      width: 150px;
    }

    a {
      display: block;

      @media (any-hover: hover) {
        &:hover {
          opacity: .8;
        }
      }
    }

    img {
      width: 100%;
    }
  }

  /* Page */
  .page {
    flex: 1;
    width: min(100%, var(--w-site));
    margin-inline: auto;
    padding-block: 38px 90px;
    background: var(--bg-content);

    @media (width < 768px) {
      padding-block: 20px 56px;
    }
  }

  .inner {
    padding-inline: 30px;

    @media (width < 768px) {
      padding-inline: 16px;
    }
  }

  /* Carousel */
  .carousel {
    --slide-width: min(578px, 57.8vw);
    --slide-gap: 20px;
    --arrow-size: 44px;

    position: relative;
    width: 100cqw;
    margin-left: calc(50% - 50cqw);

    @media (width < 768px) {
      --slide-width: 78vw;
      --slide-gap: 10px;
      --arrow-size: 36px;
    }
  }

  .carousel__stage {
    position: relative;
  }

  .carousel__viewport {
    overflow: hidden;
  }

  .carousel__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }

  .carousel__slide {
    flex: 0 0 var(--slide-width);
    min-width: 0;
    margin-right: var(--slide-gap);
  }

  .carousel__slide a {
    display: block;

    @media (any-hover: hover) {
      &:hover {
        opacity: .85;
      }
    }

    &:focus-visible {
      outline-offset: -3px;
    }
  }

  .carousel__slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--arrow-size);
    height: var(--arrow-size);
    color: #fff;
    cursor: pointer;
    background: var(--primary-color);
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    translate: 0 -50%;
    transition: background-color .2s var(--ease), color .2s var(--ease);

    @media (any-hover: hover) {
      &:hover {
        color: var(--primary-color);
        background: var(--secondary-color);
      }
    }

    svg {
      width: 40%;
      height: 40%;
    }
  }

  .carousel__arrow--prev {
    left: calc((100% - var(--slide-width)) / 2 - var(--arrow-size) / 2);
  }

  .carousel__arrow--next {
    right: calc((100% - var(--slide-width)) / 2 - var(--arrow-size) / 2);
  }

  .carousel__dots {
    display: flex;
    justify-content: center;
    margin-top: 14px;

    @media (width < 768px) {
      margin-top: 10px;
    }
  }

  .carousel__dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    cursor: pointer;

    &::before {
      width: 10px;
      height: 10px;
      content: "";
      background: #c9c9c9;
      border-radius: 50%;
      transition: background-color .2s var(--ease);
    }

    &[aria-current="true"]::before {
      background: var(--primary-color);
    }
  }

  /* Lead */
  .lead {
    margin-top: 18px;
    padding-inline: 35px;
    font-size: var(--fz-18);
    line-height: 1.75;
    text-align: center;

    @media (width < 768px) {
      margin-top: 14px;
      padding-inline: 0;
      text-align: left;
    }
  }

  /* News */
  .news {
    margin-top: 41px;

    @media (width < 768px) {
      margin-top: 32px;
    }
  }

  .news__title {
    padding: 0 15px;
    font-size: var(--fz-title);
    font-weight: 700;
    line-height: 40px;
    color: #fff;
    background: var(--primary-color);
    border-left: 10px solid var(--secondary-color);
  }

  .news__list {
    display: grid;
    gap: 5px;
    margin-top: 20px;
    padding-inline: 35px;

    @media (width < 768px) {
      gap: 14px;
      margin-top: 16px;
      padding-inline: 0;
    }
  }

  .news__link {
    display: grid;
    grid-template-columns: 166px 1fr;
    font-size: var(--fz-news);
    font-weight: 700;
    line-height: 1.45;
    color: var(--link-color);
    align-items: baseline;

    & time {
      font-size: calc(var(--fz-news) - 2px);
      color: var(--text-main);
    }

    @media (any-hover: hover) {
      &:hover .news__text {
        text-decoration: underline;
      }
    }

    @media (width < 768px) {
      grid-template-columns: 1fr;
    }
  }

  /* Banners */
  .banners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 70px;

    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 40px;
    }
  }

  .banner {
    display: block;

    @media (any-hover: hover) {
      &:hover {
        opacity: .85;
      }
    }
  }

  .banner__media {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 2;
  }

  .banner__media--shop {
    background: var(--primary-color);

    img {
      width: 72%;
      max-width: 212px;
    }
  }

  .banner__media--bsclub {
    background: linear-gradient(#a89946 100%, #a69650 50%);

    img {
      width: 76%;
    }
  }

  .banner__media--oritike {
    background: #041567;

    img {
      width: 57%;
    }
  }

  .banner__label {
    display: block;
    margin-top: 4px;
    font-size: var(--fz-14);
    font-weight: 700;
    text-align: center;
  }

  /* Footer */
  .site-footer {
    padding-block: 28px;
    color: #fff;
    text-align: center;
    background: var(--primary-color);
    border-top: 4px solid var(--secondary-color);
  }

  .site-footer__logo {
    width: 120px;
    margin-inline: auto;
  }

  .site-footer__copyright {
    display: block;
    margin-top: 12px;
    font-size: var(--fz-12);
  }
}

@layer utilities {
  @media (768px <= width) {
    .sp { display: none !important; }
  }
  @media (width < 768px) {
    .pc { display: none !important; }
  }
}