/* cie642.fr projects page: the projects and their carousel (see
   frontend/src/carousel.ts). Without JavaScript the projects are listed
   one after the other. */

@layer components {
  /* The card */
  .carousel {
    position: relative;
    margin-block-start: 50px;
    padding: 68px 0 50px;
    background: var(--paper);
    border-radius: var(--radius-pill);
  }

  .carousel__track {
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  /* One project */
  .project {
    display: flex;
    align-items: flex-start;
  }

  .project__photo,
  .project__content {
    flex: 1 1 50%;
  }

  .project__photo {
    padding-inline: 96px 15px;

    img {
      margin-inline: auto;
    }
  }

  .project__content {
    padding-inline-end: 96px;
    text-align: start;
  }

  .project__title {
    margin: 0;
    font-size: 44px;
    font-weight: 900;
    line-height: 56px;
  }

  .project__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    margin-block-start: 50px;
  }

  /* The carousel: the projects share one grid cell (the tallest sets the
     height) and slide in from the side. */
  .carousel--enhanced .carousel__track {
    display: grid;
    overflow-x: clip;
  }

  .carousel--enhanced .carousel__item {
    grid-area: 1 / 1;
    transition:
      translate 500ms ease-in-out,
      visibility 500ms;
  }

  .carousel__item--before,
  .carousel__item--after {
    visibility: hidden;
  }

  .carousel__item--before {
    translate: -100% 0;
  }

  .carousel__item--after {
    translate: 100% 0;
  }

  .carousel__item--instant {
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel--enhanced .carousel__item {
      transition: none;
    }
  }

  /* Arrows: filled triangles on both sides, looping around. */
  .carousel__arrow {
    position: absolute;
    inset-block-start: calc(50% - 20px);
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    background: linear-gradient(135deg, transparent 50%, var(--ink) 50%);
    border: none;
    border-block-end: 5px solid var(--ink);
    border-inline-end: 5px solid var(--ink);
    border-radius: 4px;
    cursor: pointer;
  }

  .carousel__arrow--previous {
    inset-inline-start: 40px;
    rotate: 135deg;
  }

  .carousel__arrow--next {
    inset-inline-end: 40px;
    rotate: -45deg;
  }

  /* Dots below: a 20px dot in a bigger button. */
  .carousel__dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-block-start: 16px;
  }

  .carousel__dot {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    &::before {
      content: "";
      inline-size: 20px;
      block-size: 20px;
      border: 1px solid var(--ink);
      border-radius: 50%;
    }

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

  @media (forced-colors: active) {
    .carousel__dot[aria-current="true"]::before {
      background: CanvasText;
      forced-color-adjust: none;
    }
  }

  @media (width <= 768px) {
    .project {
      flex-direction: column;
      gap: 32px;
    }

    .project__photo,
    .project__content {
      padding-inline: 32px;
    }

    /* The arrows join the dots at the bottom. */
    .carousel__arrow {
      inset-block: auto 44px;
    }

    .carousel__arrow--previous {
      inset-inline-start: 32px;
    }

    .carousel__arrow--next {
      inset-inline-end: 32px;
    }
  }
}