/* Ampera · Teiginys (Figma desktop 1103:2078/2094/2142 intro,
   1103:2095-2097/2124/2141 media; mobile 1103:6797/6798 + 1103:6818-6822).
   Two per-instance layouts (block.json "layout" attr): intro (heading left,
   side paragraph right, lower) and media (left-bleed render image that rises
   72px above the band + side paragraph). A thin outline parallelogram
   (statement-vector.svg) sits behind the content, clipped to the section. */

.ampera-statement {
	position: relative;
}




/* Content paints above the (positioned) vector layer. */
.ampera-statement__inner,
.ampera-statement__media-row {
	position: relative;
}

.ampera-statement__placeholder {
	opacity: 0.5;
}

/* ---------- Layout: intro ---------- */

.ampera-statement--intro {
	/* Figma: heading 24px below the word band; 225px of air (with the vector
	   line running through it) before the next section. */
	padding-block: 24px 64px;
}

.ampera-statement--intro .ampera-statement__inner {
	display: flex;
	align-items: flex-start;
	max-width: 1296px;
	margin-inline: auto;
	padding-inline: 72px;
}

.ampera-statement__heading {
	margin: 0;
	flex: 0 1 728px;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.3;
}

.ampera-statement__body {
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

.ampera-statement--intro .ampera-statement__body {
	flex: 0 0 300px;
	margin-left: auto;
	/* Figma: paragraph right edge 54px inside the container edge, top 133px
	   below the heading top. */
	margin-right: 54px;
	margin-top: 133px;
}


/* Namai jums: the intro's teaser paragraph runs long and the gap-0 media below
   rises 72px, so the photo top clipped the paragraph's last line ("…350 kv. m.").
   Give the intro extra bottom room ONLY when a gap-0 media follows it (namai), so
   the rising image clears the paragraph. Desktop branch; mobile kills the gap-0
   rise instead (see the max-width block — its -127px pull hid the paragraph). */
@media (min-width: 901px) {
	.ampera-statement--intro:has(+ .ampera-statement--media.ampera-statement--gap-0) {
		padding-bottom: 120px;
	}
}

/* ---------- Layout: media ---------- */

.ampera-statement--media {
	/* Client 2026-08-03 (PDF task 2): 72px page-white (was the Figma 136) so
	   words→photo reads 24px — 24 band padding + 72 − 72 image rise. The
	   render rises 72px above the band top and the band ends at the image
	   bottom (amenities-row continues the balta band below). */
	margin-top: 72px;
	/* Amenities-row (own block, same band bg) follows:
	   Figma gap image-bottom -> icons = 72px, so 32px belongs to us. */
	padding-bottom: 0;
}

/* …but where no amenities-row follows (client correction 2026-07 removed it
   from Jūsų verslui), the media band has to close itself or the next white
   band butts straight against the image edge. Instances that carry a CTA are
   excluded — the CTA rule below already grows the row by the same 96px. */
.ampera-statement--media:not(:has(+ .ampera-amenities-row)):not(:has(.ampera-statement__cta)) {
	padding-bottom: 96px;
}

/* Optional headline inside the text column, above the paragraph (client
   2026-07-29: „dešinėje virš teksto"). The column is 320px, so this uses the
   site's SMALLER heading ramp (the same one the feature carousel uses) rather
   than the full section-heading size, which would swamp the column. */
.ampera-statement__media-heading {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: 1.2;
	color: var(--wp--preset--color--juoda);
}

/* CTA under the text. The carousel controls are absolutely positioned at
   bottom:96px of the media row, so grow the row instead of letting the two
   collide; padding also closes the balta band (hence the :not above). */
.ampera-statement__cta {
	margin-top: 24px;
	width: 219px;
	max-width: 100%;
}

.ampera-statement__media-row:has(.ampera-statement__cta) {
	padding-bottom: 96px;
}

/* Client 2026-08-07: with the client's longer paragraphs the text column now
   outgrows the image at EVERY desktop width, so the controls (absolute,
   bottom:96px) landed on the CTA at 1280 and 1440 too — not only on narrow
   laptops. 192px keeps a guaranteed 48px gap under the button at any text
   length. Mobile (≤900px) keeps 96 — its controls row is laid out statically. */
@media (min-width: 901px) {
	.ampera-statement__media-row:has(.ampera-statement__cta) {
		padding-bottom: 192px;
	}
}

.ampera-statement--media .ampera-statement__media-row {
	display: flex;
	align-items: flex-start;
	position: relative; /* anchor for the carousel controls in the text panel */
}

.ampera-statement__media {
	box-sizing: border-box;
	/* Client correction 2026-07 (second pass): with the wider 320px paragraph the
	   old 1080px-anchored image left NO air between text and photo. Anchoring at
	   984px instead keeps a constant 64px gap at ≥1440 by construction
	   (1440 − 984 − 320 − 72 gutter = 64) and reads as a calmer image-to-text
	   ratio; below 1440 the 72% branch scales it down responsively. */
	width: min(72%, calc((100% - 1440px) / 2 + 984px));
	/* Client 2026-08-03 (PDF task 10): a bit more landscape (was 1080/700 ≈ 1.54)
	   so the building render shows fuller; 5:3 cuts the side-crop roughly in half. */
	aspect-ratio: 5 / 3;
	/* The render rises 72px (5vw at 1440) above the band top. */
	margin-top: -72px;
	/* Hard floor for the image→text gap on narrow desktops (the auto margin
	   collapses to zero there; wide screens still end at 64px total). */
	margin-right: 48px;
	overflow: hidden;
}

.ampera-statement__media img,
.ampera-statement__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ampera-statement__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed currentColor;
}

.ampera-statement--media .ampera-statement__body {
	/* Client correction 2026-07: the paragraph read too small against the large
	   render — wider column, larger type, and blank-line paragraphs with air. */
	flex: 0 1 320px; /* may compress on narrow desktops so the gap survives */
	margin-left: auto;
	/* Right edge on the 72px gutter; on ultra-wide screens stay on the
	   centred 1296px content column. */
	margin-right: max(72px, calc((100% - 1296px) / 2));
	margin-top: 96px; /* Figma: 96px below the band top. */
	font-size: 18px;
	line-height: 28px;
}

.ampera-statement__par {
	margin: 0;
}

.ampera-statement__par + .ampera-statement__par {
	margin-top: 18px;
}

/* Mirrored layout (photo bleeds RIGHT, paragraph LEFT): the base rule pins the
   paragraph's RIGHT edge, which — once the row is reversed — leaves it hugging the
   far-left screen edge with a huge gap to the photo on wide monitors. Mirror the
   margins so the paragraph instead sits on the centred 1296 content column, and
   the gap to the photo stays a constant 72px at any width. */
.ampera-statement--side-right .ampera-statement__body {
	margin-left: max(72px, calc((100% - 1296px) / 2));
	margin-right: auto;
}

/* ---------- Narrow desktop band (client 2026-08-07, ~1000px laptop) ----------
   Between 901px and 1200px the default geometry inverts: the 72%-anchored
   image dominates the row („didžiulė foto"), the text column compresses to
   ~270px and grows TALLER than the image, and the absolutely-anchored
   controls (bottom:96px of the row) land exactly on the CTA button. Rebalance
   the row and grow the CTA row so the controls always clear the button. */
@media (min-width: 901px) and (max-width: 1200px) {
	.ampera-statement__media {
		width: 55%;
	}
}


/* ---------- Mobile (Figma 375 frame) ---------- */

@media (max-width: 900px) {

	.ampera-statement--intro {
		/* Client 2026-08-01: tighter breathing room around the photo that
		   follows — bottom 64 → 32px. */
		padding-block: 40px 32px;
	}

	.ampera-statement--intro .ampera-statement__inner {
		display: block;
		padding-inline: 24px;
		text-align: center;
	}

	.ampera-statement__heading {
		line-height: 36px;
	}

	.ampera-statement--intro .ampera-statement__body {
		margin: 24px 0 0;
	}

	.ampera-statement__body {
		font-size: 14px;
		line-height: 20px;
	}


	.ampera-statement--media {
		/* 127 = the mobile image rise, so words→photo = the band's own 24px
		   (client 2026-08-03, PDF task 2; was 159). */
		margin-top: 127px;
		padding-bottom: 8px; /* amenities-row adds its own top padding on mobile */
	}

	.ampera-statement--media .ampera-statement__media-row {
		flex-direction: column;
	}

	.ampera-statement__media {
		width: calc(100% - 24px); /* full width minus the right gutter */
		aspect-ratio: 3 / 2; /* a bit more landscape (was 351/255 ≈ 1.38) — PDF task 10 */
		margin-top: -127px; /* render rises 127px above the band top */
		margin-right: 0;
		margin-left: 0;
	}

	/* Client correction 2026-07: an image must never cover copy. The 127px rise
	   buried text on both non-home pages — gap-0 (Namai jums) hid the intro's
	   teaser paragraph (same bug fixed on desktop via the intro :has() padding,
	   whose "mobile stacks, no overlap" note missed this pull), and gap-104
	   (Verslui) hid the word-band marquee, whose words end just 24px above the
	   band edge (desktop has 56px air; no safe mobile rise exists there). Both
	   drop the rise; the homepage default keeps -127px, verified text-clear. */
	.ampera-statement--media.ampera-statement--gap-0 .ampera-statement__media,
	.ampera-statement--media.ampera-statement--gap-104 .ampera-statement__media {
		margin-top: 0;
	}

	.ampera-statement--media .ampera-statement__body {
		flex: none;
		margin: 24px 24px 0; /* client 2026-08-01: photo→text gap 48 → 24px */
		font-size: 16px;
		line-height: 24px;
	}

}

/* ---------- Per-instance media variants (page markup attrs) ---------- */

/* Page-white gap above the balta band. Client 2026-08-03 (PDF task 2): the
   words→photo air must read 24px like the band under the homepage hero, so
   both variants resolve to 72px here — 24 (band padding) + 72 − 72 (image
   rise) = 24. The Figma 136/104 values are superseded. */
.ampera-statement--media.ampera-statement--gap-104 {
	margin-top: 72px;
}
.ampera-statement--media.ampera-statement--gap-0 {
	margin-top: 0;
}

/* Mirrored media (Namai jums 1103:2404): render bleeds RIGHT, paragraph LEFT. */
.ampera-statement--side-right .ampera-statement__media-row {
	flex-direction: row-reverse;
}
.ampera-statement--side-right .ampera-statement__media {
	margin-right: 0;
	margin-left: 48px; /* mirrored gap floor; the body's auto right margin keeps the photo flush right */
}

/* Image-swap carousel inside the media frame (Namai jums: 2 renders + overlaid
   white-ring arrows at mid-height, inset 12px — Figma 1103:2407/2411). */
.ampera-statement__media--carousel {
	position: relative;
	overflow: hidden;
}
.ampera-statement__media-track {
	display: grid; /* slides stack for the cross-fade */
	/* ABSOLUTE, not in flow: a grid cell sizes to its TALLEST slide, and a
	   portrait render was stretching the 5:3 media frame with it (the frame's
	   aspect-ratio yields to content) — the landscape slide then lost its
	   sides to the cover-crop (client bug report 2026-08-05). Pinned to the
	   frame, the frame's ratio always wins. */
	position: absolute;
	inset: 0;
	/* …and the ROW must be clamped too: an auto row still sizes to the
	   portrait slide's intrinsic height (984w → 1139h), overflowing the 590px
	   frame downward so only the photos' TOP HALF stayed visible (second
	   client report 2026-08-05). 100% pins the single stacking cell to the
	   track, so every slide — and its cover-crop — lives inside the frame. */
	grid-template-rows: 100%;
	grid-template-columns: 100%;
	/* Client 2026-08-03 (PDF task 8): slide changes FADE like the homepage
	   feature carousel; the engine's horizontal translate is neutralized. */
	transform: none !important;
	transition: none !important;
}
.ampera-statement__media-slide {
	grid-area: 1 / 1; /* slides stack for the cross-fade */
	width: 100%;
	min-width: 100%;
	opacity: 0;
	pointer-events: none;
}

/* Pre-JS / single-slide fallback: the first slide shows. */
.ampera-statement__media-track:not(.is-fading) .ampera-statement__media-slide:first-child,
.ampera-statement__media-slide.is-shown {
	opacity: 1;
	pointer-events: auto;
}

/* Same pace and symmetric curve as the feature carousel. */
@media (prefers-reduced-motion: no-preference) {
	.ampera-statement__media-track.is-fading .ampera-statement__media-slide {
		transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
}
.ampera-statement__media-slide .ampera-statement__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Carousel controls: prev / N of M / next, using the site-standard circled arrow
   button (.ampera-arrow-btn). Anchored in the text panel, off the photo, aligned
   to the paragraph's content-column edge and near the band's lower edge. */
.ampera-statement__controls {
	position: absolute;
	bottom: 96px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--juoda);
	/* Default layout (photo LEFT, text RIGHT). Client 2026-07-29: the arrows
	   were anchored to the page gutter, i.e. the RIGHT edge of the text column,
	   while the paragraph and the CTA start at its LEFT edge — visibly out of
	   line. Give the row the column's own box (same right anchor, same used
	   width, including how it compresses on narrow desktops) and align the
	   arrows to its start, so they share the text's rail at every width. */
	right: max(72px, calc((100% - 1296px) / 2));
	width: min(320px, calc(100% - min(72%, calc((100% - 1440px) / 2 + 984px)) - max(72px, calc((100% - 1296px) / 2))));
	justify-content: flex-start;
}

/* Mirrored layout (photo RIGHT, text LEFT): align to the paragraph on the left. */
.ampera-statement--side-right .ampera-statement__controls {
	right: auto;
	left: max(72px, calc((100% - 1296px) / 2));
}

.ampera-statement__pager {
	display: flex;
	gap: 8px;
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 16px;
	line-height: 24px;
}
.ampera-statement__pager-current {
	font-weight: 800;
}
.ampera-statement__pager-total {
	opacity: 0.5;
}

/* One slide: the engine stamps data-ampera-ready="single" on the row — hide the controls. */
.ampera-statement__media-row[data-ampera-ready="single"] .ampera-statement__controls {
	display: none;
}

@media (max-width: 900px) {
	/* Client 2026-08-03 (PDF task 2): both variants at 0 on mobile — their
	   rise is cancelled below, so the band's own 24px IS the words→photo air,
	   matching the homepage reference band. gap-0 (Namai): intro butts the band. */
	.ampera-statement--media.ampera-statement--gap-104,
	.ampera-statement--media.ampera-statement--gap-0 {
		margin-top: 0;
	}

	/* Mobile: the carousel controls are already static (they stack below the
	   text), so the row needs no collision padding — only the band close. */
	.ampera-statement__media-row:has(.ampera-statement__cta) {
		padding-bottom: 0;
	}

	.ampera-statement--media:not(:has(+ .ampera-amenities-row)) {
		padding-bottom: 80px;
	}
	.ampera-statement--side-right .ampera-statement__media-row {
		flex-direction: column;
	}
	/* Client 2026-07-30 (item 5): the desktop margin-left:48px (0,2,0) outlived
	   the generic mobile margin reset (0,1,0), pushing the calc(100% - 24px)
	   photo 24px past the right edge — overflow-x:clip hid it. auto = the true
	   mirror: 24px gutter left, photo flush right. */
	.ampera-statement--side-right .ampera-statement__media {
		margin-left: auto;
	}
	/* Controls drop into flow below the stacked photo/paragraph, LEFT-aligned
	   on the text column's 24px rail (client 2026-08-01; they were centred).
	   Client 2026-07-30 (item 5): the desktop column-width formula leaked in
	   here (≈37px at 390vw) and overflowed the screen edge — width stays
	   reset. */
	.ampera-statement__controls,
	.ampera-statement--side-right .ampera-statement__controls {
		position: static;
		left: auto;
		right: auto;
		width: auto;
		align-self: flex-start;
		justify-content: flex-start;
		margin: 32px 24px 0;
	}
	.ampera-statement__controls .ampera-arrow-btn {
		width: 40px;
		height: 40px;
		flex-shrink: 0; /* the 40px circles must never squash */
	}
	.ampera-statement__controls .ampera-arrow-btn svg {
		width: 16px;
		height: 16px;
	}
}