/**
 * Profile — Pricing Tiers section (vendor s5 / venue #pricing, shared).
 * Template: template-parts/components/profile-s5-pricing.php
 * JS:       assets/js/profile-s5-pricing.js
 *
 * Every color is a foundation.css token. Neutral rgba() shadows follow the
 * existing theme shadow precedent.
 *
 * Layout contract (VENDOR-OVERHAUL-2026-08-16 item 19):
 *   - 1 package = full content width, 2 = two columns, 3 = three (--pp-count).
 *   - CTAs bottom-aligned across cards regardless of feature count (flex column
 *     cards in a stretch grid + margin-top:auto on the CTA).
 *   - Cards 1 & 3: very light grey, rounded. Middle (3-up only): white,
 *     outlined, "Most Popular" tag, the only card with a dropshadow.
 */

/* ---- Section shell ---- */

.pp-section .pp-title {
  margin: 0 0 var(--sdwd-title-gap);
}

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

.pp-grid {
  display: grid;
  grid-template-columns: repeat(var(--pp-count, 3), minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ---- Cards ---- */

.pp-card {
  display: flex;
  flex-direction: column;
  background: var(--sdwd-soft-faint);        /* faint grey (cards 1 & 3) — lighter than the --sdwd-soft feature rows so they read against it (R3) */
  border-radius: var(--sdwd-radius-lg);      /* rounded corners */
  padding: 24px;
  min-width: 0;
}

/* Middle package — the ONLY card with a dropshadow. */
.pp-card--popular {
  background: var(--sdwd-bg);                /* white */
  border: 1px solid var(--sdwd-border);      /* light grey outline */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pp-card__name {
  margin: 0;
  color: var(--sdwd-black);                  /* name: black */
  font-size: var(--sdwd-h3);
  font-weight: 700;
  text-align: center;                        /* R3: package titles centered */
}

/* "Most Popular" tag — sits between name and price (centered with the title stack). */
.pp-card__tag {
  align-self: center;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--sdwd-accent-bg);
  color: var(--sdwd-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* R3: two centered lines — "Starting at" (smaller) above the price. */
.pp-card__price {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.pp-card__price-label {
  font-size: 14px;
  color: var(--sdwd-muted);
}

.pp-card__amount {
  color: var(--sdwd-accent);                 /* price: site teal */
  font-size: var(--sdwd-h2);
  font-weight: 700;
}

/* ---- Inner feature box ---- */

.pp-features {
  margin: 16px 0 20px;
  background: var(--sdwd-bg);
  border: 1px solid var(--sdwd-border);      /* light grey outline */
  border-radius: var(--sdwd-radius);
  overflow: hidden;                          /* clip row backgrounds to radius */
}

.pp-features__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 15px;
  color: var(--sdwd-body-text);
  background: var(--sdwd-bg);
}

/* Row separators. */
.pp-feature + .pp-feature {
  border-top: 1px solid var(--sdwd-border);
}

/* Alternating rows — grey cards: grey / white (card surface is the lighter --sdwd-soft-faint). */
.pp-feature:nth-child(odd) {
  background: var(--sdwd-soft);
}

/* Alternating rows — middle card: very-light-blue / white. */
.pp-card--popular .pp-feature:nth-child(odd) {
  background: var(--sdwd-tab-active-blue-bg);
}

/* Hover (and touch/keyboard open state) darkens each row FROM ITS OWN base color (R3). */

/* White rows → light grey. */
.pp-feature:hover,
.pp-feature.is-open {
  background: var(--sdwd-soft);
}

/* Grey rows → slightly darker grey. */
.pp-feature:nth-child(odd):hover,
.pp-feature:nth-child(odd).is-open {
  background: var(--sdwd-btn-secondary-hover);
}

/* Blue rows (middle card) → slightly darker blue, derived from tokens only.
   (No color-mix support → falls back to the grey-row hover above.) */
.pp-card--popular .pp-feature:nth-child(odd):hover,
.pp-card--popular .pp-feature:nth-child(odd).is-open {
  background: color-mix(in srgb, var(--sdwd-tab-active-blue-bg) 90%, var(--sdwd-focus));
}

/* ---- Feature icon + text states ---- */

.pp-feature__icon {
  flex: none;
  font-size: 13px;
  color: var(--sdwd-success);                /* included: green check */
}

.pp-feature--no .pp-feature__icon {
  color: var(--sdwd-red);                    /* excluded: red X */
}

.pp-feature__text {
  min-width: 0;
}

.pp-feature--no .pp-feature__text {
  color: var(--sdwd-red);                    /* excluded: red strikethrough */
  text-decoration: line-through;
}

/* ---- "?" help + tooltip ---- */

.pp-feature__help {
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--sdwd-muted);
  border-radius: 50%;
  background: transparent;
  color: var(--sdwd-muted);
  font-family: var(--sdwd-body-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;                                /* revealed on row hover */
  transition: opacity 0.15s ease;
}

.pp-feature:hover .pp-feature__help,
.pp-feature.is-open .pp-feature__help,
.pp-feature__help:focus-visible {
  opacity: 1;
}

/* No hover available (touch): "?" is always visible so tooltips stay reachable. */
@media (hover: none) {
  .pp-feature__help {
    opacity: 1;
  }
}

.pp-feature__help:focus-visible {
  outline: 2px solid var(--sdwd-focus);
  outline-offset: 1px;
}

.pp-tip {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: min(260px, 85%);
  padding: 8px 12px;
  border-radius: var(--sdwd-radius);
  background: var(--sdwd-dark);
  color: var(--sdwd-footer-text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.pp-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: var(--sdwd-dark);
}

/* Hover the "?", keyboard-focus it, or tap-toggle the row → tooltip shows. */
.pp-feature__help:hover ~ .pp-tip,
.pp-feature__help:focus ~ .pp-tip,
.pp-feature.is-open .pp-tip {
  visibility: visible;
  opacity: 1;
}

/* Excluded rows keep readable tooltip text (no strikethrough bleed). */
.pp-feature--no .pp-tip {
  color: var(--sdwd-footer-text);
  text-decoration: none;
}

/* ---- CTA — bottom-aligned across all cards ---- */

.pp-card__cta {
  margin-top: auto;                          /* pins to card bottom */
  display: block;
  padding: 12px 20px;
  border-radius: var(--sdwd-radius);
  background: var(--sdwd-accent);
  color: var(--sdwd-bg);
  font-size: var(--sdwd-body);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pp-card__cta:hover {
  background: var(--sdwd-btn-primary-hover);
  color: var(--sdwd-bg);
}

.pp-card__cta:active {
  background: var(--sdwd-btn-primary-active);
}

/* ---- Screen-reader-only helper ---- */

.pp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive: cards stack on narrow viewports ---- */

@media (max-width: 900px) {
  .pp-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ---- Print ---- */

@media print {
  .pp-card--popular {
    box-shadow: none;
  }
  .pp-feature__help,
  .pp-tip {
    display: none !important;
  }
  .pp-card {
    break-inside: avoid;
  }
}