/* ==========================================================================
   XPLOROO · Recent Winners module
   recent-winners.css — Fully original, self-contained component. Mobile-
   first per spec: a bordered "premium panel" housing a peek-carousel of
   winner cards, dot pagination, and a bottom CTA + brandmark.
   Scoped entirely under `.recent-winners` / `.rw-*` — never touches any
   other section's classes, tokens, or files.
   ========================================================================== */

.recent-winners {
  position: relative;
  padding-block: var(--home-section-gap); /* homepage inter-section gap, see hero.css */
}

.recent-winners__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Section head
   ------------------------------------------------------------------------- */
.recent-winners__head {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.recent-winners__eyebrow {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono, var(--font-body));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--violet-400);
  transition: color 300ms ease;
}
:root[data-theme="light"] .recent-winners__eyebrow { color: var(--violet-600); }
.recent-winners__title {
  font-size: var(--fs-3xl);
  margin: 0;
}

/* -------------------------------------------------------------------------
   Premium bordered panel — pure black, thin low-opacity white border, large
   rounded corners, soft inner shadow.
   ------------------------------------------------------------------------- */
.rw-panel {
  position: relative;
  background: var(--surface-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  padding: var(--space-6) 0 var(--space-5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 40px rgba(255, 255, 255, 0.025),
    var(--shadow-lg);
  overflow: hidden;
  transition: background-color 300ms ease, border-color 300ms ease;
}

/* -------------------------------------------------------------------------
   Carousel — continuous auto-scroll (right → left), same architecture as
   the Influencers carousel (see js/recent-winners.js / js/influencers.js):
   `.rw-carousel` is the VIEWPORT — fixed size, `overflow: hidden`, never
   itself transformed. `.rw-track` is the TRACK — the flex row of every
   card, positioned purely via `transform: translateX()` in JS. These stay
   two separate elements on purpose: clipping and transforming the same
   element moves the clip boundary together with the content, so the
   visible area can drift away from the actual cards.
   ------------------------------------------------------------------------- */
.rw-carousel {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.rw-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  padding-inline: var(--space-5);
  cursor: grab;
  /* Tells the browser a horizontal drag here is this element's own gesture
     (handled by js/recent-winners.js's existing pointer-event drag logic)
     while a vertical one still scrolls the page normally — same rule the
     Influencers/Vlog Shoot Packages carousels already use. Without this,
     mobile browsers default to treating any touch-drag as an ambiguous/
     page-scroll gesture and never let a horizontal swipe reach the track. */
  touch-action: pan-y;
  will-change: transform;
  /* No explicit width: a flex container defaults to filling its parent's
     (`.rw-carousel`'s) width, which is what `.rw-slide`'s percentage
     widths below need to resolve correctly against. The cloned cards
     then naturally overflow that box — `.rw-carousel`'s `overflow: hidden`
     (above) is what clips them, not this element. */
}
.rw-track.is-dragging {
  cursor: grabbing;
}

.rw-slide {
  flex: 0 0 auto;
  width: 82%;
}
/* Clones are visual-only duplicates for the seamless loop — never focus-
   able or announced by assistive tech, the real cards already cover every
   winner. */
.rw-slide[aria-hidden="true"] {
  pointer-events: none;
}
@media (min-width: 480px) {
  .rw-slide { width: 62%; }
}
@media (min-width: 768px) {
  .rw-track { gap: var(--space-5); padding-inline: var(--space-6); }
  .rw-slide { width: 38%; }
}
@media (min-width: 1024px) {
  .rw-slide { width: 27%; }
}

/* -------------------------------------------------------------------------
   Premium colour identity — cycles automatically by card POSITION
   (:nth-child on `.rw-slide`, the flex sibling every card sits inside;
   `.rw-card` itself is always its slide's only child, so nth-child has to
   live one level up). js/recent-winners.js clones the full 6-card set
   exactly once, appended in the same order (1,2,3,4,5,6,1c,2c,...), so the
   6n cycle below lands every clone on the SAME colour as the original card
   it duplicates — no visible colour flip as the loop wraps. Nothing here is
   keyed to any winner by name, and nothing needs to change when more cards
   are added later — the cycle simply continues. The `--rw-c1`/`--rw-c2`
   monogram-media gradients (per `.rw-card__media--N`) are untouched.
   ------------------------------------------------------------------------- */
.rw-slide:nth-child(6n+1) .rw-card { --rwc-a: rgba(147, 51, 234, 0.16); --rwc-b: rgba(109, 40, 175, 0.1); --rwc-border: rgba(192, 132, 252, 0.6); --rwc-glow: rgba(147, 51, 234, 0.3); }
.rw-slide:nth-child(6n+2) .rw-card { --rwc-a: rgba(225, 29, 72, 0.15); --rwc-b: rgba(159, 18, 57, 0.1); --rwc-border: rgba(251, 182, 206, 0.6); --rwc-glow: rgba(225, 29, 72, 0.3); }
.rw-slide:nth-child(6n+3) .rw-card { --rwc-a: rgba(124, 58, 237, 0.16); --rwc-b: rgba(91, 33, 182, 0.1); --rwc-border: rgba(196, 181, 253, 0.6); --rwc-glow: rgba(124, 58, 237, 0.3); }
.rw-slide:nth-child(6n+4) .rw-card { --rwc-a: rgba(37, 99, 235, 0.16); --rwc-b: rgba(29, 78, 216, 0.1); --rwc-border: rgba(147, 197, 253, 0.6); --rwc-glow: rgba(37, 99, 235, 0.3); }
.rw-slide:nth-child(6n+5) .rw-card { --rwc-a: rgba(6, 182, 212, 0.15); --rwc-b: rgba(8, 145, 178, 0.1); --rwc-border: rgba(165, 243, 252, 0.6); --rwc-glow: rgba(6, 182, 212, 0.3); }
.rw-slide:nth-child(6n)   .rw-card { --rwc-a: rgba(79, 70, 229, 0.16); --rwc-b: rgba(67, 56, 202, 0.1); --rwc-border: rgba(199, 210, 254, 0.6); --rwc-glow: rgba(79, 70, 229, 0.3); }

/* -------------------------------------------------------------------------
   Winner card
   ------------------------------------------------------------------------- */
.rw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Colour identity shows through the body strip beneath the monogram
     media only — `.rw-card__media` keeps its own untouched --rw-c1/--rw-c2
     gradient, so the "photo" area is completely unaffected. */
  background: linear-gradient(160deg, var(--rwc-a, transparent) 0%, transparent 55%), linear-gradient(340deg, var(--rwc-b, transparent) 0%, transparent 60%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 12px 30px -20px var(--rwc-glow, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color 300ms ease,
    border-color 300ms ease;
  will-change: transform;
}
/* Thin gradient border, masked to a hairline ring following the card's own
   rounded corners — same technique already used elsewhere on this page. */
.rw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--rwc-border, var(--color-border));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .rw-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), var(--glow-soft), 0 16px 36px -16px var(--rwc-glow, transparent);
  }
  .rw-card:hover::before { opacity: 1; }
}
@media (hover: none) {
  .rw-card:active { transform: scale(0.98); }
}

.rw-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 140% at 30% 0%, var(--rw-c1, #2a2a38) 0%, var(--rw-c2, #0c0c12) 70%);
}
.rw-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 10px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Bottom scrim so the monogram/quote reads cleanly like a portrait crop */
.rw-card__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
  z-index: 1;
}

.rw-card__monogram {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

/* Winner photo palettes — abstract, travel-inspired gradients standing in
   for real portraits (no external photo assets in this build) */
.rw-card__media--1 { --rw-c1: #2f6f8f; --rw-c2: #0a1a22; }
.rw-card__media--2 { --rw-c1: #4a7fb5; --rw-c2: #0b1420; }
.rw-card__media--3 { --rw-c1: #b8567a; --rw-c2: #1c0d14; }
.rw-card__media--4 { --rw-c1: #c07a2e; --rw-c2: #1a0f04; }
.rw-card__media--5 { --rw-c1: #1f7a5c; --rw-c2: #0a1712; }
.rw-card__media--6 { --rw-c1: #7a5cb8; --rw-c2: #150c22; }

.rw-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-5);
}
.rw-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  margin: 0;
}
.rw-card__trip {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--magenta-300);
  transition: color 300ms ease;
}
:root[data-theme="light"] .rw-card__trip { color: var(--magenta-600); }
.rw-card__experience {
  margin: 0.15rem 0 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
}
.rw-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
  width: fit-content;
}
.rw-card__link span {
  transition: transform var(--dur-fast) var(--ease-out);
}
.rw-card__link:hover span { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Dot pagination
   ------------------------------------------------------------------------- */
.rw-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
}
.rw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-border-strong);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 300ms ease, transform var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.rw-dot.is-active {
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

/* -------------------------------------------------------------------------
   Bottom CTA + brandmark
   ------------------------------------------------------------------------- */
.recent-winners__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  text-align: center;
}

.rw-brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.rw-brandmark__logo {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  background: var(--gradient-brand-vivid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rw-brandmark__tag {
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  max-width: 26rem;
}