/* prices.css — the Prices page
 *
 * Loads after page.css and overrides the body only; the header band and the
 * chrome are shared. PAGES.md §3.
 *
 * ── NOTHING MAY DEPEND ON A COUNT ───────────────────────────────────────────
 * Category and package counts come from the CRM and will change. No numbering,
 * no watermark numerals, no card grid — hairline rows instead, so one package
 * and six both look right. The band alternation is computed from the category's
 * index in PHP, never authored.
 *
 * ── RED TYPE ────────────────────────────────────────────────────────────────
 * `--red-label` (#ff0a32), not --red-text. Zsolt's decision of 2026-08-12:
 * brightness over contrast, taken knowing it fails WCAG AA. The steel band
 * (#cdd1d5) is half this page's ground and #ff0a32 measures 2.56:1 on it;
 * #a80017 measured 5.11:1 and passed. DO NOT revert it — tokens.css carries
 * the full comparison and the reasoning.
 *
 * THE PRICING HANDOFF DISAGREES, AND IS WRONG ON THIS POINT. Its desktop spec
 * asks for #e6002a and its mobile companion for #a80017 — the value the decision
 * above rejected by name. Structure, spacing and type scale come from that
 * handoff; every colour comes from here and from tokens.css. Zsolt confirmed the
 * split on 2026-08-19.
 *
 * ── THE ROW MODEL ───────────────────────────────────────────────────────────
 * The editor writes a table; inc/prices.php reads it and emits hairline rows —
 * price on the left, package and its detail lines on the right. There is no
 * table in the output, so there are no table rules below.
 */


/* Category sections, alternating so neighbours separate without rules. */
.pr-cat {
  padding: clamp(38px, 5vw, 78px) clamp(24px, 4vw, 64px);
}
.pr-cat--even { background: radial-gradient(130% 100% at 72% 2%, #f7f8fa 0%, #f4f6f8 55%, #eceff1 100%); }
.pr-cat--odd  { background: radial-gradient(130% 100% at 72% 2%, #d5d9dc 0%, #cdd1d5 55%, #c4c9cd 100%); }


/* --- the band head -------------------------------------------------------
   The editor's heading carries both parts: "Market Research - Get to know your
   audience" is a label and a headline, split in PHP on the first " - ". */
.pr-cat__label {
  font-family: var(--hud); font-weight: 700;
  /* Zsolt, 2026-08-22: 11px was easy to miss. This is the category identifier on
     the page, so it takes the same 13-15px band the row names already use. */
  font-size: clamp(13px, 1.25vw, 16px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--red-label);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

/* The headline is the most prominent element in the section. */
.pr-cat__tagline {
  margin: 0;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3.8vw, 50px); line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--near-black);
  max-width: 30ch;
  text-wrap: balance;
}

/* --- the dashed box ------------------------------------------------------
   The first paragraph after the heading, and ONLY that. With no paragraph the
   box does not render: the handoff kept a placeholder state so unwritten copy
   stayed visible, and Zsolt reversed that on 2026-08-22. */
.pr-why {
  margin-top: clamp(18px, 2vw, 28px);
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 24px);
  border: 1px dashed rgba(18, 28, 40, .32);
  max-width: 74ch;
}
.pr-why p {
  margin: 0;
  font-family: var(--body); font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px); line-height: 1.55;
  color: #2b333b;                 /* the emphasis tier — 8.34:1 on the steel band */
}


/* --- package rows --------------------------------------------------------
   HAIRLINE ROWS, NEVER A CARD GRID. Every row carries a top hairline including
   the first, which is what separates the block from the band head. */
.pr-packages { margin-top: clamp(20px, 2.4vw, 32px); }

.pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px clamp(24px, 4vw, 52px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid rgba(18, 28, 40, .13);
}
.pr-row:last-child { border-bottom: 1px solid rgba(18, 28, 40, .13); }

/* THE PRICE KEEPS ITS OWN COLUMN so every price on the page lands on one
   vertical line however long a package name runs — that alignment is what makes
   six bands read as a price list rather than six unrelated blocks. Right-aligned
   within it, so the figures line up against the edge and not against each
   other's first digit. */
.pr-row__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}
.pr-row__body { min-width: 0; }

.pr-price {
  font-family: var(--body); font-weight: 600;
  font-size: clamp(18px, 2vw, 24px); line-height: 1;
  letter-spacing: -.01em;
  color: var(--near-black);
  white-space: nowrap;
}
.pr-row__name {
  margin: 0 0 12px;
  font-family: var(--hud); font-weight: 700;
  font-size: clamp(13px, 1.3vw, 15px); letter-spacing: .12em; text-transform: uppercase;
  color: var(--near-black);
}

.pr-details { display: flex; flex-direction: column; gap: 9px; }
.pr-detail {
  margin: 0;
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, 1.1vw, 15px); line-height: 1.55;
  color: var(--ink-body);
  text-wrap: pretty;
}
.pr-detail__label {
  font-weight: 600;
  color: var(--near-black);
}


/* --- the discount --------------------------------------------------------
   Driven entirely by strikethrough in the cell, which is the one thing markup
   cannot infer. Struck run = the old price, dim tier. What remains = the
   current price, red. The badge is added by PHP, not typed.

   The dim tier must stay visibly LIGHTER than the body tier or the whole
   treatment stops reading — that step is the point. */
.pr-price--cut { color: var(--red-label); }

.pr-was {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(13px, 1.05vw, 15px);
  color: var(--grey-stat);
  text-decoration: line-through;
  white-space: nowrap;
}

.pr-tag {
  padding: 4px 8px;
  border: 1px solid var(--red-label);
  font-family: var(--hud); font-weight: 500;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-label);
  white-space: nowrap;
}


/* Anything else the editor writes inside a category. */
.pr-cat p:not(.pr-detail):not(.pr-why p) {
  font-family: var(--body); font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.65;
  color: var(--ink-body);
  max-width: 74ch;
}
.pr-cat a { color: var(--red-label); text-decoration: underline; text-underline-offset: 3px; }