/* lytravel — custom CSS for the bits theme.json can't express on its own
   (hand-authored static block markup, tag pills, card layout, map chrome).
   Design tokens (color/spacing/radius) come from theme.json custom
   properties — see 01_DESIGN_BRIEF.md for the source values. */

/* theme.json sets a generous global blockGap (3rem) meant for spacing
   out post content — WP applies it as top-margin between the children of
   ANY plain group block by default. Our own chrome groups (cards, header,
   footer, nav rows) manage their spacing explicitly via flex gap instead,
   so cancel that default margin on them or it compounds with the gap. */
.lytravel-header > *,
.lytravel-footer > *,
.lytravel-card > *,
.lytravel-card-body > *,
.lytravel-card-meta > *,
.lytravel-back-link > *,
.lytravel-prev-next > * {
	margin-block-start: 0;
}

/* ---------- header / footer ---------- */

.lytravel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	background: #ffffff;
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: var(--wp--preset--spacing--20);
}

.lytravel-header .wp-block-site-title a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.lytravel-header .wp-block-navigation__container {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lytravel-header .wp-block-navigation-item a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.lytravel-header .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
}

.lytravel-footer {
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--preset--color--border);
}

.lytravel-footer-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.lytravel-footer-links {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

.lytravel-footer-sep {
	color: var(--wp--preset--color--border);
}

.lytravel-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
}

.lytravel-footer a:hover {
	text-decoration: underline;
}

/* ---------- page shell ---------- */

.lytravel-main {
	max-width: 840px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}


/* ---------- feed / archive cards ---------- */

.lytravel-card-list.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.lytravel-card-list.wp-block-post-template > li {
	margin: 0;
}

.lytravel-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--base);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(33, 43, 52, 0.06);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* Make the whole card clickable via the title's link, "stretched" to
   cover the card — without wrapping everything in a real nested <a>,
   which HTML doesn't allow. Tag pills sit above it (z-index) so they
   keep navigating to their own tag archives independently. */
.lytravel-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.lytravel-card .lytravel-tag-pills {
	position: relative;
	z-index: 2;
}

.lytravel-card:hover {
	border-color: var(--wp--preset--color--muted);
	box-shadow: 0 10px 28px rgba(33, 43, 52, 0.14);
	transform: translateY(-3px);
}

.lytravel-card .wp-block-post-featured-image {
	display: block;
	overflow: hidden;
}

.lytravel-card img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.3s ease;
	/* hairline inset edge so a light/white photo border doesn't disappear
	   into the page background — any outer shadow would be clipped by the
	   frame's own overflow:hidden, so inset only here */
	box-shadow: inset 0 0 0 1px rgba(33, 43, 52, 0.08);
}

.lytravel-card:hover img {
	transform: scale(1.04);
}

.lytravel-single .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--base);
	box-shadow:
		inset 0 0 0 1px rgba(33, 43, 52, 0.08),
		0 2px 8px rgba(33, 43, 52, 0.08);
}

.lytravel-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.lytravel-archive-title {
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ---------- tag pills (feed cards, single entry, tags index) ---------- */

.wp-block-post-terms.lytravel-tag-pills,
.lytravel-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.wp-block-post-terms.lytravel-tag-pills a,
.lytravel-tag-cloud a,
.lytravel-tag-pill {
	display: inline-block;
	background: var(--wp--preset--color--tag-background);
	color: var(--wp--preset--color--tag-text);
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.6;
	padding: 0.15rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

.wp-block-post-terms.lytravel-tag-pills a:hover,
.lytravel-tag-cloud a:hover,
.lytravel-tag-pill:hover {
	text-decoration: underline;
}

/* tag cloud block varies font-size per term by default — flatten it */
.lytravel-tag-cloud a {
	font-size: var(--wp--preset--font-size--small) !important;
}

/* ---------- date + location meta row ---------- */

.lytravel-card-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
}

.lytravel-card-meta time {
	color: var(--wp--preset--color--muted);
}

/* ---------- single entry ---------- */

.lytravel-back-link {
	margin-bottom: var(--wp--preset--spacing--30);
}

.lytravel-back-link a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.lytravel-back-link a:hover {
	text-decoration: underline;
}

.lytravel-hairline.wp-block-separator {
	border-top: 1px solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--50) 0;
}

.lytravel-prev-next {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.lytravel-prev-next a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.lytravel-prev-next a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* "Map anchor" marks in post content — a small pin before the link text so
   it's clear at a glance that it goes to the map, not just any link. Uses
   an SVG mask + currentColor rather than an emoji so it tints with the
   link's own color (accent, hover state) instead of a fixed glyph color. */
.lytravel-map-anchor::before {
	content: "";
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.2em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* inline galleries inside entries — square-ish grid, native lightbox handles click */
.lytravel-single .wp-block-gallery img,
.lytravel-single .wp-block-image img {
	border-radius: var(--wp--custom--radius--base);
	box-shadow:
		inset 0 0 0 1px rgba(33, 43, 52, 0.08),
		0 2px 8px rgba(33, 43, 52, 0.08);
	transition: box-shadow 0.6s ease;
}

/* ---------- "load more" pagination ---------- */

.lytravel-load-more {
	margin-top: var(--wp--preset--spacing--50);
}

.lytravel-load-more a {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.lytravel-load-more a:hover {
	background: var(--wp--preset--color--tag-background);
	text-decoration: none;
}

/* ---------- map page ---------- */

.lytravel-map {
	width: 100%;
	height: 620px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: 0 2px 8px rgba(33, 43, 52, 0.06);
	margin: var(--wp--preset--spacing--30) 0;
	background: var(--wp--preset--color--border);
	overflow: hidden;
}

/* nudge the Stadia Alidade Smooth basemap toward the site's exact blue-grey —
   placeholder tint, adjust once real tiles are checked against the
   palette (see 03_MAP_SPEC.md) */
.lytravel-map .leaflet-tile-pane {
	filter: saturate(0.85) brightness(1.02) hue-rotate(-2deg);
}

.lytravel-map .leaflet-popup-content-wrapper {
	border-radius: var(--wp--custom--radius--base);
	font-family: var(--wp--preset--font-family--public-sans);
}

.lytravel-map .leaflet-popup-content a {
	color: var(--wp--preset--color--accent);
}

/* Arctic Circle label: plain muted text, no bubble/border/arrow — a
   quiet caption under the reference line rather than a marker tooltip. */
.lytravel-map .leaflet-tooltip.lytravel-arctic-label {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-style: italic;
	/* font-size is set by map.js's applyZoomStyles(), scaling with zoom
	   the same way marker size/line weight do — this is just a sane
	   default before that first runs. */
	font-size: var(--wp--preset--font-size--small);
}

.lytravel-map .leaflet-tooltip.lytravel-arctic-label::before {
	display: none;
}

.lytravel-map-total {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
	margin: 0 0 var(--wp--preset--spacing--10) 0;
}

.lytravel-map-legend {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0 0 var(--wp--preset--spacing--50) 0;
}

.lytravel-map-legend span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lytravel-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.lytravel-legend-dot.entry {
	background: var(--wp--preset--color--accent);
}

.lytravel-legend-dot.waypoint {
	background: var(--wp--preset--color--muted);
}

.lytravel-map-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lytravel-map-list-item {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.lytravel-map-list-header {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
}

.lytravel-map-list-item a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.lytravel-map-list-item a:hover {
	text-decoration: underline;
}

.lytravel-map-list-item.is-waypoint {
	color: var(--wp--preset--color--muted);
}

/* Posts referencing a "mentioned location" — listed under its header
   rather than crammed onto the same line, since a location can be
   referenced by more than one post. */
.lytravel-map-list-posts {
	list-style: none;
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.lytravel-map-list-posts a {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

/* ---------- dark section (scroll fade) ---------- */

/* Redefining the site's own preset color custom properties (rather than a
   parallel token set) means everything already styled through them —
   body text, links, header, footer, etc. — picks up the dark palette
   automatically once body.lytravel-dark-active is toggled by
   assets/js/dark-section.js. Tokens this feature does NOT redefine (e.g.
   --wp--preset--color--tag-background / --tag-text, used by the tag
   pills) intentionally stay in their light colors throughout. See
   docs/superpowers/specs/2026-09-18-dark-section-fade-design.md. */
body.lytravel-dark-active {
	--wp--preset--color--background: #10141b;
	--wp--preset--color--foreground: #eef1f4;
	--wp--preset--color--secondary: #c3ccd4;
	--wp--preset--color--muted: #6b7684;
	--wp--preset--color--border: #2a333d;
	--wp--preset--color--accent: #7fb0d6;
}

/* "Autumn dark" swaps in a warm palette instead — dark bark-brown
   background, cream text, amber accent — layered on top of the dark one
   above: assets/js/dark-section.js adds lytravel-autumn-active alongside
   lytravel-dark-active (never instead of it) while an "Autumn dark"
   chapter is the active one, so every other dark-mode rule still applies
   and only these tokens change. Scrolling straight from one kind of dark
   chapter into the other fades between the two palettes through the same
   transitions as the light/dark fade. */
body.lytravel-dark-active.lytravel-autumn-active {
	--wp--preset--color--background: #1a130d;
	--wp--preset--color--foreground: #f3ebe0;
	--wp--preset--color--secondary: #d9c6ac;
	--wp--preset--color--muted: #8c7660;
	--wp--preset--color--border: #3b2c1f;
	--wp--preset--color--accent: #e8a24a;
}

/* "Taiga mist": same layering as "Autumn dark" above (via
   lytravel-taiga-active), but a mid-tone rather than a near-black one —
   misty slate background, fur-cream text, sky-blue secondary, leaf-orange
   accent, all sampled from a reindeer-by-the-lake photo. The background is
   about as light as it can go while the muted text and links stay
   readable (~4:1 or better). */
body.lytravel-dark-active.lytravel-taiga-active {
	--wp--preset--color--background: #3e4a52;
	--wp--preset--color--foreground: #f1ece4;
	--wp--preset--color--secondary: #d3dde6;
	--wp--preset--color--muted: #a3afb9;
	--wp--preset--color--border: #56636c;
	--wp--preset--color--accent: #eeb07e;
}

/* "Taiga dusk": the warm sibling of "Taiga mist" (via
   lytravel-dusk-active), from the same photo but sampled from the sandy
   shore and the reindeer's coat instead of the lake and sky — warm taupe
   background, cream text, sand secondary, leaf-orange accent. */
body.lytravel-dark-active.lytravel-dusk-active {
	--wp--preset--color--background: #4e423b;
	--wp--preset--color--foreground: #f4ede4;
	--wp--preset--color--secondary: #e6d5c2;
	--wp--preset--color--muted: #b8a698;
	--wp--preset--color--border: #66574e;
	--wp--preset--color--accent: #f2b27a;
}

body {
	transition: background-color 0.6s ease, color 0.6s ease;
}

/* theme.json sets an explicit heading color rule (h1-h6 { color: ... }),
   which is not inherited from body, so body's transition above never
   reaches headings without this — without it, headings snap instantly
   between palettes instead of fading with everything else. */
h1,
h2,
h3,
h4,
h5,
h6 {
	transition: color 0.6s ease;
}

a:where(:not(.wp-element-button)) {
	transition: color 0.6s ease;
}

.lytravel-header {
	transition: background-color 0.6s ease, border-color 0.6s ease;
}

/* .lytravel-header's own default (further up this file) hardcodes a
   white background, deliberately different from the page background —
   unrelated to this feature and left as-is. This scoped override only
   takes effect while a dark chapter is active. */
body.lytravel-dark-active .lytravel-header {
	background-color: var(--wp--preset--color--background);
}

.lytravel-header .wp-block-site-title a,
.lytravel-header .wp-block-navigation-item a {
	transition: color 0.6s ease;
}

.lytravel-footer,
.lytravel-footer-inner,
.lytravel-footer-sep,
.lytravel-footer a {
	transition: color 0.6s ease, border-color 0.6s ease;
}

/* .lytravel-hairline's own rule (further up this file) draws its line
   with border-top, whose color comes from --wp--preset--color--border —
   without this, the hairline flips color instantly while everything
   around it fades smoothly. */
.lytravel-hairline {
	transition: border-color 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	a:where(:not(.wp-element-button)),
	.lytravel-header,
	.lytravel-header .wp-block-site-title a,
	.lytravel-header .wp-block-navigation-item a,
	.lytravel-footer,
	.lytravel-footer-inner,
	.lytravel-footer-sep,
	.lytravel-footer a,
	.lytravel-hairline,
	.lytravel-single .wp-block-gallery img,
	.lytravel-single .wp-block-image img,
	.is-style-aurora-dark .wp-block-image::before,
	.is-style-autumn-dark .wp-block-image::before,
	.is-style-taiga-mist .wp-block-image::before,
	.is-style-taiga-dusk .wp-block-image::before {
		transition: none;
	}
}

/* "Dark section" / "Aurora dark" / "Autumn dark" / "Taiga mist" /
   "Taiga dusk" block styles — core/group, registered in functions.php
   (lytravel_register_blocks()). No color rules needed here (handled
   entirely by the token redefinition above); just a bit of vertical
   breathing room for a "chapter" feel. All variants share this and the
   image-lift treatment below — only the glows further down are exclusive
   to the styles other than "Dark section". */
.is-style-dark-section,
.is-style-aurora-dark,
.is-style-autumn-dark,
.is-style-taiga-mist,
.is-style-taiga-dusk {
	padding: var(--wp--preset--spacing--40) 0;
}

/* Images inside a dark section: the theme's usual image border/shadow
   (further up this file) is tuned for a light background and nearly
   disappears against a dark one — lighten the inset line, deepen the
   drop shadow so the image still reads as lifted off the background.
   Scoped to body.lytravel-dark-active so this shadow only applies while
   dark mode is actually active — otherwise it would also show while a
   dark chapter is merely on the page but not yet triggered, and
   permanently in the block editor (which loads this stylesheet via
   add_editor_style() in functions.php but never gets the
   lytravel-dark-active class). */
body.lytravel-dark-active .is-style-dark-section .wp-block-image img,
body.lytravel-dark-active .is-style-dark-section .wp-block-gallery img,
body.lytravel-dark-active .is-style-aurora-dark .wp-block-image img,
body.lytravel-dark-active .is-style-aurora-dark .wp-block-gallery img,
body.lytravel-dark-active .is-style-autumn-dark .wp-block-image img,
body.lytravel-dark-active .is-style-autumn-dark .wp-block-gallery img,
body.lytravel-dark-active .is-style-taiga-mist .wp-block-image img,
body.lytravel-dark-active .is-style-taiga-mist .wp-block-gallery img,
body.lytravel-dark-active .is-style-taiga-dusk .wp-block-image img,
body.lytravel-dark-active .is-style-taiga-dusk .wp-block-gallery img {
	box-shadow:
		inset 0 0 0 1px rgba(238, 241, 244, 0.12),
		0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Same lift under the autumn and taiga palettes, with the inset line
   tinted to their cream foreground instead of the cool one. */
body.lytravel-dark-active.lytravel-autumn-active .is-style-autumn-dark .wp-block-image img,
body.lytravel-dark-active.lytravel-autumn-active .is-style-autumn-dark .wp-block-gallery img,
body.lytravel-dark-active.lytravel-taiga-active .is-style-taiga-mist .wp-block-image img,
body.lytravel-dark-active.lytravel-taiga-active .is-style-taiga-mist .wp-block-gallery img,
body.lytravel-dark-active.lytravel-dusk-active .is-style-taiga-dusk .wp-block-image img,
body.lytravel-dark-active.lytravel-dusk-active .is-style-taiga-dusk .wp-block-gallery img {
	box-shadow:
		inset 0 0 0 1px rgba(243, 235, 224, 0.12),
		0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Green/purple glow sampled from an actual aurora photo, swept diagonally
   (green lower-left to purple upper-right, matching the photo's own
   composition) via a blurred gradient sitting behind the image on a
   ::before — reaches the same distance on every side, unlike a box-shadow
   offset which pushes further in one direction than another. img elements
   can't take ::before content themselves, so this lives on the
   wp-block-image figure that wraps it (also matches gallery items, which
   carry the same class on their own inner figure).

   Exclusive to "Aurora dark" — "Dark section" stays plain, no glow.

   The ::before is always present (inside .is-style-aurora-dark, not
   gated on lytravel-dark-active) and only its opacity toggles — creating
   a filter: blur() layer is expensive, and doing that construction at the
   exact instant the scroll trigger fires was the stutter reported when
   this used to be gated on the active class. Paying that cost once, up
   front, and animating opacity afterward (cheap, compositor-only) is
   what makes the fade itself smooth. */
.is-style-aurora-dark .wp-block-image {
	position: relative;
}

.is-style-aurora-dark .wp-block-image::before {
	content: "";
	position: absolute;
	inset: -18px;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
	background: linear-gradient(
		to top right,
		rgba(76, 217, 140, 0.15) 0%,
		transparent 55%,
		rgba(163, 116, 217, 0.15) 100%
	);
	filter: blur(14px);
}

body.lytravel-dark-active .is-style-aurora-dark .wp-block-image::before {
	opacity: 1;
}

/* "Autumn dark": same glow mechanics as "Aurora dark" above, in fall
   foliage colors instead — golden yellow lower-left to burnt orange
   upper-right. */
.is-style-autumn-dark .wp-block-image {
	position: relative;
}

.is-style-autumn-dark .wp-block-image::before {
	content: "";
	position: absolute;
	inset: -18px;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
	background: linear-gradient(
		to top right,
		rgba(240, 188, 58, 0.15) 0%,
		transparent 55%,
		rgba(217, 101, 38, 0.15) 100%
	);
	filter: blur(14px);
}

body.lytravel-dark-active .is-style-autumn-dark .wp-block-image::before {
	opacity: 1;
}

/* "Taiga mist": same glow mechanics again — rust-orange leaves
   lower-left to pale sky upper-right, the photo's own warm-ground /
   cool-sky layout. */
.is-style-taiga-mist .wp-block-image {
	position: relative;
}

.is-style-taiga-mist .wp-block-image::before {
	content: "";
	position: absolute;
	inset: -18px;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
	background: linear-gradient(
		to top right,
		rgba(196, 108, 58, 0.18) 0%,
		transparent 55%,
		rgba(193, 210, 229, 0.18) 100%
	);
	filter: blur(14px);
}

body.lytravel-dark-active .is-style-taiga-mist .wp-block-image::before {
	opacity: 1;
}

/* "Taiga dusk": rust-orange leaves lower-left to warm sand upper-right. */
.is-style-taiga-dusk .wp-block-image {
	position: relative;
}

.is-style-taiga-dusk .wp-block-image::before {
	content: "";
	position: absolute;
	inset: -18px;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
	background: linear-gradient(
		to top right,
		rgba(196, 108, 58, 0.18) 0%,
		transparent 55%,
		rgba(226, 190, 150, 0.18) 100%
	);
	filter: blur(14px);
}

body.lytravel-dark-active .is-style-taiga-dusk .wp-block-image::before {
	opacity: 1;
}