/* AEYA product rail.
   Paired with snippets/aeya-product-rail.liquid. The render contract lives in the
   comment at the top of that snippet.

   Brand rules enforced here, from 01 Brand/Brand Rules.md:
     - Left aligned. Centred text is only allowed over large full bleed imagery, and
       this heading sits on a plain ground, so it is left aligned.
     - Headings uppercase with wide tracking, never tightened.
     - Warm tint ground, navy text, one surface pairing for the whole band.
     - Prices hold. The card carries one plain price and nothing beside it, so this
       file has no second price rule, no struck through rule, no flash, no figure.

   Self contained on purpose: every token carries a literal fallback, so the rail can
   be dropped into a template that has not loaded aeya-tokens.css or aeya-pdp.css and
   still renders on brand. */

.aeya-rail {
  --aeya-rail-gap: var(--aeya-space-lg, 1rem);
  --aeya-rail-card: 76%;

  background: var(--aeya-bg, #fffbf4);
  color: var(--aeya-ink, #081633);
  font-family: var(--aeya-font, 'Inter', -apple-system, sans-serif);
  text-align: left;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  padding-inline: var(--aeya-pdp-gutter, clamp(1rem, 4vw, 3rem));
}

.aeya-rail *,
.aeya-rail *::before,
.aeya-rail *::after {
  box-sizing: border-box;
}

.aeya-rail__inner {
  max-width: 120rem;
  margin-inline: auto;
}

/* ---------- Heading ----------
   Two lines, the second carrying the emphasis through the brand's two face split.
   Both lines are block level so the split is structural rather than a line break. */

.aeya-rail__title {
  margin: 0 0 var(--aeya-space-sm, 0.7rem);
  font-family: var(--aeya-font-display, var(--aeya-font, 'Inter', -apple-system, sans-serif));
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: var(--aeya-weight-heading, 700);
  line-height: var(--aeya-leading-heading, 1.15);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-heading, 0.25em);
}

.aeya-rail__title-top,
.aeya-rail__title .aeya-title__serif {
  display: block;
}

/* Mirrors .aeya-title__serif from aeya-pdp.css so the rail does not depend on that
   file being loaded. Same values, so the two can never disagree on a PDP. */
.aeya-rail__title .aeya-title__serif {
  font-family: var(--aeya-font-serif, Georgia, 'Times New Roman', serif);
  font-style: normal;
  font-weight: 300;
  font-size: 1.09em;
}

.aeya-rail__intro {
  margin: 0 0 var(--aeya-space-4xl, 2rem);
  max-width: var(--aeya-measure-body, 32.5em);
  font-size: var(--aeya-size-sm, 0.875rem);
  line-height: var(--aeya-leading-body, 1.6);
  opacity: 0.75;
}

/* ---------- Filter tabs ----------
   Hidden until the script marks the group ready, so with JavaScript off the control
   is absent rather than present and dead. Every card stays visible in that case. */

.aeya-rail__tabs {
  display: none;
}

.aeya-rail__tabs.is-ready {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aeya-space-xs, 0.5rem);
  margin-block-end: var(--aeya-space-4xl, 2rem);
}

.aeya-rail__tab {
  min-block-size: 44px; /* touch target floor, above the 36px token */
  min-inline-size: 44px;
  padding-inline: var(--aeya-space-xl, 1.25rem);
  border: var(--aeya-border-w, 1px) solid var(--aeya-border, #e6e6e6);
  border-radius: var(--aeya-radius-pill, 40px);
  background: transparent;
  color: var(--aeya-ink, #081633);
  font-family: inherit;
  font-size: var(--aeya-size-2xs, 0.75rem);
  font-weight: var(--aeya-weight-subheading, 500);
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
  cursor: pointer;
  transition:
    border-color var(--aeya-motion-fast, 0.298s) ease,
    background-color var(--aeya-motion-fast, 0.298s) ease,
    color var(--aeya-motion-fast, 0.298s) ease;
}

.aeya-rail__tab:hover {
  border-color: var(--aeya-navy, #081633);
}

.aeya-rail__tab[aria-pressed='true'] {
  background: var(--aeya-navy, #081633);
  border-color: var(--aeya-navy, #081633);
  color: var(--aeya-ink-inverse, #fffbf4);
}

.aeya-rail__tab:focus-visible,
.aeya-rail__card:focus-visible {
  outline: var(--aeya-border-w-emphasis, 2px) solid var(--aeya-navy, #081633);
  outline-offset: 3px;
}

/* ---------- Track ----------
   Mobile first: a scroll snapped swipe rail with one large card dominant per view
   and a sliver of the next card showing, which is what tells the thumb to move. */

.aeya-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--aeya-rail-card);
  gap: var(--aeya-rail-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* The length indicator replaces the scrollbar, so the native one is suppressed. */
.aeya-rail__track::-webkit-scrollbar {
  display: none;
}

/* ---------- Card ---------- */

.aeya-rail__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-md, 0.8rem);
  min-inline-size: 0;
  color: inherit;
  text-decoration: none;
}

/* Filtered out by the tabs. Declared after the card rule so it wins without weight. */
.aeya-rail__card[hidden] {
  display: none;
}

.aeya-rail__media {
  aspect-ratio: 3 / 4; /* matches the PDP gallery, so the page keeps one image ratio */
  overflow: hidden;
  border-radius: var(--aeya-radius-card, 4px);
  background: var(--aeya-stone, #d3cdc5);
}

.aeya-rail__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--aeya-motion-slow, 0.498s) ease;
}

.aeya-rail__card:hover .aeya-rail__media img {
  transform: scale(1.03);
}

.aeya-rail__meta {
  display: flex;
  flex-direction: column;
  gap: var(--aeya-space-2xs, 0.25rem);
}

.aeya-rail__name {
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  font-weight: var(--aeya-weight-subheading, 500);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--aeya-tracking-eyebrow, 0.13em);
}

.aeya-rail__colour {
  margin: 0;
  font-size: var(--aeya-size-2xs, 0.75rem);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
  opacity: 0.65;
}

.aeya-rail__price {
  margin: var(--aeya-space-2xs, 0.25rem) 0 0;
  font-size: var(--aeya-size-sm, 0.875rem);
  font-weight: var(--aeya-weight-subheading, 500);
  letter-spacing: var(--aeya-tracking-micro, 0.06em);
}

/* ---------- Length indicator ----------
   Hidden by default. The script adds is-active only while the track overflows, so a
   rail that already fits, and a page with script off, never paint a dead bar. */

.aeya-rail__meter {
  display: none;
  margin-block-start: var(--aeya-space-4xl, 2rem);
  block-size: 2px;
  inline-size: 100%;
  border-radius: var(--aeya-radius-pill, 40px);
  background: var(--aeya-border, #e6e6e6);
  overflow: hidden;
}

.aeya-rail__meter.is-active {
  display: block;
}

.aeya-rail__meter-fill {
  display: block;
  block-size: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--aeya-navy, #081633);
  transition: width var(--aeya-motion-fast, 0.298s) linear;
}

/* ---------- Tablet ----------
   Still a scrolling rail, two and a half cards in view. */

@media screen and (min-width: 750px) {
  .aeya-rail {
    --aeya-rail-gap: var(--aeya-space-xl, 1.25rem);
    --aeya-rail-card: calc((100% - (2 * var(--aeya-rail-gap))) / 2.5);
  }
}

/* ---------- Desktop ----------
   Four or fewer products: a static grid with exactly one column per product, so a
   partial row of empty cells is impossible. Five or more: the cards step down to
   four and a half in view and the rail scrolls, rather than the grid wrapping. */

@media screen and (min-width: 990px) {
  .aeya-rail--fits .aeya-rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .aeya-rail--fits.aeya-rail--cols-1 .aeya-rail__track {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 24rem; /* one card must not swell to the full band */
  }

  .aeya-rail--fits.aeya-rail--cols-2 .aeya-rail__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: 52rem;
  }

  .aeya-rail--fits.aeya-rail--cols-3 .aeya-rail__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .aeya-rail--scroll {
    --aeya-rail-card: calc((100% - (4 * var(--aeya-rail-gap))) / 4.5);
  }

  .aeya-rail--scroll .aeya-rail__track {
    scroll-snap-type: x proximity;
  }
}

/* ---------- Motion ----------
   The motion preference is honoured by naming the exact transitions rather than by
   an override sledgehammer, so nothing here needs a weight escalation. */

@media (prefers-reduced-motion: reduce) {
  .aeya-rail__track {
    scroll-behavior: auto;
  }

  .aeya-rail__tab,
  .aeya-rail__media img,
  .aeya-rail__meter-fill {
    transition: none;
  }

  .aeya-rail__card:hover .aeya-rail__media img {
    transform: none;
  }
}