/* ============================================================
   BrainsMingle — Homepage
   style-home.css · Styles specific to the root homepage (/).
   Load AFTER tokens.css and style-shared.css, alongside any
   other page stylesheet:

     <link rel="stylesheet" href="assets/css/tokens.css" />
     <link rel="stylesheet" href="assets/css/style-shared.css" />
     <link rel="stylesheet" href="assets/css/style-home.css" />

   Sections are added to this file as the homepage is built.
   ============================================================ */


/* ============================================================
   FEATURED STRIPS — experts & communities
   Paired with featured.js. Mounts:
     <div data-featured="experts"></div>
     <div data-featured="communities"></div>

   Built markup:
     <div class="featured-strip featured-strip--experts">
       <a class="featured-portrait"> …photo, name+title on scrim… </a> ×N
     </div>
     <div class="featured-strip featured-strip--communities">
       <a class="featured-card featured-card--community"> … </a> ×N
     </div>
   ============================================================ */

.featured-strip {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-xs) 0 var(--space-md);
  margin: 0 calc(-1 * var(--space-lg));      /* bleed to container edge on mobile */
  padding-inline: var(--space-lg);
  scrollbar-width: none;                      /* Firefox */
}
.featured-strip::-webkit-scrollbar { display: none; }  /* WebKit */

/* Wide screens: cards settle into a centered, non-scrolling row. */
@media (min-width: 900px) {
  .featured-strip {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    margin: 0;
    padding-inline: 0;
  }
}

/* ── Experts: full-bleed portrait grid (Circle "Built for pros") ──
   6 across on desktop, horizontal scroll on mobile. Each card is
   the photo; name + title overlay a bottom gradient scrim. */
@media (min-width: 900px) {
  .featured-strip--experts {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
    justify-content: stretch;
  }
}

.featured-portrait {
  position: relative;
  flex: 0 0 auto;
  width: 200px;                 /* mobile scroll width; grid overrides on desktop */
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-card2);
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
@media (min-width: 900px) {
  .featured-portrait { width: auto; }
}
.featured-portrait:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(8,8,18,0.28);
}
.featured-portrait__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-portrait__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(8,8,18,0.88) 0%,
              rgba(8,8,18,0.55) 26%,
              rgba(8,8,18,0) 52%);
}
.featured-portrait__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md);
  text-align: left;
}
.featured-portrait__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  color: #fff;
}
.featured-portrait__title {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: rgba(255,255,255,0.82);
}

/* ── Card ──────────────────────────────────────────────────── */
.featured-card {
  flex: 0 0 auto;
  width: 180px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              background var(--duration-med);
}
.featured-card:hover {
  border-color: var(--purple-glow);
  transform: translateY(-2px);
}

/* ── Expert avatar (circular) ──────────────────────────────── */
.featured-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg-card2);
  flex: 0 0 auto;
}
.featured-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Community thumbnail (rounded square) ──────────────────── */
.featured-card__thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card2);
  flex: 0 0 auto;
}
.featured-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Text ──────────────────────────────────────────────────── */
.featured-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text);
}
.featured-card__sub {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}


/* ============================================================
   S1 · HERO — purple band, mirrors the Suite hero treatment.
   Band is theme-independent (does not flip on theme toggle).
   Split copy/visual with a looping capability carousel below.
   Strip reuses .cap-strip__* (from shared); on this band the
   items are white, set by the .home-hero__strip override below.
   ============================================================ */

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: calc(var(--nav-h) + var(--space-3xl)) 0 0;
  background:
    linear-gradient(150deg, rgba(0,0,0,0) 28%, rgba(8,8,18,0.55) 100%),
    linear-gradient(330deg, rgba(0,0,0,0) 55%, rgba(8,8,18,0.40) 100%),
    var(--vert-band-purple);
}
.home-hero__inner {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-3xl);
  align-items: center;
  padding-bottom: var(--space-3xl);
}
.home-hero__copy { max-width: 540px; }
.home-hero__pill {
  margin-bottom: var(--space-lg);
  background: rgba(255,255,255,0.16);
  color: #fff;
  border: 1px solid transparent;
}
.home-hero__headline {
  color: #fff;
  margin: 0 0 var(--space-lg);
  line-height: var(--leading-tight);
}
.home-hero__accent { color: var(--cyan); }
[data-theme="light"] .home-hero__accent { color: #00E8A2; }
.home-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: rgba(255,255,255,0.88);
  max-width: 48ch;
  margin: 0 0 var(--space-xl);
}
.home-hero__cta-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
/* Buttons on the band — white primary with band-purple text,
   outline-white secondary. Matches the Suite hero. */
.home-hero__cta-row .btn--primary {
  background: #fff;
  color: var(--vert-band-purple);
  border-color: #fff;
}
.home-hero__cta-row .btn--primary:hover { background: rgba(255,255,255,0.9); }
.home-hero__cta-row .btn--secondary {
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  background: transparent;
}
.home-hero__cta-row .btn--secondary:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.12);
}
.home-hero__cta-row .btn--secondary svg { color: #fff; }
.home-hero__visual {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8,8,18,0.35);
}
.home-hero__visual svg,
.home-hero__visual img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

/* Hero capability marquee on the purple band. Track/item styles
   come from shared (neutral); on the band the items are white. */
.home-hero__strip {
  border-top: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-hero__strip .cap-strip__item { color: rgba(255,255,255,0.92); }
.home-hero__strip .cap-strip__item:hover { color: #fff; }
.home-hero__strip:hover .cap-strip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .home-hero__strip { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 900px) {
  .home-hero { min-height: 0; padding-top: calc(var(--nav-h) + var(--space-2xl)); }
  .home-hero__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .home-hero__visual { order: -1; max-width: 480px; margin: 0 auto; }
  .home-hero__sub { margin-inline: auto; }
  .home-hero__cta-row { justify-content: center; }
  .home-hero__copy { text-align: center; max-width: none; }
}


/* ============================================================
   S3 · THE FORK
   Two-card split: individuals vs organizations.
   ============================================================ */

.home-fork__headline { text-align: center; margin: 0 0 var(--space-2xl); }
.home-fork__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 960px;
  margin: 0 auto;
}
.home-fork__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.home-fork__card--individual:hover { border-color: var(--purple-glow); transform: translateY(-3px); }
.home-fork__card--org:hover { border-color: var(--cyan-glow); transform: translateY(-3px); }
.home-fork__icon .icon { width: 32px; height: 32px; }
.home-fork__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text);
}
.home-fork__card-desc {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}
.home-fork__card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--purple);
}
.home-fork__card--org .home-fork__card-cta { color: var(--cyan); }
.home-fork__card-cta [data-icon] { display: inline-flex; }
.home-fork__card-cta svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .home-fork__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}


/* ============================================================
   S6 · PERSONAS STRIP
   Six B2C personas. Card grid; reused shape for S7 verticals.
   ============================================================ */

.personas__headline,
.home-featured__headline,
.home-suite__headline { text-align: center; }
.personas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.home-suite__verticals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.persona-card,
.vertical-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.persona-card:hover,
.vertical-card:hover { border-color: var(--purple-glow); transform: translateY(-2px); }
.persona-card .icon,
.vertical-card .icon { width: 28px; height: 28px; margin-bottom: var(--space-xs); }
.persona-card__title,
.vertical-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
}
.persona-card__desc,
.vertical-card__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

@media (max-width: 1024px) {
  .home-suite__verticals { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .personas__grid,
  .home-suite__verticals { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .personas__grid,
  .home-suite__verticals { grid-template-columns: 1fr; }
}


/* ============================================================
   S7 · SUITE + VERTICALS
   B2B lane. Tinted band to separate it from the B2C sections
   above, distinct from the Suite hub's own styling.
   ============================================================ */

.home-suite { background: var(--bg-alt); }
.home-suite__intro { max-width: 720px; margin: 0 auto; text-align: center; }
.home-suite__body {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  margin: var(--space-lg) 0 var(--space-xl);
}
.home-suite .cap-seeall { margin-top: var(--space-xl); }


/* ============================================================
   FEATURED WRAPPER
   Section-embedded heading above a featured.js strip.
   ============================================================ */

.home-featured { margin-top: var(--space-xl); text-align: center; }
.home-featured__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--text);
  margin: 0 0 var(--space-lg);
}


/* ============================================================
   PAGE RHYTHM — tighter vertical spacing + alternating bands
   Homepage only. Shared default .section padding is 5xl (128px),
   which reads too airy; step it down to 4xl (96px), 3xl on mobile.
   ============================================================ */
.section { padding: var(--space-4xl) 0; }
@media (max-width: 768px) {
  .section { padding: var(--space-3xl) 0; }
}

/* ── Alternating backgrounds ─────────────────────────────────
   Walking top → bottom, the stripes alternate cleanly:

     metrics-bar    base
     Meet (.solution)   --bg-alt   ← band (from shared)
     fork           base
     capabilities   --bg-alt
     SN spotlight   purple band    ← self-contained
     personas       base
     Suite+verticals --bg-alt      ← band (.home-suite)
     social proof   base           ← override the shared alt band
     final CTA      own styling

   The .solution and .home-suite bands already carry --bg-alt.
   We tint capabilities to alt, force fork/personas to base, and
   drop social-proof's shared band to base so no two adjacent
   sections share a tone. ---------------------------------------- */
.home-fork      { background: var(--bg); }
.modules        { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.featured-experts { background: var(--bg); }
.personas       { background: var(--bg); }
.featured-communities { background: var(--bg-alt); border-top: 1px solid var(--border); }
.home-suite     { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* metrics-bar ships as a --bg-alt band in shared; on the homepage it
   sits directly under the purple hero band, so drop it to base for a
   clean step down before the Meet section picks up the alt tint. */
.metrics-bar    { background: var(--bg); }

/* social-proof ships as a --bg-alt band in shared; on the homepage
   it follows the Suite band, so drop it to base to keep alternation. */
.social-proof   { background: var(--bg); border-top: none; }