/* ==========================================================================
   XPLOROO · Influencers module
   influencers.css — Structural clone of styles/recent-winners.css (same
   panel, peek-carousel, card anatomy, dot pagination, CTA/brandmark),
   renamed under `.influencers` / `.inf-*` so it never touches or conflicts
   with the Recent Winners component, which is left completely unmodified.
   ========================================================================== */

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

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

/* -------------------------------------------------------------------------
   Section head
   ------------------------------------------------------------------------- */
.influencers__head {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.influencers__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"] .influencers__eyebrow { color: var(--violet-600); }
.influencers__title {
  font-size: var(--fs-3xl);
  margin: 0;
}
/* Mobile-only simplified heading — hidden on desktop, swapped in at the
   mobile breakpoint below in place of the eyebrow + full title. */
.influencers__title--mobile {
  display: none;
  font-size: var(--fs-3xl);
  margin: 0;
  text-align: center;
}


/* -------------------------------------------------------------------------
   Premium bordered panel — pure black, thin low-opacity white border, large
   rounded corners, soft inner shadow.
   ------------------------------------------------------------------------- */
.inf-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 — one main card, next card peeks ~15-20% from the right

   `.inf-carousel` is the VIEWPORT: fixed size, `overflow: hidden`, never
   moves/transforms. `.inf-track` is the TRACK: the flex row of every card,
   positioned purely via `transform: translateX()` in JS. These must stay
   two separate elements — clipping and transforming the same element
   moves the clip boundary together with the content as one rigid unit,
   so whichever cards happen to fit inside it stay "visible" wherever
   that box drifts to, while the actual on-screen carousel area silently
   goes blank. See js/influencers.js for the auto-scroll/drag logic.
   ------------------------------------------------------------------------- */
.inf-carousel {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.inf-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  padding-inline: var(--space-5);
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
  /* No explicit width: a flex container defaults to filling its parent's
     (`.inf-carousel`'s) width, which is exactly what `.inf-slide`'s
     percentage widths below need to resolve correctly against. The 12
     cards then naturally overflow that box — `.inf-carousel`'s
     `overflow: hidden` (above) is what clips them, not this element. */
}
.inf-track.is-dragging {
  cursor: grabbing;
}

.inf-slide {
  flex: 0 0 auto;
  width: 82%;
}
/* Visual-only clones (duplicated by JS for the seamless loop) must never
   be reachable by keyboard or announced by assistive tech — the real,
   original cards already cover all six influencers. */
.inf-slide[aria-hidden="true"] {
  pointer-events: none;
}
@media (min-width: 480px) {
  .inf-slide { width: 62%; }
}
@media (min-width: 768px) {
  .inf-track { gap: var(--space-5); scroll-padding-inline: var(--space-6); padding-inline: var(--space-6); }
  .inf-slide { width: 38%; }
}
@media (min-width: 1024px) {
  .inf-slide { width: 27%; }
}

/* -------------------------------------------------------------------------
   Premium colour identity — cycles automatically by card POSITION
   (:nth-child on `.inf-slide`, the flex sibling every card sits inside;
   `.inf-card` itself is always its slide's only child, so nth-child has to
   live one level up). js/influencers.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 influencer by name, and nothing needs to change when more
   cards are added later — the cycle simply continues.
   ------------------------------------------------------------------------- */
.inf-slide:nth-child(6n+1) .inf-card { --inf-a: rgba(147, 51, 234, 0.16); --inf-b: rgba(124, 58, 237, 0.1); --inf-border-a: rgba(192, 132, 252, 0.65); --inf-border-b: rgba(196, 181, 253, 0.4); --inf-glow: rgba(147, 51, 234, 0.3); }
.inf-slide:nth-child(6n+2) .inf-card { --inf-a: rgba(225, 29, 72, 0.15); --inf-b: rgba(88, 28, 135, 0.1); --inf-border-a: rgba(251, 182, 206, 0.65); --inf-border-b: rgba(196, 181, 253, 0.4); --inf-glow: rgba(225, 29, 72, 0.3); }
.inf-slide:nth-child(6n+3) .inf-card { --inf-a: rgba(37, 99, 235, 0.16); --inf-b: rgba(79, 70, 229, 0.1); --inf-border-a: rgba(147, 197, 253, 0.65); --inf-border-b: rgba(199, 210, 254, 0.4); --inf-glow: rgba(37, 99, 235, 0.3); }
.inf-slide:nth-child(6n+4) .inf-card { --inf-a: rgba(6, 182, 212, 0.15); --inf-b: rgba(37, 99, 235, 0.1); --inf-border-a: rgba(165, 243, 252, 0.65); --inf-border-b: rgba(147, 197, 253, 0.4); --inf-glow: rgba(6, 182, 212, 0.3); }
.inf-slide:nth-child(6n+5) .inf-card { --inf-a: rgba(219, 39, 119, 0.15); --inf-b: rgba(147, 51, 234, 0.1); --inf-border-a: rgba(251, 182, 206, 0.65); --inf-border-b: rgba(216, 180, 254, 0.4); --inf-glow: rgba(219, 39, 119, 0.3); }
.inf-slide:nth-child(6n)   .inf-card { --inf-a: rgba(20, 184, 166, 0.15); --inf-b: rgba(30, 64, 175, 0.1); --inf-border-a: rgba(153, 246, 228, 0.65); --inf-border-b: rgba(147, 197, 253, 0.4); --inf-glow: rgba(20, 184, 166, 0.3); }

/* -------------------------------------------------------------------------
   Influencer card
   ------------------------------------------------------------------------- */
.inf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Colour identity shows through the body strip beneath the photo only —
     the photo itself is opaque and fully covers `.inf-card__media`, so it
     stays completely unaffected/fully visible. */
  background: linear-gradient(160deg, var(--inf-a, transparent) 0%, transparent 55%), linear-gradient(340deg, var(--inf-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(--inf-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 on Vlog Shoot/Trending
   Packages/Ending Soon. */
.inf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--inf-border-a, var(--color-border)), var(--inf-border-b, 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) {
  .inf-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), var(--glow-soft), 0 16px 36px -16px var(--inf-glow, transparent);
  }
  .inf-card:hover::before { opacity: 1; }
}
@media (hover: none) {
  .inf-card:active { transform: scale(0.98); }
}

/* Clean image placeholder — same footprint (aspect-ratio, rounded top
   corners inherited from .inf-card's overflow:hidden), neutral background
   until a real influencer photo URL is added to the <img> below. */
.inf-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-inset);
}
.inf-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inf-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--space-5);
}
.inf-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  margin: 0;
}
.inf-card__followers {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--magenta-300);
  transition: color 300ms ease;
}
:root[data-theme="light"] .inf-card__followers { color: var(--magenta-600); }
.inf-card__bio {
  margin: 0.15rem 0 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  font-style: italic;
}
.inf-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;
}
.inf-card__link span {
  transition: transform var(--dur-fast) var(--ease-out);
}
.inf-card__link:hover span { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   Dot pagination
   ------------------------------------------------------------------------- */
.inf-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
}
.inf-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);
}
.inf-dot.is-active {
  width: 20px;
  border-radius: var(--radius-pill);
  background: var(--gradient-brand);
}

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

.inf-brandmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.inf-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;
}
.inf-brandmark__tag {
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  max-width: 26rem;
}

/* -------------------------------------------------------------------------
   Mobile: simplified header (single centered "Influencers" heading, no
   eyebrow/subtitle) and no brandmark under the CTA. Carousel and card
   design are untouched — only the section head and CTA footer change.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .influencers__eyebrow,
  .influencers__title {
    display: none;
  }
  .influencers__title--mobile {
    display: block;
  }
  .inf-brandmark {
    display: none;
  }
}