/* ==========================================================================
   XPLOROO · Influencers page
   influencers-page.css — Standalone page (influencers.html): page head
   (title + subtitle) and a responsive card grid. Reuses the shared design
   system (variables/reset/base/utilities) plus the existing header/footer
   styles — this file only adds the page-specific head and `.ip-*` grid/card
   rules. Scoped entirely under `.influencers-page` / `.ip-*` — never
   touches the homepage Influencers section (`.influencers` / `.inf-*`).
   ========================================================================== */

.influencers-page {
  position: relative;
  padding-block: var(--section-gap);
}

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

/* -------------------------------------------------------------------------
   Page head
   ------------------------------------------------------------------------- */
.influencers-page__head {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.influencers-page__title {
  margin: 0;
  font-size: var(--fs-4xl, var(--fs-3xl));
}
.influencers-page__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Niche filter tabs (js/influencers-dynamic.js) — horizontally scrollable
   pill row, additive only; doesn't touch anything below.
   ------------------------------------------------------------------------- */
.ip-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-6);
  scrollbar-width: thin;
}
/* Premium colourful capsule identities — same design language as the
   About Us "Trusted Partners" pills (styles/about.css), cycled by position
   via :nth-child so every niche gets its own tasteful colour without
   touching the HTML/JS that generates them (js/influencers-dynamic.js).
   Inactive state keeps theme-aware text (--color-text-muted/-strong) so
   contrast holds in both Day and Night theme; only the SELECTED niche
   switches to white text, once its background is opaque enough to support it. */
.ip-tab:nth-child(8n+1) { --niche-a: rgba(168, 85, 247, 0.16); --niche-b: rgba(139, 92, 246, 0.06); --niche-border: rgba(168, 85, 247, 0.4); --niche-active-a: rgba(168, 85, 247, 0.85); --niche-active-b: rgba(124, 58, 237, 0.7); --niche-border-active: rgba(216, 180, 254, 0.8); --niche-glow: rgba(168, 85, 247, 0.4); }
.ip-tab:nth-child(8n+2) { --niche-a: rgba(225, 29, 72, 0.16); --niche-b: rgba(190, 18, 60, 0.06); --niche-border: rgba(225, 29, 72, 0.4); --niche-active-a: rgba(225, 29, 72, 0.85); --niche-active-b: rgba(190, 18, 60, 0.7); --niche-border-active: rgba(251, 182, 206, 0.8); --niche-glow: rgba(225, 29, 72, 0.4); }
.ip-tab:nth-child(8n+3) { --niche-a: rgba(37, 99, 235, 0.16); --niche-b: rgba(29, 78, 216, 0.06); --niche-border: rgba(37, 99, 235, 0.4); --niche-active-a: rgba(37, 99, 235, 0.85); --niche-active-b: rgba(29, 78, 216, 0.7); --niche-border-active: rgba(191, 219, 254, 0.8); --niche-glow: rgba(37, 99, 235, 0.4); }
.ip-tab:nth-child(8n+4) { --niche-a: rgba(6, 182, 212, 0.16); --niche-b: rgba(8, 145, 178, 0.06); --niche-border: rgba(6, 182, 212, 0.4); --niche-active-a: rgba(6, 182, 212, 0.85); --niche-active-b: rgba(8, 145, 178, 0.7); --niche-border-active: rgba(165, 243, 252, 0.8); --niche-glow: rgba(6, 182, 212, 0.4); }
.ip-tab:nth-child(8n+5) { --niche-a: rgba(20, 184, 166, 0.16); --niche-b: rgba(13, 148, 136, 0.06); --niche-border: rgba(20, 184, 166, 0.4); --niche-active-a: rgba(20, 184, 166, 0.85); --niche-active-b: rgba(13, 148, 136, 0.7); --niche-border-active: rgba(153, 246, 228, 0.8); --niche-glow: rgba(20, 184, 166, 0.4); }
.ip-tab:nth-child(8n+6) { --niche-a: rgba(99, 102, 241, 0.16); --niche-b: rgba(79, 70, 229, 0.06); --niche-border: rgba(99, 102, 241, 0.4); --niche-active-a: rgba(99, 102, 241, 0.85); --niche-active-b: rgba(79, 70, 229, 0.7); --niche-border-active: rgba(199, 210, 254, 0.8); --niche-glow: rgba(99, 102, 241, 0.4); }
.ip-tab:nth-child(8n+7) { --niche-a: rgba(219, 39, 119, 0.16); --niche-b: rgba(190, 24, 93, 0.06); --niche-border: rgba(219, 39, 119, 0.4); --niche-active-a: rgba(219, 39, 119, 0.85); --niche-active-b: rgba(190, 24, 93, 0.7); --niche-border-active: rgba(251, 207, 232, 0.8); --niche-glow: rgba(219, 39, 119, 0.4); }
.ip-tab:nth-child(8n) { --niche-a: rgba(124, 58, 237, 0.16); --niche-b: rgba(109, 40, 217, 0.06); --niche-border: rgba(124, 58, 237, 0.4); --niche-active-a: rgba(124, 58, 237, 0.85); --niche-active-b: rgba(109, 40, 217, 0.7); --niche-border-active: rgba(221, 214, 254, 0.8); --niche-glow: rgba(124, 58, 237, 0.4); }

.ip-tab {
  flex: none;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--niche-border, var(--color-border));
  background: linear-gradient(135deg, var(--niche-a, var(--color-surface)), var(--niche-b, var(--color-surface)));
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
@media (hover: hover) {
  .ip-tab:hover {
    color: var(--color-text-strong);
    border-color: var(--niche-glow, var(--color-border-strong));
    box-shadow: 0 4px 14px -6px var(--niche-glow, transparent);
    transform: translateY(-1px);
  }
}
.ip-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--niche-active-a, var(--color-primary-subtle)), var(--niche-active-b, var(--color-primary-subtle)));
  border-color: var(--niche-border-active, var(--color-border-brand));
  box-shadow: 0 0 0 1px var(--niche-border-active, transparent) inset, 0 6px 18px -6px var(--niche-glow, transparent);
  color: #fff;
  transform: scale(1.03);
}

/* -------------------------------------------------------------------------
   Responsive card grid
   Mobile: 1 col · Tablet (>=640px): 2 cols · Desktop (>=1024px): 4 cols
   ------------------------------------------------------------------------- */
.ip-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .ip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ip-grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
/* Premium colour identity — cycles automatically by card POSITION
   (:nth-child, 8-colour repeat) so every current AND future influencer
   card (rendered dynamically by js/influencers-dynamic.js — nothing here
   is keyed to a name/id) gets its own subtle identity. Deliberately low
   alpha throughout: the photo stays the focal point, colour only shows as
   a soft wash behind the text body, a hairline border and a gentle glow. */
.ip-card:nth-child(8n+1) { --ipc-a: rgba(147, 51, 234, 0.14); --ipc-b: rgba(124, 58, 237, 0.09); --ipc-border: rgba(192, 132, 252, 0.4); --ipc-glow: rgba(147, 51, 234, 0.25); }
.ip-card:nth-child(8n+2) { --ipc-a: rgba(225, 29, 72, 0.13); --ipc-b: rgba(88, 28, 135, 0.09); --ipc-border: rgba(251, 182, 206, 0.4); --ipc-glow: rgba(225, 29, 72, 0.25); }
.ip-card:nth-child(8n+3) { --ipc-a: rgba(37, 99, 235, 0.14); --ipc-b: rgba(79, 70, 229, 0.09); --ipc-border: rgba(147, 197, 253, 0.4); --ipc-glow: rgba(37, 99, 235, 0.25); }
.ip-card:nth-child(8n+4) { --ipc-a: rgba(6, 182, 212, 0.13); --ipc-b: rgba(37, 99, 235, 0.08); --ipc-border: rgba(165, 243, 252, 0.4); --ipc-glow: rgba(6, 182, 212, 0.25); }
.ip-card:nth-child(8n+5) { --ipc-a: rgba(219, 39, 119, 0.13); --ipc-b: rgba(147, 51, 234, 0.08); --ipc-border: rgba(251, 182, 206, 0.4); --ipc-glow: rgba(219, 39, 119, 0.25); }
.ip-card:nth-child(8n+6) { --ipc-a: rgba(20, 184, 166, 0.13); --ipc-b: rgba(30, 64, 175, 0.08); --ipc-border: rgba(153, 246, 228, 0.4); --ipc-glow: rgba(20, 184, 166, 0.25); }
.ip-card:nth-child(8n+7) { --ipc-a: rgba(192, 38, 211, 0.13); --ipc-b: rgba(124, 58, 237, 0.09); --ipc-border: rgba(240, 171, 252, 0.4); --ipc-glow: rgba(192, 38, 211, 0.25); }
.ip-card:nth-child(8n)   { --ipc-a: rgba(79, 70, 229, 0.14); --ipc-b: rgba(225, 29, 72, 0.08); --ipc-border: rgba(199, 210, 254, 0.4); --ipc-glow: rgba(79, 70, 229, 0.25); }

.ip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Colour identity shows through the body/text strip beneath the photo —
     the photo itself sits in `.ip-card__media`, opaque, fully unaffected. */
  background: linear-gradient(160deg, var(--ipc-a, transparent) 0%, transparent 55%), linear-gradient(340deg, var(--ipc-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 14px 32px -22px var(--ipc-glow, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-standard),
    background-color 300ms ease;
}
/* Thin gradient-edge border — same masked-ring technique used across the
   rest of the premium colour system (Trending Packages, Vlog Shoot,
   About page). Subtle by default, only slightly brighter on hover. */
.ip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: var(--ipc-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.65;
  transition: opacity var(--dur-base) var(--ease-standard);
}
@media (hover: hover) {
  .ip-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-lg), var(--glow-soft), 0 18px 40px -18px var(--ipc-glow, transparent);
  }
  .ip-card:hover::before { opacity: 1; }
}

.ip-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-inset);
}
.ip-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Supabase-loaded cards with no uploaded photo yet (js/influencers-dynamic.js) */
.ip-card__img--placeholder {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}
.ip-card__img--placeholder svg { width: 2.5rem; height: 2.5rem; }

.ip-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-5);
}
.ip-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.ip-card__bio {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.ip-card__followers {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--magenta-300);
}
:root[data-theme="light"] .ip-card__followers { color: var(--magenta-600); }

.ip-card__socials {
  display: flex;
  gap: var(--space-2);
  margin-top: 0.25rem;
}
.ip-card__social {
  flex: 1 1 0%;
}
.ip-card__social svg { width: 1rem; height: 1rem; }

.ip-card__book {
  margin-top: var(--space-2);
  width: 100%;
}

/* Cards opted into card-wide click-through (see js/influencers-page.js) —
   currently only the first influencer card carries `data-ip-href`. */
.ip-card[data-ip-href] { cursor: pointer; }
.ip-card[data-ip-href]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), var(--glow-primary);
}