/*
 * Warm mobile companion layer for warm-home.css.
 *
 * Loaded by ls-visual-warm-preview.php with media="(max-width: 780px)" AFTER
 * warm-home.css, so every rule here only ever applies on phone widths and can
 * out-cascade the desktop !important rules it needs to correct.
 *
 * Audit findings this file fixes (12 Jun 2026 mobile review at 390x844):
 *  - Footer grid kept its 3-column 1050px+ desktop layout on phones, pushing
 *    half the footer links off-screen and clipping the about heading.
 *  - Touch targets (nav pills, search toggle, rail arrows) were under 44px.
 *  - Homepage rail cards were double-stacked 82vw slabs with a near-opaque
 *    desaturating filter that made thumbnails unreadable on small screens.
 *  - Article body was fully justified, producing rivers in narrow columns.
 *  - Card imagery used three different filter treatments across templates.
 */

/* ---------------------------------------------------------------- */
/* Global guards: no sideways scroll, calmer effects, safe areas.   */
/* ---------------------------------------------------------------- */

html:has(body.ls-visual-warm) {
	overflow-x: clip !important;
}

body.ls-visual-warm {
	max-width: 100vw;
	overflow-x: clip !important;
	-webkit-tap-highlight-color: transparent;
}

/* Heavy blurs and slow zoom animations cost battery on phones. */
body.ls-visual-warm .ls-header,
body.ls-visual-warm .ls-header.is-stuck,
body.ls-visual-warm:not(.home) .ls-header:not(.is-stuck) {
	backdrop-filter: saturate(1.18) blur(9px);
	-webkit-backdrop-filter: saturate(1.18) blur(9px);
}

body.ls-visual-warm .vwhc-hero__bg,
body.ls-visual-warm .vwhc-method::before,
body.ls-visual-warm .vwhc-quote::before {
	animation: none !important;
}

/* Bring the portrait on the image's right edge into the narrow phone frame.
   The hero and the artwork rail deliberately retain their original framing. */
body.ls-visual-warm.vwhc-front-page-template .vwhc-feature:not(.vwhc-feature--artworks)::after,
body.ls-visual-warm.vwhc-front-page-template .vwhc-method::before,
body.ls-visual-warm.vwhc-front-page-template .vwhc-quote::before {
	background-position: calc(50% - 280px) top !important;
}

/* ---------------------------------------------------------------- */
/* Header: comfortable touch targets, safe-area padding.            */
/* ---------------------------------------------------------------- */

body.ls-visual-warm .ls-header__bar {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem 0.9rem !important;
	inline-size: min(100% - 1.25rem, 42rem) !important;
	padding-inline: max(0.25rem, env(safe-area-inset-left)) max(0.25rem, env(safe-area-inset-right)) !important;
}

body.ls-visual-warm .ls-mega-toggle {
	justify-self: center;
	min-block-size: 2.5rem !important;
	padding: 0.48rem 0.85rem !important;
	font-size: 0.82rem !important;
}

/* One swipeable text row instead of a 3-4 row pill wall under the logo. */
body.ls-visual-warm .ls-nav {
	order: 4;
	grid-column: 1 / -1;
	display: flex !important;
	flex-wrap: nowrap !important;
	/* center !important on an overflowing scroller strands the first items
	   out of reach; start-align so the row begins at "الرئيسية". */
	justify-content: flex-start !important;
	gap: 0.5rem !important;
	scroll-padding-inline-start: 0.5rem;
	padding-block: 0.15rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

body.ls-visual-warm .ls-nav a,
body.ls-visual-warm .ls-header.is-stuck .ls-nav a {
	flex: 0 0 auto;
	min-block-size: 2.3rem !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.28rem !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 0.78rem !important;
	line-height: 1.25;
	white-space: nowrap !important;
	border-radius: 0 !important;
	scroll-snap-align: start;
}

body.ls-visual-warm .ls-mega-menu {
	position: static;
	inline-size: min(100% - 1.25rem, 42rem);
	max-block-size: 0;
	margin: -0.15rem auto 0;
	padding: 0;
	border-width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: none;
	transition: max-block-size 0.24s ease, opacity 0.2s ease, margin 0.2s ease;
}

body.ls-visual-warm .ls-header.is-mega-open .ls-mega-menu {
	max-block-size: 72vh;
	margin-block: 0 0.75rem;
	border-width: 1px;
	overflow-y: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
}

body.ls-visual-warm .ls-mega-menu__grid {
	grid-template-columns: 1fr;
}

body.ls-visual-warm .ls-mega-menu__col {
	padding: 0.9rem 1rem;
	border-inline-start: 0;
	border-block-start: 1px solid rgba(183, 128, 42, 0.14);
}

body.ls-visual-warm .ls-mega-menu__col:first-child {
	border-block-start: 0;
}

body.ls-visual-warm .ls-header-search-toggle {
	inline-size: 2.75rem !important;
	block-size: 2.75rem !important;
}

/* ---------------------------------------------------------------- */
/* Homepage hero: bigger lead, full-height tap targets.             */
/* ---------------------------------------------------------------- */

body.ls-visual-warm .vwhc-hero__content {
	padding-inline: max(1.1rem, env(safe-area-inset-right)) max(1.1rem, env(safe-area-inset-left));
}

body.ls-visual-warm .vwhc-hero__content > p {
	font-size: 1.02rem !important;
	line-height: 1.95 !important;
}

body.ls-visual-warm .vwhc-search input {
	min-block-size: 3rem;
	font-size: 1rem !important;
}

body.ls-visual-warm .vwhc-search button {
	min-block-size: 2.85rem;
}

body.ls-visual-warm .vwhc-menu a {
	min-block-size: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Homepage rails: one row, card peek, readable warm thumbnails.    */
/* ---------------------------------------------------------------- */

/* Let the rail overflow inside the phone width instead of letting its cards
   expand the parent grid. This is what makes touch and arrow scrolling work. */
body.ls-visual-warm.vwhc-front-page-template .vwhc-feature,
body.ls-visual-warm.vwhc-front-page-template .vwhc-photos {
	grid-template-columns: minmax(0, 1fr) !important;
}

body.ls-visual-warm.vwhc-front-page-template .vwhc-feature__content {
	min-inline-size: 0 !important;
	inline-size: 100% !important;
}

body.ls-visual-warm.vwhc-front-page-template .vwhc-feature__content.ls-card-slider-ready {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	direction: ltr;
}

body.ls-visual-warm .vwhc-card-grid,
body.ls-visual-warm .vwhc-photo-grid {
	inline-size: 100% !important;
	max-inline-size: 100% !important;
	min-inline-size: 0 !important;
	grid-template-rows: none !important;
	grid-auto-flow: column;
	grid-auto-columns: min(72vw, 19rem) !important;
	gap: 0.8rem !important;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1rem;
}

body.ls-visual-warm .vwhc-card,
body.ls-visual-warm .vwhc-photo-grid > a {
	scroll-snap-align: start;
}

/* Keep the archive action compact and physically left on phone rows. */
body.ls-visual-warm.vwhc-front-page-template .vwhc-feature__content > .vwhc-feature__more {
	order: 1;
	flex: 0 0 auto;
	inline-size: auto !important;
	min-block-size: 2.35rem !important;
	margin: 0 !important;
	padding: 0.38rem 0.78rem !important;
	direction: rtl;
	font-size: 0.82rem !important;
	line-height: 1.25 !important;
}

body.ls-visual-warm.vwhc-front-page-template .vwhc-feature__content > .ls-card-slider-controls {
	order: 2;
	flex: 0 0 auto;
	width: auto !important;
	margin: 0 !important;
}

body.ls-visual-warm.vwhc-front-page-template .vwhc-feature__content > .vwhc-card-grid {
	order: 3;
	flex: 0 0 100%;
}

/* The desktop archive-sepia treatment flattens small thumbnails into
   blank slabs; keep the warmth but let the photo read as a photo. */
body.ls-visual-warm .vwhc-card img {
	filter: none !important;
	opacity: 1 !important;
	object-fit: cover !important;
}

body.ls-visual-warm .vwhc-method-card {
	flex-basis: min(17rem, 76vw) !important;
}

body.ls-visual-warm .ls-method-nav,
body.ls-visual-warm .ls-card-slider-controls button {
	inline-size: 2.75rem !important;
	block-size: 2.75rem !important;
}

body.ls-visual-warm .vwhc-doors__grid {
	gap: 0.8rem !important;
}

body.ls-visual-warm .vwhc-doors__grid a {
	min-block-size: 2.75rem;
}

/* ---------------------------------------------------------------- */
/* Archive, category, and search heroes: phone-scale type.          */
/* ---------------------------------------------------------------- */

body.ls-visual-warm .ls-category-hero,
body.ls-visual-warm.archive .ls-archive-head {
	min-height: clamp(13rem, 52vw, 18rem) !important;
}

body.ls-visual-warm .ls-category-hero__title,
body.ls-visual-warm .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 {
	font-size: clamp(1.9rem, 8.6vw, 2.6rem) !important;
	line-height: 1.16 !important;
	overflow-wrap: break-word;
}

/* One warm treatment for every listing thumbnail (matches the rails). */
body.ls-visual-warm.archive .ls-card__media img,
body.ls-visual-warm .ls-card__media img,
body.ls-visual-warm .ls-post-related__media img {
	filter: grayscale(0.28) sepia(0.14) saturate(0.85) brightness(1.06) !important;
}

body.ls-visual-warm .ls-card__media,
body.ls-visual-warm .ls-post-related__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

body.ls-visual-warm .ls-card__media img,
body.ls-visual-warm .ls-post-related__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------- */
/* Single article and video: editorial mobile type.                 */
/* ---------------------------------------------------------------- */

body.ls-visual-warm.single-post .ls-post-hero__title,
body.ls-visual-warm.single-post .ls-post-hero__title h1 {
	max-width: 100% !important;
	font-size: clamp(1.5rem, 6.6vw, 1.9rem) !important;
	line-height: 1.45 !important;
}

/* Justified Arabic in a narrow column opens rivers; align to start. */
body.ls-visual-warm .ls-post-content p,
body.ls-visual-warm .ls-post-content li {
	text-align: start !important;
	text-wrap: pretty;
}

body.ls-visual-warm .ls-post-content p {
	font-size: 1.02rem !important;
	line-height: 1.95 !important;
}

body.ls-visual-warm .ls-post-hero__media--image img {
	filter: saturate(1.08) brightness(1.04) contrast(1.02) sepia(0.04) !important;
}

body.ls-visual-warm.single-archive_video .ls-post-hero__title,
body.ls-visual-warm.vaa-single-video-post .ls-post-hero__title {
	font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
	line-height: 1.45 !important;
}

/* Share row: keep it on the page grid, centered, thumb-sized. */
body.ls-visual-warm .nectar-social,
body.ls-visual-warm .nectar-social-inner {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	direction: rtl;
}

body.ls-visual-warm .nectar-social a {
	min-block-size: 2.75rem;
	display: inline-flex !important;
	align-items: center;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- */
/* Footer: collapse the pinned 3-column desktop grid (was 1050px    */
/* wide on phones, hiding half the links and clipping the heading). */
/* ---------------------------------------------------------------- */

body.ls-visual-warm .ls-footer-shell {
	padding-inline: max(1.1rem, env(safe-area-inset-right)) max(1.1rem, env(safe-area-inset-left)) !important;
	padding-block-end: max(1.25rem, env(safe-area-inset-bottom)) !important;
}

body.ls-visual-warm .ls-footer-grid {
	grid-template-columns: 1fr !important;
	justify-items: center;
	gap: 1.7rem !important;
	text-align: center;
}

body.ls-visual-warm .ls-footer-logo {
	justify-self: center !important;
	inline-size: clamp(9.5rem, 38vw, 11.5rem) !important;
}

body.ls-visual-warm .ls-footer-about {
	justify-self: center !important;
	max-inline-size: 100% !important;
}

body.ls-visual-warm .ls-footer-about h2 {
	font-size: clamp(1.7rem, 7.2vw, 2.2rem) !important;
	line-height: 1.3 !important;
	overflow-wrap: break-word;
}

body.ls-visual-warm .ls-footer-about h2::after {
	margin-inline: auto !important;
}

body.ls-visual-warm .ls-footer-about p {
	font-size: 0.98rem !important;
	line-height: 1.9 !important;
}

body.ls-visual-warm .ls-footer-actions {
	grid-column: auto !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	inline-size: 100% !important;
	gap: 0.7rem !important;
}

body.ls-visual-warm .ls-footer-actions a {
	min-block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

body.ls-visual-warm .ls-footer-social a {
	inline-size: 2.85rem !important;
	block-size: 2.85rem !important;
}

body.ls-visual-warm .ls-footer-bottom {
	flex-direction: column-reverse !important;
	gap: 0.9rem;
	text-align: center;
}

body.ls-visual-warm .ls-footer {
	padding-block: 2.6rem 1.65rem !important;
}

body.ls-visual-warm .ls-footer-map {
	grid-template-columns: 1fr !important;
}

body.ls-visual-warm .ls-footer-map__intro {
	padding: 1.25rem 1rem 1.35rem !important;
	border-inline-start: 0;
	border-block-end: 1px solid rgba(183, 128, 42, 0.16);
}

body.ls-visual-warm .ls-footer-map .ls-footer-logo {
	inline-size: clamp(9.5rem, 48vw, 12rem) !important;
}

body.ls-visual-warm .ls-footer-about-text {
	font-size: 0.98rem !important;
	line-height: 1.9 !important;
}

body.ls-visual-warm .ls-footer-map__grid {
	grid-template-columns: 1fr !important;
}

body.ls-visual-warm .ls-footer-map__col {
	padding: 1rem 1.05rem !important;
	border-inline-start: 0;
	border-block-start: 1px solid rgba(183, 128, 42, 0.14);
	text-align: center;
}

body.ls-visual-warm .ls-footer-map__col:first-child {
	border-block-start: 0;
}

body.ls-visual-warm .ls-footer-map__col > a:first-of-type {
	margin-block-end: 0.55rem !important;
	font-size: 1rem !important;
	font-weight: 900 !important;
}

body.ls-visual-warm .vwhc-footer.ls-footer .ls-footer-map__col > a:first-of-type {
	margin-block-end: 0.55rem !important;
	font-size: 1rem !important;
	font-weight: 900 !important;
}

body.ls-visual-warm .ls-footer-map__col a {
	min-block-size: 2.25rem;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0.94rem !important;
}

/* The homepage composer footer shares the same heading scale problem. */
body.ls-visual-warm .vwhc-footer h2 {
	font-size: clamp(1.7rem, 7.2vw, 2.2rem) !important;
	line-height: 1.3 !important;
}

body.ls-visual-warm .vwhc-footer nav a {
	min-block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------- */
/* Compact phones.                                                  */
/* ---------------------------------------------------------------- */

@media (max-width: 420px) {
	body.ls-visual-warm .vwhc-card-grid,
	body.ls-visual-warm .vwhc-photo-grid {
		grid-auto-columns: min(78vw, 18rem) !important;
	}

	body.ls-visual-warm .ls-footer-actions {
		grid-template-columns: 1fr !important;
	}
}

/* ---------------------------------------------------------------- */
/* Homepage hero: close the hard cut under the phone cover.          */
/*                                                                  */
/* home-composer.css swaps in morsistory-mobile-cover-20260820.webp  */
/* at max-width:680px with `background-size: 100% auto`, so the      */
/* artwork (1125x2436) is only 216.53vw tall - about 844px on a 390  */
/* phone - while the hero itself grows to ~1600px because the doors  */
/* nav stacks. The bottom ~47% therefore fell back to the hero's own */
/* near-black #091827 and cut the photo off with a flat line.        */
/*                                                                  */
/* The #0f395d that home-composer.css sets on .vwhc-hero never took  */
/* effect: `body.ls-visual-warm .vwhc-hero { background: #091827 }`  */
/* in warm-home.css outranks a bare `.vwhc-hero` selector.           */
/* ---------------------------------------------------------------- */

@media (max-width: 680px) {
	body.ls-visual-warm .vwhc-hero {
		background-color: #11395d !important;
	}

	/* #11395d is the cover's own bottom edge, sampled from the file. It is
	   painted INSIDE the filtered layer so the flat colour picks up the same
	   saturate/contrast/brightness/sepia as the photo and the join stays
	   invisible even if that filter is retuned later. The blend mode has to
	   go back to normal: soft-light was a no-op over a transparent colour,
	   but it would tint the photo once the colour is opaque. */
	body.ls-visual-warm .vwhc-hero__bg {
		background-color: #11395d !important;
		background-blend-mode: normal !important;
	}

	/* Dissolves the last 120px of the cover into #11395d, then eases back to
	   the original #071323 before the hero ends, so the boundary with the
	   next (warm sepia) section stays exactly as it is today. 216.53vw is
	   the cover's rendered height - update it if the artwork is replaced. */
	body.ls-visual-warm .vwhc-hero__bg::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: calc(216.53vw - 120px);
		bottom: 0;
		background: linear-gradient(180deg,
			rgba(17, 57, 93, 0) 0,
			#11395d 120px,
			#0a2b47 58%,
			#071323 100%);
		pointer-events: none;
	}
}

/* ---------------------------------------------------------------- */
/* Header bar: centre the logo, park the search button on the left.  */
/*                                                                  */
/* The bar's `auto minmax(0,1fr) auto` grid put the logo in column 1 */
/* (the right edge in RTL) and dropped the search toggle at the      */
/* START of column 2, i.e. glued to the logo, leaving the whole left */
/* half of the bar empty. Desktop already has the toggle hard left,  */
/* so this only brings the phone bar in line with it.                */
/* ---------------------------------------------------------------- */

body.ls-visual-warm .ls-header__bar {
	grid-template-columns: 1fr auto 1fr !important;
}

body.ls-visual-warm .ls-site-logo {
	grid-column: 2 !important;
	grid-row: 1 !important;
	justify-self: center !important;
	inline-size: clamp(7.5rem, 33vw, 9.5rem) !important;
}

/* justify-self:end is the inline end, which is physically left in RTL. */
body.ls-visual-warm .ls-header-search-toggle {
	grid-column: 3 !important;
	grid-row: 1 !important;
	justify-self: end !important;
}

body.ls-visual-warm .ls-nav {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
}