/* ===========================================================
   BabbleBoxx landing — "Find your drop" MATCHER module.
   OPT-IN: only landing pages that use the interactive 4-step
   matcher need this file. Pair it with matcher.js and the
   #matcher / .matcher-* markup. Pages without the quiz omit
   both this stylesheet and matcher.js entirely.

   Extracted from page.css (2026-06) so the matcher is a true
   opt-in module and non-matcher pages don't carry its styles.
   The CTA-section shell it sits in (.cta-card, .cta-form, the
   #cta arc/halo glow, pretext hooks) stays in page.css — it's
   shared by simple CTAs too.

   Load order: ... → sections.css → matcher.css
   =========================================================== */

.matcher-card {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
.matcher-header {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}
#cta .matcher-header h2.climax {
  margin: 0;
}

/* Progress: 4 segments. Active ones glow pink. */
.matcher-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.matcher-progress li {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 320ms ease;
}
.matcher-progress li.is-active {
  background: var(--lls-pink, #ff3d8b);
}

/* Steps stack on top of each other; only .is-current is visible. */
.matcher-step {
  display: none;
  animation: matcher-step-in 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.matcher-step.is-current {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  position: relative;
  z-index: 1;
}
@keyframes matcher-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .matcher-step { animation: none; }
}

.matcher-prompt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0;
}
.matcher-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}
.matcher-headline strong {
  color: var(--lls-pink, #ff3d8b);
  font-weight: 700;
}
.matcher-headline em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* Vertical tile grid: 4 across on desktop, 2 across on mobile. */
.matcher-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .matcher-grid { grid-template-columns: repeat(2, 1fr); }
}
.matcher-tile {
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 16px 16px 14px;
  color: var(--white);
  cursor: pointer;
  display: grid;
  gap: 4px;
  transition: background 220ms ease, border-color 220ms ease, transform 160ms ease;
  font-family: inherit;
}
.matcher-tile:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}
.matcher-tile.is-selected {
  background: color-mix(in srgb, var(--lls-pink, #ff3d8b) 18%, transparent);
  border-color: var(--lls-pink, #ff3d8b);
}
.matcher-tile-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.matcher-tile-sub {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* Window chips: 4 wide, larger leading text. */
.matcher-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .matcher-chips { grid-template-columns: repeat(2, 1fr); }
}
.matcher-chip {
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--white);
  cursor: pointer;
  display: grid;
  gap: 2px;
  transition: background 220ms ease, border-color 220ms ease, transform 160ms ease;
  font-family: inherit;
}
.matcher-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}
.matcher-chip.is-selected {
  background: color-mix(in srgb, var(--lls-pink, #ff3d8b) 18%, transparent);
  border-color: var(--lls-pink, #ff3d8b);
}
.matcher-chip-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
}
.matcher-chip-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* Match cards: read like a denser version of the upstream theme cards. */
.matcher-matches {
  display: grid;
  gap: 10px;
}
.match-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.match-card-when {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.match-card-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--white);
}
.match-card-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.match-status {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* Action rows for back / continue / submit. */
.matcher-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 8px;
}
.matcher-back-row {
  display: flex;
  justify-content: flex-start;
}
.matcher-back {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0;
  transition: color 220ms ease;
}
.matcher-back:hover { color: var(--white); }

/* Tighten the matcher form so it fits the climax layout. */
.matcher-form {
  display: grid;
  gap: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.matcher-form .submit {
  padding: 14px 22px;
}

/* Reduced motion: kill the entry animation but keep all functionality. */
@media (prefers-reduced-motion: reduce) {
  .matcher-tile,
  .matcher-chip,
  .matcher-back { transition: none; }
}