/* ==========================================================================
   Gallery: carousel, project card, CTA card
   Figma "gallery": 630 × 704 cards, 25px apart, the first one flush with
   the left edge of the viewport, the next ones running off the right edge.

   Scrolling is native (horizontal overflow + scroll snapping), so touch
   swipe, horizontal trackpad gestures and the keyboard work on their own.
   js/modules/carousel.js only maps vertical wheel gestures to card steps.
   ========================================================================== */

@layer components {
  .carousel {
    container-type: inline-size;
  }

  .carousel__track {
    display: flex;
    gap: 1.5625rem; /* 25 */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .carousel__track::-webkit-scrollbar {
    display: none;
  }

  /* Snapping pauses while js/modules/carousel.js glides to the next card,
     so it cannot pull the animation back; it ends on a snap position. */
  .carousel__track[data-gliding] {
    scroll-snap-type: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .carousel__track {
      scroll-behavior: smooth;
    }
  }

  /* 630 of 1920 at desktop, so three cards show with the third cut off.
     On small screens a card is 300px (keeps its content readable) but at
     most 85% of the width, so the next card always peeks in.
     Each item is the size container its card's content scales with. */
  .carousel__item {
    container-type: inline-size;
    flex: none;
    inline-size: max(32.8125cqi, min(18.75rem, 85cqi));
    scroll-snap-align: start;
  }

  /* ------------------------------------------------------------------------
     Card base (project and CTA). Content inside scales with the card
     (cqi), capped at the Figma desktop sizes.
     ------------------------------------------------------------------------ */
  .project-card,
  .cta-card {
    position: relative;
    display: grid;
    aspect-ratio: 630 / 704;
    overflow: hidden;
    border-radius: var(--radius-large);
  }

  /* ------------------------------------------------------------------------
     Project card — the whole card is the click target (the button's ::after
     covers it), with a single focus ring around the card.
     ------------------------------------------------------------------------ */
  /* One cell the size of the card: the image fills it, the content sits on
     top (the image's own height must not stretch the row). */
  .project-card {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }

  .project-card__image {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Figma: 36px from the left and 39px from the bottom of a 630px card. */
  .project-card__content {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: start;
    margin: 0 0 6.1905% 5.7143%;
  }

  /* Figma title box: hugs the text, 299px text width at 36px, padding
     8 / 15.5. Fill and radius pending confirmation from Figma.
     Size: proportional to the card (36px on the 630px Figma card), between
     the large text style (its floor, so small cards stay readable) and the
     h2 style. */
  .project-card__title {
    inline-size: fit-content;
    max-inline-size: calc(330em / 36);
    padding: calc(8em / 36) calc(15.5em / 36);
    border-radius: var(--radius-medium);
    background-color: var(--color-black-transparent-40);
    color: var(--color-white);
    font-size: clamp(var(--font-size-large), calc(36cqi * 100 / 630), var(--font-size-h2));
  }

  .project-card__button {
    margin-block-start: 1rem; /* 16 */
  }

  .project-card__button::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .project-card__button:focus-visible {
    outline: none;
  }

  /* Ring drawn inside the card: the scroller would clip it outside. */
  .project-card:has(.project-card__button:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: calc(-1 * var(--focus-outline-offset) - 2px);
  }

  /* ------------------------------------------------------------------------
     CTA card — always the last item. Figma: text at 51.5px from the left,
     button 16px under it, 76px from the bottom of a 630px card.
     ------------------------------------------------------------------------ */
  .cta-card {
    align-content: end;
    justify-items: start;
    padding: 0 0 12.0635% 8.1746%;
    background-color: var(--color-accent);
    color: var(--color-white);
  }

  .cta-card__text {
    max-inline-size: calc(299em / 64);
    font-size: min(var(--font-size-h1), calc(64cqi * 100 / 630));
  }

  .cta-card__button {
    margin-block-start: 1rem; /* 16 */
  }
}