/**
 * DeskPicko Editorial Engine — Review / Guide frontend.
 *
 * Namespace: `dp2-review-` and `dp2-guide-`, isolated from every other
 * dp2- module (no bare .card/.button/.list anywhere in this file —
 * every selector is prefixed, same discipline as
 * dp2-comparison.css / dp2-product-reveal.css). One shared file for
 * both modules (they share a product-card visual language and are
 * never both present on the same page in practice, since a post's
 * content type is one or the other) — each module still gets its own
 * class prefix, so nothing here is ambiguous about which module a
 * rule belongs to.
 *
 * Visual language matches the approved blueprint and the established
 * dp2-comparison.css palette: white surface, dark ink typography, one
 * restrained blue accent, light gray dividers — premium editorial, not
 * ecommerce-loud. Every text color declaration carries `!important`,
 * same defensive convention dp2-comparison.css already uses, so these
 * modules render correctly regardless of what a theme's own cascade
 * does (see dp2-comparison.css's own v2.6.3 changelog entry for the
 * exact failure mode this guards against).
 *
 * RESPONSIVE STRUCTURE — mobile-first, single 641px+ breakpoint, same
 * convention as dp2-comparison.css / dp2-product-reveal.css.
 *
 * NO COLLAPSIBLE SECTIONS, NO JAVASCRIPT — see
 * DP_EE_Review_Frontend's and DP_EE_Guide_Frontend's own docblocks for
 * why: nothing either module renders is long/dense enough to need a
 * native <details>/<summary>, so there is no accordion-locking logic
 * here to mirror dp2-comparison.css's own (that mechanism exists
 * there specifically for Comparison's specification table and
 * multi-item pros/cons list, neither of which either module has).
 */

.dp2-review,
.dp2-guide {
	--dp2rvgd-ink: #14181c;
	--dp2rvgd-ink-soft: #5b6470;
	--dp2rvgd-ink-faint: #8b93a0;
	--dp2rvgd-blue: #1a56db;
	--dp2rvgd-blue-soft: #eaf0fd;
	--dp2rvgd-line: #e5e7eb;
	--dp2rvgd-surface: #f5f6f8;
	--dp2rvgd-green: #0f6e56;
	--dp2rvgd-green-soft: #e9f5f1;

	display: block;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--dp2rvgd-ink);
	font-family: inherit;
}

.dp2-review *,
.dp2-guide *,
.dp2-review *::before,
.dp2-guide *::before,
.dp2-review *::after,
.dp2-guide *::after {
	box-sizing: inherit;
}

.dp2-review-eyebrow,
.dp2-guide-heading,
.dp2-review-heading {
	margin: 0 0 0.5rem;
}

.dp2-review-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp2rvgd-ink-faint) !important;
}

.dp2-review-heading,
.dp2-guide-heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--dp2rvgd-ink) !important;
}

/* -------------------------------------------------------------
   Review — verdict
   ------------------------------------------------------------- */

.dp2-review-verdict {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	background: var(--dp2rvgd-green-soft);
}

.dp2-review-verdict-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	font-weight: 600;
	color: var(--dp2rvgd-ink) !important;
	white-space: pre-line;
}

/* -------------------------------------------------------------
   Review — strengths / trade-offs
   ------------------------------------------------------------- */

.dp2-review-pros-cons {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

.dp2-review-pros-cons-col {
	flex: 1 1 0;
	min-width: 0;
}

/* -------------------------------------------------------------
   Shared lists (Review strengths/trade-offs, Guide selection
   criteria/buying considerations)
   ------------------------------------------------------------- */

.dp2-review-list,
.dp2-guide-list {
	margin: 0 0 1.25rem;
	padding-left: 1.25rem;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--dp2rvgd-ink-soft) !important;
}

.dp2-review-list li,
.dp2-guide-list li {
	margin-bottom: 0.35rem;
}

.dp2-guide-criteria .dp2-guide-list,
.dp2-guide-considerations .dp2-guide-list {
	margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------
   Review — methodology
   ------------------------------------------------------------- */

.dp2-review-methodology {
	margin-bottom: 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dp2rvgd-line);
	border-radius: 0.75rem;
	background: var(--dp2rvgd-surface);
}

.dp2-review-methodology-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--dp2rvgd-ink-soft) !important;
	white-space: pre-line;
}

/* -------------------------------------------------------------
   Guide — intro
   ------------------------------------------------------------- */

.dp2-guide-intro {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--dp2rvgd-ink-soft) !important;
	white-space: pre-line;
}

/* -------------------------------------------------------------
   Guide — recommendations
   ------------------------------------------------------------- */

.dp2-guide-recommendations {
	margin-bottom: 1.25rem;
}

.dp2-guide-recommendations-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* -------------------------------------------------------------
   Shared product card (Review's single connection card, Guide's
   per-recommendation cards)
   ------------------------------------------------------------- */

.dp2-review-product-card,
.dp2-guide-product-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border: 1px solid var(--dp2rvgd-line);
	border-radius: 0.75rem;
	background: #fff;
	padding: 1.25rem;
}

.dp2-review-product {
	margin-bottom: 1.25rem;
}

.dp2-review-product-image,
.dp2-guide-product-image {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin: 0 auto;
	border-radius: 0.5rem;
	object-fit: contain;
}

.dp2-review-product-image-link,
.dp2-guide-product-image-link {
	align-self: center;
}

.dp2-review-product-body,
.dp2-guide-product-body {
	flex: 1 1 0;
	min-width: 0;
}

.dp2-review-product-badge,
.dp2-guide-product-role {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--dp2rvgd-blue-soft);
	color: var(--dp2rvgd-blue) !important;
	font-size: 0.7rem;
	font-weight: 700;
}

.dp2-review-product-name,
.dp2-guide-product-name {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.dp2-review-product-name a,
.dp2-guide-product-name a,
.dp2-review-product-link a,
.dp2-guide-product-link a {
	color: var(--dp2rvgd-ink) !important;
	text-decoration: none;
}

.dp2-review-product-name a:hover,
.dp2-guide-product-name a:hover {
	text-decoration: underline;
}

.dp2-guide-product-why {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--dp2rvgd-ink-soft) !important;
}

.dp2-review-product-price,
.dp2-guide-product-price {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: var(--dp2rvgd-ink) !important;
}

.dp2-review-product-price-label,
.dp2-guide-product-price-label {
	color: var(--dp2rvgd-ink-soft) !important;
	margin-right: 0.35rem;
}

.dp2-review-product-price-value,
.dp2-guide-product-price-value {
	font-weight: 700;
}

/* -------------------------------------------------------------
   Shared compact retailer list
   ------------------------------------------------------------- */

.dp2-review-product-retailers,
.dp2-guide-product-retailers {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dp2-review-product-retailer,
.dp2-guide-product-retailer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.dp2-review-product-retailer-info,
.dp2-guide-product-retailer-info {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.dp2-review-product-retailer-name,
.dp2-guide-product-retailer-name {
	font-weight: 600;
	color: var(--dp2rvgd-ink) !important;
}

.dp2-review-product-retailer-price,
.dp2-guide-product-retailer-price {
	color: var(--dp2rvgd-ink-soft) !important;
}

.dp2-review-product-retailer-cta,
.dp2-guide-product-retailer-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.45rem 0.85rem;
	border-radius: 0.5rem;
	/* v2.11.1: premium dark treatment, per build spec section 5 - not
	   var(--dp2rvgd-blue), which stays this module's accent elsewhere
	   in this file. */
	background: #111827 !important;
	color: #fff !important;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
}

.dp2-review-product-retailer-cta:hover,
.dp2-guide-product-retailer-cta:hover {
	background: #1f2937 !important;
}

.dp2-review-product-link,
.dp2-guide-product-link {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
}

/* -------------------------------------------------------------
   Shared meta line (last reviewed / update note)
   ------------------------------------------------------------- */

.dp2-review-meta,
.dp2-guide-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: 0.8rem;
	color: var(--dp2rvgd-ink-faint) !important;
}

/* -------------------------------------------------------------
   641px+ — desktop layout
   ------------------------------------------------------------- */

@media (min-width: 641px) {

	.dp2-review-pros-cons {
		flex-direction: row;
	}

	.dp2-review-product-card {
		flex-direction: row;
		align-items: flex-start;
	}

	.dp2-review-product-image-link {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.dp2-review-product-image {
		width: 160px;
		margin: 0;
	}

	.dp2-guide-recommendations-list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 1rem;
	}

	.dp2-guide-product-card {
		flex-direction: column;
		height: 100%;
	}

	.dp2-guide-product-image {
		width: 100%;
		max-width: 100%;
	}
}