/**
 * Collection carousel — PDF p.5.
 */

/* PDF p.5 treats this as one continuous full-bleed photographic canvas —
   the heading, badges, and pagination all sit as overlays directly on top of
   the image rather than in a separate letterboxed bar above it. The carousel
   crossfades via opacity only (see the note on .collection__slide below) so
   making the photo layer section-height-sized here does not reintroduce the
   oversized-transformed-layer rasterizer bug that was fixed previously. */
.collection {
  background: var(--color-noir-temp);
  position: relative;
  min-height: var(--section-min-height);
}

.collection__header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: clamp(2.5rem, 6vh, 4.5rem);
  z-index: 2;
  text-align: center;
  padding-inline: var(--space-6);
  pointer-events: none;
}
.collection__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
  margin: 0 0 var(--space-4);
}
.collection__heading {
  font-size: clamp(2rem, 3.6vw, var(--fs-5));
  line-height: 1.25;
  color: var(--color-paper-on-dark);
  margin: 0;
}

.collection__carousel {
  position: relative;
  min-height: var(--section-min-height);
  outline: none;
}

/* NOTE: this used to be a flex row of all 7 slides (13,440px wide) clipped by
   overflow:hidden and shifted with transform: translateX(). That triggered a
   real Chromium software-rasterizer tiling bug: the newly-exposed slice of
   the giant clipped layer never got rasterized after the transform jumped,
   so every slide but the first painted as empty (verified: DOM/computed
   styles were always correct — opacity 1, visible, correct rect — only the
   raster output was blank; will-change/translateZ(0)/forced reflow did not
   fix it). Each slide is now a normal-sized absolutely-stacked layer that
   crossfades via opacity, so there is no oversized transformed layer for the
   rasterizer to mishandle. */
.collection__track {
  /* Fills the full section — the photography IS the section's visual layer
     now, not a boxed inset within it (PDF p.5). */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.collection__track:active {
  cursor: grabbing;
}

.collection__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease;
  pointer-events: none;
}
.collection__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
/* Card area is clickable via carousel.js (data-slide-url) whenever a slide
   has a real destination URL — this cursor is the only visual cue needed
   since the CTA badge remains the one focusable/no-JS link. */
.collection__slide.has-card-link {
  cursor: pointer;
}

.collection__slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Restrained desktop-only hover: real mouse/trackpad pointers only, so
   touchscreens (which have no hover state to "stick") never see this.
   Scoped to the image layer alone so overlaid text/badge stay crisp. */
@media (hover: hover) and (pointer: fine) {
  .collection__slide-bg {
    transition: transform 600ms ease;
  }
  .collection__slide.has-card-link:hover .collection__slide-bg {
    transform: scale(1.035);
  }
}

/* Darkened top AND bottom so the overlaid heading and footer text stay
   readable regardless of what any given slide's photography looks like
   underneath — a deliberately per-slide, not global, safeguard (see
   .collection__cta-badge below for the same reasoning). */
.collection__slide-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 5, 0.65) 0%, rgba(10, 7, 5, 0.4) 20%, rgba(10, 7, 5, 0.12) 42%, rgba(10, 7, 5, 0.08) 55%, rgba(10, 7, 5, 0.78) 100%);
}

/* The one visible CTA per slide — a real link, independently editable
   (label + URL) per slide via the collection_slides repeater. Client
   feedback: the CTA previously sat mid-slide (PDF's "Signature" pill
   position) and visually clashed with the product photography behind it.
   Moved into the bottom footer band instead — same darkened scrim that
   already keeps the title/description legible covers the badge too, so it
   no longer needs to carry its own separate legibility treatment against
   arbitrary photography. Client follow-up: centered horizontally rather
   than left-aligned, and sits below the title/description as its own row
   (see .collection__slide-footer's child order in the template) — content,
   then the CTA, then the dots below it, never overlapping any of the three. */
.collection__cta-badge {
  align-self: center;
  background: rgba(10, 7, 5, 0.35);
  border: 1px solid var(--color-copper-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-000);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.collection__cta-badge:hover,
.collection__cta-badge:focus-visible {
  background: var(--color-copper-temp);
  color: var(--color-noir-temp);
}

.collection__slide-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline: var(--space-7);
  padding-block: var(--space-6) var(--space-7);
}
.collection__slide-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}

.collection__slide-lower-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.collection__slide-title {
  margin: 0;
  font-size: var(--fs-3);
  color: var(--color-paper-on-dark);
}

.collection__slide-desc {
  max-width: 22rem;
  margin: 0;
  text-align: right;
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-00);
  line-height: 1.6;
}

/* Overlaid at the bottom of the image, in the same band as the slide
   title/description (PDF p.5 reads pagination as part of that bottom row,
   not a separate strip below the photo). */
.collection__dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: var(--space-6);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  pointer-events: none;
}
.collection__dots > * {
  pointer-events: auto;
}
.collection__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-line-on-dark);
  padding: 0;
  position: relative;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
/* Invisible padded hit area — comfortable tap target without visually
   enlarging the dot itself (Phase 5 "Touch Targets"). */
.collection__dot::before {
  content: '';
  position: absolute;
  inset: -14px;
}
.collection__dot.is-active {
  background: var(--color-copper-temp);
  transform: scale(1.25);
}
.collection__dot:hover,
.collection__dot:focus-visible {
  background: var(--color-paper-on-dark-soft);
}

@media (max-width: 640px) {
  /* Client feedback: mobile typography still slightly large after the
     broader mobile pass — a small further reduction, not a redesign. */
  .collection__heading {
    font-size: clamp(1.75rem, 3.6vw, var(--fs-5));
  }
  .collection__slide-title {
    font-size: 1.5rem;
  }
  .collection__slide-footer {
    gap: var(--space-3);
    /* Stacking title above description makes this block taller — reserve
       real room below it for the dots row (which stays independently
       pinned to the very bottom) so long descriptions never run under it. */
    padding-block-end: var(--space-9);
  }
  .collection__slide-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .collection__slide-desc {
    text-align: left;
    max-width: none;
  }
  .collection__dots {
    inset-block-end: var(--space-4);
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass on
   the same two headings above, nothing else. Desktop (the var(--fs-5)
   ceiling) is untouched either way. */
@media (max-width: 640px) {
  .collection__heading {
    font-size: clamp(1.66rem, 3.6vw, var(--fs-5));
  }
  .collection__slide-title {
    font-size: 1.4rem;
  }
}