/* Articles hub (/articles/) — 2026-09-06, Lane 4 / CC-AD-PLATFORM redesign.
 * Loaded only on is_home() (see alexdesigns_articles_hub_enqueue() in functions.php).
 * Extends the shared .ad-artcard component (assets/css/theme.css) with card-size
 * variants rather than inventing a new card system, per ui-standards.md's
 * "extend shared components" rule. Breakpoints match this theme's existing tiers:
 * 680px (mobile, same as .ad-artcard's own stack breakpoint), 782px (WP's own
 * wp:columns stack point, reused so the sidebar/main split and the grid tier
 * agree), 960px (existing tablet tier used elsewhere in theme.css).
 */

/* ----- Header alignment fix (ui-standards §3) --------------------------------
 * Root cause: the header group's own layout is `{"type":"constrained"}` with no
 * wideSize override, so its un-aligned children (H1, paragraph) were centered by
 * WordPress at the theme's 720px contentSize *inside* the wide (1240px) group —
 * landing them ~260px right of the grid/columns below, which are marked
 * align="wide" directly and never get that inner re-centering. This mirrors the
 * exact fix theme.css already applies to .ad-section (line ~221) for the same
 * WP behavior, without pulling in .ad-section's padding-block (which would add
 * unwanted vertical space above the very first thing on the page). */
.ad-articles-header > :not(.alignfull):not(.alignwide) {
	margin-left: 0 !important;
	max-width: none !important;
}

/* ----- LATEST hero card (Level 1 — dominant) --------------------------------- */
.ad-artcard--hero {
	flex-direction: column;
	gap: 1.25rem;
	border-top: 0;
	padding: 0 0 1rem;
}
.ad-artcard--hero .ad-artcard__thumb {
	flex: none;
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
}
.ad-artcard--hero .ad-artcard__thumb svg,
.ad-artcard--hero .ad-artcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.ad-artcard--hero .ad-artcard__body h2 {
	font-size: clamp(1.6rem, 2.6vw, 2.15rem);
	line-height: 1.15;
}

/* ----- START HERE (Level 2 — medium, curated) -------------------------------- */
.ad-starthere {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.25rem;
}
.ad-starthere .ad-artcard--feature {
	flex-direction: column;
	gap: 0.75rem;
	border-top: 0;
	padding: 0;
	min-width: 0;
}
.ad-starthere .ad-artcard--feature .ad-artcard__thumb {
	flex: none;
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
}
.ad-starthere .ad-artcard--feature .ad-artcard__thumb svg,
.ad-starthere .ad-artcard--feature .ad-artcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
@media (max-width: 960px) {
	.ad-starthere { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.ad-starthere { grid-template-columns: 1fr; }
}

/* ----- ALL ARTICLES library grid (Level 3 — standard grid) ------------------- */
.ad-articles-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 1.75rem;
}
/* ui-standards §4: grid items get the same implicit min-width:auto overflow risk as
 * flex items (a long unbroken string can push the column wider than its track). */
.ad-articles-grid .wp-block-post-template > * {
	min-width: 0;
}
.ad-articles-grid .ad-artcard {
	flex-direction: column;
	gap: 0.75rem;
	border-top: 0;
	padding: 0;
	min-width: 0;
}
.ad-articles-grid .ad-artcard__thumb {
	flex: none;
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
}
.ad-articles-grid .ad-artcard__thumb svg,
.ad-articles-grid .ad-artcard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
@media (max-width: 960px) {
	.ad-articles-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.ad-articles-grid .wp-block-post-template { grid-template-columns: 1fr; }
}
/* JS-filtered-out cards (search/capability) — hidden, not removed, so pagination
 * links and crawlers still see every card in the markup. */
.ad-articles-grid .wp-block-post[hidden] { display: none; }

/* ----- Toolbar: search + capability filter + sort ---------------------------- */
.ad-articles-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin: 1.25rem 0 1.75rem;
}
.ad-articles-toolbar .ad-search-form {
	flex: 1 1 320px;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ad-btn-radius, 8px);
	padding: 0.25rem 0.25rem 0.25rem 1rem;
}
.ad-articles-toolbar__label {
	display: block;
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.35rem;
}
.ad-articles-toolbar__sort {
	flex: none;
}
.ad-articles-toolbar__sort select {
	min-height: 44px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--ad-btn-radius, 8px);
	padding: 0.4rem 0.75rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
}
.ad-articles-toolbar__pills {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.ad-articles-pill {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: background var(--ad-ease, 0.15s ease), border-color var(--ad-ease, 0.15s ease);
}
.ad-articles-pill:hover,
.ad-articles-pill[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}
.ad-articles-empty {
	color: var(--wp--preset--color--muted);
	padding: 1.5rem 0;
}

/* ----- FIND WHAT YOU NEED rail ------------------------------------------------ */
.ad-findrail__group {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: var(--ad-line, 1px solid #e6e9ee);
}
.ad-findrail__group:first-of-type {
	margin-top: 1rem;
	padding-top: 0;
	border-top: 0;
}
.ad-findrail__h {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
	cursor: default;
}
.ad-findrail__disclosure > summary.ad-findrail__h {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
}
.ad-findrail__disclosure > summary.ad-findrail__h::-webkit-details-marker { display: none; }
.ad-findrail__disclosure > summary.ad-findrail__h::after {
	content: "+";
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.ad-findrail__disclosure[open] > summary.ad-findrail__h::after { content: "\2212"; }
.ad-findrail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.ad-findrail__list a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}
.ad-findrail__list a:hover { color: var(--wp--preset--color--primary); }

/* Rail never clips and is never sticky — content height varies with the number of
 * live capability/business-model pages, so a fixed height or position:sticky (the
 * behavior .ad-single__sidebar normally carries, reused here for its border/padding
 * only) would either clip or, on a short laptop viewport, run past the fold with no
 * natural stopping point (task spec §2's explicit constraint). */
.ad-single__sidebar.ad-findrail-col {
	position: static;
	top: auto;
	align-self: start;
	max-height: none;
	overflow: visible;
}

/* Mobile: the rail's own disclosures already collapse it; no extra treatment
 * needed beyond the section stacking WP's columns block already does. */
@media (max-width: 680px) {
	.ad-articles-toolbar { flex-direction: column; align-items: stretch; }
	.ad-articles-toolbar .ad-search-form { flex-basis: auto; }
}