/*
 * Warm archive & category redesign layer.
 *
 * Loaded by ls-visual-warm-preview.php on archive listings (category, tag,
 * date, author, post-type archives) AFTER warm-home.css + the mobile layer.
 * It brings the listing pages into the same design system as the article and
 * video redesign (warm-article.css): one restrained type scale, the shared
 * spacing rhythm + header clearance, a pill section eyebrow, and listing cards
 * that match the related-topics cards (16px radius, soft shadow, hover lift,
 * warm-ink titles, a quiet read affordance).
 *
 * Class map:
 *  - category.html  -> .ls-category-hero / .ls-category-grid / .ls-category-card
 *  - archive.html   -> .ls-archive-head  / .ls-grid          / .ls-card
 * Both sets are styled together so every listing page stays consistent.
 */

/* ================================================================== */
/* Tokens (shared with warm-article; category bodies carry .archive). */
/* ================================================================== */

body.ls-visual-warm.archive {
	--wa-archive-title: clamp(1.95rem, 1.25rem + 2.15vw, 2.75rem);
	--wa-h2: clamp(1.3rem, 1.1rem + 0.85vw, 1.6rem);
	--wa-card-title: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
	--wa-body: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
	--wa-kicker: 0.82rem;

	--wa-wide: 1200px;
	--wa-section-y: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);
	--wa-header-clear: clamp(5rem, 3.6rem + 4vw, 7rem);

	--wa-ink: var(--ls-warm-ink, #071323);
	--wa-ink-soft: rgba(7, 19, 35, 0.72);
	--wa-ink-mute: rgba(7, 19, 35, 0.58);
	--wa-red: var(--ls-warm-red-deep, #9f2228);
	--wa-line: rgba(183, 128, 42, 0.24);
	--wa-card: rgba(255, 250, 242, 0.96);
}

/* ================================================================== */
/* Hero / archive head — restrained title, pill eyebrow, header clear.*/
/* ================================================================== */

body.ls-visual-warm.archive .ls-category-hero,
body.ls-visual-warm.archive .ls-archive-head {
	padding-block: var(--wa-header-clear) var(--wa-section-y) !important;
	padding-inline: clamp(1.1rem, 0.4rem + 3vw, 4rem) !important;
}

body.ls-visual-warm.archive .ls-category-hero__inner {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
}

/* Section eyebrow as a calm pill (matches the article kicker). */
body.ls-visual-warm.archive .ls-category-hero__eyebrow {
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
	padding: 0.32rem 0.9rem !important;
	border: 1px solid rgba(183, 128, 42, 0.42) !important;
	border-radius: 999px !important;
	background: rgba(255, 246, 226, 0.7) !important;
	color: var(--wa-red) !important;
	font-size: var(--wa-kicker) !important;
	font-weight: 800 !important;
	line-height: 1.6 !important;
	letter-spacing: 0.01em;
}

/* Section title — restrained (was up to ~86px). */
body.ls-visual-warm.archive .ls-category-hero__title,
body.ls-visual-warm.archive .ls-category-hero__title h1,
body.ls-visual-warm.archive .ls-archive-head h1,
body.ls-visual-warm.archive .ls-archive-head .wp-block-query-title {
	/* Fill the inner width so a short title stays on one line. The constrained
	   layout caps the query-title at the theme content-size (~331px), which
	   forces a 2-word title to wrap — lift that cap and stretch. */
	align-self: stretch;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	color: var(--wa-ink) !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-archive-title) !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: 0 !important;
	text-shadow: none !important;
}

/* Gold→red underline accent under the title (consistent with related heading). */
body.ls-visual-warm.archive .ls-category-hero__title::after,
body.ls-visual-warm.archive .ls-archive-head h1::after,
body.ls-visual-warm.archive .ls-archive-head .wp-block-query-title::after {
	content: "";
	display: block;
	inline-size: 3.2rem;
	block-size: 0.2rem;
	margin-block-start: 0.7rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ls-warm-gold-strong, #f5d77d), var(--ls-warm-red, #d23a34));
}

body.ls-visual-warm.archive .ls-category-hero__desc,
body.ls-visual-warm.archive .ls-archive-head p {
	margin: 0 !important;
	max-inline-size: 60ch;
	color: var(--wa-ink-soft) !important;
	font-size: var(--wa-body) !important;
	line-height: 1.85 !important;
}

/* ================================================================== */
/* Listing section + search.                                          */
/* ================================================================== */

body.ls-visual-warm.archive .ls-category-grid-section {
	padding-block: var(--wa-section-y) !important;
	padding-inline: clamp(1.1rem, 0.4rem + 3vw, 4rem) !important;
}

body.ls-visual-warm.archive .ls-category-search,
body.ls-visual-warm.archive .ls-search {
	width: 100% !important;
	max-width: var(--wa-wide) !important;
	margin-inline: auto !important;
	margin-block-end: clamp(1.6rem, 1.1rem + 2vw, 2.6rem) !important;
}

body.ls-visual-warm.archive .ls-category-search .wp-block-search__input,
body.ls-visual-warm.archive .ls-search .wp-block-search__input {
	border: 1px solid var(--wa-line) !important;
	border-radius: 999px 0 0 999px !important;
	background: rgba(255, 250, 242, 0.85) !important;
	color: var(--wa-ink) !important;
	font-size: 1rem !important;
}

body.ls-visual-warm.archive .ls-category-search .wp-block-search__button,
body.ls-visual-warm.archive .ls-search .wp-block-search__button {
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 999px 999px 0 !important;
	background: linear-gradient(135deg, #e24840 0%, #bd2c31 58%, #7e1d23 100%) !important;
	color: #fff8e6 !important;
	font-weight: 800 !important;
}

/* ================================================================== */
/* Cards — match the related-topics card system.                      */
/* ================================================================== */

body.ls-visual-warm.archive .ls-category-grid,
body.ls-visual-warm.archive .ls-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 0.6rem + 1.4vw, 1.6rem) !important;
	width: 100% !important;
	max-width: var(--wa-wide) !important;
	margin-inline: auto !important;
}

body.ls-visual-warm.archive .ls-category-card,
body.ls-visual-warm.archive .ls-card {
	/* 372px max keeps 3 cards per row inside the 1180px grid (3*372 + 2*gap
	   < 1180); 384 spilled to 2-up. Tablet falls to 2, phone to 1. */
	flex: 1 1 300px;
	max-width: 372px;
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	margin: 0 !important;
	border: 1px solid var(--wa-line) !important;
	border-radius: 16px !important;
	background: var(--wa-card) !important;
	box-shadow: 0 18px 40px -26px rgba(28, 16, 4, 0.4) !important;
	transition: transform 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease !important;
}

body.ls-visual-warm.archive .ls-category-card:hover,
body.ls-visual-warm.archive .ls-category-card:focus-within,
body.ls-visual-warm.archive .ls-card:hover,
body.ls-visual-warm.archive .ls-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(210, 58, 52, 0.4) !important;
	box-shadow: 0 30px 60px -28px rgba(126, 29, 35, 0.45) !important;
}

body.ls-visual-warm.archive .ls-category-card__image,
body.ls-visual-warm.archive .ls-card__media {
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0 !important;
}

body.ls-visual-warm.archive .ls-category-card__image img,
body.ls-visual-warm.archive .ls-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	filter: saturate(1.06) brightness(1.03) contrast(1.02);
	transition: transform 0.4s ease;
}

body.ls-visual-warm.archive .ls-category-card:hover .ls-category-card__image img,
body.ls-visual-warm.archive .ls-card:hover .ls-card__media img {
	transform: scale(1.05);
}

body.ls-visual-warm.archive .ls-category-card__body,
body.ls-visual-warm.archive .ls-card__body {
	display: flex !important;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;
	padding: 1.05rem 1.15rem 1.25rem !important;
}

/* ================================================================== */
/* Parent categories with child-category archives.                    */
/* ================================================================== */

body.ls-visual-warm.ls-category-children-template .ls-category-children-hero .ls-category-hero__inner {
	max-width: var(--wa-wide);
}

/* Keep the child doors visually on the left edge, while their Arabic labels
   retain their normal RTL reading direction. */
body.ls-visual-warm.ls-category-children-template .ls-child-doors {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-self: stretch;
	gap: 0.65rem;
	direction: ltr;
	width: 100%;
	margin-block: 1.35rem 0;
}

body.ls-visual-warm.ls-category-children-template .ls-child-door {
	direction: rtl;
	display: inline-flex;
	align-items: center;
	min-height: 2.55rem;
	padding-inline: 1rem;
	border: 1px solid rgba(183, 128, 42, 0.34);
	border-radius: 999px;
	background: rgba(255, 250, 242, 0.86);
	box-shadow: 0 10px 24px -20px rgba(28, 16, 4, 0.52);
	color: var(--wa-ink);
	font-family: "IBM Plex Sans Arabic", sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.ls-visual-warm.ls-category-children-template .ls-child-door:hover,
body.ls-visual-warm.ls-category-children-template .ls-child-door:focus-visible {
	border-color: rgba(210, 58, 52, 0.52);
	background: rgba(255, 244, 228, 0.96);
	color: var(--wa-red);
	transform: translateY(-2px);
}

body.ls-visual-warm.ls-category-children-template .ls-child-archives {
	width: min(var(--wa-wide), calc(100% - 2.2rem));
	margin-inline: auto;
	padding-block: clamp(2.2rem, 1.6rem + 2.4vw, 4.25rem);
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive {
	scroll-margin-top: clamp(6rem, 5rem + 4vw, 8rem);
	padding-block: clamp(2.3rem, 1.7rem + 2.5vw, 4rem);
	border-block-start: 1px solid var(--wa-line);
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__header {
	margin-block-end: clamp(1.15rem, 0.9rem + 1vw, 1.7rem);
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__header h2 {
	margin: 0;
	color: var(--wa-ink);
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;
	font-size: var(--wa-h2);
	font-weight: 800;
	line-height: 1.35;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__header h2::after {
	content: "";
	display: block;
	inline-size: 2.8rem;
	block-size: 0.2rem;
	margin-block-start: 0.65rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ls-warm-gold-strong, #f5d77d), var(--ls-warm-red, #d23a34));
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__grid {
	margin-block-end: 1.25rem;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, rgba(231, 198, 110, 0.22), rgba(210, 58, 52, 0.1)),
		var(--wa-card);
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__empty {
	margin: 0;
	padding: 1.25rem;
	border: 1px dashed var(--wa-line);
	border-radius: 8px;
	color: var(--wa-ink-mute);
	text-align: center;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__action {
	display: flex;
	justify-content: flex-start;
	direction: ltr;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__more {
	direction: rtl;
	display: inline-flex;
	align-items: center;
	min-height: 2.7rem;
	padding-inline: 1.1rem;
	border: 1px solid rgba(210, 58, 52, 0.36);
	border-radius: 999px;
	background: #9f2228;
	box-shadow: 0 12px 28px -18px rgba(126, 29, 35, 0.7);
	color: #fff8ec;
	font-family: "IBM Plex Sans Arabic", sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.35;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

body.ls-visual-warm.ls-category-children-template .ls-child-archive__more:hover,
body.ls-visual-warm.ls-category-children-template .ls-child-archive__more:focus-visible {
	background: #bd2c31;
	transform: translateY(-2px);
}

@media (max-width: 780px) {
	body.ls-visual-warm.ls-category-children-template .ls-child-archives {
		width: min(100% - 2rem, var(--wa-wide));
	}

	body.ls-visual-warm.ls-category-children-template .ls-child-doors {
		gap: 0.5rem;
	}

	body.ls-visual-warm.ls-category-children-template .ls-child-door {
		min-height: 2.4rem;
		padding-inline: 0.85rem;
		font-size: 0.9rem;
	}
}

body.ls-visual-warm.archive .ls-category-card__date,
body.ls-visual-warm.archive .ls-card__kicker,
body.ls-visual-warm.archive .ls-card__kicker a {
	margin: 0 !important;
	color: var(--wa-red) !important;
	font-family: "IBM Plex Sans Arabic", sans-serif !important;
	font-size: 0.8rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.02em;
	text-decoration: none;
}

body.ls-visual-warm.archive .ls-category-card__title,
body.ls-visual-warm.archive .ls-card .wp-block-post-title {
	margin: 0 !important;
	font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif !important;
	font-size: var(--wa-card-title) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

body.ls-visual-warm.archive .ls-category-card__title a,
body.ls-visual-warm.archive .ls-card .wp-block-post-title a {
	color: var(--wa-ink) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

body.ls-visual-warm.archive .ls-category-card:hover .ls-category-card__title a,
body.ls-visual-warm.archive .ls-card:hover .wp-block-post-title a {
	color: var(--wa-red) !important;
}

body.ls-visual-warm.archive .ls-category-card__excerpt,
body.ls-visual-warm.archive .ls-card .wp-block-post-excerpt {
	margin: 0 !important;
	color: var(--wa-ink-soft) !important;
	font-size: 0.92rem !important;
	line-height: 1.75 !important;
}

/* Quiet read affordance pinned to the bottom of each card. */
body.ls-visual-warm.archive .ls-category-card__body::after,
body.ls-visual-warm.archive .ls-card__body::after {
	content: "اقرأ المزيد ←";
	margin-block-start: auto;
	padding-block-start: 0.35rem;
	color: var(--wa-ink-mute);
	font-family: "IBM Plex Sans Arabic", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	transition: color 0.2s ease;
}

body.ls-visual-warm.archive .ls-category-card:hover .ls-category-card__body::after,
body.ls-visual-warm.archive .ls-card:hover .ls-card__body::after {
	color: var(--wa-red);
}

/* ================================================================== */
/* Pagination + empty state.                                          */
/* ================================================================== */

body.ls-visual-warm.archive .ls-category-pagination,
body.ls-visual-warm.archive .ls-pagination {
	width: 100% !important;
	max-width: var(--wa-wide) !important;
	margin: clamp(2rem, 1.4rem + 2vw, 3rem) auto 0 !important;
}

body.ls-visual-warm.archive .ls-category-empty,
body.ls-visual-warm.archive .ls-empty {
	border-radius: 16px !important;
}

/* ================================================================== */
/* Tablet & phone.                                                    */
/* ================================================================== */

@media (max-width: 768px) {
	body.ls-visual-warm.archive .ls-category-card,
	body.ls-visual-warm.archive .ls-card {
		flex-basis: 280px;
	}
}

@media (max-width: 480px) {
	body.ls-visual-warm.archive .ls-category-card,
	body.ls-visual-warm.archive .ls-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ================================================================== */
/* Fixed section cover — every category archive except «اليوميات».     */
/*                                                                    */
/* One artwork (images/category-cover.webp, 1805x526) sits behind the  */
/* section data on every category and sub-category archive. It is      */
/* never cropped: the layer carries the picture's own 1805:526 ratio,  */
/* so the whole image is visible at every width — desktop, tablet and  */
/* phone alike.                                                       */
/*                                                                    */
/* The artwork is a real grid ITEM, not an absolute overlay, sharing   */
/* cell 1/1 with the text. The hero therefore grows to whichever of    */
/* the two is taller and the picture can never be clipped:             */
/*   - wide screens  -> the image is taller than the text, so the      */
/*                      hero is exactly the image and the title sits   */
/*                      over its light right-hand side (RTL).          */
/*   - <= 900px      -> the image gets shorter than the text, so the   */
/*                      text is pushed below it (see the media query)  */
/*                      and the picture keeps the full width.          */
/*                                                                    */
/* «اليوميات» is excluded via :not(.category-diaries) and keeps its    */
/* existing per-section artwork from warm-home.css untouched.          */
/* ================================================================== */

body.ls-visual-warm.archive.category:not(.category-diaries) {
	--wa-cover: url("images/category-cover.webp");
	--wa-cover-ratio: 1805 / 526;
	--wa-cover-h: calc(100vw / 3.4316);
	--wa-cover-pad-x: clamp(1.1rem, 0.4rem + 3vw, 4rem);
	--wa-cover-base: #fff8ec;
}

body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	min-height: 0 !important;
	/* The artwork is full-bleed; the text carries its own padding. */
	padding: 0 !important;
	overflow: hidden;
	background: var(--wa-cover-base) !important;
	border-block-end: 1px solid var(--wa-line);

	/* The hero shipped as a full-VIEWPORT band while the page column is capped
	   at 1440px and clips its overflow. On a 1920 screen that stretched the
	   artwork to 1920x561 and then cut 240px off each side; on 2560 it was
	   2560x747 with 560px cut per side. Tying the hero to the page column
	   keeps the picture whole and its height sane. */
	width: min(100%, var(--ls-site-max, 1440px)) !important;
	max-width: min(100%, var(--ls-site-max, 1440px)) !important;
	margin-inline: auto !important;
}

/* The artwork. The box carries the picture's own ratio, so `contain` fills it
   exactly — and because `contain` can never stretch, the image stays
   undistorted even if the box is ever sized differently.
   `width: min(100%, 1805px)` caps it at the file's native size, which makes
   the height mathematically incapable of exceeding 526px (1805 / 3.4316). */
body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero::before {
	content: "";
	position: relative !important;
	inset: auto !important;
	z-index: 0;
	grid-area: 1 / 1;
	align-self: start;
	justify-self: center;
	width: min(100%, 1805px);
	max-width: 1805px;
	aspect-ratio: var(--wa-cover-ratio);
	pointer-events: none;
	background:
		linear-gradient(180deg,
			rgba(255, 248, 236, 0) 74%,
			rgba(255, 248, 236, 0.72) 92%,
			var(--wa-cover-base) 100%) center center / 100% 100% no-repeat,
		var(--wa-cover) center center / contain no-repeat !important;
}

/* The stripe/veil texture from warm-home.css would only muddy the artwork. */
body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero::after {
	background: none !important;
}

body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero__inner {
	grid-area: 1 / 1;
	align-self: end;
	z-index: 2;
	box-sizing: border-box;
	width: min(var(--wa-wide), 100%);
	margin-inline: auto !important;
	padding-block: var(--wa-header-clear) var(--wa-section-y);
	padding-inline: var(--wa-cover-pad-x);
}

/* Narrow screens: the picture is now shorter than the text block, so the text
   is pushed clear of it — the artwork keeps the full width and stays whole,
   and the title reads on the warm base instead of on top of the portrait. */
@media (max-width: 900px) {
	body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero__inner {
		padding-block-start: calc(var(--wa-cover-h) + 1.15rem);
	}

	/* The picture is short here, so the blend-out is tightened to the last few
	   pixels — otherwise a fade tuned for a 420px hero washes out a third of it. */
	body.ls-visual-warm.archive.category:not(.category-diaries) .ls-category-hero::before {
		background:
			linear-gradient(180deg,
				rgba(255, 248, 236, 0) 84%,
				rgba(255, 248, 236, 0.55) 94%,
				var(--wa-cover-base) 100%) center center / 100% 100% no-repeat,
			var(--wa-cover) center center / contain no-repeat !important;
	}
}

/* Photo archive only: override the generic archive card affordance. */
body.ls-visual-warm.archive.mpa-photo-archive-view .ls-category-card__body::after {
  content: "شاهد المزيد ←";
}
/* Photo archive only: use the same top cover treatment as category archives. */
body.ls-visual-warm.archive.mpa-photo-archive-view {
  --wa-cover: url("images/category-cover.webp");
  --wa-cover-ratio: 1805 / 526;
  --wa-cover-base: #fff8ec;
}

body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero.ls-category-hero {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  background: var(--wa-cover-base) !important;
  border-block-end: 1px solid var(--wa-line);
  width: min(100%, var(--ls-site-max, 1440px)) !important;
  max-width: min(100%, var(--ls-site-max, 1440px)) !important;
  margin-inline: auto !important;
}

body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero.ls-category-hero::before {
  content: "";
  position: relative !important;
  inset: auto !important;
  z-index: 0;
  grid-area: 1 / 1;
  align-self: start;
  justify-self: center;
  width: min(100%, 1805px);
  max-width: 1805px;
  aspect-ratio: var(--wa-cover-ratio);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 248, 236, 0) 74%, rgba(255, 248, 236, 0.72) 92%, var(--wa-cover-base) 100%) center center / 100% 100% no-repeat, var(--wa-cover) center center / contain no-repeat !important;
}

body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero.ls-category-hero::after {
  background: none !important;
}

body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero .ls-category-hero__inner {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  box-sizing: border-box;
  width: min(var(--wa-wide), 100%);
  margin-inline: auto !important;
  padding-block: var(--wa-header-clear) var(--wa-section-y);
  padding-inline: var(--wa-cover-pad-x);
}
body.ls-visual-warm.archive.mpa-photo-archive-view { --wa-cover-pad-x: clamp(1.1rem, 0.4rem + 3vw, 4rem); }

/* Photo archive only: desktop alignment matches category hero content. */
@media (min-width: 901px) {
  body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero .ls-category-hero__inner {
    transform: translate(-64px, -18px);
  }

  body.ls-visual-warm.archive.mpa-photo-archive-view .mpa-hero .mpa-kicker {
    transform: translateY(-27px);
  }
}