/* KKB — Expanding feature pills (vendor resource: Osmo Supply, GSAP-driven).
   A locked accordion of feature "pills" on the left; each open pill cross-fades a
   synced visual on the right. The box grow/collapse is animated in JS (GSAP,
   assets/js/feature-pills.js); opacity choreography lives here and its timings are
   tuned to the 0.5s JS tween — don't retime these in isolation.

   Adapted to house rules: all colour/radius/material values are brand (--wp--preset--*)
   or iOS (--ios-*) tokens — no hardcoded hex; authored mobile-first (base = stacked
   phone, enhanced up); the vendor's authoring-only "edit mode" styles are dropped.
   Depends on + loads AFTER: theme.json tokens, ios.css, components.css. Reviewed 2026-07. */

/* Expanded-pill width — the JS reads this computed value to size the open box.
   Mobile-first: full-width chips → two-up on small tablets → fixed 25em on desktop. */
[data-feature-pills-init] { --content-item-expanded: 100%; }
@media (min-width: 768px) { [data-feature-pills-init] { --content-item-expanded: calc(50% - 0.5em); } }
@media (min-width: 992px) { [data-feature-pills-init] { --content-item-expanded: 25em; } }

/* ==================================================================== */
/*  Wrap + layout                                                       */
/* ==================================================================== */
.feature-pills__wrap {
  color: var(--wp--preset--color--paper);
  width: 100%;
  max-width: 75em;
  margin-inline: auto;
  position: relative;
  overflow: clip;
  /* Self-contained dark panel on a light section at every breakpoint (the site's
     "device/panel on a light stage" motif) — so the paper-white pills always have a
     dark surface to read against. Osmo dropped this on mobile because its demo sat on
     a dark page; ours sits on sand, so it stays. */
  background-color: var(--wp--preset--color--ink-2);
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--paper) 15%, transparent);
  border-radius: var(--ios-radius-lg);
}
/* Embedded in another section (e.g. under the homepage "what is Air Fill" intro): no section
   chrome of its own, just a gap above it separating it from the intro/heading it sits below. */
.feature-pills__wrap--embedded { margin-block-start: var(--wp--preset--spacing--60); }
.feature-pills__layout {
  display: flex;
  flex-flow: column;               /* mobile: visual stacks above pills (order below) */
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  position: relative;
}
.feature-pills__col { width: 100%; position: relative; }
.feature-pills__col--visual {
  aspect-ratio: 1;                 /* square visual on phones... */
  order: -9999;                    /* ...stacked first (the wrap's clip rounds its top) */
  overflow: hidden;
}

/* ==================================================================== */
/*  Visual column — index-synced cross-fading panels + default cover    */
/* ==================================================================== */
.feature-pills__visual-collection { z-index: 0; width: 100%; height: 100%; position: relative; }
.feature-pills__visual-list { width: 100%; height: 100%; position: relative; overflow: hidden; }
.feature-pills__visual-item { opacity: 0; width: 100%; height: 100%; position: absolute; inset: 0; }
.feature-pills__visual-img { object-fit: cover; width: 100%; height: 100%; }
.feature-pills__visual-cover { z-index: 1; width: 100%; height: 100%; position: absolute; inset: 0; }
.feature-pills__visual-cover-img { object-fit: cover; width: 100%; height: 100%; }

/* Branded placeholder panel — shown until a real per-feature screenshot exists.
   Honest stand-in (clearly not a screenshot): warm tint + app icon + the feature name. */
.feature-pills__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--wp--preset--spacing--30);
  width: 100%;
  height: 100%;
  padding: var(--wp--preset--spacing--50);
  text-align: center;
  background:
    radial-gradient(120% 100% at 50% 0%,
      color-mix(in srgb, var(--wp--preset--color--coral) 22%, transparent),
      transparent 70%),
    var(--wp--preset--color--ink);
}
.feature-pills__placeholder-icon {
  width: 4.5rem; height: 4.5rem;
  border-radius: var(--ios-radius-icon);
  box-shadow: var(--ios-elevation-2);
}
.feature-pills__placeholder-label {
  font-weight: 800;
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--paper);
}
.feature-pills__placeholder-note {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  color: color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent);
}

/* ==================================================================== */
/*  Info column — the pills                                             */
/* ==================================================================== */
.feature-pills__info-collection {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}
.feature-pills__info-list {
  display: flex;
  flex-flow: row wrap;             /* mobile: pills wrap into a chip field */
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--40);
  flex: none;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.feature-pills__info-item { position: relative; padding: 0; width: var(--content-item-expanded); }

.feature-pills__item-bg {
  z-index: 0;
  background-color: color-mix(in srgb, var(--wp--preset--color--paper) 8%, transparent);
  border-radius: var(--ios-radius-xl);
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.feature-pills__item-button {
  z-index: 1;
  display: flex;
  flex-flow: row;
  justify-content: space-between;  /* mobile: label + icon span the chip */
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  width: 100%;
  min-height: var(--ios-tap-min);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  background-color: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.feature-pills__item-label {
  flex: none;
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  color: var(--wp--preset--color--paper);
}
.feature-pills__item-icon {
  aspect-ratio: 1;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.25em;
  background-color: color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent);
  border-radius: var(--ios-radius-capsule);
  position: relative;
  /* Own opacity, independent of the button's fade. On collapse the + returns only near the
     end of the box shrink (delay ≈ the 0.5s GSAP grow), so it reappears as the pill finishes
     settling — not while it's still collapsing. The fast expand exit is in the choreography block. */
  opacity: 1;
  transition: opacity 120ms var(--ios-ease-in-out) 400ms;
}
.feature-pills__item-icon-bar {
  flex: none;
  width: 1px; height: 50%;
  background-color: var(--wp--preset--color--paper);
  position: absolute;
}
.feature-pills__item-icon-bar--horizontal { width: 50%; height: 1px; }

/* Expanded content — absolutely overlaid, masked, revealed on active */
.feature-pills__item-content { z-index: 2; pointer-events: none; position: absolute; inset: 0; }
.feature-pills__item-mask { width: 100%; height: 100%; overflow: hidden; }
.feature-pills__item-inner {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--40);
  width: max-content;
  max-width: 100%;
  /* Match the collapsed button's padding exactly (spacing-30 / spacing-40) so the title
     sits at the same offset from the pill edge in both states. The expanded title reuses
     .feature-pills__item-label, so it is identical to the collapsed pill's title — same
     weight, size, letter-spacing, colour, position — and only cross-fades, never restyles
     or moves. The description sits below at the same left inset. */
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.feature-pills__item-desc {
  margin: 0;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--paper);
  opacity: 0.6;
}

/* ==================================================================== */
/*  Close (X) — frosted iOS material control, top-right                 */
/* ==================================================================== */
.feature-pills__close { z-index: 2; position: absolute; top: 1em; left: 1em; }
.feature-pills__close-button {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  min-width: var(--ios-tap-min);   /* vendor geometry is ~42px; the 44px tap floor still applies */
  min-height: var(--ios-tap-min);
  padding: 8px;
  /* Subtle light glass on the dark panel — the same paper-8% fill as .feature-pills__item-bg
     for in-component consistency (the --ios-material-* tokens are heavier bar/sheet frosts). */
  background-color: color-mix(in srgb, var(--wp--preset--color--paper) 8%, transparent);
  -webkit-backdrop-filter: blur(var(--ios-material-blur));
  backdrop-filter: blur(var(--ios-material-blur));
  border: 0;
  border-radius: var(--ios-radius-capsule);
  cursor: pointer;
  position: relative;
}

/* ==================================================================== */
/*  Desktop (≥992px) — side-by-side panel with the framed dark surface  */
/* ==================================================================== */
@media (min-width: 992px) {
  .feature-pills__wrap { height: 35em; } /* dark-panel skin is on the base rule; desktop just fixes the height + splits the layout */
  .feature-pills__layout { flex-flow: row; }
  .feature-pills__col { width: 50%; }
  .feature-pills__col--visual { aspect-ratio: auto; order: 0; }
  .feature-pills__info-collection {
    align-items: flex-start;
    padding-inline: var(--wp--preset--spacing--50);
  }
  .feature-pills__info-list {
    flex-flow: column;
    justify-content: center;
    max-width: var(--content-item-expanded);
  }
  .feature-pills__info-item { width: auto; }
  .feature-pills__item-button { justify-content: flex-start; width: auto; }
  .feature-pills__item-inner { max-width: var(--content-item-expanded); }
}

/* ==================================================================== */
/*  State + choreography (attribute-driven)                             */
/*  Sanctioned exception to "durations are tokens": the ms below are    */
/*  bespoke, JS-synced choreography (feature-pills.js grow = 0.5s), not  */
/*  reusable brand motion. Easing stays tokenized.                      */
/*                                                                      */
/*  Title/icon cross-fade is NON-DIPPING in both directions: the        */
/*  incoming layer reaches full opacity BEFORE the outgoing one starts   */
/*  fading (150ms per leg), so the identical, same-position title never  */
/*  drops below full — it holds perfectly still through the tap.        */
/*    Expand   → inner in (delay 0), then button out (delay 150)         */
/*    Collapse → button in (delay 0), then inner out (delay 150)        */
/* ==================================================================== */
[data-feature-pills-button] { opacity: 1; transition: opacity 150ms var(--ios-ease-in-out) 0ms; }
[data-feature-pills-inner]  { opacity: 0; transition: opacity 150ms var(--ios-ease-in-out) 150ms; }
[data-feature-pills-visual] { opacity: 0; transition: opacity 350ms var(--ios-ease-in-out); }
[data-feature-pills-cover]  { opacity: 1; transition: opacity 350ms var(--ios-ease-in-out); }

[data-feature-pills-item][data-active="true"] [data-feature-pills-button] { opacity: 0; transition: opacity 150ms var(--ios-ease-in-out) 150ms; }
[data-feature-pills-item][data-active="true"] [data-feature-pills-inner]  { opacity: 1; transition: opacity 150ms var(--ios-ease-in-out) 0ms; }
/* The + clears fast on tap (no delay) — it's not part of the title crossfade, so it needn't
   wait like the button's label does. */
[data-feature-pills-item][data-active="true"] .feature-pills__item-icon  { opacity: 0; transition: opacity 90ms var(--ios-ease-in-out) 0ms; }
[data-feature-pills-visual][data-active="true"] { opacity: 1; }
[data-feature-pills-cover][data-active="false"] { opacity: 0; }

/* Close button reveal */
[data-feature-pills-close] {
  opacity: 0;
  transform: scale(0) rotate(135deg);
  pointer-events: none;
  transition: transform 500ms var(--ios-ease-spring), opacity 500ms var(--ios-ease-out);
}
[data-feature-pills-active="true"] [data-feature-pills-close] {
  opacity: 1;
  transform: scale(1) rotate(45deg);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-feature-pills-button],
  [data-feature-pills-inner],
  [data-feature-pills-visual],
  [data-feature-pills-cover],
  [data-feature-pills-close],
  .feature-pills__item-icon { transition-duration: 0.01ms; transition-delay: 0ms; }
}