/* ==================================================================
   Features (9-up) — kwizzbit/features-9 (whole-file segment)
   Faithful slice of /HTML/features-9.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.features{
  --kwb-features-panel-bg:           #FFFAF5;
  --kwb-features-panel-border:       #B3958A;
  --kwb-features-panel-title:        #1D0B09;
  --kwb-features-panel-title-accent: #FF3623;
  --kwb-features-panel-body:         #473531;
  --kwb-features-badge-border:       rgba(255,54,35,0.45);
  --kwb-features-badge-text:         #FF3623;
}

.features {
  background: var(--wp--preset--color--cream);
  padding-block: clamp(4rem, 7vw, 6.5rem);
  width: 100%;
  overflow-x: clip; /* iOS scroll rule — never use overflow-x:hidden on sections */
}

.features__inner {
  width: 100%;
  padding: 5rem clamp(1rem, 4vw, 3rem) 5.5rem;
  box-sizing: border-box;
}

/* Shared centred column — header and grid both live inside this.
   Width = 3 × 376px + 2 × 1rem gaps. Both snap to the same edges. */
.features__constrain {
  width: calc(3 * 376px + 2 * 30px);  max-width: 100%;
  margin-inline: auto;
}

/* ── Section header ─────────────────────────────────────────── */
.features__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  width: 100%;
  margin-bottom: 3rem;

  /* scroll-reveal initial state */
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
  transition:
    opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--ease-out);
}
.features__header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.features__eyebrow {
  display: block;
  font-family: var(--wp--preset--font-family--pixel);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--coral);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  line-height: 1;
}

/*
 * WP EDITABLE: Two headline variants below.
 * Homepage uses .features__title--enterprise (yellow "Everything").
 * CC sub-page uses .features__title--cc (yellow line 1).
 * In WP, editors swap copy only — spans must remain intact.
 */
.features__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400;
  font-size: 3.4375rem; /* 55px */
  line-height: 0.9;
  letter-spacing: -0.091em;
  color: var(--wp--preset--color--ink);
}
.features__title--mobile { display: none; }
.features__title--desktop { display: block; }
.features__title em {
  color: var(--wp--preset--color--coral);
  font-style: normal;
}

/* ── "See full list" CTA ───────────────────────────────────── */
/* WP DEVIATION: Using <button> here for pattern. In WP, this will
   be a core/button block with secondary style. */
.features__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(to right, #1D0B09, #3E1916);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.875rem; /* 14px — locked per btn spec */
  font-weight: 700;
  padding: 0 1.25rem;
  height: 44px;
  border-radius: 0; /* locked — Kwizzbit design decision */
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 160ms var(--wp--custom--motion--ease-out),
              transform 160ms var(--wp--custom--motion--ease-out);
}
@media (hover: hover) {
  .features__cta:hover {
    background: linear-gradient(to right, #0D0504, #2A100E);
    transform: translateY(-1px);
  }
}
.features__cta:active {
  background: linear-gradient(to right, #0D0504, #2A100E);
  transform: translateY(1px);
}
.features__cta-arrow {
  display: inline-flex;
  align-items: center;
}

/* ── Panel grid ─────────────────────────────────────────────── */
.features__grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: flex-start;
}

/* Each column is a flex column — panels stack with 30px gap */
.features__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 376px;
  flex-shrink: 0;
}

/* Column offsets — stagger entire column as a unit */
.features__col:nth-child(2) { margin-top: 30px; }
.features__col:nth-child(3) { margin-top: 60px; }

/* ── Individual feature panel ───────────────────────────────── */
.feature-panel {
  background: var(--kwb-features-panel-bg);
  box-shadow: 0 20px 50px rgba(255,54,35,0.10);
  padding: 1.5rem;
  width: 376px;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  overflow: hidden;
  position: relative;

  /* scroll-reveal initial state */
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
  /* Only transition opacity here — transform handled per-state below */
  transition:
    opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--ease-out);
}

/* Scroll-reveal fires — also transitions transform for the reveal movement */
.feature-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--ease-out),
    transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--ease-out);
}

/* Hover — scale graphic from bottom anchor */
@media (hover: hover) {
  .feature-panel.is-visible:hover .fp-asset {
    transform: scale(1.02);
  }
}

.feature-panel__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* WP EDITABLE: panel titles */
.feature-panel__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  line-height: 24px;
  letter-spacing: -0.091em; /* -1.82px at 20px = -0.091em */
  color: var(--kwb-features-panel-title);
}
.feature-panel__title--accent {
  color: var(--kwb-features-panel-title);
}

/* WP EDITABLE: badge text */
.feature-panel__badge {
  font-family: var(--wp--preset--font-family--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border: 1px solid var(--kwb-features-badge-border);
  color: var(--kwb-features-badge-text);
  border-radius: 0; /* locked */
}
.feature-panel__badge--soon {
  border-color: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--coral);
}

/* WP EDITABLE: body copy */
.feature-panel__body {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9375rem; /* 15px */
  line-height: 24px;
  color: var(--kwb-features-panel-body);
  width: 302px;
  max-width: 100%;
}

/* Illustration area — locked, not editable in WP */
.feature-panel__illus {
  margin-top: auto;
  padding-top: 0.25rem;
}

/* Asset variant — image pinned absolutely to panel bottom, full bleed */
.feature-panel__illus--asset {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
}
.fp-asset {
  width: 100%;
  height: auto;
  aspect-ratio: 376 / 128;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: bottom center;
  transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Column stagger handled via .features__col margin-top — see grid rules above */

/* Platform icon pills — plugins panel */
.fp-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.fp-icon-pill {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fp-icon-pill svg { display: block; }

/* URL bar — sharing panel */
.fp-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  padding: 6px 8px 6px 16px;
  margin-bottom: 8px;
}
.fp-url-text {
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  flex: 1;
}
.fp-copy-btn {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
}
.fp-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
}

/* Leaderboard rows */
.fp-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  margin-bottom: 5px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  color: rgba(255,255,255,0.9);
}
.fp-lb-row:last-child { margin-bottom: 0; }
.fp-lb-rank { color: var(--wp--preset--color--bright-yellow); font-weight: 700; min-width: 16px; flex-shrink: 0; }
.fp-lb-rank--muted { color: rgba(255,255,255,0.35); }
.fp-lb-name { flex: 1; }
.fp-lb-name--muted { color: rgba(255,255,255,0.4); }

/* Creation controls */
.fp-ctrl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fp-ctrl-row:last-child { margin-bottom: 0; }
.fp-ctrl-label {
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  flex: 1;
}
.fp-ctrl-pill {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
}

/* Instant wins card */
.fp-win-card {
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--wp--preset--color--ink);
}
.fp-win-title {
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.fp-win-sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  color: #555;
  margin-bottom: 10px;
}
.fp-win-prize {
  display: inline-block;
  background: var(--wp--preset--color--blood-orange);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 4px;
}

/* Anti-cheat row */
.fp-ac-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  color: var(--wp--preset--color--ink);
  margin-bottom: 8px;
}
.fp-ac-timer {
  margin-left: auto;
  background: var(--wp--preset--color--blood-orange);
  color: var(--wp--preset--color--white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.fp-ac-bar {
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.fp-ac-bar-fill {
  width: 28%;
  height: 100%;
  background: var(--wp--preset--color--blood-orange);
  border-radius: 2px;
}

/* Verified Q rows */
.fp-appr-label {
  font-family: var(--wp--preset--font-family--pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--bright-yellow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fp-vq-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 12px;
  color: var(--wp--preset--color--ink);
  margin-bottom: 6px;
}
.fp-vq-row:last-child { margin-bottom: 0; }
.fp-vq-check {
  width: 20px;
  height: 20px;
  background: #2ecc71;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── BREAKPOINTS ────────────────────────────────────────────── */

/* Tablet — single column, panels stay at natural width */
@media (max-width: 1023px) {
  .features__title {
    font-size: clamp(1.875rem, 10.13vw, 2.375rem);
    line-height: 0.8421;
    letter-spacing: -0.10763em;
  }
  .features__eyebrow { font-size: 19px; }
  .features__header { flex-direction: column; gap: 1.5rem; align-items: flex-start; }

  .features__grid {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .features__col,
  .features__col:nth-child(2),
  .features__col:nth-child(3) {
    width: 100%;
    max-width: 376px;
    margin-top: 0;
    flex-direction: column;
  }

  .feature-panel {
    width: 100%;
    height: auto;
    aspect-ratio: 376 / 300;
  }

  /* Header aligns to the same 376px column */
  .features__constrain {
    width: 100%;
    max-width: 376px;
  }
}

@media (max-width: 767px) {
  .features__header { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
}

@media (max-width: 640px) {
  .features__inner { padding-block: 3.5rem; }
  .features__header { align-items: center; text-align: center; }
  .features__title {
    font-size: clamp(1.875rem, 10.13vw, 2.375rem);
    line-height: 0.8421;
    letter-spacing: -0.10763em;
  }
  .features__title--desktop { display: none; }
  .features__title--mobile { display: block; }
  .features__title em { font-size: 1.2em; }
  .features__grid { gap: 16px; }
  .features__col { gap: 16px; }
  .features__eyebrow { font-size: 18px; }
  .feature-panel__body { font-size: 0.875rem; padding-top: 3px; }
  .feature-panel { aspect-ratio: 376 / 260; gap: 0; min-height: 280px; }

  /* Scale illustrations down 15% in-place, no crop */
  .fp-asset { transform: scale(0.90); }

  /* Per-panel anchor points — controls which corner the scale pivots from */
  [data-panel="plugins"]      .fp-asset { transform-origin: bottom left; }
  [data-panel="controls"]     .fp-asset { transform-origin: bottom right; }
  [data-panel="instant-wins"] .fp-asset { transform-origin: bottom right; }
  [data-panel="insights"]     .fp-asset { transform-origin: bottom left; }
  [data-panel="leaderboards"] .fp-asset { transform-origin: bottom left; }
  [data-panel="anticheat"]    .fp-asset { transform-origin: bottom left; }
  [data-panel="sharing"]      .fp-asset { transform-origin: bottom left; }
  [data-panel="device"]       .fp-asset { transform-origin: bottom right; }
  [data-panel="verified"]     .fp-asset { transform-origin: bottom right; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .features__header,
  .feature-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── CURSOR BLINK — period at end of headline ───────────────── */
@keyframes cursor-blink {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

.features__title-cursor {
  color: var(--wp--preset--color--coral);
  animation: cursor-blink 1.1s step-end infinite;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .features__title-cursor {
    animation: none !important;
    opacity: 1;
  }
}

/* ── MOBILE TRUNCATION — collapse the stacked grid to ~3 panels ──
   ≤1023px the 9 panels stack into one very long column. features-9.js
   clamps the grid (--kwb-f9-clamp, measured = col 1 + a peek of panel 4),
   fades the cut edge into the cream backdrop, and appends a View-more
   button. No JS = no .is-clamped = full grid (fails visible).
   Homepage-only in practice: this is scoped to .features__grid, which
   only features-9 renders (features-trio has its own root). */
@media (max-width: 1023px) {
  .features__grid.is-clamped {
    position: relative;
    max-height: var(--kwb-f9-clamp, 1200px);
    overflow: hidden;
    /* the base grid centre-justifies; in a clamped box that clips content
       off BOTH ends (beheaded panel 3 at the top, panels 1-2 gone entirely,
       and expansion grows outward from the middle). Anchor to the top so
       the clip, the fade, and the expansion all happen below the fold. */
    justify-content: flex-start;
    /* keep the panels' coral side glow (50px blur) out of the clip;
       .features has overflow-x:clip so nothing leaks a scrollbar */
    margin-inline: -60px;
    padding-inline: 60px;
    transition: max-height 0.7s var(--wp--custom--motion--ease-out);
  }
  .features__grid.is-clamped::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(252, 240, 230, 0), var(--wp--preset--color--cream) 82%);
    pointer-events: none;
    transition: opacity 0.45s var(--wp--custom--motion--ease-out);
  }
  .features__grid.is-clamped.is-expanding::after { opacity: 0; }

  .features__more {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    transition: opacity 0.3s var(--wp--custom--motion--ease-out);
  }
  .features__more.is-leaving { opacity: 0; }

  .features__more-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    background: none;
    border: 0;
    padding: 0.5rem 0.5rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
  @media (hover: hover) {
    .features__more-btn:hover { color: var(--wp--preset--color--coral); }
  }

  .features__more-arrow {
    display: inline-block;
    animation: features-more-bounce 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
  @keyframes features-more-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }
}

/* Desktop: the whole affordance is inert */
@media (min-width: 1024px) {
  .features__more { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .features__grid.is-clamped { transition: none; }
  .features__more-arrow { animation: none; }
}