/**
 * Review V2 — presentation for the pipeline's Review V2 renderer
 * (RightToolHQ/pipeline/agents/wordpress/review_v2.py). Milestone 38C.
 *
 * OWNERSHIP: this pipeline never emits CSS (see review_v2.py's own module
 * docstring, "WordPress owns only rendering"). It emits stable, semantic
 * `rtq-*` class hooks; this stylesheet is where they become a real visual
 * design. Every selector below is scoped under `.rtq-article .entry-content`
 * (the exact same scoping single.css already uses) so nothing here can
 * leak onto the homepage, an archive, or a non-review singular page.
 *
 * REUSE, NOT A NEW DESIGN LANGUAGE. Every value resolves to a --rtq-*
 * token from tokens.css (WORDPRESS.md §13 -- no hardcoded hex/px). Where an
 * existing component already does the job -- .rtq-chip for the best-for/
 * avoid-for pills, .rtq-affiliate-cta .wp-element-button for the CTA
 * button (already styled in single.css), the base h2/h3/p/ul rules
 * .entry-content already carries -- this file adds nothing, deliberately.
 * Only genuinely new Review V2 shapes (the hero fact grid, quick-verdict
 * columns, pricing cards, the limitations/methodology boxes, the video
 * wrapper) get new rules here.
 *
 * Conditionally enqueued (inc/enqueue.php) only on `is_singular('review')`
 * -- see that file's own conditional-loading discipline for home.css/
 * single.css, applied identically here so no other template pays for
 * this file's weight.
 */

/* ===============================================================
 * A. Hero
 * =============================================================== */
.rtq-article .entry-content .rtq-review-hero {
	margin: 0 0 var(--rtq-space-2xl);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--rtq-gradient-soft);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius-lg);
}

.rtq-article .entry-content .rtq-review-hero__label {
	display: inline-block;
	margin: 0 0 var(--rtq-space-2xs);
	font-size: var(--rtq-text-2xs);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-wide);
	text-transform: uppercase;
	color: var(--rtq-accent);
}

.rtq-article .entry-content .rtq-review-hero__title {
	margin: 0 0 var(--rtq-space-sm);
	padding: 0;
	border: 0; /* overrides the generic .entry-content h2 hairline -- this is the hero's own opening heading, not a new section */
	font-size: var(--rtq-text-title);
	line-height: var(--rtq-leading-tight);
	letter-spacing: var(--rtq-tracking-tight);
	color: var(--rtq-ink);
}

.rtq-article .entry-content .rtq-review-hero__summary {
	margin: 0 0 var(--rtq-space-lg);
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
	max-width: 68ch;
}

.rtq-article .entry-content .rtq-review-hero__facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rtq-space-md);
	margin: 0 0 var(--rtq-space-lg);
	padding: var(--rtq-space-md) 0 0;
	border-top: 1px solid var(--rtq-border);
}

.rtq-article .entry-content .rtq-review-hero__fact {
	min-width: 0; /* lets a long value wrap instead of forcing the grid track wide */
}

.rtq-article .entry-content .rtq-review-hero__fact dt {
	margin: 0 0 var(--rtq-space-3xs);
	font-size: var(--rtq-text-2xs);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-wide);
	text-transform: uppercase;
	color: var(--rtq-muted);
}

.rtq-article .entry-content .rtq-review-hero__fact dd {
	margin: 0;
	font-size: var(--rtq-text-sm);
	font-weight: 650;
	line-height: var(--rtq-leading-snug);
	color: var(--rtq-ink);
	overflow-wrap: break-word;
}

.rtq-article .entry-content .rtq-review-hero .wp-block-buttons {
	margin: 0; /* the hero already provides its own rhythm via __facts' margin-bottom */
}

@media (max-width: 48rem) {
	.rtq-article .entry-content .rtq-review-hero__facts {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--rtq-space-sm) var(--rtq-space-md);
	}
}

/* ===============================================================
 * B. Quick verdict — pros / cons
 * =============================================================== */
.rtq-article .entry-content .rtq-quick-verdict__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rtq-space-md);
	margin: 0;
}

.rtq-article .entry-content .rtq-quick-verdict__col {
	padding: var(--rtq-space-md);
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
}

.rtq-article .entry-content .rtq-quick-verdict__label {
	margin: 0 0 var(--rtq-space-sm);
	font-size: var(--rtq-text-base);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-snug);
}

/* Distinguished by heading colour AND the ✓/✕ glyph already in the text
   (never colour alone -- Milestone 38C §9) -- both read correctly in
   grayscale since the glyphs themselves carry the meaning. */
.rtq-article .entry-content .rtq-quick-verdict__pros .rtq-quick-verdict__label {
	color: var(--rtq-primary);
}

.rtq-article .entry-content .rtq-quick-verdict__cons .rtq-quick-verdict__label {
	color: var(--rtq-ink);
}

.rtq-article .entry-content .rtq-quick-verdict__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--rtq-space-xs);
}

.rtq-article .entry-content .rtq-quick-verdict__list li {
	position: relative;
	padding-left: var(--rtq-space-md);
	font-size: var(--rtq-text-sm);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
}

.rtq-article .entry-content .rtq-quick-verdict__list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rtq-border-strong);
}

@media (max-width: 37.5rem) {
	.rtq-article .entry-content .rtq-quick-verdict__columns {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
 * C. Pricing & plans
 * =============================================================== */
.rtq-article .entry-content .rtq-pricing-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: var(--rtq-space-md);
	margin: 0;
}

.rtq-article .entry-content .rtq-pricing-card {
	display: flex;
	flex-direction: column;
	padding: var(--rtq-space-md);
	background: var(--rtq-surface);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius);
	box-shadow: var(--rtq-shadow-xs);
}

.rtq-article .entry-content .rtq-pricing-card__name {
	margin: 0 0 var(--rtq-space-3xs);
	font-size: var(--rtq-text-h3);
	font-weight: 700;
	color: var(--rtq-ink);
}

.rtq-article .entry-content .rtq-pricing-card__price {
	margin: 0 0 var(--rtq-space-sm);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-snug);
	color: var(--rtq-primary);
}

.rtq-article .entry-content .rtq-pricing-card__details {
	margin: 0;
	padding: var(--rtq-space-sm) 0 0;
	border-top: 1px solid var(--rtq-border);
	list-style: none;
	display: grid;
	gap: var(--rtq-space-2xs);
}

.rtq-article .entry-content .rtq-pricing-card__details li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--rtq-space-sm);
	font-size: var(--rtq-text-xs);
}

.rtq-article .entry-content .rtq-pricing-card__detail-label {
	color: var(--rtq-muted);
	flex-shrink: 0;
	white-space: nowrap;
}

.rtq-article .entry-content .rtq-pricing-card__detail-value {
	color: var(--rtq-ink);
	font-weight: 600;
	text-align: right;
}

/* Pricing deep-dive link (Milestone 38C §11) -- an editorial cross-link,
   not a second CTA. Styled with .rtq-link (already exists) plus a
   trailing-arrow affordance; the link ITSELF is inserted by whichever
   consumer wires the two campaigns together (see review_v2.py's own
   "future cross-link" note in Milestone 38A's report) -- this rule is
   ready for it, not a fabricated link. */
.rtq-article .entry-content .rtq-pricing-deep-dive {
	display: inline-flex;
	align-items: center;
	gap: var(--rtq-space-3xs);
	margin-top: var(--rtq-space-sm);
	font-size: var(--rtq-text-sm);
}

@media (max-width: 30rem) {
	.rtq-article .entry-content .rtq-pricing-cards {
		grid-template-columns: 1fr;
	}
}

/* ===============================================================
 * D/E. Best for / avoid — chips (reuses .rtq-chip from components.css)
 * =============================================================== */
.rtq-article .entry-content .rtq-best-for,
.rtq-article .entry-content .rtq-avoid-for {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rtq-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .rtq-chip already provides colour/radius/padding; only the "avoid" list
   gets a neutral (not primary-tinted) variant so the two rows read as
   distinct without introducing a warning colour. */
.rtq-article .entry-content .rtq-avoid-for .rtq-chip {
	background: var(--rtq-surface-sunk);
	color: var(--rtq-body);
}

/* ===============================================================
 * G. Important limitations — mirrors .rtq-source-notice's existing
 * "legible disclosure, not fine print" convention (style.css), not a
 * new callout language.
 * =============================================================== */
.rtq-article .entry-content .rtq-limitations-box {
	margin: var(--rtq-space-lg) 0;
	padding: var(--rtq-space-md);
	background: var(--rtq-surface-alt);
	border: 1px solid var(--rtq-border);
	border-left: 3px solid var(--rtq-primary);
	border-radius: var(--rtq-radius-sm);
}

.rtq-article .entry-content .rtq-limitations-box__heading {
	margin: 0 0 var(--rtq-space-xs);
	padding: 0;
	border: 0;
	font-size: var(--rtq-text-h3);
	color: var(--rtq-ink);
}

.rtq-article .entry-content .rtq-limitations-box__list {
	margin: 0;
	padding-left: var(--rtq-space-md);
	display: grid;
	gap: var(--rtq-space-2xs);
}

.rtq-article .entry-content .rtq-limitations-box__list li {
	font-size: var(--rtq-text-sm);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-body);
}

/* ===============================================================
 * H. Campaign YouTube video
 * =============================================================== */
.rtq-article .entry-content .rtq-review-v2-video-section {
	margin: var(--rtq-space-2xl) 0;
}

.rtq-article .entry-content .rtq-video-responsive {
	position: relative;
	width: 100%;
	max-width: 48rem;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	border-radius: var(--rtq-radius);
	overflow: hidden;
	background: var(--rtq-surface-sunk);
	box-shadow: var(--rtq-shadow-sm);
}

.rtq-article .entry-content .rtq-video-responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.rtq-article .entry-content .rtq-video-responsive iframe:focus-visible {
	outline: 2px solid var(--rtq-primary);
	outline-offset: 2px;
}

.rtq-article .entry-content .rtq-review-v2-youtube figcaption {
	margin-top: var(--rtq-space-xs);
	font-size: var(--rtq-text-xs);
	color: var(--rtq-muted);
	text-align: center;
}

/* ===============================================================
 * G. Infographics — never a fixed rendered width on any viewport
 * (Milestone 38C §15). Reinforces (never contradicts) single.css's
 * existing `.entry-content img { height: auto }`.
 * =============================================================== */
.rtq-article .entry-content .rtq-media img {
	display: block;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-inline: auto;
}

.rtq-article .entry-content .rtq-media figcaption {
	margin-top: var(--rtq-space-2xs);
	font-size: var(--rtq-text-xs);
	color: var(--rtq-muted);
	text-align: center;
}

/* ===============================================================
 * F. Methodology / trust box — compact, distinct from the limitations
 * box (no left accent bar, smaller type) so the two callouts don't read
 * as the same component doing two jobs.
 * =============================================================== */
.rtq-article .entry-content .rtq-methodology-box {
	margin: var(--rtq-space-lg) 0;
	padding: var(--rtq-space-sm) var(--rtq-space-md);
	background: var(--rtq-surface-alt);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius-sm);
}

.rtq-article .entry-content .rtq-methodology-box__heading {
	margin: 0 0 var(--rtq-space-2xs);
	padding: 0;
	border: 0;
	font-size: var(--rtq-text-sm);
	font-weight: 700;
	letter-spacing: var(--rtq-tracking-snug);
	color: var(--rtq-muted);
}

.rtq-article .entry-content .rtq-methodology-box__paragraph {
	margin: 0;
	font-size: var(--rtq-text-xs);
	line-height: var(--rtq-leading-body);
	color: var(--rtq-muted);
}

.rtq-article .entry-content .rtq-methodology-box__paragraph + .rtq-methodology-box__paragraph {
	margin-top: var(--rtq-space-2xs);
}

/* ===============================================================
 * I. Alternatives
 * =============================================================== */
.rtq-article .entry-content .rtq-alternatives {
	font-size: var(--rtq-text-lead);
	line-height: var(--rtq-leading-body);
}

/* ===============================================================
 * J. Final verdict — a closing band, softly set apart from the article
 * body without looking like a legal notice or implying a score.
 * review_v2.py (Milestone 38C) wraps the final-verdict text and its CTA
 * together in a `.rtq-final-verdict` group specifically so this has a
 * real, stable hook -- not a guessed DOM position.
 * =============================================================== */
.rtq-article .entry-content .rtq-final-verdict {
	margin: var(--rtq-space-2xl) 0 0;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--rtq-surface-alt);
	border: 1px solid var(--rtq-border);
	border-radius: var(--rtq-radius-lg);
}

.rtq-article .entry-content .rtq-final-verdict h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.rtq-article .entry-content .rtq-final-verdict .wp-block-buttons {
	margin-bottom: 0;
}

/* ===============================================================
 * Narrow screens — shared adjustments across every Review V2 component
 * =============================================================== */
@media (max-width: 37.5rem) {
	.rtq-article .entry-content .rtq-review-hero {
		border-radius: var(--rtq-radius);
	}

	.rtq-article .entry-content .rtq-review-hero__title {
		font-size: var(--rtq-text-h2);
	}

	.rtq-article .entry-content .rtq-quick-verdict__col,
	.rtq-article .entry-content .rtq-pricing-card,
	.rtq-article .entry-content .rtq-limitations-box,
	.rtq-article .entry-content .rtq-methodology-box {
		padding: var(--rtq-space-sm);
	}
}