/**
 * UP6 — Global Styles
 *
 * Supplements theme.json tokens with properties that cannot be
 * expressed in the JSON schema (gradients on pseudo-elements,
 * custom radius scale, transitions, etc.).
 *
 * @package UP6
 */

/* ── Custom Properties (derived from theme.json tokens) ───────── */
:root {
	/* Gradients */
	--up6-grad-deep:     linear-gradient(135deg, var(--wp--preset--color--primary-deep-blue) 0%, var(--wp--preset--color--secondary-blue) 50%, var(--wp--preset--color--tertiary-blue) 100%);
	--up6-grad-header:   linear-gradient(160deg, #0F2B3E 0%, var(--wp--preset--color--primary-deep-blue) 40%, var(--wp--preset--color--secondary-blue) 100%);
	--up6-grad-accent:   linear-gradient(135deg, var(--wp--preset--color--secondary-blue) 0%, var(--wp--preset--color--tertiary-blue) 100%);
	--up6-grad-warm:     linear-gradient(135deg, var(--wp--preset--color--neutral-beige) 0%, #d4c8bb 50%, #e0d6cb 100%);
	--up6-grad-red:      linear-gradient(135deg, var(--wp--preset--color--accent-red) 0%, #d4453a 100%);
	--up6-grad-tag:      linear-gradient(135deg, var(--wp--preset--color--neutral-beige) 0%, #d4c8bb 100%);
	--up6-grad-footer:   linear-gradient(160deg, #0F2B3E 0%, var(--wp--preset--color--primary-deep-blue) 60%, #1e4460 100%);

	/* Radius scale */
	--up6-radius-sm:   var(--wp--custom--radius--sm, 0.5rem);
	--up6-radius-md:   var(--wp--custom--radius--md, 0.75rem);
	--up6-radius-lg:   var(--wp--custom--radius--lg, 1rem);
	--up6-radius-xl:   var(--wp--custom--radius--xl, 1.25rem);
	--up6-radius-pill:  9999px;

	/* Card tokens */
	--up6-card-radius:   var(--wp--custom--card--radius, 1rem);
	--up6-card-padding:  var(--wp--custom--card--padding, 1.25rem);
	--up6-card-shadow:   var(--wp--custom--card--shadow, 0 2px 8px rgba(27,60,83,0.07), 0 0.5px 2px rgba(27,60,83,0.04));
	--up6-card-shadow-hover: 0 8px 24px rgba(27,60,83,0.12), 0 2px 6px rgba(27,60,83,0.06);

	/* Transition */
	--up6-ease: var(--wp--custom--transition--default, 180ms ease-in-out);
}

/* ── Skip Link ──────────────────────────────────────────────────── */
/* WCAG 2.4.1 — skip link must be visible on focus */
.skip-link,
.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
}
.skip-link {
	padding: 0.75rem 1.25rem;
	background: var(--up6-grad-deep);
	color: var(--wp--preset--color--surface-white);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--metadata-text);
	text-decoration: none;
	border-radius: 0 0 var(--up6-radius-md) var(--up6-radius-md);
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 1.25rem;
	top: 0;
	outline: 3px solid var(--wp--preset--color--surface-white);
	outline-offset: 2px;
}

/* ── Focus Ring (global fallback) ───────────────────────────────────
   WCAG 1.4.11 Non-text Contrast: focus indicator needs 3:1 against
   adjacent colours on ALL backgrounds (light and dark).
   Problem: secondary-blue (#2E5871) = 1.51:1 on dark header background.
   Solution: dual-layer ring — white offset inner ring + secondary-blue outer.
   • On dark bg: white inner ring = 14.63:1 ✅
   • On light bg: secondary-blue outer ring = 7.63:1 ✅
   Both layers together meet WCAG 1.4.11 in every context.          ── */
*:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary-blue);
	outline-offset: 3px;
	border-radius: var(--up6-radius-sm);
	box-shadow: 0 0 0 5px rgba(255,255,255,0.85);
}

/* ── HEADER ══════════════════════════════════════════════════════
   TT5 CONFLICT AUDIT — fixes applied:
   [C1] theme.json styles.blocks.core/navigation sets fontSize +
        fontWeight as inline style on <nav> — beats class rules.
        Fix: !important on font-size/weight in nav item selectors.
   [C2] WP block CSS sets flex-wrap:wrap !important on
        .wp-block-navigation and .wp-block-navigation__container.
        Fix: flex-wrap:nowrap !important on both.
   [C3] .is-layout-flex groups get gap from --wp--style--block-gap.
        We set blockGap:"0" in block attrs (outputs wp-container-N
        inline style gap:0) AND override in CSS with !important.
   [C4] styles.elements.link color (secondary-blue) applies to all
        nav <a> via :where() — low specificity, our class beats it.
   [C5] .is-layout-constrained groups inherit root padding vars.
        We use layout:default on all outer rows — no constraint
        wrapper generated, so no padding inheritance.
   ═══════════════════════════════════════════════════════════════ */

/* Header shell — solid deep blue, full width */
.wp-block-template-part.site-header-part,
.up6-site-header {
	background: var(--wp--preset--color--primary-deep-blue) !important;
}

/* ── Brand row ───────────────────────────────────────────────────
   Outer: no constraint, no padding. Inner: flex row, 72rem cap. */
.up6-header-top {
	background: transparent;
}
/* [C3] Override is-layout-flex gap — also set in blockGap attr */
.up6-header-top-inner.wp-block-group,
.up6-header-top-inner {
	max-width: 72rem;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0.9rem 1.5rem !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1.5rem !important;
	box-sizing: border-box;
}

/* ── Site identity ───────────────────────────────────────────── */
.up6-header-identity.wp-block-group {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
}
.up6-site-logo .wp-block-site-logo,
.up6-site-logo figure {
	margin: 0;
	flex-shrink: 0;
}
.up6-site-logo img {
	display: block;
	width: 48px;
	height: auto;
	max-height: 48px;
	object-fit: contain;
}
.up6-site-identity-text.wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
.up6-site-identity-text .wp-block-site-title {
	line-height: 1.15;
	margin: 0;
}
.up6-site-identity-text .wp-block-site-title a {
	color: var(--wp--preset--color--surface-white) !important;
	text-decoration: none;
}
.up6-site-identity-text .wp-block-site-tagline {
	margin: 0;
	line-height: 1.3;
	opacity: 0.7;
	font-style: italic;
	color: var(--wp--preset--color--text-on-dark);
}
@media (max-width: 480px) {
	.up6-site-identity-text .wp-block-site-tagline { display: none; }
}

/* ── Search bar ──────────────────────────────────────────────────
   Semi-transparent pill with red button. Overrides TT5's
   theme.json core/search border-radius (we want pill not just sm). */
.up6-header-search .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: var(--up6-radius-pill) !important;
	overflow: hidden;
	transition: border-color 0.2s;
}
.up6-header-search .wp-block-search__inside-wrapper:focus-within {
	border-color: rgba(255, 255, 255, 0.5) !important;
}
.up6-header-search .wp-block-search__input {
	background: transparent !important;
	color: #fff !important;
	border: none !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.875rem !important;
	box-shadow: none !important;
}
.up6-header-search .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.up6-header-search .wp-block-search__button {
	background: var(--wp--preset--color--accent-red) !important;
	border: none !important;
	border-radius: 0 !important;
	color: #fff !important;
	padding: 0.5rem 0.9rem !important;
	min-height: unset !important;
}

/* ── Shared nav inner constrainer ────────────────────────────────
   Both nav rows use .up6-nav-inner to cap content at 72rem.
   [C3] !important on padding beats is-layout-flex gap injection. */
.up6-nav-inner.wp-block-group,
.up6-nav-inner {
	max-width: 72rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	gap: 0 !important;
}

/* ── Main nav row ────────────────────────────────────────────────
   rgba(0,0,0,.18) tint — matches .header-nav-main in mockup. */
.up6-main-nav-row {
	background: rgba(0, 0, 0, 0.18);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* [C2] flex-wrap:wrap !important from WP block CSS */
.up6-main-nav-row .wp-block-navigation.wp-block-navigation,
.up6-main-nav-row .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	gap: 0 !important;
	padding: 0 !important;
}
/* [C1] font-size/weight set as inline style on <nav> from theme.json.
   Target the content element directly and use !important. */
.up6-primary-nav .wp-block-navigation-item__content {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 2.75rem;
	padding: 0.6rem 0.9rem !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.07em !important;
	text-transform: uppercase !important;
	color: rgba(240, 240, 240, 0.75) !important;
	transition: color 0.15s;
	position: relative;
	text-decoration: none !important;
}
.up6-primary-nav .wp-block-navigation-item__content:hover {
	color: #fff !important;
}
/* Active page — red underline */
.up6-primary-nav .wp-block-navigation-item.current-menu-item
	> .wp-block-navigation-item__content {
	color: #fff !important;
	border-bottom: 2px solid var(--wp--preset--color--accent-red);
	padding-bottom: calc(0.6rem - 2px) !important;
}

/* ── Secondary nav row ───────────────────────────────────────────
   rgba(0,0,0,.28) — matches .header-nav-secondary-bar in mockup. */
.up6-secondary-nav-row {
	background: rgba(0, 0, 0, 0.28);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.up6-secondary-nav-inner.wp-block-group {
	align-items: center !important;
}
/* [C2] same flex-wrap fix */
.up6-secondary-nav-row .wp-block-navigation.wp-block-navigation,
.up6-secondary-nav-row .wp-block-navigation__container {
	flex-wrap: nowrap !important;
	gap: 0 !important;
	padding: 0 !important;
}
/* [C1] utility link sizing */
.up6-utility-links .wp-block-navigation-item__content {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 2rem;
	padding: 0.4rem 0.85rem !important;
	font-size: 0.68rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	color: rgba(240, 240, 240, 0.65) !important;
	transition: color 0.15s;
	text-decoration: none !important;
}
.up6-utility-links .wp-block-navigation-item__content:hover {
	color: #fff !important;
}
/* Date string on the right */
.up6-header-date {
	font-size: 0.68rem;
	color: rgba(240, 240, 240, 0.45);
	letter-spacing: 0.03em;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0 0.85rem;
}

/* ── Mobile: hide secondary nav row, keep search ─────────────── */
@media (max-width: 37.49rem) {
	.up6-secondary-nav-row { display: none; }
}

/* ── Focus rings — dark header context ───────────────────────── */
.up6-site-header .wp-block-navigation-item a:focus-visible,
.up6-main-nav-row .wp-block-navigation-item a:focus-visible,
.up6-secondary-nav-row .wp-block-navigation-item a:focus-visible,
.up6-site-header button:focus-visible {
	outline: 3px solid var(--wp--preset--color--surface-white) !important;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--secondary-blue);
	border-radius: var(--up6-radius-sm);
}

/* ── Footer ─────────────────────────────────────────────────────── */
.wp-block-template-part.site-footer-part,
.up6-site-footer {
	background: var(--up6-grad-footer);
}
.up6-footer-accent-bar {
	height: 3px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--secondary-blue),
		var(--wp--preset--color--accent-red),
		var(--wp--preset--color--neutral-beige),
		var(--wp--preset--color--accent-red),
		var(--wp--preset--color--secondary-blue)
	);
	border-radius: var(--up6-radius-pill);
}

/* ── Section Divider ────────────────────────────────────────────── */
.up6-section-divider,
hr.wp-block-separator.up6-section-divider {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(79,111,134,0.15), transparent);
	margin-block: 2rem;
}

/* ── Section Heading Underline ──────────────────────────────────── */
.up6-section-heading {
	position: relative;
	display: inline-block;
	padding-bottom: 0.5rem;
}
.up6-section-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--up6-grad-deep);
	border-radius: var(--up6-radius-pill);
}

/* ── Hero Card ──────────────────────────────────────────────────── */
.up6-hero-card {
	position: relative;
	border-radius: var(--up6-radius-xl);
	overflow: hidden;
	box-shadow: var(--up6-card-shadow);
}
.up6-hero-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	filter: brightness(0.55);
}
.up6-hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/* Mobile-first: tighter padding conserves screen height on phones */
	padding: 1.25rem 1rem 1rem;
	background: linear-gradient(to top,
		rgba(15,43,62,0.97) 0%,
		rgba(27,60,83,0.6) 50%,
		transparent 100%
	);
	/* FIX: constrain overlay to bottom 80% of card — prevents long titles from
	   overflowing upward past the card's top edge and being clipped by overflow:hidden */
	max-height: 80%;
	overflow: hidden;
}
@media (min-width: 48rem) {
	.up6-hero-overlay {
		padding: 3rem 2rem 2rem;
	}
}

/* Line-clamp hero title — caps at 3 lines so the overlay never grows too tall.
   Long Malay titles are the main cause of the overflow. */
.up6-hero-overlay .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hide excerpt inside hero overlay — the hero is image + title + date only.
   The full excerpt shown over a 16:9 image causes the overlay to grow too tall
   and competes with the title for reading attention.
   Excerpt is shown on archive/search card pages instead. */
.up6-hero-overlay .wp-block-post-excerpt {
	display: none;
}

/* ── Post Card ──────────────────────────────────────────────────── */
.up6-post-card {
	background: var(--wp--preset--color--surface-white);
	border-radius: var(--up6-card-radius);
	overflow: hidden;
	box-shadow: var(--up6-card-shadow);
	border: 1px solid rgba(79,111,134,0.06);
	transition: box-shadow var(--up6-ease), transform var(--up6-ease);
}
.up6-post-card:hover {
	box-shadow: var(--up6-card-shadow-hover);
	transform: translateY(-3px);
}
.up6-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

/* ── Sidebar Cards ──────────────────────────────────────────────── */
.up6-sidebar-card {
	border-radius: var(--up6-card-radius);
	padding: var(--up6-card-padding);
	box-shadow: var(--up6-card-shadow);
}
.up6-sidebar-card--accent {
	background: var(--up6-grad-accent);
	color: var(--wp--preset--color--text-on-dark);
	border: none;
}

/* ── Thumbnails ─────────────────────────────────────────────────── */
.up6-thumb-square {
	border-radius: var(--up6-radius-md);
	aspect-ratio: 1;
	object-fit: cover;
}
.up6-thumb-wide {
	border-radius: var(--up6-radius-md);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.wp-block-query-pagination {
	gap: 0.5rem;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--up6-radius-md);
	font-size: var(--wp--preset--font-size--metadata-text);
	font-weight: 600;
	border: 1px solid rgba(79,111,134,0.12);
	transition: all var(--up6-ease);
}
.wp-block-query-pagination-numbers a:hover {
	background: var(--up6-grad-deep);
	color: var(--wp--preset--color--surface-white);
	border-color: transparent;
	transform: translateY(-1px);
}
.wp-block-query-pagination-numbers .current {
	background: var(--up6-grad-deep);
	color: var(--wp--preset--color--surface-white);
	border-color: transparent;
}

/* ── Responsive Grid ────────────────────────────────────────────── */
/* Note: up6-section-grid is applied to wp:post-template, which WordPress
   renders with its own is-layout-flow / is-layout-flex classes. We use the
   combined selector .wp-block-post-template.up6-section-grid to win the
   specificity race and guarantee the grid display is applied. */
.wp-block-post-template.up6-section-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 48rem) {
	.wp-block-post-template.up6-section-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 64rem) {
	.wp-block-post-template.up6-section-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.up6-home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* Hide sidebar on mobile — it has no column to sit in below 768px */
.up6-home-sidebar {
	display: none;
}
@media (min-width: 48rem) {
	.up6-home-grid {
		grid-template-columns: 1fr 22rem;
	}
	.up6-home-sidebar {
		display: flex; /* restores the flex orientation set on the block */
	}
}
@media (min-width: 64rem) {
	.up6-home-grid {
		grid-template-columns: 1fr 24rem;
	}
}

/* ── Red Accent Touches ─────────────────────────────────────────── */

/* Dot before featured story kicker text */
.up6-featured-stories .wp-block-post-terms::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-red);
	margin-right: 0.35rem;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Active nav link uses red underline */
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	width: 100%;
	background: var(--up6-grad-red);
}

/* Section heading red leading dot */
.up6-section-heading::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-red);
	margin-right: 0.5rem;
	vertical-align: middle;
}

/* Trending number highlight — first item uses red */
.up6-trending-list li:first-child::before {
	color: var(--wp--preset--color--accent-red);
	opacity: 0.8;
}

/* Tag chip hover — subtle red variant for first tag */
.up6-tag-chips .wp-block-post-terms__link:first-child:hover,
.up6-tag-chips a:first-child:hover {
	background: var(--up6-grad-red);
}

/* Article abstract left border includes red stop */
.up6-article-abstract {
	background: var(--up6-grad-warm);
	border-radius: var(--up6-radius-lg);
	border-image: linear-gradient(
		to bottom,
		var(--wp--preset--color--accent-red),
		var(--wp--preset--color--primary-deep-blue)
	) 1;
}

/* ── Reduced Motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ═══════════════════════════════════════════════════════════════
 * Mobile-First Improvements — v1.0.5
 *
 * All rules below are mobile-first: base styles target small
 * screens; min-width media queries progressively enhance for
 * larger viewports. No existing desktop behaviour is removed.
 * ═══════════════════════════════════════════════════════════════ */

/* ── Issue 1: Header search — hide on mobile ────────────────────
   The brand row uses flexWrap:nowrap. On screens narrower than
   600px the search bar (min ~220px) combined with the logo+title
   (~150px) exceeds the available viewport width. Hide the search
   bar on mobile; the hamburger nav is the primary discovery path.
   Revealed at ≥600px where there is room for both. */
@media (max-width: 37.49rem) {
	.up6-header-search,
	.wp-block-search.up6-header-search {
		display: none;
	}
}

/* ── Issue 4: Article body — overflow protection ────────────────
   Prevents long URLs, unbreakable words, and Malay compound words
   from causing horizontal scroll on narrow viewports.
   Also covers inline code that doesn't use a block wrapper. */
.up6-article-body,
.wp-block-post-content {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Wide elements inside article content scroll horizontally
   rather than overflowing the layout. */
.up6-article-body .wp-block-table,
.up6-article-body table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	display: block;
	max-width: 100%;
}
.up6-article-body pre,
.up6-article-body .wp-block-code {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Inline code: wrap rather than truncate */
.up6-article-body code {
	word-break: break-all;
}

/* ── Issue 5: Card-list — flex child overflow protection ─────────
   The nowrap flex row inside .is-style-card-list has a fixed-width
   thumbnail figure. The text group sibling needs min-width:0 to
   allow its content to shrink below its intrinsic size, preventing
   overflow on 320–360px viewports. flex:1 fills available space. */
.is-style-card-list > .wp-block-group {
	min-width: 0;
	flex: 1 1 0;
}

/* ── Issue 7: Pagination — allow wrapping on narrow screens ──────
   A row of 5+ page numbers overflows on 320px. flex-wrap:wrap
   allows numbers to reflow onto a second line cleanly. */
.wp-block-query-pagination {
	flex-wrap: wrap;
}

/* ── Issue 8: Footer nav links — tap target padding ─────────────
   Footer navigation items are stacked vertically on mobile and
   need vertical padding to meet the 44px minimum touch target. */
.up6-site-footer .wp-block-navigation-item__content {
	padding-block: 0.375rem;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
}

/* ── Issue 9: Images in article body — size safety net ──────────
   Belt-and-suspenders: ensure all images inside post content
   never exceed their container on mobile. */
.up6-article-body img,
.wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* ── Issue 10: Embeds — fluid on mobile ─────────────────────────
   iframes with hardcoded width/height attributes overflow narrow
   containers. max-width:100% constrains them without distorting. */
.up6-article-body iframe,
.wp-block-post-content iframe,
.wp-block-embed__wrapper iframe {
	max-width: 100%;
}

/* ── Issue 11: Breaking news banner — allow wrap on 320px ────────
   The badge + headline share a nowrap flex row. On 320px the
   headline can overflow. Allow wrapping so the headline drops
   below the badge gracefully. */
.up6-breaking-banner > .wp-block-group {
	flex-wrap: wrap;
	row-gap: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
 * Core Web Vitals Improvements — v1.0.7
 * ═══════════════════════════════════════════════════════════════ */

/* ── CLS: Reserve exact aspect-ratio for hero before image loads ─
   The hero card uses overflow:hidden + absolute overlay. Without
   an explicit height on the container, the page can shift while
   the featured image downloads. Setting aspect-ratio on the
   container ensures the space is reserved immediately.
   CLS target: eliminate hero-induced layout shift.              */
.up6-hero-card > .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* ── CLS: Thumbnail images in list cards — reserve space ────────
   The 7.5rem thumbnail in .is-style-card-list has a fixed width
   but no explicit height. Set aspect-ratio so the row height is
   stable before the thumbnail loads.                            */
.is-style-card-list .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	flex-shrink: 0;
	width: 7.5rem;
}

/* ── INP: Reduce paint scope on post cards ──────────────────────
   contain:layout+style limits how far the browser propagates
   layout/style recalculation when a card is hovered. Prevents
   the hover transform from triggering a full-page layout pass.
   Safe: cards are self-contained visual units.                  */
.up6-post-card {
	contain: layout style;
}

/* ── LCP/rendering: content-visibility on below-fold sections ───
   content-visibility:auto skips rendering of off-screen sections
   until the user scrolls near them. The browser still calculates
   their intrinsic size (via contain-intrinsic-size) so the
   scrollbar and page height remain accurate.
   Applied to the card grid section and "Most Recent" list only —
   never to the hero or header which are always above fold.
   Expected LCP improvement: ~150–400ms by reducing initial
   rendering workload on the main thread.                        */
.up6-section-grid-query,
.up6-latest-list {
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;
}

/* ── CLS: Sidebar content-visibility ────────────────────────────
   The sidebar is off-screen on mobile. Skip rendering until needed. */
.up6-home-sidebar {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

/* ── LCP: Ensure the hero image is never lazy-loaded ────────────
   Belt-and-suspenders: override any accidental lazy-load on
   the LCP hero image. The PHP filter handles this too, but this
   CSS ensures the image displays without delay if somehow flagged. */
.up6-hero-card .wp-block-post-featured-image img {
	content-visibility: visible;
}