/**
 * Pattern: News listing page  (patterns/news-featured.php + page body)
 *
 * Styles the News page's three content sections:
 *   1. kd-news-featured — horizontal featured-article block (image-left / content-right).
 *   2. kd-news-toolbar  — search pill + sort dropdown row between featured and grid.
 *   3. kd-news-grid     — the 3-col card grid on a white background (overrides the
 *      default purple-band kd-card-grid-section styles for the news context).
 *
 * Figma source: node 5:2534 (News wireframe).
 *
 * Featured article measurements (Figma 5:2534):
 *   Image:   ~594px wide in a ~1216px content area → ≈48.8% width, aspect ≈16/15,
 *            border-radius 20px.
 *   Content: date 14px Bold purple uppercase → heading 28px Bold purple →
 *            excerpt 18px Regular body-ink → "Read More" filled purple pill.
 *   Section: white background, rhythm margin above/below from the page owl selector.
 *   Gap:     image → content ~74px (Figma); --blg-space-xl (64px) is acceptable.
 *
 * News card overrides (Figma 5:2534 — grid cards):
 *   Border:  1px solid #D4D2E3 (neutral-300) — NOT the 4px purple default.
 *   Title:   28px Bold, purple (#5d5a88) — NOT dark ink.
 *   Image:   flush to card top (no 24px inset from default kd-card).
 *   "Read More": underlined purple text link below the excerpt.
 *
 * Section band:
 *   The grid section on the News page is white (no purple band). The purple
 *   kd-card-grid-section class is NOT applied here — the grid sits directly
 *   in the page content on a white bg with section-gap rhythm.
 *
 * A11y:
 *   Featured article: core/read-more renders <a class="wp-block-read-more"> — the
 *   only interactive element per article (title isLink:false). Styled as a filled
 *   pill button here so it is clearly a call-to-action.
 *   Grid cards: same whole-card title ::after overlay as the base kd-card rules
 *   (card-grid.css) — the "Read More" text link is NOT added to grid cards to avoid
 *   duplicate links. The underlined "Read More" in the Figma is the ::after overlay
 *   visual affordance, not a separate element.
 *
 * Column gap derivation (grid cards, Figma 5:2534):
 *   Card width 392px, 3 cards in ~1216px content → gap ≈ (1216-3×392)/2 = 20px.
 *   Using --blg-space-md (24px) matching the base card-grid.css convention.
 *
 * Responsive plan (derived from desktop design + mobile-spec.md per-pattern rules):
 *   1440px desktop:  featured = 2-col flex (image ≈48.8% / content ≈51.2%, 16/15), 3-col grid.
 *   ≤1023.98px tablet: featured image → full width above content (column), cropped to
 *                      3/2 landscape so the full-width photo reads as a banner, not a
 *                      ≈square block; 2-col grid.
 *   ≤767.98px mobile: featured stacked (3/2 image); "Read More" + "Load More" full-width;
 *                     search → full-width bar (icon left, fills — no clipped label);
 *                     toolbar stacks (search over sort); 1-col grid.
 *   ≤375px phone:    as mobile, with reduced button padding/label.
 *
 * Note: the news search input is excluded from the generic form styling in forms.css
 * (:not(.kd-news-search__input) on the input[type=search] + input:focus rules, mirroring
 * the .kd-nav-search / .wp-block-search__input exclusions) so this pattern fully owns its
 * pill — otherwise the global 2px border + 0.85rem padding double-bordered it to ~78px.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php glob).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. FEATURED ARTICLE
   ══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper — white bg, section rhythm handled by the page owl selector */
.kd-news-featured {
	background: var(--blg-color-base);
}

/* Reset the query/post-template wrappers — they must not inject layout gaps */
.kd-news-featured__query.wp-block-query {
	margin-block: 0 !important;
	width: 100%;
}

.kd-news-featured__list.wp-block-post-template {
	display: block !important; /* override any WP flex/grid injection */
	margin-block: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Article — 2-column flex: image | content. position:relative anchors the badge. */
.kd-news-featured__article.wp-block-group {
	position: relative;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: var(--blg-space-xl) !important; /* 64px image ↔ content */
}

/*
 * "Featured" badge — overlays the top-left of the featured image. Marks the hero
 * as the featured article so it reads as distinct from both the grid cards (no
 * badge) and the i-am-new-hope featured story (a lavender card, no badge). It is
 * absolutely positioned (out of flow) so it does not become a third flex item;
 * the article's top-left corner == the image's top-left corner at every breakpoint
 * (image is the left column on desktop, the top block when stacked).
 */
.kd-news-featured__badge {
	position: absolute;
	top: var(--blg-space-md); /* 24px */
	left: var(--blg-space-md);
	z-index: 1;
	margin: 0;
	padding: 0.375rem 0.875rem; /* 6px 14px */
	background: var(--blg-color-primary);
	color: var(--blg-color-base);
	font-family: var(--blg-font-heading);
	font-size: 0.75rem; /* 12px */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--blg-radius-pill);
	box-shadow: var(--blg-shadow-card);
}

/* Image column — Figma: 594px / ~1216px content ≈ 48.8% */
.kd-news-featured__image.wp-block-post-featured-image {
	flex: 0 0 48.8% !important;
	max-width: 48.8% !important;
	border-radius: var(--blg-radius-card) !important; /* 20px */
	overflow: hidden;
	line-height: 0; /* kill whitespace below inline img */
}

.kd-news-featured__image.wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 15;
	object-fit: cover;
	display: block;
	border-radius: var(--blg-radius-card); /* 20px */
}

/* Placeholder when no featured image is set */
.kd-news-featured__image.wp-block-post-featured-image:empty,
.kd-news-featured__image.wp-block-post-featured-image:not(:has(img)) {
	background-color: var(--blg-color-neutral-100);
	aspect-ratio: 16 / 15;
	border-radius: var(--blg-radius-card);
	min-height: 200px;
}

/* Content column — flex-grow fills remaining space */
.kd-news-featured__content.wp-block-group {
	flex: 1 1 0% !important;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0 !important;
}

/* Date — 14px Bold, purple, UPPERCASE, letter-spacing 0.25px */
.kd-news-featured__date.wp-block-post-date {
	font-family: var(--blg-font-body);
	font-size: 0.875rem !important; /* 14px */
	font-weight: 700 !important;
	line-height: 1.4;
	color: var(--blg-color-primary) !important;
	text-transform: uppercase;
	letter-spacing: 0.25px;
	margin: 0 0 var(--blg-space-xs); /* 8px → heading */
	text-decoration: none;
}

/* Heading — 28px Bold, purple */
.kd-news-featured__heading.wp-block-post-title {
	font-family: var(--blg-font-heading) !important;
	font-weight: 700 !important;
	font-size: clamp(1.375rem, 2.5vw, 1.75rem) !important; /* 22px → 28px */
	line-height: 1.35 !important;
	color: var(--blg-color-primary) !important;
	margin: 0 0 var(--blg-space-sm); /* 16px → excerpt */
	text-decoration: none;
}

/* Excerpt — 18px Regular, body-ink */
.kd-news-featured__excerpt.wp-block-post-excerpt {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body-lg) !important; /* 18px */
	font-weight: 400;
	line-height: 1.65;
	color: var(--blg-color-body);
	margin: 0 0 var(--blg-space-lg); /* 40px → button */
}

.kd-news-featured__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.kd-news-featured__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

/* "Read More" button — core/read-more renders a plain <a>; style as filled pill */
.kd-news-featured__cta.wp-block-read-more {
	display: inline-block;
	background-color: var(--blg-color-primary);
	color: var(--blg-color-base) !important;
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: 1.125rem; /* 18px */
	line-height: 1.4;
	text-decoration: none !important;
	padding: 0.875rem 2.25rem; /* ~14px 36px */
	border-radius: var(--blg-radius-pill);
	transition:
		background-color var(--blg-transition-fast),
		transform var(--blg-transition-fast);
}

.kd-news-featured__cta.wp-block-read-more:hover {
	background-color: var(--blg-color-secondary);
	transform: translateY(-1px);
}

.kd-news-featured__cta.wp-block-read-more:focus-visible {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: 2px;
	background-color: var(--blg-color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1b. SEARCH RESULTS HEADER
   Replaces the featured hero when a search is active (blg/news-featured pattern):
   "Results for “term”" + a back link to the unfiltered listing.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-news-results-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--blg-space-sm);
}

.kd-news-results-header__title {
	margin: 0;
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem); /* 24 → 32px */
	line-height: 1.25;
	color: var(--blg-color-contrast);
}

.kd-news-results-header__title span {
	color: var(--blg-color-primary);
}

.kd-news-results-header__clear {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: 700;
	color: var(--blg-color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.kd-news-results-header__clear:hover,
.kd-news-results-header__clear:focus-visible {
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SEARCH + SORT TOOLBAR
   Figma 5:2534: row between featured block and the card grid.
   Left: outlined pill "Search Articles" (magnifier + text).
   Right: "Sort by: Most recent ⌄" label + accessible select.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-news-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--blg-space-md);
	padding-block: var(--blg-space-sm) 0;
	flex-wrap: wrap;
}

/* ── Search form ──────────────────────────────────────────────────────────── */
/*
 * Figma 23:7562: outlined pill — 2px solid primary border, transparent/white
 * bg, fully pill-rounded. Content: purple magnifier icon (~24px) + "Search
 * Articles" in heading font bold ~20px, both centred inside the pill.
 * On focus/typing: left-aligned normal input behaviour.
 */

.kd-news-search {
	display: flex;
	align-items: center;
}

.kd-news-search__inner {
	display: flex;
	align-items: center;
	justify-content: center; /* centre icon + label when unfocused / empty */
	gap: 0.5rem;
	background: transparent;
	border: 2px solid var(--blg-color-primary);
	border-radius: var(--blg-radius-pill);
	padding: 0.625rem 1.5rem; /* ~10px 24px — pill proportions */
	transition:
		border-color var(--blg-transition-fast),
		box-shadow var(--blg-transition-fast);
}

/*
 * Keyboard focus indicator. The input itself is excluded from the global
 * input:focus ring (forms.css) — this wrapper carries the focus signal when the
 * input is focused. A border hue-swap alone is marginal for WCAG 1.4.11, so add a
 * distinct outline (follows the pill radius in modern browsers) + a stronger ring.
 */
.kd-news-search__inner:focus-within {
	border-color: var(--blg-color-secondary);
	box-shadow: 0 0 0 3px rgba(93, 90, 136, 0.3);
	outline: 2px solid var(--blg-color-secondary);
	outline-offset: 2px;
}

/* Magnifier icon — purple, ~24px, stroke = currentColor */
.kd-news-search__icon {
	flex-shrink: 0;
	width: 1.5rem; /* 24px — Figma spec */
	height: 1.5rem;
	color: var(--blg-color-primary);
}

/*
 * The input itself: heading font, bold, ~20px, purple — matches the Figma
 * label. Placeholder inherits font/colour so the resting state reads as the
 * design's purple bold pill. On :focus the caret appears and the user types
 * normally (text stays purple heading font but cursor aligns left).
 */
.kd-news-search__input {
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--blg-font-heading);
	font-size: 1.25rem; /* 20px — Figma ~20px bold label */
	font-weight: 700;
	color: var(--blg-color-primary);
	width: auto; /* shrinks to placeholder text width when empty */
	min-width: 0;
	max-width: 13rem; /* cap so the pill doesn't stretch unbounded on fill */
	line-height: 1.4;
}

/* Placeholder: same purple bold heading font — matches Figma resting state */
.kd-news-search__input::placeholder {
	color: var(--blg-color-primary);
	font-family: var(--blg-font-heading);
	font-weight: 700;
	opacity: 1; /* Firefox resets opacity on placeholders */
}

.kd-news-search__submit,
.kd-news-sort__submit {
	/* Visually hidden — no-JS fallback; form submits on enter or click */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Sort form ────────────────────────────────────────────────────────────── */

.kd-news-sort {
	display: flex;
	align-items: center;
}

.kd-news-sort__label {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	color: var(--blg-color-body);
	margin-right: 0.375rem;
	white-space: nowrap;
}

.kd-news-sort__select {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: 700;
	color: var(--blg-color-primary);
	cursor: pointer;
	padding-right: 1.25rem; /* room for the chevron */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235d5a88' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
}

.kd-news-sort__select:focus-visible {
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. NEWS CARD GRID OVERRIDES
   Scoped to .kd-news-grid — white bg section, no purple band.
   Overrides the base kd-card appearance for the News context.
   ══════════════════════════════════════════════════════════════════════════ */

/* White section wrapper — sits in page content, gets section-gap rhythm */
.kd-news-grid {
	background: var(--blg-color-base);
}

/* Remove the purple-band padding from the grid section */
.kd-news-grid.kd-card-grid-section {
	padding-block: 0 !important;
	background: transparent !important;
}

/* Override card border: thin neutral line instead of 4px purple */
.kd-news-grid .kd-card {
	border: 1px solid var(--blg-color-neutral-300) !important;
	box-shadow: var(--blg-shadow-card) !important; /* subtle lift */
}

/* Image: 24px inset, fully rounded — sits inside the padded card (Figma
   2192:1926), NOT flush. Inherits the base .kd-card image inset (margin
   1.5rem + 10px radius); no override needed. */

/* "Read More" cue pinned to the bottom of each card (Figma 2192:1926). The whole
   card is already one link (the title ::after overlay), so this is a decorative
   visual cue — not a second link — which keeps the card's accessible name = the
   title. margin-top:auto holds it at the bottom regardless of excerpt length so
   it aligns across cards of different heights. */
.kd-news-grid .kd-card__body::after {
	content: "Read More";
	margin-top: auto;
	padding-top: var(--blg-space-md); /* 24px above the link */
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body); /* 16px */
	font-weight: 700;
	color: var(--blg-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Read More darkens with the card hover/focus (matches the title lift) */
.kd-news-grid .kd-card:hover .kd-card__body::after,
.kd-news-grid .kd-card:focus-within .kd-card__body::after {
	color: var(--blg-color-secondary);
}

/* Title: purple (not dark ink) */
.kd-news-grid .kd-card .kd-card__heading,
.kd-news-grid .kd-card .wp-block-post-title {
	color: var(--blg-color-primary) !important;
	font-size: 1.75rem !important; /* 28px — matches Figma Display 4 */
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

/* Title link inherits purple */
.kd-news-grid .kd-card .wp-block-post-title a {
	color: var(--blg-color-primary) !important;
}

/* Hover: title stays purple (already is — darken to secondary on hover) */
.kd-news-grid .kd-card:hover .kd-card__heading,
.kd-news-grid .kd-card:hover .wp-block-post-title,
.kd-news-grid .kd-card:focus-within .kd-card__heading,
.kd-news-grid .kd-card:focus-within .wp-block-post-title {
	color: var(--blg-color-secondary) !important;
}

/* Section heading — dark ink (not white — no purple band) */
.kd-news-grid .kd-card-grid-section__heading {
	color: var(--blg-color-contrast) !important;
}

/* Grid section footer button — styled for light bg */
.kd-news-grid .kd-card-grid-section__footer-btn {
	margin-top: var(--blg-space-lg) !important;
}

/* No-results message — shown in place of the grid + Load More when a search
   matches nothing (injected by inc/card-load-more.php). */
.kd-news-no-results {
	margin: var(--blg-space-lg) 0 0;
	text-align: center;
	font-size: var(--blg-size-body-lg);
	color: var(--blg-color-body);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. LOAD MORE BUTTON
   Figma 23:7549: centred filled-purple pill "Load More" — primary button style.
   Injected below the card grid by inc/card-load-more.php render_block filter.
   Generic classes (.kd-load-more-wrap / .kd-load-more-btn) are used by all
   Load More grids; future archive grids share these styles automatically.
   ══════════════════════════════════════════════════════════════════════════ */

.kd-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--blg-space-lg); /* 40px — rhythm above the button */
}

.kd-load-more-btn {
	/* Primary filled-purple pill — mirrors global .kd-btn / .wp-block-button__link */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: var(--blg-btn-bg); /* var(--blg-color-primary) */
	color: var(--blg-btn-fg); /* white */
	border: 2px solid var(--blg-btn-bg);
	border-radius: var(--blg-radius-pill);
	font-family: var(--blg-font-heading);
	font-size: var(--blg-size-btn);
	font-weight: 700;
	line-height: 1.4;
	padding: 0.875rem 2.5rem; /* matches primary button rhythm */
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color var(--blg-transition-fast),
		border-color var(--blg-transition-fast),
		transform var(--blg-transition-fast);
}

.kd-load-more-btn:hover {
	background-color: var(--blg-btn-bg-hover);
	border-color: var(--blg-btn-bg-hover);
	transform: translateY(-1px);
}

.kd-load-more-btn:focus-visible {
	outline: 3px solid var(--blg-color-primary);
	outline-offset: 3px;
	background-color: var(--blg-btn-bg-hover);
	border-color: var(--blg-btn-bg-hover);
}

/* Hidden state: PHP sets [hidden]; JS removes it (progressive enhancement). */
.kd-load-more-wrap[hidden],
.kd-load-more-wrap.kd-hidden {
	display: none;
}

/* Loading state — spinner label replaces text via JS */
.kd-load-more-btn[aria-busy="true"] {
	opacity: 0.7;
	cursor: wait;
}

/* Reduced motion — no transform on hover */
@media (prefers-reduced-motion: reduce) {
	.kd-load-more-btn {
		transition:
			background-color var(--blg-transition-fast),
			border-color var(--blg-transition-fast);
	}

	.kd-load-more-btn:hover {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1023.98px) — featured stacks to column ───────────────────── */

@media (max-width: 1023.98px) {
	.kd-news-featured__article.wp-block-group {
		flex-direction: column !important;
		gap: var(--blg-space-lg) !important; /* 40px */
	}

	.kd-news-featured__image.wp-block-post-featured-image {
		flex: none !important;
		max-width: 100% !important;
		width: 100%;
	}

	/*
	 * When stacked, the image spans the full content width. The desktop 16/15
	 * (near-square) ratio becomes a huge block full-width (≈square = ≈700px tall
	 * at tablet), so crop to a 3/2 landscape banner — keeps the featured photo
	 * prominent without dominating the first screen. Overrides both the block's
	 * inline aspectRatio (on the figure) and the CSS aspect on the img.
	 */
	.kd-news-featured__image.wp-block-post-featured-image,
	.kd-news-featured__image.wp-block-post-featured-image img {
		aspect-ratio: 3 / 2 !important;
	}

	.kd-news-featured__content.wp-block-group {
		width: 100%;
	}
}

/* ── Mobile (≤767.98px) ─────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
	.kd-news-featured__article.wp-block-group {
		gap: var(--blg-space-md) !important; /* 24px */
	}

	/* Tighter badge inset on the smaller stacked banner image */
	.kd-news-featured__badge {
		top: var(--blg-space-sm); /* 16px */
		left: var(--blg-space-sm);
	}

	.kd-news-featured__excerpt.wp-block-post-excerpt {
		margin-bottom: var(--blg-space-md); /* 24px */
	}

	/*
	 * "Read More" → full-width tap target on mobile (mobile-spec: stacked CTAs go
	 * full-width, min-height 48px). The content column is align-items:flex-start,
	 * so a block button fills the content width.
	 */
	.kd-news-featured__cta.wp-block-read-more {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* Toolbar: stack search + sort vertically */
	.kd-news-toolbar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--blg-space-sm);
	}

	/*
	 * Search → full-width bar on mobile (mobile-spec: inputs full-width). The
	 * desktop centred pill clipped "Search Articles" once it was capped narrow;
	 * a full-width bar (icon left, input fills) shows the full label and gives a
	 * proper tap target. justify-content:flex-start so the icon + input align left.
	 */
	.kd-news-search {
		width: 100%;
	}

	.kd-news-search__inner {
		width: 100%;
		justify-content: flex-start;
	}

	.kd-news-search__input {
		flex: 1 1 auto;
		max-width: none;
		min-width: 0;
	}

	/* Load More → full-width on mobile (tap-friendly; mobile-spec full-width) */
	.kd-load-more-btn {
		width: 100%;
	}
}

/* ── Small phone (≤375px) ───────────────────────────────────────────────── */

@media (max-width: 375px) {
	/* Full-width buttons keep their fill; trim the inner padding + label on tiny screens */
	.kd-news-featured__cta.wp-block-read-more {
		padding: 0.75rem 1.75rem;
		font-size: 1rem;
	}

	.kd-load-more-btn {
		padding: 0.75rem 1.75rem;
		font-size: 1rem;
	}
}