/**
 * DeskPicko Editorial Engine — Phase 4B Category Archive frontend.
 *
 * Namespace: `dp2-cat-archive-`, isolated from every other dp2-
 * module (Homepage Lead, Finder, Editor's Picks, Popular Comparisons,
 * Recently Updated) and from the Phase 1H Category Module's `dp-cat-`
 * prefix (a different, older namespace — not touched by this file).
 *
 * WIDTH STANDARD — same convention already established by Homepage
 * Lead/Editor's Picks/Category Module (see that CSS's own comment):
 * no independent max-width/margin:auto here. This section fills
 * whatever container (the site's normal homepage/page content width)
 * it's placed in, with 1rem horizontal padding. Deliberately does NOT
 * use the Finder's narrower centered-card width (build spec section
 * 12).
 *
 * VISUAL LANGUAGE — LOCKED rules from the build spec: white base,
 * strong dark text, one restrained blue accent, thin 1px dividers
 * instead of shadowed cards, no gradients, no carousel/slider styling
 * of any kind. Mobile-first: base rules are the single-column mobile
 * layout; the desktop rules only add the two-column lead treatment
 * and wider row spacing at the breakpoint below.
 */

.dp2-cat-archive {
	--dp2ca-ink: #14181c;
	--dp2ca-ink-soft: #5b6470;
	--dp2ca-ink-faint: #8b93a0;
	--dp2ca-blue: #1a56db;
	--dp2ca-blue-soft: #eaf0fd;
	--dp2ca-line: #e5e7eb;
	--dp2ca-surface: #f5f6f8;

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

.dp2-cat-archive *,
.dp2-cat-archive *::before,
.dp2-cat-archive *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------- */

.dp2-cat-archive-breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	font-size: 0.8125rem;
	color: var(--dp2ca-ink-faint);
}

.dp2-cat-archive-breadcrumb a {
	color: var(--dp2ca-ink-faint);
	text-decoration: none;
}

.dp2-cat-archive-breadcrumb a:hover,
.dp2-cat-archive-breadcrumb a:focus-visible {
	color: var(--dp2ca-blue);
	text-decoration: underline;
}

.dp2-cat-archive-breadcrumb [aria-current='page'] {
	color: var(--dp2ca-ink-soft);
}

/* ---------------------------------------------------------------
   Masthead — no category image, by design (LOCKED rule 2)
   --------------------------------------------------------------- */

.dp2-cat-archive-masthead {
	margin: 0 0 2rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--dp2ca-line);
}

.dp2-cat-archive-title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.dp2-cat-archive-description {
	max-width: 62ch;
	margin: 0 0 0.9rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dp2ca-ink-soft);
}

.dp2-cat-archive-count {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--dp2ca-ink-faint);
}

/* ---------------------------------------------------------------
   Empty state
   --------------------------------------------------------------- */

.dp2-cat-archive-empty {
	margin: 0;
	padding: 2rem 0;
	font-size: 1rem;
	color: var(--dp2ca-ink-soft);
	text-align: center;
}

/* ---------------------------------------------------------------
   Badges — restrained pills, the one place blue accent repeats
   --------------------------------------------------------------- */

.dp2-cat-archive-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.5rem;
}

.dp2-cat-archive-badge {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 0.3rem;
	background: var(--dp2ca-surface);
	color: var(--dp2ca-ink-soft);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
}

.dp2-cat-archive-badge--accent {
	background: var(--dp2ca-blue-soft);
	color: var(--dp2ca-blue);
}

/* ---------------------------------------------------------------
   Lead article — mobile-first: stacked, image first
   --------------------------------------------------------------- */

.dp2-cat-archive-lead {
	display: flex;
	flex-direction: column;
	margin: 0 0 1.75rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--dp2ca-line);
}

.dp2-cat-archive-lead-media-link {
	display: block;
	margin: 0 0 1.1rem;
}

.dp2-cat-archive-lead-media {
	display: block;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--dp2ca-surface);
}

.dp2-cat-archive-lead-media img {
	display: block;
	width: 100%;
	height: auto;
}

.dp2-cat-archive-lead-title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.dp2-cat-archive-lead-title a {
	color: inherit;
	text-decoration: none;
}

.dp2-cat-archive-lead-title a:hover,
.dp2-cat-archive-lead-title a:focus-visible {
	text-decoration: underline;
}

.dp2-cat-archive-lead-excerpt {
	max-width: 62ch;
	margin: 0 0 0.9rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--dp2ca-ink-soft);
}

.dp2-cat-archive-lead-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.dp2-cat-archive-date {
	font-size: 0.8125rem;
	color: var(--dp2ca-ink-faint);
}

.dp2-cat-archive-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--dp2ca-blue);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.dp2-cat-archive-cta:hover,
.dp2-cat-archive-cta:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Article rows — thin dividers, no cards/shadows
   --------------------------------------------------------------- */

.dp2-cat-archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dp2-cat-archive-row {
	border-bottom: 1px solid var(--dp2ca-line);
}

.dp2-cat-archive-row:last-child {
	border-bottom: none;
}

.dp2-cat-archive-row-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	/* min-height, not fixed height: keeps a real 44px+ effective tap
	   target (build spec accessibility rule) without forcing short
	   titles to look artificially tall. */
	min-height: 44px;
	padding: 1rem 0;
	color: inherit;
	text-decoration: none;
}

.dp2-cat-archive-row-media {
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 0.4rem;
	background: var(--dp2ca-surface);
	width: 90px;
	height: 90px;
}

.dp2-cat-archive-row-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp2-cat-archive-row-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.dp2-cat-archive-row-title {
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 700;
}

.dp2-cat-archive-row-link:hover .dp2-cat-archive-row-title,
.dp2-cat-archive-row-link:focus-visible .dp2-cat-archive-row-title {
	text-decoration: underline;
}

.dp2-cat-archive-row-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--dp2ca-ink-soft);
}

.dp2-cat-archive-row-date {
	margin-top: 0.35rem;
	font-size: 0.75rem;
	color: var(--dp2ca-ink-faint);
}

.dp2-cat-archive-row-arrow {
	flex: 0 0 auto;
	color: var(--dp2ca-ink-faint);
	font-size: 1.1rem;
}

.dp2-cat-archive-row-link:hover .dp2-cat-archive-row-arrow,
.dp2-cat-archive-row-link:focus-visible .dp2-cat-archive-row-arrow {
	color: var(--dp2ca-blue);
}

/* Real, visible focus states everywhere in this module (build spec
   accessibility rule) — no outline: none anywhere in this file. */
.dp2-cat-archive a:focus-visible,
.dp2-cat-archive button:focus-visible {
	outline: 2px solid var(--dp2ca-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   View More
   --------------------------------------------------------------- */

.dp2-cat-archive-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2rem;
	text-align: center;
}

.dp2-cat-archive-more[hidden] {
	display: none;
}

.dp2-cat-archive-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.7rem 1.6rem;
	border: 1px solid var(--dp2ca-line);
	border-radius: 999px;
	background: #fff;
	color: var(--dp2ca-blue);
	font-size: 0.9375rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}

.dp2-cat-archive-more-btn:hover {
	background: var(--dp2ca-blue-soft);
}

.dp2-cat-archive-more-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.dp2-cat-archive-status {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.8125rem;
	color: var(--dp2ca-ink-faint);
}

/* ---------------------------------------------------------------
   Desktop — lead article becomes a two-column composition; rows
   gain a slightly larger thumbnail. Base (mobile) rules above are
   untouched below this breakpoint.
   --------------------------------------------------------------- */

@media (min-width: 900px) {
	.dp2-cat-archive-lead {
		flex-direction: row;
		/* flex-start, not stretch: the right column no longer
		   stretches to match the image's height, which is what
		   allows the content group to start at the same top edge as
		   the image instead of being vertically centered against it. */
		align-items: flex-start;
		gap: 2rem;
	}

	.dp2-cat-archive-lead-media-link {
		/* Slightly wider than the previous 46% and, combined with
		   removing the old height:100%/object-fit:cover treatment
		   below, no longer force-stretched to match the text
		   column's height — the image now renders at its own natural
		   aspect ratio (see the un-overridden base
		   .dp2-cat-archive-lead-media img rule, width:100%;
		   height:auto), which is what makes it read as shorter and
		   uncropped instead of tall/cover-cropped. */
		flex: 0 0 52%;
		margin: 0;
	}

	.dp2-cat-archive-lead-body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	.dp2-cat-archive-row-media {
		width: 160px;
		height: 160px;
	}
}

/* ---------------------------------------------------------------
   Smallest supported mobile widths — list thumbnails only. Everything
   from 381px up to the 900px desktop breakpoint above uses the base
   90px rule (both phone and tablet widths); this is a narrower
   fallback purely to avoid thumbnail-driven horizontal crowding on
   the smallest phones, not a new general layout breakpoint.
   --------------------------------------------------------------- */

@media (max-width: 380px) {
	.dp2-cat-archive-row-media {
		width: 85px;
		height: 85px;
	}
}