/*
 * WaaFaa products page (/products/).
 *
 * The sibling of extensions.css, and deliberately built the same way: each card
 * carries its OWN product palette rather than the shared WaaFaa blue, so five
 * cards read as five products instead of five slots in a template.
 *
 * Every palette below is lifted from that product's own tokens -- the `:root`
 * block of its landing/styles.css, which is in turn the product's in-app accent
 * -- so the mark, the app, the microsite and this card are one palette rather
 * than four. Nothing here is invented:
 *
 *   PIOS         --accent #1B62E8 / --cyan #22D3EE      (pios/landing/styles.css)
 *   Extlytics    --ex-pine #174A3E / --ex-band-accent #74C2A8
 *   Plinth       --pl-green #1F5E4B / --pl-ink-accent #63B795, mark hue #D9A441
 *   CommentAura  --ca-blue #1F6390 / --ca-blue-deep #16455F
 *   Zain         theme.json accent-3 #2F0CBD / accent-1 #F0DF4B
 *
 * Values in THIS file are the DARK-mode stops (the brighter end of each 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, or
 * light mode silently keeps the dark accent on a white card.
 */

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

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

/* Mesh + hairline grid, matching the extensions hero so the two catalogue pages
   are visibly the same room. The wash is pulled toward violet/cyan rather than
   the extensions page's blue/purple, which is enough to tell them apart. */
body .waafaa-products-hero::before {
  background:
    radial-gradient(ellipse 45% 55% at 82% 18%, rgba(34, 211, 238, 0.14), transparent 70%),
    radial-gradient(ellipse 50% 60% at 8% 72%, rgba(99, 102, 241, 0.15), transparent 70%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

body .waafaa-products-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-products-hero > * {
  position: relative;
  z-index: 1;
}

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

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

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

body .waafaa-products-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-products-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-products-hero h1 {
  font-size: clamp(2.3rem, 4vw, 3.15rem) !important;
  letter-spacing: -0.02em;
  line-height: 1.06 !important;
}

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

body .waafaa-products-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 would push stats 2 and 3 below stat 1 and break the row's baseline. The
 * grid gap already does this spacing. inner-common.css only zeroes this inside
 * containers whose class contains "-grid"/"__grid", which these are not.
 */
body .waafaa-products-hero__stats > * {
  margin-block-start: 0 !important;
}

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

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

body .waafaa-products-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-products-stat__label {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

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

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

body .waafaa-products-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-products-hero__panel > * {
  margin-block-start: 0 !important;
}

body .waafaa-products-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;
}

/*
 * Five chips in a list, not a 3-up grid. The extensions hero uses three columns
 * because eight tiles divide into them; five would leave a two-tile orphan row,
 * and each product here needs a KIND next to its name ("Analytics Platform")
 * that a 90px-wide tile cannot hold. A row per product reads better and carries
 * more.
 */
body .waafaa-products-hero__chips {
  display: grid;
  gap: 0.6rem;
}

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

body .waafaa-prod-chip {
  align-items: center;
  background: color-mix(in srgb, var(--prod-accent) 10%, rgba(255, 255, 255, 0.02));
  border: 1px solid color-mix(in srgb, var(--prod-accent) 24%, transparent);
  border-radius: 0.7rem;
  display: grid;
  gap: 0.15rem 0.85rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0 !important;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

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

body .waafaa-prod-chip:hover {
  border-color: color-mix(in srgb, var(--prod-accent) 52%, transparent);
  transform: translateX(3px);
}

body .waafaa-prod-chip__icon {
  grid-row: span 2;
  margin: 0 !important;
}

body .waafaa-prod-chip__icon img {
  border-radius: 0.5rem;
  display: block;
  height: 2.1rem;
  object-fit: contain;
  width: 2.1rem;
}

body .waafaa-prod-chip__name {
  color: var(--waafaa-text) !important;
  font-size: 0.86rem !important;
  font-weight: 800;
  line-height: 1.3 !important;
}

body .waafaa-prod-chip__kind {
  color: var(--prod-accent) !important;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

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

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

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

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

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

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

body .waafaa-prod-card {
  /* Neutral fallback; every --<key> modifier below overrides both stops. */
  --prod-accent: var(--waafaa-blue);
  --prod-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-prod-card::before {
  background: linear-gradient(90deg, var(--prod-accent) 0%, var(--prod-accent-2) 100%);
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

body .waafaa-prod-card::after {
  background: radial-gradient(circle at 100% 0%, var(--prod-accent) 0%, transparent 62%);
  content: "";
  height: 11rem;
  opacity: 0.11;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 11rem;
}

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

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

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

body .waafaa-prod-card__icon {
  align-items: center;
  background: color-mix(in srgb, var(--prod-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--prod-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-prod-card__icon img {
  border-radius: 0.45rem;
  display: block;
  height: 2.1rem;
  object-fit: contain;
  width: 2.1rem;
}

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

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

body .waafaa-prod-card__kind {
  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-prod-card__tagline {
  color: var(--prod-accent) !important;
  font-size: 0.98rem !important;
  font-weight: 800;
  line-height: 1.35 !important;
}

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

body .waafaa-prod-card code {
  background: color-mix(in srgb, var(--prod-accent) 12%, transparent);
  border-radius: 0.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.1rem 0.3rem;
}

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

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

body .waafaa-prod-card__features li::before {
  color: var(--prod-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 five line up. */
body .waafaa-prod-card__foot {
  display: grid;
  gap: 0.9rem;
  margin-block-start: auto !important;
  padding-top: 0.35rem;
}

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

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

body .waafaa-prod-card__actions .wp-block-button {
  flex: 1 1 9rem;
}

body .waafaa-prod-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 -- the same call extensions.css
 * makes, and for the same reason: blending each brand's two stops put a
 * different hue-mix on every button, so five cards looked like five sites.
 *
 * 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 -- 2.0:1 on Extlytics' #74C2A8. #03101f clears 7:1 on the darkest
 * of the five. Light mode flips back to white in waafaa-theme-modes.css, where
 * the accents are the dark stops.
 */
body .waafaa-prod-card__actions .waafaa-button--primary .wp-block-button__link {
  background: var(--prod-accent);
  color: #03101f;
}

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

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

/* Five products in a three-up grid leave the fourth and fifth on row two, which
   is fine -- but a SIXTH would leave one orphan hard against the left edge.
   `:last-child:nth-child(3n + 1)` matches only when the final item is also the
   first of its row, so the rule switches itself off the moment the catalogue
   stops being 3n+1 long. It is inert at five and correct at seven. */
body .waafaa-products-grid__list > :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 chip, so the two
   can never drift apart. Light-mode stops live in waafaa-theme-modes.css. */

body .waafaa-prod-card--pios,
body .waafaa-prod-chip--pios {
  --prod-accent: #4d92ff;
  --prod-accent-2: #22d3ee;
}

/* #174A3E is 1.4:1 on this ground and invisible, so dark mode uses Extlytics'
   own on-ink accent (--ex-band-accent) as the bright stop and its mint as the
   second. */
body .waafaa-prod-card--extlytics,
body .waafaa-prod-chip--extlytics {
  --prod-accent: #74c2a8;
  --prod-accent-2: #2f9c80;
}

/* Plinth's own mark pairs the green with #D9A441 for the column that has
   stopped, so the amber is the product's second hue rather than a decoration
   chosen here. It is a gradient stop only and never carries a word. */
body .waafaa-prod-card--plinth,
body .waafaa-prod-chip--plinth {
  --prod-accent: #63b795;
  --prod-accent-2: #d9a441;
}

body .waafaa-prod-card--commentaura,
body .waafaa-prod-chip--commentaura {
  --prod-accent: #4fa3d1;
  --prod-accent-2: #7fc6e8;
}

/* #2F0CBD is 1.5:1 on #030711, so dark mode lifts the violet. The yellow is
   theme.json accent-1, which Zain's own palette reserves for graphics -- and a
   3px gradient stop is exactly that, never text. */
body .waafaa-prod-card--zain,
body .waafaa-prod-chip--zain {
  --prod-accent: #8b7cff;
  --prod-accent-2: #f0df4b;
}

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

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

  /* Two-up: five cards leave the fifth alone, so centre it across both columns
     at exactly one column's width. The 0.625rem is half the 1.25rem grid gap. */
  body .waafaa-products-grid__list > :last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

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

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

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

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

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

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

@media (max-width: 660px) {
  body .waafaa-products-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-products-grid__list > :last-child:nth-child(3n + 1),
  body .waafaa-products-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-products-hero__stats {
    gap: 0.75rem;
    max-width: none;
  }

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

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

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

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