/**
 * DeskPicko NEW Editorial Homepage Prototype — Phase 2C Editor's Picks.
 *
 * Namespace: `dp2-editors-picks-`, a sibling of `dp2-hero-` (Phase 2A)
 * and `dp2-finder-` (Phase 2B). Fully isolated from those, from the
 * Phase 1H Category Module (`dp-` prefix), and from the existing
 * production dark-theme site.
 *
 * Mobile-first: base rules are the single-column flow (feature, then
 * each of the 4 supporting picks, in source order — no JS, no
 * reordering). The desktop breakpoint below only rearranges into the
 * two-column "large feature left / 4 supporting stacked right" layout
 * named in the brief.
 *
 * NEW HOMEPAGE EDITORIAL CONTENT WIDTH STANDARD (established here per
 * the Phase 2C width refinement): a primary editorial section on this
 * new homepage does NOT set its own max-width/margin:auto. It fills
 * its surrounding Elementor section/column, with 1rem horizontal
 * padding at the ≥900px desktop breakpoint (and 1rem at mobile too).
 * This is exactly what .dp-cat-module (Phase 1H Category Module)
 * already does — Editor's Picks now matches it instead of introducing
 * its own independent width. Future primary editorial sections
 * (additional Category Modules, Popular Comparisons, Recently
 * Updated, etc.) should follow this same standard — no independent
 * max-width, 1rem horizontal padding at desktop — rather than each
 * picking its own pixel value, unless a section has a documented
 * design reason to intentionally differ. (The Phase 2B Finder is
 * exactly such an exception: it's a centered card-style component,
 * not a full-width primary section, so its own max-width: 1040px is
 * deliberate and unaffected by this standard.)
 */

.dp2-editors-picks {
	--dp2-ink: #14181c;
	--dp2-ink-soft: #4b5563;
	--dp2-teal: #0f766e;
	--dp2-line: #e5e7eb;

	box-sizing: border-box;
	color: var(--dp2-ink);
	font-family: inherit;
	padding: 2rem 1rem;
}

.dp2-editors-picks *,
.dp2-editors-picks *::before,
.dp2-editors-picks *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------
   Intro
   --------------------------------------------------------------- */

.dp2-editors-picks-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp2-teal);
}

.dp2-editors-picks-heading {
	margin: 0 0 0.5rem;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
}

.dp2-editors-picks-description {
	margin: 0 0 1.5rem;
	max-width: 56ch;
	color: var(--dp2-ink-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ---------------------------------------------------------------
   Body: feature + supporting, stacked on mobile
   --------------------------------------------------------------- */

.dp2-editors-picks-body {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* ---------------------------------------------------------------
   Feature pick
   --------------------------------------------------------------- */

.dp2-editors-picks-feature-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dp2-editors-picks-feature-link:focus-visible {
	outline: 2px solid var(--dp2-teal);
	outline-offset: 2px;
}

.dp2-editors-picks-feature-media {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: var(--dp2-line);
	margin-bottom: 0.9rem;
}

.dp2-editors-picks-feature-media img {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
	display: block;
}

.dp2-editors-picks-feature-eyebrow {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--dp2-teal);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dp2-editors-picks-feature-title {
	display: block;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.5rem;
}

.dp2-editors-picks-feature-link:hover .dp2-editors-picks-feature-title,
.dp2-editors-picks-feature-link:focus-visible .dp2-editors-picks-feature-title {
	text-decoration: underline;
}

.dp2-editors-picks-feature-excerpt {
	display: block;
	max-width: 60ch;
	color: var(--dp2-ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------
   Supporting picks
   --------------------------------------------------------------- */

.dp2-editors-picks-supporting {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.dp2-editors-picks-supporting-item {
	border-top: 1px solid var(--dp2-line);
}

.dp2-editors-picks-supporting-item:last-child {
	border-bottom: 1px solid var(--dp2-line);
}

.dp2-editors-picks-supporting-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 44px;
	padding: 0.75rem 0;
	color: inherit;
	text-decoration: none;
}

.dp2-editors-picks-supporting-link:focus-visible {
	outline: 2px solid var(--dp2-teal);
	outline-offset: 2px;
}

.dp2-editors-picks-supporting-media {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--dp2-line);
}

.dp2-editors-picks-supporting-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dp2-editors-picks-supporting-text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.dp2-editors-picks-supporting-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dp2-teal);
}

.dp2-editors-picks-supporting-title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

.dp2-editors-picks-supporting-link:hover .dp2-editors-picks-supporting-title,
.dp2-editors-picks-supporting-link:focus-visible .dp2-editors-picks-supporting-title {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Desktop: feature left/large, 3 supporting stacked right.
   --------------------------------------------------------------- */

@media (min-width: 900px) {
	/* WIDTH: matches the Standing Desks Category Module's actual
	   desktop rule (.dp-cat-module inside dp-category-module.css) —
	   which has NO independent max-width/margin:auto of its own. It
	   fills whatever Elementor section/column it's placed in, with
	   1rem horizontal padding at this same breakpoint. There is no
	   fixed pixel width to copy from that file; the two sections only
	   render at the same width today because they already sit inside
	   the same page-level Elementor container. Removing this
	   section's own max-width/centering and matching that same 1rem
	   horizontal padding is what actually guarantees identical
	   left/right edges when both are placed in that container — a
	   copied pixel number would only coincidentally match, and would
	   drift the moment either section's surrounding container changed.
	   See "NEW HOMEPAGE EDITORIAL CONTENT WIDTH STANDARD" note in this
	   file's header for the documented standard this establishes. */
	.dp2-editors-picks {
		padding: 3rem 1rem;
	}

	.dp2-editors-picks-heading {
		font-size: 2rem;
	}

	.dp2-editors-picks-body {
		flex-direction: row;
		align-items: stretch;
		gap: 3rem;
	}

	.dp2-editors-picks-feature {
		flex: 1 1 60%;
		min-width: 0;
	}

	.dp2-editors-picks-feature-title {
		font-size: 1.55rem;
	}

	.dp2-editors-picks-supporting {
		flex: 1 1 40%;
		min-width: 0;
	}
}