/* 03 · Signature Collection — spec §4 "03".
   Card width (276px) is deliberately fixed at every breakpoint, not resized
   per breakpoint — a fixed card against a shrinking container is what
   naturally produces the spec's own responsive card counts (4 / 3 / 2 /
   1.15 visible) without any extra breakpoint-specific sizing. See the
   carousel comment below for why the arrows never need a separate "mobile"
   rule either. */
@layer components {
  .signature {
    background-color: var(--cream-100);
    padding-block: var(--section-pad);
  }

  .signature__head {
    margin-bottom: 36px; /* cards start 36px under the flourish (spec: the mockup's 13px is too tight) */
  }

  /* The carousel wrapper is sized like .site-container--wide (1360px) so the
     arrows — anchored to ITS edges — land ~80px outside the 1200px track
     (spec: 36px gap + 42px arrow ≈ 78px), while reusing the same clamp()-based
     gutter every other wide element already uses, instead of new fixed-px
     math that could overflow at an unconsidered viewport. As the viewport
     narrows past where that no longer fits, the wrapper's own padding
     shrinks like any other wide container, so the arrows are pulled in
     until they sit flush with the track — which is exactly the "arrows move
     inside the edges" tablet behaviour the spec asks for separately; one
     rule produces both states. */
  .signature__carousel {
    position: relative;
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .signature__track {
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .signature__arrow {
    position: absolute;
    top: 50%; /* centred on the track's own height, i.e. the cards — the wrapper has no other content to skew it */
    translate: 0 -50%;
    z-index: 1;
  }

  .signature__arrow--prev {
    left: 0;
  }

  .signature__arrow--next {
    right: 0;
  }

  /* Mobile: swipe only, no arrows at all, regardless of whether the track
     still overflows (it does — spec wants a ~1.15-card peek, so
     scroll-arrows.js's own "hide when everything fits" logic would otherwise
     keep them visible here). */
  @media (max-width: 767.98px) {
    .signature__arrow {
      display: none;
    }
  }

  /* ---- Card -------------------------------------------------------------- */
  .card {
    flex: 0 0 276px;
    scroll-snap-align: start;
    background-color: var(--cream-50);
    border: 1px solid var(--sand-300);
    transition:
      transform var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }

  .card:is(:hover, :focus-within) {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
  }

  .card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden; /* clips the image's hover scale to the frame */
  }

  .card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur) var(--ease);
  }

  .card:is(:hover, :focus-within) .card__image {
    transform: scale(1.03);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 16px 18px;
  }

  .card__name {
    margin: 0;
    display: flex;
    align-items: center; /* centres a future single-line name within the reserved 2-line box */
    min-height: 2.24em; /* 2 lines at the role's own 1.12 line-height — always reserved, even though every current card already wraps to 2 */
  }

  .card__descriptor {
    margin: 14px 0 0;
  }

  .card__price {
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-card-title);
    color: var(--ca-heading);
  }

  .card__body .btn {
    margin-top: 16px;
  }
}