/* Watch & shop — shoppable reels row (after Signature Collection) and the reel
   player dialog. Not in the original mockup (owner request 2026-10-05): built
   only from existing tokens and components — dark ink surface like the hero,
   square corners, gold hairlines, the Customer Love arrow buttons. The carousel
   geometry deliberately mirrors .signature__carousel so the two rows line up. */
@layer components {
  .reels {
    background-color: var(--ink-950);
    padding-block: var(--section-pad);
    /* Separates this ink-950 row from the ink-900 brand-promises band below. */
    border-bottom: 1px solid var(--gold-hairline);
  }

  .reels__head {
    margin-bottom: 36px; /* same as .signature__head, so the two rows read as a pair */
  }

  .reels__carousel {
    position: relative;
    max-width: calc(var(--container-wide) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Items fit (scroll-arrows.js fitCarousel): shrink to the tiles so the arrows sit beside them. */
  .reels__carousel.is-fit {
    max-width: calc(var(--fit-w) + 2 * var(--space-8));
    padding-inline: var(--space-8);

    & .reels__track {
      max-width: none;
    }
  }

  .reels__track {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: safe center; /* centred while the reels fit; start-aligned (scrollable) once they overflow */
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

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

  .reels__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
  }

  .reels__arrow--prev {
    left: 0;
  }

  .reels__arrow--next {
    right: 0;
  }

  /* ---- Tile ------------------------------------------------------------- */
  .reel-tile {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }

  .reel-tile__button {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--gold-hairline);
    background-color: var(--ink-900);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);

    &:active {
      border-color: var(--gold-200);
    }
  }

  .reel-tile__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .reel-tile__play {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--gold-400) 70%, transparent);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--ink-950) 55%, transparent);
    color: var(--gold-200);
    transition:
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease);

    & .icon {
      --icon-stroke: 1.5px;
      translate: 1px 0; /* optical centring of the triangle */
    }
  }

  .reel-tile__button:focus-visible .reel-tile__play {
    border-color: var(--gold-400);
    background-color: color-mix(in srgb, var(--ink-950) 75%, transparent);
  }

  /* Hover only where a pointer can hover — on touch it would stick after a tap. */
  @media (hover: hover) {
    .reel-tile__button:hover {
      border-color: var(--gold-400);
    }

    .reel-tile__button:hover .reel-tile__play {
      border-color: var(--gold-400);
      background-color: color-mix(in srgb, var(--ink-950) 75%, transparent);
    }

    .reel-player__close:hover {
      color: var(--gold-400);
    }
  }

  .reel-tile__title {
    margin: var(--space-3) 0 0;
  }

  .reel-tile__shop {
    margin: var(--space-1) 0 0;
    color: var(--gold-400);
  }

  @media (max-width: 767.98px) {
    .reels__arrow {
      display: none;
    }

    /* ~2.3 tiles visible: the peek says "swipe for more". */
    .reel-tile {
      flex-basis: calc((100% - 2 * var(--space-5)) / 2.3);
    }
  }

  /* ---- Player ----------------------------------------------------------- */
  .reel-player {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-on-dark);

    &::backdrop {
      background-color: color-mix(in srgb, var(--ink-950) 92%, transparent);
    }

    &[open] {
      display: grid;
      place-items: center;
      animation: reel-fade var(--dur) var(--ease);
    }

    &[open]::backdrop {
      animation: reel-fade var(--dur) var(--ease);
    }
  }

  /* Opening fade only (base.css cuts it to ~0 under prefers-reduced-motion). */
  @keyframes reel-fade {
    from {
      opacity: 0;
    }
  }

  .reel-player__panel {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(260px, 340px);
    align-items: center;
    gap: var(--space-6);
    max-height: 100dvh;
    padding: var(--space-6) var(--space-7);
  }

  .reel-player__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: inline-flex;
    padding: var(--space-2);
    border: none;
    background: none;
    color: var(--gold-200);
    cursor: pointer;
    transition: color var(--dur) var(--ease);

    &:active {
      color: var(--gold-400);
    }
  }

  .reel-player__stage {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  /* --reel-ratio comes from the video's own metadata (reels.js), so a landscape
     clip gets a landscape frame instead of a 9:16 box with bars. */
  .reel-player__video {
    display: block;
    height: min(86dvh, 820px);
    aspect-ratio: var(--reel-ratio, 9 / 16);
    object-fit: contain;
    border: 1px solid var(--gold-hairline);
    background-color: var(--ink-950);
  }

  .reel-player.is-landscape .reel-player__video {
    width: min(60vw, 960px);
    height: auto;
  }

  .reel-player__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 86dvh;
    min-width: 0;
  }

  .reel-player__title {
    margin: 0;
    color: var(--gold-400);
  }

  .reel-player__count {
    margin: 0;
    color: var(--text-on-dark-muted);
  }

  .reel-player__products {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
  }

  .reel-product {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "media info"
      "media add";
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--gold-hairline);
    background-color: var(--ink-900);
  }

  .reel-product__media {
    grid-area: media;
    align-self: stretch;

    & img {
      display: block;
      width: 64px;
      height: 100%;
      min-height: 64px;
      object-fit: cover;
    }
  }

  .reel-product__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .reel-product__name {
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    color: var(--text-on-dark);
    text-decoration: none;

    &:hover {
      color: var(--gold-200);
    }
  }

  .reel-product__price {
    color: var(--text-on-dark-muted);
  }

  .reel-product__add {
    grid-area: add;
    justify-self: start;
  }

  /* "View" (not buyable yet) is the secondary outline button, at the small size of gold-sm. */
  .reel-product__add.btn--outline-light {
    min-height: 32px;
    padding-inline: 20px;
    font-size: var(--fs-button-sm);
  }

  /* Phones and tablets (side-by-side needs ~1100px for a portrait clip + the cookie
     column): the video fills the width; title and tagged cookies sit underneath
     (cookies scroll sideways), prev/next float over the video's edges. */
  @media (max-width: 1099.98px) {
    .reel-player[open] {
      place-items: stretch;
    }

    .reel-player__panel {
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 0;
      height: 100dvh;
      padding: 0;
      background-color: var(--ink-950);
    }

    .reel-player__close {
      z-index: 2;
      background-color: color-mix(in srgb, var(--ink-950) 55%, transparent);
    }

    .reel-player__stage {
      position: relative;
      min-height: 0;
      justify-content: center;
    }

    .reel-player__video,
    .reel-player.is-landscape .reel-player__video {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      border: none;
    }

    .reel-player__nav {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      z-index: 1;
      background-color: color-mix(in srgb, var(--ink-950) 55%, transparent);
    }

    .reel-player__nav--prev {
      left: var(--space-3);
    }

    .reel-player__nav--next {
      right: var(--space-3);
    }

    .reel-player__side {
      max-height: none;
      padding: var(--space-4) var(--gutter) var(--space-5);
      border-top: 1px solid var(--gold-hairline);
      background-color: var(--ink-950);
    }

    .reel-player__products {
      flex-direction: row;
      margin-top: var(--space-2);
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
    }

    .reel-product {
      flex: 0 0 min(280px, 82%);
      scroll-snap-align: start;
    }

    /* A landscape clip is short: size the stage to it and stack the cookies under it,
       centred as one block, instead of a full-height stage that is mostly black. */
    .reel-player.is-landscape {
      & .reel-player__panel {
        grid-template-rows: auto auto;
        align-content: center;
      }

      & .reel-player__video {
        height: auto;
        aspect-ratio: var(--reel-ratio, 16 / 9);
      }

      & .reel-player__products {
        flex-direction: column;
        overflow: visible;
      }

      & .reel-product {
        flex: none;
      }
    }
  }
}