/* ============================================================================
   LeArtista Single Blog Post — editorial reader
   ----------------------------------------------------------------------------
   Builds on blog-archive.css (which provides brand vars, atmosphere FX,
   card markup, pill styles). Adds: full-bleed hero, narrow reading
   column, share rows, author byline, event-CTA banner, related grid.
   ========================================================================== */

/* Body of the single page reuses the shared blog page wrapper (.lalp-blog)
   so atmosphere + spine + brand vars apply. .lalp-single is a modifier
   class on the same element for the single-only rules below. */
.lalp-single {
	color: var(--lalp-c-text);
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
}

/* Spine: blog-archive.css anchors at clamp(180px, 26vh, 320px) which lands
   near the top on the single page (where the hero is up to 720px tall).
   Push it down to sit roughly alongside the article body for impact. */
.lalp-single .lalp-blog__spine {
	top: clamp(440px, 65vh, 760px);
}
.lalp-single__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 48px);
}
/* Narrow reading column inside the article (when ToC is absent or below
   the sidebar breakpoint). The 2-column .lalp-single__article-grid rule
   below overrides this when the ToC is present and viewport ≥1024px. */
.lalp-single__article .lalp-single__container.lalp-single__article-grid--solo {
	max-width: 760px;
}

/* ---------- Reading progress bar ---------- */
.lalp-single__progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(161, 128, 103, .15);
	z-index: 9990;
	pointer-events: none;
}
.lalp-single__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--lalp-c-secondary);
	transition: width .08s linear;
}
@media (prefers-reduced-motion: reduce) {
	.lalp-single__progress { display: none; }
}

/* ============================================================================
   HERO — full-bleed featured image with title overlay.
   ========================================================================== */
.lalp-single__hero {
	position: relative;
	min-height: clamp(420px, 70vh, 720px);
	display: flex;
	align-items: flex-end;
	padding: clamp(80px, 11vw, 140px) clamp(20px, 4vw, 48px) clamp(48px, 7vw, 96px);
	color: var(--lalp-c-white);
	overflow: hidden;
	z-index: 1;                          /* above the atmosphere mesh */
	/* Brand asymmetric radius — bottom-right curl, like the win-win-event hero */
	border-bottom-right-radius: clamp(48px, 8vw, 100px);
	background: var(--lalp-c-primary);   /* fallback while image loads */
}
.lalp-single__hero--no-image {
	background: linear-gradient(135deg, var(--lalp-c-secondary) 0%, var(--lalp-c-primary) 100%);
}
.lalp-single__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* Dark left-fading scrim — same vocabulary as the win-win-event hero
   so the title block on the left is always legible. */
.lalp-single__hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		/* Bottom lift — keeps the meta row solid */
		linear-gradient(180deg, rgba(38, 32, 28, 0) 45%, rgba(38, 32, 28, .65) 100%),
		/* Left-anchored taupe spotlight */
		radial-gradient(ellipse 65% 85% at 12% 50%, rgba(161, 128, 103, .28) 0%, rgba(161, 128, 103, 0) 60%),
		/* Primary L→R gradient */
		linear-gradient(95deg,
			rgba(38, 32, 28, .85) 0%,
			rgba(60, 52, 46, .72) 30%,
			rgba(87, 77, 66, .50) 55%,
			rgba(120, 100, 84, .25) 78%,
			rgba(161, 128, 103, .10) 100%);
}
.lalp-single__hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 32px);
}
/* Specificity-boosted: Hello Elementor's `a { color: #c36 }` reset loads
   after our CSS, so a single-class selector loses to it on tag+attr
   specificity. Anchor through .lalp-single + element to win cleanly. */
.lalp-single a.lalp-single__hero-cat {
	align-self: flex-start;
	padding: 7px 16px;
	font-size: 10px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--lalp-c-white) !important;
	background: rgba(161, 128, 103, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 999px;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: background .25s ease, transform .25s ease;
}
.lalp-single a.lalp-single__hero-cat:hover {
	background: var(--lalp-c-secondary);
	color: var(--lalp-c-white) !important;
	transform: translateY(-1px);
}
.lalp-single h1.lalp-single__title,
.lalp-single .lalp-single__title {
	margin: 0;
	max-width: 24ch;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.05;
	letter-spacing: -.012em;
	color: var(--lalp-c-white);
	text-wrap: balance;
}
.lalp-single__hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	margin-top: 8px;
}
.lalp-single__hero-date {
	display: flex;
	align-items: center;
	gap: 14px;
}
/* Override the big-day-number's taupe color to white-ish for the hero */
.lalp-single__hero-date .lalp-blog__card-day {
	color: var(--lalp-c-white);
	opacity: .95;
}
.lalp-single__hero-date .lalp-blog__card-meta-sub {
	color: rgba(255, 255, 255, .85);
}
.lalp-single__hero-date .lalp-blog__card-month {
	color: var(--lalp-c-white);
}
.lalp-single__hero-author {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	letter-spacing: .14em;
}
.lalp-single__hero-author-label {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.lalp-single__hero-author-name {
	font-weight: var(--lalp-fw-medium);
	color: var(--lalp-c-white);
}

/* ============================================================================
   Share rows
   ========================================================================== */
.lalp-single__share {
	padding: clamp(20px, 2.5vw, 32px) 0;
}
.lalp-single__share--top {
	padding-top: clamp(24px, 3vw, 40px);
}
.lalp-single__share--bottom {
	padding-top: clamp(40px, 5vw, 64px);
}
.lalp-single__share .lalp-single__container {
	max-width: 760px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.lalp-single__share-label {
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(87, 87, 86, .68);
	margin-right: 6px;
}
.lalp-single .lalp-single__share-link,
.lalp-single button.lalp-single__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/* Subdued at rest: soft taupe-tinted disc, white glyph inside, no
	 * visible border. Reads as a quiet UI element that lives in the
	 * page atmosphere rather than competing with editorial content. */
	background: rgba(161, 128, 106, 0.18) !important;
	border: 1px solid transparent !important;
	border-radius: 50%;
	color: var(--lalp-c-white);
	cursor: pointer;
	padding: 0;
	transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
	text-decoration: none !important;
	border-bottom: 0 !important;
}
.lalp-single a.lalp-single__share-link:hover,
.lalp-single button.lalp-single__share-link:hover {
	background: var(--lalp-c-secondary) !important;
	border-color: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white);
	transform: translateY(-1px);
}
.lalp-single__share-link.is-copied {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
}

/* Floating toast next to the Viber button — used on desktop where the
 * viber:// protocol can't open a "share to contact" flow. Tells the user
 * the text was copied so they can paste it into Viber Desktop. */
.lalp-share-toast {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translate(-50%, 4px);
	background: var(--lalp-c-primary, #2a2624);
	color: #fff;
	font-family: var(--lalp-font-sans, "Montserrat", sans-serif);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.3;
	padding: 8px 12px;
	border-radius: 0 12px 12px 12px;
	white-space: nowrap;
	box-shadow: 0 12px 30px rgba(20, 18, 16, 0.18);
	opacity: 0;
	pointer-events: none;
	z-index: 50;
	transition: opacity 220ms ease, transform 220ms ease;
}
.lalp-share-toast::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--lalp-c-primary, #2a2624);
}
.lalp-share-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ============================================================================
   Prose — the actual article body. Editorial reading typography.
   ========================================================================== */
.lalp-single__article {
	padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 64px);
	position: relative;
	z-index: 1;
}
/* Body prose: pure dark gray (not true black — easier on the eyes for
   long reading) at medium weight for contrast against the cool gray bg.
   Selector includes .lalp-single + descendant for the same Hello Elementor
   specificity-boost reason as the hero-cat link. */
.lalp-single .lalp-single__prose,
.lalp-single .lalp-single__prose p {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-medium);
	font-size: clamp(16px, 1.15vw, 18px);
	line-height: 1.75;
	color: #2a2a29;
}
.lalp-single__prose > * + * { margin-top: 1.25em; }

/* Lede — slightly larger and lighter weight, but still high-contrast
   so it doesn't read as "muted gray." */
.lalp-single .lalp-single__prose > p:first-of-type {
	font-size: clamp(18px, 1.4vw, 21px);
	font-weight: var(--lalp-fw-regular);
	line-height: 1.55;
	color: var(--lalp-c-primary);
	margin-top: 0;
}

.lalp-single__prose h2,
.lalp-single__prose h3,
.lalp-single__prose h4 {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
	color: var(--lalp-c-primary);
	letter-spacing: -.003em;
	margin: 1.6em 0 .5em;
	line-height: 1.3;
	text-wrap: balance;
}
/* Specificity-boosted so Hello Elementor's reset (h2 { font-size: 2rem })
   doesn't override these. */
.lalp-single .lalp-single__prose h2 { font-size: clamp(20px, 1.5vw, 24px); }
.lalp-single .lalp-single__prose h3 { font-size: clamp(17px, 1.2vw, 19px); }
.lalp-single__prose h4 {
	font-size: clamp(16px, 1.4vw, 18px);
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}

.lalp-single__prose a {
	color: var(--lalp-c-secondary);
	text-decoration: none;
	border-bottom: 1px solid rgba(161, 128, 103, .35);
	transition: color .2s ease, border-color .2s ease;
}
.lalp-single__prose a:hover {
	color: var(--lalp-c-primary);
	border-bottom-color: var(--lalp-c-primary);
}
.lalp-single__prose strong { font-weight: var(--lalp-fw-bold); color: var(--lalp-c-primary); }
.lalp-single__prose em { font-style: italic; }

.lalp-single__prose blockquote {
	margin: 2em 0;
	padding: 1.2em 0 1.2em 28px;
	border-left: 2px solid var(--lalp-c-secondary);
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-style: italic;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.45;
	color: var(--lalp-c-primary);
}
.lalp-single__prose blockquote p { margin: 0; }
.lalp-single__prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .28em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--lalp-c-secondary);
}

.lalp-single__prose img,
.lalp-single__prose figure {
	max-width: 100%;
	height: auto;
	border-radius: 4px 24px 24px 24px;          /* asymmetric brand */
	display: block;
}
.lalp-single__prose figure { margin: 2em 0; }
.lalp-single__prose figcaption {
	margin-top: 10px;
	font-size: 12px;
	color: rgba(87, 87, 86, .68);
	font-style: italic;
	text-align: center;
}

.lalp-single__prose ul,
.lalp-single__prose ol {
	padding-left: 24px;
}
.lalp-single__prose li + li { margin-top: .5em; }
.lalp-single__prose ul { list-style: none; padding-left: 0; }
.lalp-single__prose ul > li {
	position: relative;
	padding-left: 26px;
}
.lalp-single__prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .85em;
	width: 12px;
	height: 1px;
	background: var(--lalp-c-secondary);
}

.lalp-single__prose hr {
	border: 0;
	height: 1px;
	background: var(--lalp-c-line);
	margin: 2.5em 0;
}

.lalp-single__prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .9em;
	padding: 2px 6px;
	background: var(--lalp-c-gray-soft);
	border-radius: 3px;
}
.lalp-single__prose pre {
	padding: 1em;
	background: var(--lalp-c-gray-soft);
	border-radius: 8px;
	overflow-x: auto;
	font-size: 14px;
}

/* Tags row */
.lalp-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 3em 0 0;
	padding: 0;
}
.lalp-single .lalp-single__tags a {
	display: inline-flex;
	padding: 4px 12px;
	font-size: 11px;
	color: var(--lalp-c-secondary);
	background: transparent;
	border: 1px solid var(--lalp-c-line);
	border-radius: 999px;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease;
}
.lalp-single .lalp-single__tags a:hover {
	background: var(--lalp-c-secondary);
	color: var(--lalp-c-white);
}

/* ============================================================================
   Author byline card
   ========================================================================== */
.lalp-single__author {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 4vw, 56px) 0;
}
.lalp-single__author .lalp-single__container {
	max-width: 760px;
}
.lalp-single__author-card {
	display: flex;
	gap: clamp(18px, 2.5vw, 28px);
	padding: clamp(24px, 3.5vw, 40px);
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 50px 50px 50px;
	box-shadow: 0 16px 40px -24px rgba(87, 87, 86, .18);
}
.lalp-single__author-avatar-wrap {
	flex-shrink: 0;
}
.lalp-single__author-avatar-wrap img,
.lalp-single .lalp-single__author-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--lalp-c-blog-bg);
}
.lalp-single__author-body {
	flex: 1;
	min-width: 0;
}
.lalp-single__author-eyebrow {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}
.lalp-single h3.lalp-single__author-name {
	margin: 0 0 8px;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
	font-size: 19px;
	color: var(--lalp-c-primary);
}
.lalp-single__author-bio {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(87, 87, 86, .85);
}

/* ----------------------------------------------------------------------
 * Cutout variant — when the editor uploaded a custom author photo via
 * the meta box. The portrait becomes a free-floating cutout that hangs
 * out of the top of the card and is anchored to its bottom-left corner,
 * like a framed photo leaning against the card. Mirrors the brand
 * cutout language we use for the "Продаваш имот?" CTA + the Win-Win
 * cast portraits.
 * -------------------------------------------------------------------- */
.lalp-single__author--cutout {
	/* Top room so the portrait — capped at 50vh — never crashes into
	 * the share row above. The cutout's height is its dominant constraint,
	 * so we reserve roughly that much above the card's natural top. */
	padding-top: clamp(120px, 21vh, 330px);
}
.lalp-single__author-card--cutout {
	position: relative;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(16px, 2vw, 28px);
	/* Reserve room on the LEFT for the cutout, push the text right. */
	padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(220px, 22vw, 320px);
	overflow: visible;
}
.lalp-single__author-avatar-wrap--cutout {
	/* Anchor: bottom edge of the wrap is flush with the bottom of the
	 * card (so the cutout grows UPWARD only). The wrap is a fixed-width
	 * column on the left of the card; height is given by the image. */
	position: absolute;
	left: clamp(-20px, -1vw, 0px);
	bottom: 0;                            /* no negative bottom — sits ON the card edge */
	width: clamp(200px, 24vw, 320px);
	max-height: 50vh;                     /* hard cap so it never gets too tall */
	margin: 0;
	display: flex;
	align-items: flex-end;                /* image hugs bottom of the wrap */
	pointer-events: none;
}
.lalp-single .lalp-single__author-avatar--cutout {
	display: block;
	width: 100%;
	height: auto;
	max-height: 50vh;                     /* contained: never larger than 50vh */
	/* No frame: naked PNG / cutout image. */
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	object-fit: contain;
	object-position: bottom left;
}
.lalp-single__author-card--cutout .lalp-single__author-body {
	padding-bottom: clamp(4px, 0.5vw, 12px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ============================================================================
   Event CTA banner — leads readers to the next L'Artista event
   ========================================================================== */
.lalp-single__event-cta {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 4vw, 56px) 0;
}
.lalp-single__event-card {
	position: relative;
	overflow: hidden;
	padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 56px);
	color: var(--lalp-c-white);
	/* Lighter mid-taupe gradient so the banner sits gracefully on the cool
	   gray page bg instead of feeling like a heavy slab of dark brown.
	   The left-anchored highlight stays — it gives shape without weight. */
	background:
		radial-gradient(ellipse 70% 100% at 12% 50%, rgba(255, 250, 242, .22) 0%, rgba(255, 250, 242, 0) 60%),
		linear-gradient(135deg, #7a6651 0%, #97836c 55%, #b4a08a 100%);
	border-radius: 0 50px 50px 50px;
	max-width: 1080px;
	margin: 0 auto;
	box-shadow: 0 26px 50px -30px rgba(87, 87, 86, .28);
}
.lalp-single__event-eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}
.lalp-single h3.lalp-single__event-title {
	margin: 0 0 14px;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--lalp-c-white);
	text-wrap: balance;
}
.lalp-single__event-lede {
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
	max-width: 56ch;
}
.lalp-single .lalp-single__event-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-size: 12px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lalp-c-primary);
	background: var(--lalp-c-white);
	border-radius: 999px;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.lalp-single .lalp-single__event-button:hover {
	background: var(--lalp-c-brown);
	color: var(--lalp-c-primary);
	transform: translateY(-2px);
}

/* ============================================================================
   Related posts grid (reuses .lalp-blog__card from blog-archive.css)
   ========================================================================== */
.lalp-single__related {
	position: relative;
	z-index: 1;
	padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 9vw, 120px);
}
.lalp-single__related-header {
	margin-bottom: clamp(28px, 4vw, 48px);
	text-align: center;
}
.lalp-single__related-header .lalp-event__eyebrow {
	display: inline-block;
}
.lalp-single h2.lalp-single__related-title {
	margin: 0;
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-light);
	font-size: clamp(26px, 3.2vw, 42px);
	letter-spacing: -.01em;
	color: var(--lalp-c-primary);
	line-height: 1.1;
}
/* Related grid is always 3 equal columns (no feature card) — override the
   base archive grid which expects a 2-col feature. */
.lalp-single__related-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lalp-single__related-cta {
	margin-top: clamp(32px, 4vw, 48px);
	text-align: center;
}
.lalp-single .lalp-single__related-cta-link {
	display: inline-block;
	padding: 12px 28px;
	font-size: 12px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line);
	border-radius: 999px;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lalp-single .lalp-single__related-cta-link:hover {
	background: var(--lalp-c-secondary);
	color: var(--lalp-c-white);
	border-color: var(--lalp-c-secondary);
}

/* ============================================================================
   Standalone featured-image slot
   ----------------------------------------------------------------------------
   Sits between the hero (which uses the image as background) and the article
   body — gives the photo a clean presentation moment without the dark scrim. */
.lalp-single__feature-image {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 1.5vw, 16px);
}
.lalp-single__feature-image .lalp-single__container {
	max-width: 1080px;                          /* wider than the prose column */
}
.lalp-single__feature-image-card {
	margin: 0;
	overflow: hidden;
	background: var(--lalp-c-white);
	border-radius: 0 50px 50px 50px;            /* brand asymmetric */
	box-shadow: 0 30px 60px -30px rgba(87, 87, 86, .28);
}
.lalp-single__feature-image-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.lalp-single__feature-image-caption {
	padding: 14px 24px 18px;
	font-size: 13px;
	font-style: italic;
	color: rgba(87, 87, 86, .72);
	text-align: center;
}

/* ============================================================================
   Extra-images gallery carousel
   ----------------------------------------------------------------------------
   Editorial scroll-snap carousel. Same gesture language as the property
   showcase on the win-win-event landing: snap, smooth scroll, nav pills. */
.lalp-single__gallery {
	position: relative;
	z-index: 1;
	padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px);
}
.lalp-single__gallery-header {
	margin-bottom: clamp(20px, 2.5vw, 32px);
}
.lalp-single__gallery-header .lalp-event__eyebrow {
	display: inline-block;
}
.lalp-single__gallery-track {
	display: flex;
	gap: clamp(14px, 1.6vw, 24px);
	overflow-x: auto;
	/* scroll-snap-type is set to `none` by JS at init so continuous drift
	   feels smooth — fallback here is for no-JS contexts. */
	scroll-snap-type: x mandatory;
	scroll-behavior: auto;                          /* JS owns smoothing */
	padding: 4px clamp(20px, 4vw, 48px) 24px;
	/* Hide native scrollbar entirely — the auto-scroll loop makes it
	   twitch otherwise, and the prev/next buttons are the affordance. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.lalp-single__gallery-track::-webkit-scrollbar { display: none; }
.lalp-single__gallery-slide {
	flex: 0 0 clamp(280px, 60vw, 720px);
	margin: 0;
	scroll-snap-align: center;
	background: var(--lalp-c-white);
	border-radius: 0 50px 50px 50px;            /* brand asymmetric */
	overflow: hidden;
	box-shadow: 0 16px 40px -24px rgba(87, 87, 86, .22);
	cursor: zoom-in;
	transition:
		transform .55s cubic-bezier(.22, .61, .36, 1),
		box-shadow .55s cubic-bezier(.22, .61, .36, 1);
}
.lalp-single__gallery-slide:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -28px rgba(87, 87, 86, .32);
}
.lalp-single__gallery-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.lalp-single__gallery-slide:hover .lalp-single__gallery-img {
	transform: scale(1.04);
}
.lalp-single__gallery-caption {
	padding: 12px 20px 16px;
	font-size: 12px;
	font-style: italic;
	color: rgba(87, 87, 86, .72);
}

/* Nav pills — same circular white buttons as the property showcase. */
.lalp-single__gallery-controls {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 10px;
}
.lalp-single button.lalp-single__gallery-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 1px solid var(--lalp-c-line) !important;
	background: var(--lalp-c-white) !important;
	color: var(--lalp-c-primary) !important;
	border-radius: 50%;
	cursor: pointer;
	transition:
		background .4s cubic-bezier(.22, .61, .36, 1),
		color .4s cubic-bezier(.22, .61, .36, 1),
		border-color .4s cubic-bezier(.22, .61, .36, 1),
		transform .35s cubic-bezier(.22, .61, .36, 1),
		box-shadow .35s cubic-bezier(.22, .61, .36, 1);
	box-shadow: 0 8px 20px -10px rgba(87, 87, 86, .25);
}
.lalp-single button.lalp-single__gallery-nav:hover {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(161, 128, 103, .45);
}
.lalp-single button.lalp-single__gallery-nav:active {
	transform: translateY(0);
	transition-duration: .15s;
}

/* ============================================================================
   Prev/Next article navigation
   ----------------------------------------------------------------------------
   Two side-by-side cards at the end of the article. Editorial eyebrows
   above the title for prev/next direction cues. */
.lalp-single__pagenav {
	position: relative;
	z-index: 1;
	padding: clamp(32px, 4vw, 56px) 0;
}
.lalp-single__pagenav .lalp-single__container {
	max-width: 1080px;
}
.lalp-single__pagenav-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
}
.lalp-single a.lalp-single__pagenav-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 3vw, 32px) clamp(22px, 2.6vw, 36px);
	background: var(--lalp-c-white);
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 24px 24px 24px;
	text-decoration: none !important;
	border-bottom: 0 !important;
	color: var(--lalp-c-primary) !important;
	box-shadow: 0 16px 40px -28px rgba(87, 87, 86, .18);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lalp-single a.lalp-single__pagenav-link--next {
	text-align: right;
	border-radius: 24px 0 24px 24px;             /* mirror asymmetric */
}
.lalp-single a.lalp-single__pagenav-link:hover {
	transform: translateY(-3px);
	border-color: var(--lalp-c-secondary);
	box-shadow: 0 24px 50px -28px rgba(87, 87, 86, .3);
}
.lalp-single__pagenav-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}
.lalp-single a.lalp-single__pagenav-link--next .lalp-single__pagenav-eyebrow {
	justify-content: flex-end;
}
.lalp-single__pagenav-title {
	font-family: var(--lalp-font);
	font-weight: var(--lalp-fw-regular);
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.3;
	color: var(--lalp-c-primary);
	letter-spacing: -.003em;
	text-wrap: balance;
}
.lalp-single__pagenav-placeholder {
	/* Empty cell when there's no prev/next — keeps the grid balanced */
	visibility: hidden;
}

/* ============================================================================
   Lightbox — full-screen image viewer
   ----------------------------------------------------------------------------
   Built by JS (buildLightbox in blog-single.js) and appended to <body>.
   Smooth open/close via opacity + visibility transitions on .is-open;
   slide changes use an opacity crossfade via .is-changing on the stage. */
.lalp-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vw, 64px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity .35s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear .35s;
}
.lalp-lb.is-open {
	opacity: 1;
	visibility: visible;
	transition:
		opacity .35s cubic-bezier(.22, .61, .36, 1),
		visibility 0s linear 0s;
}
.lalp-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 19, 18, .88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	cursor: zoom-out;
}
.lalp-lb__stage {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .35s cubic-bezier(.22, .61, .36, 1);
}
.lalp-lb__stage.is-changing { opacity: 0; }
.lalp-lb__img {
	display: block;
	max-width: 90vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
	user-select: none;
	-webkit-user-drag: none;
}
/* Specificity-boosted with `button.` chains + `!important` on color so
   Hello Elementor's `a { color: #c36 }` and `button` resets can't bleed
   pink into our glassmorphic lightbox controls. */
.lalp-lb button.lalp-lb__close,
.lalp-lb button.lalp-lb__nav {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	background: rgba(255, 255, 255, .14) !important;
	color: rgba(255, 255, 255, .92) !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition:
		background .3s cubic-bezier(.22, .61, .36, 1),
		border-color .3s cubic-bezier(.22, .61, .36, 1),
		color .3s cubic-bezier(.22, .61, .36, 1),
		transform .3s cubic-bezier(.22, .61, .36, 1);
}
.lalp-lb button.lalp-lb__close:hover,
.lalp-lb button.lalp-lb__nav:hover {
	background: var(--lalp-c-secondary) !important;
	color: var(--lalp-c-white) !important;
	border-color: var(--lalp-c-secondary) !important;
	transform: scale(1.06);
}
.lalp-lb__close { top: 20px; right: 20px; }
.lalp-lb__nav svg,
.lalp-lb__close svg { width: 22px; height: 22px; }
.lalp-lb__nav--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lalp-lb__nav--next { right: 20px; top: 50%; transform: translateY(-50%); }
.lalp-lb button.lalp-lb__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.lalp-lb button.lalp-lb__nav--next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 600px) {
	.lalp-lb__nav,
	.lalp-lb__close { width: 40px; height: 40px; }
	.lalp-lb__nav svg,
	.lalp-lb__close svg { width: 18px; height: 18px; }
	.lalp-lb__nav--prev { left: 12px; }
	.lalp-lb__nav--next { right: 12px; }
	.lalp-lb__close { top: 12px; right: 12px; }
	.lalp-lb__img { max-width: 94vw; max-height: 80vh; }
}
@media (prefers-reduced-motion: reduce) {
	.lalp-lb,
	.lalp-lb__stage { transition: none; }
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.lalp-single__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.lalp-single__hero {
		min-height: clamp(360px, 72vh, 580px);
		padding: clamp(72px, 14vw, 100px) 18px clamp(36px, 7vw, 56px);
		border-bottom-right-radius: 36px;
	}
	.lalp-single h1.lalp-single__title,
	.lalp-single .lalp-single__title {
		font-size: clamp(28px, 8vw, 40px);
		max-width: 18ch;
	}
	.lalp-single__hero-cat {
		font-size: 9px;
		padding: 6px 13px;
	}
	.lalp-single__hero-meta {
		gap: 14px;
	}
	.lalp-single__hero-date .lalp-blog__card-day {
		font-size: 32px;
	}

	.lalp-single__prose {
		font-size: 16px;
		line-height: 1.7;
	}
	.lalp-single__prose > p:first-of-type {
		font-size: 17px;
	}
	.lalp-single__prose blockquote {
		padding-left: 18px;
		font-size: 18px;
	}

	.lalp-single__author-card {
		flex-direction: column;
		text-align: center;
		border-radius: 0 36px 36px 36px;
	}
	.lalp-single__author-avatar-wrap {
		display: flex;
		justify-content: center;
	}

	/* Cutout variant on mobile: portrait still naked (no frame), anchored
	 * to the top-left of the card, breaking the top edge. Text below it,
	 * left-aligned. */
	.lalp-single__author-card--cutout {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		padding: clamp(140px, 38vw, 200px) clamp(20px, 5vw, 28px) clamp(20px, 5vw, 28px);
	}
	.lalp-single__author-avatar-wrap--cutout {
		position: absolute;
		left: clamp(-10px, -1vw, 4px);
		top: clamp(-60px, -10vw, -30px);
		bottom: auto;
		width: clamp(150px, 44vw, 220px);
	}
	.lalp-single__author-card--cutout .lalp-single__author-body {
		min-height: 0;
		padding-bottom: 0;
		display: block;
	}
	.lalp-single__author--cutout {
		padding-top: clamp(80px, 18vw, 120px);
	}

	.lalp-single__event-card {
		border-radius: 0 36px 36px 36px;
	}

	.lalp-single__related-grid {
		grid-template-columns: 1fr;
	}

	.lalp-single h2.lalp-single__related-title {
		font-size: 26px;
	}

	.lalp-single__share .lalp-single__container {
		gap: 8px;
	}
	.lalp-single__share-label {
		flex-basis: 100%;
		margin-bottom: 6px;
	}

	/* Mobile-only spine override — already hidden by blog-archive.css's
	   600px rule, but explicit here so nobody re-enables it accidentally. */
	.lalp-single .lalp-blog__spine {
		display: none;
	}

	/* Feature image: smaller asymmetric corner, tighter padding */
	.lalp-single__feature-image-card {
		border-radius: 0 28px 28px 28px;
	}
	.lalp-single__feature-image-img {
		aspect-ratio: 4 / 3;
	}

	/* Gallery: slides take most of the viewport */
	.lalp-single__gallery-slide {
		flex: 0 0 82vw;
		border-radius: 0 28px 28px 28px;
	}
	.lalp-single button.lalp-single__gallery-nav {
		width: 40px;
		height: 40px;
	}

	/* Prev/Next: stack to a single column on phones */
	.lalp-single__pagenav-row {
		grid-template-columns: 1fr;
	}
	.lalp-single a.lalp-single__pagenav-link--next {
		text-align: left;
		border-radius: 0 24px 24px 24px;
	}
	.lalp-single a.lalp-single__pagenav-link--next .lalp-single__pagenav-eyebrow {
		justify-content: flex-start;
	}
	.lalp-single__pagenav-placeholder {
		display: none;
	}
}

/* ============================================================================
   Table of contents — floating sidebar (desktop ≥1280px)
   ----------------------------------------------------------------------------
   Mirrors the win-win-event landing's ToC: vertical pill on the left edge,
   visible only after the hero scrolls past. Each link shows a hairline
   leading dash; the active section's dash grows + tints brand-taupe.
   ========================================================================== */
/* When the ToC exists, the article container splits into a 2-column grid:
   narrow sticky ToC on the left, prose column on the right. When there
   are no headings (--solo modifier), prose takes the full width and the
   .lalp-single__container width stays at 760px (single-column layout). */
.lalp-single__article-grid {
	display: grid;
	grid-template-columns: 220px minmax(0, 720px);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
	max-width: 1040px;
}
.lalp-single__article-grid--solo {
	display: block;
	max-width: 760px;
}

/* The ToC sidebar wrapper. Sticky so it scrolls with the article until it
   hits the viewport top, then sticks there until the article ends. The
   wrap (not the nav inside) carries `position: sticky` — keeps the nav's
   chrome (background/border/radius) intact. */
.lalp-single__toc-wrap {
	position: sticky;
	top: clamp(80px, 12vh, 140px);
	align-self: start;                       /* required for sticky in grid */
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--lalp-c-line) transparent;
}

.lalp-single__toc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 18px;
	background: rgba(255, 255, 255, .72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--lalp-c-line);
	border-radius: 0 24px 24px 24px;          /* asymmetric brand */
}

/* Hide the desktop ToC sidebar entirely on smaller screens — prose goes
   full-width and the mobile floating ToC takes over. */
@media (max-width: 1024px) {
	.lalp-single__article-grid {
		display: block;
		max-width: 760px;
	}
	.lalp-single__toc-wrap { display: none; }
}

/* ============================================================================
   Mobile ToC — floating pill + glassmorphic drop-up sheet
   ----------------------------------------------------------------------------
   Desktop hides the pill entirely (the sidebar covers desktop). On mobile
   (≤1023px) a small "В статията" pill sits bottom-right; tap opens a sheet
   that slides up from the bottom with the same heading list.
   ========================================================================== */
.lalp-single__toc-mobile {
	display: none;
}
@media (max-width: 1023px) {
	.lalp-single__toc-mobile {
		display: block;
	}
}

/* --- Floating trigger pill --- */
.lalp-single button.lalp-single__toc-mobile-trigger,
.lalp-single__toc-mobile-trigger {
	position: fixed;
	left: 16px;
	bottom: 20px;
	/* Sits above all third-party widgets (WeGlot flags ~99990,
	   Complianz banner, Elementor sticky header, etc). */
	z-index: 100000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px 10px 14px;
	font-family: var(--lalp-font);
	font-size: 11px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lalp-c-white) !important;
	background: var(--lalp-c-secondary) !important;
	border: 0 !important;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 10px 30px -10px rgba(87, 87, 86, .35),
		0 4px 12px -6px rgba(161, 128, 103, .45);
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition:
		opacity .35s cubic-bezier(.22, .61, .36, 1),
		transform .35s cubic-bezier(.22, .61, .36, 1),
		background .25s ease;
}
/* JS adds .is-visible while the article is in view */
.lalp-single__toc-mobile.is-visible .lalp-single__toc-mobile-trigger {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.lalp-single button.lalp-single__toc-mobile-trigger:active {
	background: var(--lalp-c-primary) !important;
}
.lalp-single__toc-mobile-trigger svg {
	flex-shrink: 0;
}

/* --- Backdrop (under the sheet) --- */
.lalp-single__toc-mobile-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	background: rgba(38, 32, 28, .42);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s cubic-bezier(.22, .61, .36, 1);
}
.lalp-single__toc-mobile.is-open .lalp-single__toc-mobile-backdrop {
	opacity: 1;
	pointer-events: auto;
}

/* --- The sheet --- */
.lalp-single__toc-mobile-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100002;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	border-top: 1px solid var(--lalp-c-line);
	/* Brand asymmetric radius on the top corners only */
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -20px 60px -20px rgba(87, 87, 86, .25);
	transform: translateY(100%);
	transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.lalp-single__toc-mobile.is-open .lalp-single__toc-mobile-sheet {
	transform: translateY(0);
}

/* Handle grip on top for visual affordance */
.lalp-single__toc-mobile-handle {
	width: 44px;
	height: 4px;
	margin: 10px auto 0;
	border-radius: 999px;
	background: rgba(87, 87, 86, .25);
	flex-shrink: 0;
}
.lalp-single__toc-mobile-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px 12px;
	border-bottom: 1px solid var(--lalp-c-line);
	flex-shrink: 0;
}
.lalp-single__toc-mobile-eyebrow {
	margin: 0;
	font-size: 10px;
	font-weight: var(--lalp-fw-medium);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--lalp-c-secondary);
}
.lalp-single button.lalp-single__toc-mobile-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--lalp-c-primary) !important;
	cursor: pointer;
	border-radius: 50%;
	transition: background .2s ease;
}
.lalp-single button.lalp-single__toc-mobile-close-btn:hover {
	background: rgba(87, 87, 86, .08) !important;
}

/* --- Heading list inside the sheet --- */
.lalp-single__toc-mobile-list {
	display: flex;
	flex-direction: column;
	padding: 8px 0 18px;
	overflow-y: auto;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}
.lalp-single .lalp-single__toc-mobile-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 22px;
	font-family: var(--lalp-font);
	font-size: 15px;
	font-weight: var(--lalp-fw-regular);
	line-height: 1.35;
	color: var(--lalp-c-primary) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: background .2s ease, color .2s ease;
}
.lalp-single .lalp-single__toc-mobile-list a::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--lalp-c-line);
	flex-shrink: 0;
	transition: width .35s ease, background .25s ease;
}
.lalp-single .lalp-single__toc-mobile-list a[data-level="3"] {
	padding-left: 36px;
	font-size: 13px;
	color: rgba(87, 87, 86, .85) !important;
}
.lalp-single .lalp-single__toc-mobile-list a:active,
.lalp-single .lalp-single__toc-mobile-list a:hover {
	background: rgba(161, 128, 103, .06);
	color: var(--lalp-c-secondary) !important;
}
.lalp-single .lalp-single__toc-mobile-list a.is-current {
	color: var(--lalp-c-secondary) !important;
	font-weight: var(--lalp-fw-medium);
}
.lalp-single .lalp-single__toc-mobile-list a.is-current::before {
	width: 32px;
	background: var(--lalp-c-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.lalp-single__toc-mobile-trigger,
	.lalp-single__toc-mobile-sheet,
	.lalp-single__toc-mobile-backdrop {
		transition: none;
	}
}
/* Selectors NOT scoped under .lalp-single because JS portals the TOC out
   of the page wrapper into <body> at init (so position:fixed can't be
   broken by an ancestor transform). Bumped specificity with attribute
   chain so Hello Elementor's `a { color: #c36 }` reset still loses. */
.lalp-single__toc a[data-lalp-single-toc-link] {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--lalp-c-primary) !important;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-bottom: 0 !important;
	transition: color .25s ease;
	line-height: 1.4;
}
/* H3 entries indent slightly so the hierarchy reads */
.lalp-single__toc a[data-lalp-single-toc-link][data-level="3"] {
	padding-left: 14px;
	font-size: 10px;
	opacity: .8;
}
.lalp-single__toc a[data-lalp-single-toc-link]::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--lalp-c-line);
	flex-shrink: 0;
	transition: width .35s ease, background .25s ease;
}
.lalp-single__toc a[data-lalp-single-toc-link].is-current::before {
	width: 32px;
	background: var(--lalp-c-secondary);
}
.lalp-single__toc a[data-lalp-single-toc-link].is-current { color: var(--lalp-c-secondary) !important; }
.lalp-single__toc a[data-lalp-single-toc-link]:hover { color: var(--lalp-c-secondary) !important; }