/*
 * PouchPick Editorial — shared card family + metadata grammar (NP.4).
 *
 * Ported from the human-selected NP.1-R2 lab (captures 25/27/29; the lab's
 * editorial-lab.css is the measured source). Seven card presentations, one
 * record — differentiated by ratio · border · radius · anatomy, never by
 * colour washes (anti-rainbow rule §26: section tints live ONLY in pips,
 * kicker ink, edge rules and the one guide canvas). Values sit on the
 * PouchPick design-system tokens; editorial-only values are --pp-ed-*.
 */

:root {
	--pp-ed-muted: #5A6572;
	--pp-ed-muted-2: #7E8894;
	--pp-ed-surface: #F6F7F8;
	--pp-ed-hairline: #E7E9EA;

	/* Section identity inks/canvases — keyed to the Core section KEYS. */
	--pp-ed-ink-guides-basics: #1C4E89;     --pp-ed-bg-guides-basics: #EDF3FA;
	--pp-ed-ink-flavours: #226842;          --pp-ed-bg-flavours: #EAF6EE;
	--pp-ed-ink-strength-format: #4E5A10;   --pp-ed-bg-strength-format: #F3F9D8;
	--pp-ed-ink-brands-products: #142F51;   --pp-ed-bg-brands-products: #F2F3F5;
	--pp-ed-ink-news-market: #0B1D38;       --pp-ed-bg-news-market: #E9EEF5;
	--pp-ed-ink-regulation-travel: #8A6D1F; --pp-ed-bg-regulation-travel: #FDF8EA;
	--pp-ed-ink-research-data: #27436B;     --pp-ed-bg-research-data: #E8EEF7;
	--pp-ed-ink-culture-history: #7A5C33;   --pp-ed-bg-culture-history: #F7F1E6;
}

/* ---------------- Metadata grammar v2 (SECTION · TYPE + freshness) ------ */
.pp-ed-kicker {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pp-navy);
}
.pp-ed-kicker-sep { color: #C3C8CC; font-weight: 400; }
.pp-ed-kicker-type { color: var(--pp-ed-muted-2); font-weight: 600; letter-spacing: 0.09em; }
.pp-ed-w-guides-basics .pp-ed-kicker-sec { color: var(--pp-ed-ink-guides-basics); }
.pp-ed-w-flavours .pp-ed-kicker-sec { color: var(--pp-ed-ink-flavours); }
.pp-ed-w-strength-format .pp-ed-kicker-sec { color: var(--pp-ed-ink-strength-format); }
.pp-ed-w-brands-products .pp-ed-kicker-sec { color: var(--pp-ed-ink-brands-products); }
.pp-ed-w-news-market .pp-ed-kicker-sec { color: var(--pp-ed-ink-news-market); }
.pp-ed-w-regulation-travel .pp-ed-kicker-sec { color: var(--pp-ed-ink-regulation-travel); }
.pp-ed-w-research-data .pp-ed-kicker-sec { color: var(--pp-ed-ink-research-data); }
.pp-ed-w-culture-history .pp-ed-kicker-sec { color: var(--pp-ed-ink-culture-history); }

.pp-ed-meta {
	display: flex;
	gap: 7px;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--pp-ed-muted);
}
.pp-ed-meta .pp-ed-fresh-now { color: var(--pp-ink); font-weight: 700; }
.pp-ed-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #C2C8CD; align-self: center; }
.pp-ed-chip {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--pp-navy);
	background: var(--pp-navy-tint);
	border-radius: 999px;
	padding: 2px 9px;
}

/* Section pips (identity in small furniture only). */
.pp-ed-pip { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 8px; background: var(--pp-navy); }
.pp-ed-pip-guides-basics { background: var(--pp-ed-ink-guides-basics); }
.pp-ed-pip-flavours { background: var(--pp-ed-ink-flavours); }
.pp-ed-pip-strength-format { background: var(--pp-ed-ink-strength-format); }
.pp-ed-pip-brands-products { background: var(--pp-ed-ink-brands-products); }
.pp-ed-pip-news-market { background: var(--pp-ed-ink-news-market); }
.pp-ed-pip-regulation-travel { background: var(--pp-ed-ink-regulation-travel); }
.pp-ed-pip-research-data { background: var(--pp-ed-ink-research-data); }
.pp-ed-pip-culture-history { background: var(--pp-ed-ink-culture-history); }

.pp-ed-ink-guides-basics { color: var(--pp-ed-ink-guides-basics); }
.pp-ed-ink-flavours { color: var(--pp-ed-ink-flavours); }
.pp-ed-ink-strength-format { color: var(--pp-ed-ink-strength-format); }
.pp-ed-ink-brands-products { color: var(--pp-ed-ink-brands-products); }
.pp-ed-ink-news-market { color: var(--pp-ed-ink-news-market); }
.pp-ed-ink-regulation-travel { color: var(--pp-ed-ink-regulation-travel); }
.pp-ed-ink-research-data { color: var(--pp-ed-ink-research-data); }
.pp-ed-ink-culture-history { color: var(--pp-ed-ink-culture-history); }

/* ---------------- Editorial image slots (art-direction §5) -------------- */
.pp-ed-art {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pp-radius-lg, 12px);
	background: #E8ECEF;
}
.pp-ed-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-ed-art--r169 { aspect-ratio: 16 / 9; }
.pp-ed-art--r32 { aspect-ratio: 3 / 2; }
.pp-ed-art--r43 { aspect-ratio: 4 / 3; }
.pp-ed-art--r11 { aspect-ratio: 1 / 1; }
.pp-ed-art--r219 { aspect-ratio: 21 / 9; }
/* The automatic imageless fallback frame (no card ships imageless; no text
   is baked in) — a quiet lit-navy composition with the lime baseline. */
.pp-ed-art--fallback {
	background:
		radial-gradient(90% 90% at 30% 20%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(120% 140% at 32% 24%, #2E5183 0%, var(--pp-navy) 55%, var(--pp-navy-chrome) 100%);
}
/* ---- The ONE lower-edge accent (NP.7C) ----
   Shared geometry for both kinds of media plate, so the fallback and a real
   photograph can never drift apart: 5px tall, flush to the lower edge, and
   clipped by the plate's own `overflow: hidden` + border-radius, which is
   what keeps the corner identical at every card radius (16/14/12/8px).
   It overlays the lower edge — the plate, the <img> and the crop are all
   untouched, and nothing is inset. */
.pp-ed-art--fallback::after,
.pp-ed-art--accent::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 5px;
}
/* Fallback plate: the navy half of the signature IS the plate, so only the
   lime segment is drawn. Unchanged from the shipped composition. */
.pp-ed-art--fallback::after {
	width: 24%;
	background: var(--pp-lime);
}
/* Real photography: same 5px edge, same 24% lime segment in the same corner
   — but the navy the fallback gets from its plate has to be drawn here, or
   the signature is half-missing and the lime is left to fight whatever the
   photograph happens to put under it. Hard boundary, no gradient fade. */
.pp-ed-art--accent::after {
	width: 100%;
	background: linear-gradient(90deg, var(--pp-lime) 0 24%, var(--pp-navy) 24% 100%);
}
/* Clean by contract: the article hero and the hub culture banner are large
   standalone editorial imagery, not cards. They opt out in PHP; this is the
   belt-and-braces guard if either is ever rendered with the default args. */
.pp-ed-hero .pp-ed-art--accent::after,
.pp-ed-cult-media .pp-ed-art--accent::after {
	content: none;
}

/* ---------------- Card core ---------------- */
.pp-ed-card { display: block; color: inherit; text-decoration: none; transition: transform var(--pp-motion-component) var(--pp-ease-out); }
/* UI.1 C2 (Human Lock §9): every editorial card is ONE link, so on
   hover-capable input the whole card lifts ~1px (200ms, no shadow) with its
   existing Navy response (title below; keyline on the bordered variants). */
@media (hover: hover) { .pp-ed-card:hover { transform: translateY(calc(var(--pp-card-rise) * -1)); } }
.pp-ed-card-t {
	font-family: var(--pp-font-display);
	font-weight: 700;
	color: var(--pp-ink);
	letter-spacing: -0.005em;
	line-height: 1.12;
	margin: 0;
}
.pp-ed-card:hover .pp-ed-card-t,
.pp-ed-card:hover .pp-ed-row-t,
.pp-ed-card:hover .pp-ed-trow-t,
.pp-ed-card:hover .pp-ed-pillar-t,
.pp-ed-card:hover .pp-ed-lead-sec-t { color: var(--pp-navy); }
.pp-ed-card-dek {
	color: var(--pp-ed-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 6px 0 8px;
}

/* FEATURE — borderless, image-first, display headline. */
.pp-ed-card--feature .pp-ed-art { margin-bottom: 14px; border-radius: 14px; }
.pp-ed-card--feature .pp-ed-card-t { font-size: 33px; line-height: 1.07; margin-top: 9px; }
.pp-ed-card--feature .pp-ed-card-dek { font-size: 15.5px; max-width: 58ch; }
.pp-ed-card--feature.is-xl .pp-ed-card-t { font-size: 47px; letter-spacing: -0.018em; font-weight: 800; line-height: 1.04; margin-top: 10px; }
.pp-ed-card--feature.is-xl .pp-ed-card-dek { font-size: 16.5px; line-height: 1.55; color: #3D4650; margin: 12px 0 10px; }

/* STANDARD — borderless 4:3. */
.pp-ed-card--std .pp-ed-art { margin-bottom: 11px; }
.pp-ed-card--std .pp-ed-card-t { font-size: 18.5px; line-height: 1.2; margin-top: 7px; }
.pp-ed-card--std .pp-ed-meta { margin-top: 6px; }

/* COMPACT ROW — hairline row, 1:1 thumb, body-font title. */
.pp-ed-row {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pp-ed-hairline);
	align-items: flex-start;
}
.pp-ed-row:last-child { border-bottom: 0; }
.pp-ed-row .pp-ed-art { width: 68px; flex: 0 0 68px; border-radius: 8px; }
.pp-ed-row-body { min-width: 0; }
.pp-ed-row .pp-ed-kicker { font-size: 10.5px; }
.pp-ed-row-t {
	display: block;
	font-family: var(--pp-font-body);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pp-ink);
	margin-top: 4px;
}
.pp-ed-row .pp-ed-meta { font-size: 11.5px; margin-top: 4px; }

/* TEXT ROW — date-first, image-free (Latest / News rows). */
.pp-ed-trow {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pp-ed-hairline);
	align-items: baseline;
}
.pp-ed-trow:last-child { border-bottom: 0; }
.pp-ed-trow-d {
	font-family: var(--pp-font-display);
	font-weight: 700;
	font-size: 11.5px;
	color: var(--pp-navy);
	min-width: 48px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex: 0 0 auto;
}
.pp-ed-trow-body { min-width: 0; }
.pp-ed-trow-t {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pp-ink);
}
.pp-ed-trow-k {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pp-ed-muted-2);
	margin-top: 2px;
}

/* PILLAR — Start Here ghost numerals, no boxes. */
.pp-ed-pillar { position: relative; display: block; }
.pp-ed-pillar-no {
	font-family: var(--pp-font-display);
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.2px #C5CDD6;
	display: block;
	margin-bottom: 10px;
}
.pp-ed-pillar .pp-ed-kicker { margin-bottom: 7px; }
.pp-ed-pillar-t {
	font-family: var(--pp-font-display);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.16;
	color: var(--pp-ink);
	margin: 0;
}
.pp-ed-pillar .pp-ed-meta { font-size: 12px; margin-top: 9px; }

/* GUIDE — the ONE tinted canvas card (r14, no border). */
.pp-ed-card--guide {
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	min-height: 196px;
	background: var(--pp-ed-bg-guides-basics);
}
.pp-ed-canvas-guides-basics { background: var(--pp-ed-bg-guides-basics); }
.pp-ed-canvas-flavours { background: var(--pp-ed-bg-flavours); }
.pp-ed-canvas-strength-format { background: var(--pp-ed-bg-strength-format); }
.pp-ed-canvas-brands-products { background: var(--pp-ed-bg-brands-products); }
.pp-ed-canvas-news-market { background: var(--pp-ed-bg-news-market); }
.pp-ed-canvas-regulation-travel { background: var(--pp-ed-bg-regulation-travel); }
.pp-ed-canvas-research-data { background: var(--pp-ed-bg-research-data); }
.pp-ed-canvas-culture-history { background: var(--pp-ed-bg-culture-history); }
.pp-ed-guide-k {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.pp-ed-card--guide .pp-ed-card-t { font-size: 20px; line-height: 1.15; max-width: 80%; margin-top: 8px; }
.pp-ed-guide-m { margin-top: auto; padding-top: 14px; opacity: 0.8; }

/* DATA / REPORT — sharp r6 border, never imagery, tabular numerals. */
.pp-ed-card--data {
	border: 1px solid var(--pp-border);
	border-radius: 6px;
	padding: 20px;
	background: var(--pp-card-bg);
}
.pp-ed-data-period {
	display: block;
	font-family: var(--pp-font-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--pp-navy);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	border-bottom: 1.5px solid var(--pp-ink);
	padding: 12px 0 12px;
	margin-bottom: 12px;
}
.pp-ed-card--data .pp-ed-card-t { font-size: 16.5px; line-height: 1.22; }
.pp-ed-card--data .pp-ed-card-dek { font-size: 13px; }
.pp-ed-card--data .pp-ed-meta { margin-top: 8px; }

/* BRAND UPDATE — lit navy plate + lime baseline over a bordered body. */
.pp-ed-card--brand {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg, 12px);
	overflow: hidden;
	background: var(--pp-card-bg);
}
.pp-ed-card--brand:hover { border-color: var(--pp-border-hover); }
.pp-ed-brand-plate {
	position: relative;
	background: radial-gradient(120% 140% at 30% 0%, #22406B 0%, var(--pp-navy) 55%, var(--pp-navy-chrome) 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 92px;
	font-family: var(--pp-font-display);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pp-ed-brand-plate::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--pp-lime);
}
.pp-ed-brand-body { display: block; padding: 15px 17px; }
.pp-ed-card--brand .pp-ed-card-t { font-size: 16.5px; line-height: 1.22; margin-top: 7px; }
.pp-ed-card--brand .pp-ed-meta { margin-top: 6px; }

/* REGULATION — no box; 3px amber edge rule + jurisdiction line. */
.pp-ed-card--reg {
	background: transparent;
	border-left: 3px solid var(--pp-amber-border);
	padding: 4px 0 4px 18px;
}
.pp-ed-reg-jur {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pp-amber-text);
	margin-bottom: 8px;
}
.pp-ed-reg-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 2px 5px;
	border-radius: 3px;
	background: var(--pp-navy);
	color: #fff;
	font-family: var(--pp-font-display);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.06em;
}
.pp-ed-card--reg .pp-ed-card-t { font-size: 17px; line-height: 1.22; }
.pp-ed-card--reg .pp-ed-meta { margin-top: 8px; }

/* PRODUCT mini-card (learn-then-shop band only). */
.pp-ed-pcard {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--pp-card-bg);
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius-lg, 12px);
	padding: 12px;
	color: inherit;
	text-decoration: none;
}
.pp-ed-pcard:hover { border-color: var(--pp-border-hover); }
.pp-ed-pcard-media { display: block; border-radius: var(--pp-radius-md, 9px); overflow: hidden; }
/* The shared packshot stage needs an explicit width here (flex + aspect-ratio
   alone resolves to 0); the compact-pick presentation factor (PI.1 72%). */
.pp-ed-pcard-media .pp-packshot { width: 100%; --pp-stage-fit: 1.0909; }
.pp-ed-pcard-b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--pp-ed-muted);
	text-transform: uppercase;
}
.pp-ed-pcard-n { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--pp-ink); }
.pp-ed-pcard-meta { font-size: 10.5px; color: var(--pp-ed-muted); }
.pp-ed-pcard-price { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--pp-navy); }
.pp-ed-pcard-unit { font-weight: 500; font-size: 11px; color: var(--pp-ed-muted); margin-left: 2px; }

/* ---------------- Section head v2 + more link ---------------- */
.pp-ed-sec-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	border-top: 1px solid var(--pp-border);
	padding-top: 11px;
	margin-bottom: 20px;
}
.pp-ed-sec-head.is-major { border-top: 2px solid var(--pp-ink); }
.pp-ed-sec-head h2,
.pp-ed-sec-head h3 {
	font-family: var(--pp-font-display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pp-ink);
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
}
.pp-ed-sec-sub { font-size: 12.5px; color: var(--pp-ed-muted-2); }
.pp-ed-more {
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pp-navy);
	white-space: nowrap;
	text-decoration: none;
}
.pp-ed-more::after { content: " →"; }
.pp-ed-more:hover { text-decoration: underline; }

/* ---------------- Pagination (server-rendered) ---------------- */
.pp-ed-pagination { display: flex; justify-content: center; padding: 26px 0 44px; }
.pp-ed-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.pp-ed-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid var(--pp-border);
	border-radius: 999px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--pp-navy);
	text-decoration: none;
}
.pp-ed-pagination a.page-numbers:hover { border-color: var(--pp-navy); }
.pp-ed-pagination .page-numbers.current {
	background: var(--pp-navy);
	border-color: var(--pp-navy);
	color: #fff;
}
.pp-ed-pagination .page-numbers.dots { border: 0; }

/* ---------------- LOCAL-ONLY card board ---------------- */
.pp-ed-board-title { font-family: var(--pp-font-display); color: var(--pp-navy); font-size: 24px; padding: 28px 0 6px; }
.pp-ed-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 14px 0 60px; align-items: start; }
.pp-ed-board-cell { border: 1px dashed var(--pp-border-hover); border-radius: 14px; padding: 16px; background: #FCFCFC; }
.pp-ed-board-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pp-ed-muted);
	margin-bottom: 14px;
}
@media (max-width: 1023px) { .pp-ed-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pp-ed-board { grid-template-columns: 1fr; } }

/* Mobile density (shared by hub + archives) */
@media (max-width: 640px) {
	.pp-ed-card--feature .pp-ed-card-t { font-size: 24px; }
	.pp-ed-card--feature.is-xl .pp-ed-card-t { font-size: 31px; }
}