/*
 * WaaFaa extensions showcase page.
 *
 * Each card carries its own product palette rather than the shared WaaFaa blue,
 * so the six cards read as six products. The two stops per card are lifted from
 * that extension's own landing-site tokens (landing/styles.css in each product
 * repo), which are in turn the extension's in-app accent -- so the store icon,
 * the app, the microsite and this card are one palette rather than four.
 *
 * Values below are the DARK-mode stops (the brighter end of each brand ramp,
 * because this page's ground is #030711). The light-mode stops -- the darker,
 * AA-on-white end -- live in waafaa-theme-modes.css. A new card needs BOTH.
 */

/* ---------- Hero ---------- */

/*
 * Two columns: the argument on the left, the catalogue itself on the right. The
 * right column used to be empty, which left a third of the viewport doing no
 * work. The panel is built from the six real product marks rather than stock
 * art, so it stays true when the catalogue changes.
 */

body .waafaa-extensions-hero {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 3.5rem;
  position: relative;
}

/* Mesh + grid backdrop. Two soft brand washes over a 44px hairline grid that
   fades out before it reaches the edges, so nothing hard meets the section end. */
body .waafaa-extensions-hero::before {
  background:
    radial-gradient(ellipse 45% 55% at 82% 18%, rgba(0, 166, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 8% 72%, rgba(139, 92, 246, 0.14), transparent 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

body .waafaa-extensions-hero::after {
  background-image:
    linear-gradient(to right, rgba(148, 170, 220, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 170, 220, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
  position: absolute;
}

body .waafaa-extensions-hero > * {
  position: relative;
  z-index: 1;
}

body .waafaa-extensions-hero__grid {
  align-items: center;
  display: grid;
  gap: 3.5rem;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
}

body .waafaa-extensions-hero__copy {
  display: grid;
  gap: 1.15rem;
  max-width: 36rem;
}

body .waafaa-extensions-hero__copy > * {
  margin-block-start: 0 !important;
}

/* Status-pill badge, with a live dot -- the one "product UI" cue in the hero. */
body .waafaa-extensions-hero__badge {
  align-items: center;
  background: rgba(0, 166, 255, 0.08);
  border: 1px solid rgba(0, 166, 255, 0.26);
  border-radius: 999px;
  color: var(--waafaa-blue) !important;
  display: inline-flex;
  font-size: 0.76rem !important;
  font-weight: 800;
  gap: 0.5rem;
  justify-self: start;
  letter-spacing: 0.04em;
  line-height: 1 !important;
  padding: 0.5rem 0.9rem 0.5rem 0.75rem;
}

body .waafaa-extensions-hero__badge::before {
  background: var(--waafaa-green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(19, 215, 173, 0.18);
  content: "";
  flex: 0 0 auto;
  height: 0.4rem;
  width: 0.4rem;
}

body .waafaa-extensions-hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.15rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.06 !important;
}

body .waafaa-extensions-hero__lede {
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  max-width: 34rem;
}

body .waafaa-extensions-hero__stats {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: 0.75rem !important;
  max-width: 34rem;
}

/*
 * Core's block-gap puts margin-block-start on every sibling block but the first,
 * which pushes stats 2 and 3 below stat 1 and breaks the row's baseline. The gap
 * above already does this spacing. inner-common.css only zeroes this inside
 * containers whose class contains "-grid"/"__grid", which these are not.
 */
body .waafaa-extensions-hero__stats > * {
  margin-block-start: 0 !important;
}

body .waafaa-extensions-stat {
  border-left: 2px solid var(--waafaa-border-strong);
  display: grid;
  gap: 0.3rem;
  padding-left: 0.95rem;
}

body .waafaa-extensions-stat > * {
  margin-block-start: 0 !important;
}

body .waafaa-extensions-stat__value {
  background: var(--waafaa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: 1.85rem !important;
  font-weight: 900;
  line-height: 1.05 !important;
}

body .waafaa-extensions-stat__label {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

/* ---------- Hero visual: the catalogue panel ---------- */

body .waafaa-extensions-hero__visual {
  display: grid;
  justify-items: stretch;
}

body .waafaa-extensions-hero__panel {
  background: linear-gradient(180deg, rgba(11, 21, 39, 0.82), rgba(5, 12, 24, 0.62));
  border: 1px solid var(--waafaa-border);
  border-radius: 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2rem 5rem rgba(0, 0, 0, 0.34);
  display: grid;
  gap: 1.35rem;
  padding: 1.75rem;
  position: relative;
}

body .waafaa-extensions-hero__panel > * {
  margin-block-start: 0 !important;
}

body .waafaa-extensions-hero__panel-label {
  color: var(--waafaa-muted) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  line-height: 1 !important;
  text-transform: uppercase;
}

body .waafaa-extensions-hero__chips {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .waafaa-extensions-hero__chips > * {
  margin-block-start: 0 !important;
}

/* One tile per product, tinted with that product's own accent and captioned with
   its name -- a square of icon alone left most of the tile empty and told a
   first-time visitor nothing. The tokens come from the --<key> palettes further
   down, so a card and its hero tile can never disagree about a brand colour. */
body .waafaa-hero-chip {
  align-content: center;
  background: color-mix(in srgb, var(--ext-accent) 12%, rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--ext-accent) 26%, transparent);
  border-radius: 0.8rem;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  margin: 0 !important;
  min-height: 7.25rem;
  padding: 1rem 0.6rem;
  text-align: center;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

body .waafaa-hero-chip > * {
  margin-block-start: 0 !important;
}

body .waafaa-hero-chip:hover {
  border-color: color-mix(in srgb, var(--ext-accent) 55%, transparent);
  transform: translateY(-3px);
}

body .waafaa-hero-chip__icon {
  margin: 0 !important;
}

body .waafaa-hero-chip__icon img {
  display: block;
  height: 2.25rem;
  object-fit: contain;
  width: 2.25rem;
}

body .waafaa-hero-chip__name {
  color: var(--waafaa-text) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  line-height: 1.3 !important;
}

body .waafaa-extensions-hero__panel-note {
  border-top: 1px solid var(--waafaa-border);
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  padding-top: 1.1rem;
}

/* ---------- Grid ---------- */

body .waafaa-extensions-grid {
  padding-top: 0;
}

body .waafaa-extensions-grid__head {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 2.5rem;
  max-width: 42rem;
}

body .waafaa-extensions-grid__list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Card ---------- */

body .waafaa-ext-card {
  /* Neutral fallback; every --<key> modifier below overrides both stops. */
  --ext-accent: var(--waafaa-blue);
  --ext-accent-2: var(--waafaa-purple);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow: hidden;
  padding: 1.6rem;
  position: relative;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* The brand bar along the top edge -- the card's only large colour commitment. */
body .waafaa-ext-card::before {
  background: linear-gradient(90deg, var(--ext-accent) 0%, var(--ext-accent-2) 100%);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/* A soft brand wash in the top-right corner, behind the content. */
body .waafaa-ext-card::after {
  background: radial-gradient(circle at 100% 0%, var(--ext-accent) 0%, transparent 62%);
  content: "";
  height: 11rem;
  opacity: 0.11;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 11rem;
}

body .waafaa-ext-card > * {
  position: relative;
  z-index: 1;
}

body .waafaa-ext-card:hover,
body .waafaa-ext-card:focus-within {
  border-color: color-mix(in srgb, var(--ext-accent) 45%, transparent);
  box-shadow: 0 1.5rem 3.5rem color-mix(in srgb, var(--ext-accent) 22%, transparent);
  transform: translateY(-4px);
}

body .waafaa-ext-card__head {
  align-items: center;
  display: flex;
  gap: 0.9rem;
}

body .waafaa-ext-card__icon {
  align-items: center;
  background: color-mix(in srgb, var(--ext-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ext-accent) 32%, transparent);
  border-radius: 0.7rem;
  display: flex;
  flex: 0 0 auto;
  height: 3.4rem;
  justify-content: center;
  margin: 0 !important;
  width: 3.4rem;
}

body .waafaa-ext-card__icon img {
  display: block;
  height: 2.1rem;
  object-fit: contain;
  width: 2.1rem;
}

body .waafaa-ext-card__titles {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

body .waafaa-ext-card__titles h3 {
  font-size: 1.05rem !important;
  font-weight: 850;
}

body .waafaa-ext-card__platform {
  color: var(--waafaa-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

body .waafaa-ext-card__tagline {
  color: var(--ext-accent) !important;
  font-size: 0.98rem !important;
  font-weight: 800;
  line-height: 1.35 !important;
}

/* min-height = 3 lines at this size. The copy is written to ~3 lines, but a
   card that lands on 2 must not pull its list and footer up out of step with
   the card beside it. */
body .waafaa-ext-card > p:not([class]) {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  min-height: 4.55em;
}

/* Three one-line features per card by design; the min-height holds the footer
   in place if one of them ever wraps. */
body .waafaa-ext-card__features {
  display: grid;
  gap: 0.5rem;
  min-height: 5.4em;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .waafaa-ext-card__features li {
  font-size: 0.87rem;
  line-height: 1.5;
  padding-left: 1.4rem;
  position: relative;
}

body .waafaa-ext-card__features li::before {
  color: var(--ext-accent);
  content: "\2713";
  font-size: 0.85rem;
  font-weight: 900;
  left: 0;
  line-height: 1.5;
  position: absolute;
  top: 0;
}

/* margin-top:auto pins the footer to the card's base so all six line up. */
body .waafaa-ext-card__foot {
  display: grid;
  gap: 0.9rem;
  margin-block-start: auto !important;
  padding-top: 0.35rem;
}

body .waafaa-ext-card__price {
  background: color-mix(in srgb, var(--ext-accent) 13%, transparent) !important;
  border-color: color-mix(in srgb, var(--ext-accent) 30%, transparent) !important;
  color: var(--ext-accent) !important;
}

body .waafaa-ext-card__actions {
  gap: 0.6rem;
}

/*
 * Breakpoint-free wrapping. "Add to Chrome" needs ~150px; two of them side by
 * side stop fitting somewhere around 660-900px (2-up cards) AND again on phones,
 * so no single media query covers it. Instead: nowrap means the label can never
 * break mid-phrase ("Add to / Chrome"), which makes each button's min-content
 * width its full label -- and the row's existing flex-wrap then drops the second
 * button onto its own full-width line exactly when the pair no longer fits.
 */
body .waafaa-ext-card__actions .wp-block-button {
  flex: 1 1 9rem;
}

body .waafaa-ext-card__actions .wp-block-button__link {
  font-size: 0.84rem;
  min-height: 2.7rem;
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
  width: 100%;
}

/*
 * ONE solid accent, not a two-stop gradient. Blending each brand's two stops put
 * a different hue-mix on every button -- PDFCraft's blue-to-orange in particular
 * read as muddy brown -- so six cards looked like six sites. A single flat accent
 * keeps each product recognisable while the button itself stays one component.
 *
 * Dark ink, not white: the dark-mode accents are the BRIGHT end of each brand
 * ramp (that is what reads on a #030711 ground), and white on them fails WCAG AA
 * at this size -- 3.4:1 on Hide's blue, 2.3:1 on FileLens's green. #03101f clears
 * 5:1 on the darkest of the six. Light mode flips back to white in
 * waafaa-theme-modes.css, where the accents are the dark stops.
 */
body .waafaa-ext-card__actions .waafaa-button--primary .wp-block-button__link {
  background: var(--ext-accent);
  color: #03101f;
}

body .waafaa-ext-card__actions .waafaa-button--ghost .wp-block-button__link {
  border-color: color-mix(in srgb, var(--ext-accent) 34%, transparent);
  color: var(--ext-accent);
}

/* ---------- A lone item on the last row ---------- */

/* Seven products in a three-up grid leave the seventh alone on row three, hard
   against the left edge, which reads as a layout bug rather than a catalogue of
   seven. `:last-child:nth-child(3n + 1)` matches only when the final item is
   also the first of its row -- i.e. exactly one orphan -- so the rule switches
   itself off the moment the catalogue stops being 3n+1 long. The two-column and
   single-column stops are handled in the media queries below. */
body .waafaa-extensions-grid__list > :last-child:nth-child(3n + 1),
body .waafaa-extensions-hero__chips > :last-child:nth-child(3n + 1) {
  grid-column: 2;
}

/* ---------- Per-product palettes (dark mode) ---------- */

/* Each palette drives BOTH that product's card and its hero tile, so the two
   can never drift apart. Light-mode stops live in waafaa-theme-modes.css. */

body .waafaa-ext-card--hide,
body .waafaa-hero-chip--hide {
  --ext-accent: #5b82ff;
  --ext-accent-2: #8f68ff;
}

body .waafaa-ext-card--pdfcraft,
body .waafaa-hero-chip--pdfcraft {
  --ext-accent: #2f8dff;
  --ext-accent-2: #ff9a52;
}

body .waafaa-ext-card--imagepolish,
body .waafaa-hero-chip--imagepolish {
  --ext-accent: #3b82f6;
  --ext-accent-2: #7dabff;
}

body .waafaa-ext-card--formatly,
body .waafaa-hero-chip--formatly {
  --ext-accent: #6f95ff;
  --ext-accent-2: #9db8ff;
}

body .waafaa-ext-card--filelens,
body .waafaa-hero-chip--filelens {
  --ext-accent: #43be93;
  --ext-accent-2: #7fe0bd;
}

body .waafaa-ext-card--profile-tags,
body .waafaa-hero-chip--profile-tags {
  --ext-accent: #4a8dff;
  --ext-accent-2: #2fd8c4;
}

body .waafaa-ext-card--leadproof,
body .waafaa-hero-chip--leadproof {
  --ext-accent: #8b9bf5;
  --ext-accent-2: #58d3a6;
}

/* ---------- Responsive ---------- */

@media (max-width: 1060px) {
  body .waafaa-extensions-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two-up: "column 2" above would shove the orphan to the right, so reset it
     and centre it across both columns at exactly one column's width. The
     0.625rem is half the 1.25rem grid gap. */
  body .waafaa-extensions-grid__list > :last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  body .waafaa-extensions-grid__list > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.625rem);
  }

  body .waafaa-extensions-hero__grid {
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
  }

  body .waafaa-extensions-hero__copy {
    max-width: none;
  }

  body .waafaa-extensions-hero__panel {
    max-width: 30rem;
  }
}

@media (max-width: 780px) {
  body .waafaa-extensions-hero__stats {
    gap: 0.9rem;
  }

  body .waafaa-extensions-stat__value {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 660px) {
  body .waafaa-extensions-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single column: nothing is an orphan, so undo both rules above -- without
     this the half-width centring rule survives and the last card renders at
     50% while every card above it is full width. */
  body .waafaa-extensions-grid__list > :last-child:nth-child(3n + 1),
  body .waafaa-extensions-grid__list > :last-child:nth-child(2n + 1) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

  /* Stats stay 3-up on phones -- they are short enough, and stacking them
     pushed the catalogue a full screen further down. */
  body .waafaa-extensions-hero__stats {
    gap: 0.75rem;
    max-width: none;
  }

  body .waafaa-extensions-stat {
    padding-left: 0.7rem;
  }

  body .waafaa-extensions-hero__panel {
    padding: 1.35rem;
  }

  body .waafaa-hero-chip img {
    height: 1.8rem;
    width: 1.8rem;
  }

  body .waafaa-ext-card {
    padding: 1.35rem;
  }

  /* The copy is written to a desktop measure; on one column the min-heights
     only add dead space. */
  body .waafaa-ext-card__tagline,
  body .waafaa-ext-card > p:not([class]),
  body .waafaa-ext-card__features {
    min-height: 0;
  }
}