/**
 * News/Journal — shared stylesheet for both the listing page
 * (templates/home.html — WordPress's own "Posts page" template slot, bound
 * to page id 15540 / slug "mag" via Settings → Reading, NOT a
 * page-{slug}.html like About/Contact/PRO) and individual articles
 * (templates/single.html, any post type "post"). Styles scoped to
 * .wow-news-page, present on both templates' <main>, so nothing here leaks
 * onto/collides with the rest of the site. Loaded conditionally (see
 * functions.php, is_home() || is_singular('post')) — never sitewide. Same
 * structural conventions as the About/PRO pages (assets/css/about-page.css,
 * pro-page.css): page-scoped stylesheet, the theme's existing design tokens
 * (theme.json color/font presets) rather than redeclaring its own.
 *
 * The listing page opens straight into the article rows, no hero (matches
 * About's "no body.wow-has-hero" choice — see the reference mockup it was
 * built from). Single articles are the opposite: they DO get the floating
 * header treatment, over a full-bleed hero built from .wow-archive-hero-v2
 * (style.css) — the same component the product category archives use, not
 * duplicated here — see is_singular('post') in the wow-has-hero body_class
 * filter and [wow_news_single_hero] in functions.php.
 *
 * Listing layout: full-bleed alternating rows, each a 60/40 split — real
 * photo left, solid accent-colour panel (category / title / excerpt / Read
 * Article) right — one row per post from [wow_news_grid] (functions.php).
 * The reference mockup showed image-left/panel-right on every row (not
 * alternating sides); kept it that way here for fidelity — flip
 * .wow-news-card:nth-child(even) with `direction: rtl` (see
 * .wow-about-craft's reversed variant in about-page.css for the exact
 * pattern) if alternating sides is wanted later.
 */

.wow-news-page {
	background: #fff;
}

.wow-news-page * {
	box-sizing: border-box;
}

.wow-news-page img {
	max-width: 100%;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.wow-news-grid {
	display: flex;
	flex-direction: column;
}

.wow-news-card {
	display: grid;
	grid-template-columns: 3fr 2fr;
}

.wow-news-card__media {
	/* No height/aspect-ratio here on purpose — the row's height should come
	   entirely from .wow-news-card__panel's own content + padding. The link
	   and image inside are position:absolute (below), which takes them out
	   of normal flow entirely, so they contribute nothing when the browser
	   measures this column's intrinsic height — a plain img with
	   height:100% would otherwise have been measured off its own natural
	   pixel dimensions (percentage heights can't resolve against an
	   indeterminate grid row), letting a taller/more-portrait photo blow
	   that one row up past its neighbours. With nothing to measure, this
	   column just stretches (grid's default align-items:stretch) to match
	   whatever height the panel column ends up needing, and the absolutely
	   positioned image then fills that via inset:0 + object-fit:cover. */
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--black);
}

.wow-news-card__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

.wow-news-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Featured-image-less post — rare, but the row still needs to hold its
   shape instead of collapsing to zero height (its only child is now
   position:absolute, so on its own it has nothing to size itself against). */
.wow-news-card__media:empty {
	min-height: 320px;
}

.wow-news-card__panel {
	background: var(--wp--preset--color--accent);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30% 56px;
	border-bottom: 1px solid #ffffff4d;
}

.wow-news-card__eyebrow {
	font-size: 12px;
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 16px;
}

.wow-news-card__title {
	/* theme.json's heading element already sets Josefin/uppercase/700 for
	   every heading — only size/spacing/colour need setting here. Sized down
	   from the initial clamp(26px, 2.6vw, 40px) per feedback. */
	font-size: clamp(18px, 1.6vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.3px;
	max-width: 420px;
	margin: 0 0 20px;
	color: #fff;
}

.wow-news-card__title a {
	color: inherit;
	text-decoration: none;
}

.wow-news-card__title a:hover,
.wow-news-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.wow-news-card__excerpt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	max-width: 420px;
	margin: 0 0 32px;
}

.wow-news-card__btn {
	display: inline-block;
	background: #fff;
	color: var(--wp--preset--color--black);
	padding: 5px 28px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.wow-news-card__btn:hover,
.wow-news-card__btn:focus-visible {
	background: var(--wp--preset--color--off-white);
}

/* Arrow icon — inline SVG right after the label (see [wow_news_grid] in
   functions.php), nudges right on hover/focus. Same
   transition/translateX(2-4px) pattern as .wow-related__viewall svg /
   .wow-home-hero__cta svg elsewhere in the theme (style.css), just scoped
   to this button instead of a plain text link. */
.wow-news-card__btn-arrow {
	display: inline-block;
	vertical-align: middle;
	margin-left: 6px;
	transition: transform 0.2s ease;
}

.wow-news-card__btn:hover .wow-news-card__btn-arrow,
.wow-news-card__btn:focus-visible .wow-news-card__btn-arrow {
	transform: translateX(3px);
}

/* ── Empty state ── */
.wow-news-empty {
	padding: 140px 24px;
	text-align: center;
	color: var(--wp--preset--color--grey);
	font-size: 16px;
}

/* ── Pagination — plain <a> links (real permalinks, no AJAX needed here
     unlike the product archive's filter-driven [wow_archive_grid]), sharp
     corners to match this page's own editorial look rather than the
     product archive's pill-shaped .wow-archive-pagination__link. ── */
.wow-news-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 56px 24px;
}

.wow-news-pagination__link {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e2e2e2;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.wow-news-pagination__link:hover,
.wow-news-pagination__link:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wow-news-pagination__link.current {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

.wow-news-pagination__link.dots {
	border-color: transparent;
	cursor: default;
}

/* ── Responsive — stack to one column, image on top, same 900px breakpoint
     the rest of the theme's split sections use (see .wow-about-craft /
     .wow-about-founder in about-page.css). ── */
@media (max-width: 900px) {
	.wow-news-card {
		grid-template-columns: 1fr;
	}

	.wow-news-card__media {
		aspect-ratio: 4 / 3;
	}

	.wow-news-card__media:empty {
		min-height: 0;
	}

	.wow-news-card__panel {
		padding: 48px 28px;
	}

	.wow-news-card__title {
		max-width: 460px;
	}
}

@media (max-width: 560px) {
	.wow-news-card__media {
		aspect-ratio: 1 / 1;
	}

	.wow-news-card__panel {
		padding: 40px 20px;
	}

	.wow-news-card__eyebrow {
		letter-spacing: 1.5px;
	}

	.wow-news-card__title {
		font-size: clamp(18px, 5vw, 22px);
	}

	.wow-news-card__btn {
		width: 100%;
		text-align: center;
	}
}

/* ── Single article (templates/single.html) ────────────────────────────────
   Hero is .wow-archive-hero-v2 (style.css, shared with the product category
   archives — see [wow_news_single_hero] in functions.php) — nothing to
   style for it here. This covers just the article body and the related
   grid below it. */

.wow-news-single__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 24px 96px;
}

.wow-news-single__body p {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--wp--preset--color--text);
	margin: 0 0 26px;
}

.wow-news-single__body a {
	color: var(--wp--preset--color--black);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}

.wow-news-single__body a:hover,
.wow-news-single__body a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.wow-news-single__body strong {
	font-weight: 700;
	color: var(--wp--preset--color--black);
}

.wow-news-single__body img {
	height: auto;
	margin: 8px 0 34px;
}

.wow-news-single__body h2,
.wow-news-single__body h3 {
	margin: 48px 0 20px;
}

/* ── Related articles (same category, 3 posts) — [wow_news_related] in
   functions.php. Same header/title/view-all pattern as .wow-related
   (style.css, the product page's Related Products section) — plain compact
   cards instead of that section's carousel, since 3 fixed items don't need
   one. ── */
.wow-news-related {
	max-width: 1270px;
	margin: 0 auto;
	padding: 0 32px 96px;
}

.wow-news-related__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
	padding-top: 56px;
	border-top: 1px solid #e8e4dd;
}

.wow-news-related__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
}

.wow-news-related__viewall {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--wp--preset--font-family--josefin);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid #d8d3cd;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wow-news-related__viewall:hover,
.wow-news-related__viewall:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.wow-news-related__viewall svg {
	transition: transform 0.2s ease;
}

.wow-news-related__viewall:hover svg,
.wow-news-related__viewall:focus-visible svg {
	transform: translateX(2px);
}

.wow-news-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

.wow-news-related-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wow-news-related-card__media {
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--black);
	margin-bottom: 16px;
}

.wow-news-related-card__eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 8px;
}

.wow-news-related-card__title {
	font-size: 16px;
	line-height: 1.3;
	margin: 0;
	color: var(--wp--preset--color--black);
}

.wow-news-related-card:hover .wow-news-related-card__title,
.wow-news-related-card:focus-visible .wow-news-related-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.wow-news-single__body {
		padding: 48px 20px 72px;
	}

	.wow-news-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.wow-news-single__body p {
		font-size: 16px;
	}

	.wow-news-related__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.wow-news-related__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}