@import url(./root.css);

/* ---------------------------------------------------------------
   Virtual Store screenshot carousel
   The carousel sits inside the standard .img-container used by
   every product page, so it gets the same width and the same
   overlap with the red text block as a single screenshot would.
   campus-story.css shifts every `.img-container img` upward to
   create that overlap; here the whole carousel is shifted
   instead, and the individual slide images are reset so they
   aren't shifted a second time inside the carousel's clip box.
   Screenshots are normalized to a common 1917x838 canvas, then
   framed with the same bezel as adopt-product-screenshot.png (black,
   fading to transparent at the bottom, scaled to the image width), so
   the framed files are 1971x892. The frame lives in the images, so
   the carousel box itself has no background, radius or shadow.
   --------------------------------------------------------------- */
.text-section {
  .img-container {
    /* campus-story.css fixes this container's height below 1440px
       for single images; let it follow the carousel instead. Spacing
       below matches adopt.css so the gap to the next heading is the
       same on every product page. */
    height: auto !important;
    margin-bottom: -20px !important;

    @media (max-width: 992px) {
      margin-bottom: 60px !important;
    }

    @media (max-width: 576px) {
      margin-bottom: 110px !important;
    }
  }

  .vs-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1971 / 892;
    overflow: hidden;
    transform: translateY(-180px);

    @media (max-width: 992px) {
      transform: translateY(-100px);
    }

    @media (max-width: 576px) {
      transform: translateY(-50px);
    }
  }

  .vs-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .vs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;

    &.active {
      opacity: 1;
      visibility: visible;
      z-index: 1;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      transform: none;
    }
  }

  .vs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    &:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 2px;
    }

    @media (max-width: 576px) {
      width: 32px;
      height: 32px;
    }
  }

  .vs-prev {
    left: 3%;
  }

  .vs-next {
    right: 3%;
  }

  .vs-dots {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .vs-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;

    &.active {
      background-color: var(--red);
      transform: scale(1.2);
    }

    &:focus-visible {
      outline: 2px solid var(--red);
      outline-offset: 2px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .vs-slide {
      transition: none;
    }
  }
}

.why-campus-section {
  .why-campus-container {
    .why-campus-card {
      .first-card-p {
        max-width: 730px;
      }
    }
  }
}

.partner-section {
  .partner-container {
    max-width: 1619px;

    .common-para a {
      color: inherit;
      text-decoration: underline;
    }
  }
}

/* "Virtual Store Demo" is longer than the other demo labels; give it room so it stays on one line */
.partner-section .partner-container .start-btn {
  max-width: 380px;
}