/* ==========================================================================
   XPLOROO · About page
   about-page.css — Standalone page (about.html): hero, mission glass card,
   feature grid, timeline, and CTA. Reuses the shared design system
   (variables/reset/base/utilities) plus the existing header/footer styles —
   this file only adds page-specific rules. Scoped entirely under
   `.about-page` / `.ap-*` — never touches the homepage About Us section
   (`.about` / its own classes) or any other page.
   ========================================================================== */

.about-page {
  position: relative;
  overflow-x: clip;
}
.about-page__section {
  padding-block: var(--section-gap);
  position: relative;
  z-index: 1;
}
.about-page__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Atmospheric background — three soft blurred colour orbs fixed behind
   every section (never intercepts clicks, never affects layout/scroll
   height, clipped by `.about-page`'s own overflow-x above so they can
   never cause horizontal scroll). Deliberately subtle: low opacity, heavy
   blur, no animation — pure depth, not decoration that competes with text.
   ------------------------------------------------------------------------- */
.about-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 8% 6%, rgba(147, 51, 234, 0.16), transparent 60%),
    radial-gradient(34rem 28rem at 92% 28%, rgba(37, 99, 235, 0.14), transparent 60%),
    radial-gradient(36rem 30rem at 12% 68%, rgba(225, 29, 72, 0.12), transparent 60%),
    radial-gradient(32rem 26rem at 88% 92%, rgba(6, 182, 212, 0.12), transparent 60%);
}
:root[data-theme="light"] .about-page::before {
  background:
    radial-gradient(38rem 30rem at 8% 6%, rgba(147, 51, 234, 0.08), transparent 60%),
    radial-gradient(34rem 28rem at 92% 28%, rgba(37, 99, 235, 0.07), transparent 60%),
    radial-gradient(36rem 30rem at 12% 68%, rgba(225, 29, 72, 0.06), transparent 60%),
    radial-gradient(32rem 26rem at 88% 92%, rgba(6, 182, 212, 0.06), transparent 60%);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.ap-hero {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.ap-hero__title {
  margin: 0;
  font-size: var(--fs-4xl);
  background: linear-gradient(100deg, var(--color-text-strong) 0%, var(--color-text-strong) 18%, #a855f7 42%, #e11d48 62%, var(--color-text-strong) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ap-hero__subtitle {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-md, var(--fs-base));
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Our Mission — premium glass card
   ------------------------------------------------------------------------- */
.ap-mission {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  background: linear-gradient(160deg, rgba(147, 51, 234, 0.14) 0%, transparent 55%), linear-gradient(340deg, rgba(37, 99, 235, 0.1) 0%, transparent 55%), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-lg), 0 20px 55px -30px rgba(147, 51, 234, 0.4);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  text-align: center;
  transition: background-color 300ms ease, border-color 300ms ease;
  overflow: hidden;
}
/* Thin gradient edge, same masked-ring technique used on Trending Packages
   / Ending Soon / Vlog Shoot cards. */
.ap-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.55), rgba(147, 197, 253, 0.4));
  -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;
}
.ap-mission__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-2xl, var(--fs-xl));
}
.ap-mission__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Why Xploroo — responsive feature grid
   ------------------------------------------------------------------------- */
.ap-section-head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-8);
}
.ap-section-head__title {
  margin: 0;
  position: relative;
  display: inline-block;
  font-size: var(--fs-3xl);
}
.ap-section-head__title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin: 0.65rem auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #a855f7, #06b6d4);
}

.ap-features {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .ap-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ap-features { grid-template-columns: repeat(4, 1fr); }
}

/* Reusable cycling colour identity (:nth-child, 4-colour repeat) — any
   future feature card added to the existing markup automatically picks up
   the next colour with no CSS/JS change. */
.ap-feature:nth-child(4n+1) { --apf-a: rgba(147, 51, 234, 0.16); --apf-border: rgba(192, 132, 252, 0.5); --apf-icon: #c084fc; --apf-glow: rgba(147, 51, 234, 0.3); }
.ap-feature:nth-child(4n+2) { --apf-a: rgba(37, 99, 235, 0.16); --apf-border: rgba(147, 197, 253, 0.5); --apf-icon: #60a5fa; --apf-glow: rgba(37, 99, 235, 0.3); }
.ap-feature:nth-child(4n+3) { --apf-a: rgba(6, 182, 212, 0.16); --apf-border: rgba(165, 243, 252, 0.5); --apf-icon: #22d3ee; --apf-glow: rgba(6, 182, 212, 0.3); }
.ap-feature:nth-child(4n)   { --apf-a: rgba(219, 39, 119, 0.16); --apf-border: rgba(251, 182, 206, 0.5); --apf-icon: #f472b6; --apf-glow: rgba(219, 39, 119, 0.3); }
/* Day theme — darker icon shades on the light surface stay readable
   (mirrors the existing `.ap-founder__role` light-theme override below). */
:root[data-theme="light"] .ap-feature:nth-child(4n+1) { --apf-icon: #9333ea; }
:root[data-theme="light"] .ap-feature:nth-child(4n+2) { --apf-icon: #2563eb; }
:root[data-theme="light"] .ap-feature:nth-child(4n+3) { --apf-icon: #0891b2; }
:root[data-theme="light"] .ap-feature:nth-child(4n)   { --apf-icon: #db2777; }

.ap-feature {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(160deg, var(--apf-a, transparent) 0%, transparent 60%), var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  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;
}
.ap-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--apf-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) {
  .ap-feature:hover {
    transform: translateY(-6px);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-lg), 0 16px 36px -18px var(--apf-glow, transparent);
  }
  .ap-feature:hover::before { opacity: 1; }
}
.ap-feature__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg, 12px);
  color: var(--apf-icon, var(--color-text-strong));
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.ap-feature__icon svg { width: 1.35rem; height: 1.35rem; }
.ap-feature__title {
  margin: 0 0 0.4rem;
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.ap-feature__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Our Journey — premium vertical timeline
   ------------------------------------------------------------------------- */
.ap-timeline {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ap-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 7px;
  width: 2px;
  background: linear-gradient(180deg, #a855f7, #2563eb, #06b6d4, #e11d48);
  opacity: 0.55;
}
/* Reusable cycling dot colour (:nth-child) — future timeline entries
   automatically continue the same 4-colour rotation. */
.ap-timeline-item:nth-child(4n+1) { --apt-dot: #a855f7; --apt-glow: rgba(168, 85, 247, 0.55); }
.ap-timeline-item:nth-child(4n+2) { --apt-dot: #2563eb; --apt-glow: rgba(37, 99, 235, 0.55); }
.ap-timeline-item:nth-child(4n+3) { --apt-dot: #06b6d4; --apt-glow: rgba(6, 182, 212, 0.55); }
.ap-timeline-item:nth-child(4n)   { --apt-dot: #e11d48; --apt-glow: rgba(225, 29, 72, 0.55); }
.ap-timeline-item {
  position: relative;
  padding-left: var(--space-7);
}
.ap-timeline-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--apt-dot, var(--gradient-brand));
  box-shadow: 0 0 0 4px var(--color-surface-inset), 0 0 12px 1px var(--apt-glow, transparent);
}
.ap-timeline-item__title {
  margin: 0 0 0.35rem;
  font-size: var(--fs-md, var(--fs-base));
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}
.ap-timeline-item__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Founder's Journey — one Influencer-style card. The `.ip-card` component
   itself comes from influencers-page.css (linked by about.html for this
   section), so dimensions/hover/radius/glass/shadow match influencers.html
   exactly. Only the wrapper link + founder-specific text bits live here.
   ------------------------------------------------------------------------- */
.ap-section-head__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.ap-founder {
  display: block;
  max-width: 21rem;              /* ≈ one column of the influencers 4-up grid */
  margin-inline: auto;
  color: inherit;
  text-decoration: none;
}
.ap-founder:hover { color: inherit; }

.ap-founder__role {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--magenta-300);
}
:root[data-theme="light"] .ap-founder__role { color: var(--magenta-600); }

.ap-founder__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--violet-300);
  transition:
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.ap-founder:hover .ap-founder__cta {
  color: var(--violet-200);
  transform: translateX(3px);
}

/* Founder card colour identity — scoped to `.ap-founder .ip-card` only, so
   the shared `.ip-card` component itself (influencers-page.css, used by
   influencers.html) is never touched. Same thin masked-gradient-edge
   technique as the rest of this page. */
.ap-founder .ip-card {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 20px 50px -28px rgba(219, 39, 119, 0.4);
}
.ap-founder .ip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(216, 180, 254, 0.65), rgba(251, 182, 206, 0.5));
  -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;
}
@media (hover: hover) {
  .ap-founder:hover .ip-card {
    box-shadow: var(--shadow-lg), 0 26px 60px -26px rgba(219, 39, 119, 0.55);
  }
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
.ap-cta {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.25rem, 1.75rem + 2vw, 3.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  text-align: center;
  background: linear-gradient(160deg, rgba(37, 99, 235, 0.14) 0%, transparent 55%), linear-gradient(340deg, rgba(219, 39, 119, 0.1) 0%, transparent 55%), var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-lg), 0 20px 55px -30px rgba(37, 99, 235, 0.4);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  overflow: hidden;
}
.ap-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.55), rgba(251, 182, 206, 0.4));
  -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;
}
.ap-cta__title {
  position: relative;
  margin: 0 0 var(--space-6);
  font-size: var(--fs-3xl);
}

/* ============================================================================
   DESKTOP ONLY (>=1024px) — more premium/spacious rhythm and distribution.
   Nothing here touches font-family, font-size, color, text content, images,
   the Timeline's own layout, or the Founder Journey page's content — this
   only adjusts section spacing, max-widths/alignment, and (Founder's
   Journey only) pairs the existing intro text beside the existing card
   instead of stacking both centered. Mobile/tablet (<1024px) are untouched:
   every rule the section/element/typography rules above already declare
   stays exactly as-is below this breakpoint.
   ============================================================================ */
@media (min-width: 1024px) {
  /* More generous vertical rhythm between sections. */
  .about-page__section {
    padding-block: clamp(5.5rem, 4.2rem + 3vw, 8.5rem);
  }

  /* Slightly wider hero + section-head text columns so they read less
     cramped on a wide screen, while staying at a comfortable line length. */
  .ap-hero { max-width: 50rem; }
  .ap-section-head { max-width: 46rem; }

  /* Mission card: a touch wider and more generously padded so it reads as
     a premium centerpiece rather than a narrow strip on a wide screen. */
  .ap-mission {
    max-width: 58rem;
    padding: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  }

  /* Why Xploroo — same 4-column grid, just more breathing room between
     cards; grid rows already stretch each card to equal height. */
  .ap-features {
    gap: var(--space-7);
  }

  /* Founder's Journey — pairs the existing section intro (left) with the
     existing founder card (right) instead of stacking both centered, so
     the section fills the desktop width. The card itself and the content
     of founder-journey.html are untouched — only the position of the
     intro + card changes. */
  .about-page__section--founder .about-page__container {
    max-width: 68.75rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-10);
  }
  .about-page__section--founder .ap-section-head {
    max-width: none;
    margin: 0;
    text-align: left;
  }
}