/* Ampera · Komandos citata (Figma 1103:1913 desktop / 1103:6903 mobile).
   Centered heading + developer logo + intro; team photo bleeding to the left
   viewport edge with a quote column (icon, quote, author, role tags) on the
   right. Role tags sit on the photo's bottom line on desktop. */

/* Spacing tuned twice per client (2026-07): the section must read whole on one
   laptop screen. Shaved subtly across FOUR gaps (padding, logo, intro, row) so
   no single gap looks changed — it is felt, not seen. */
.ampera-team-quote {
	padding-block: clamp(56px, 4.8vw, 68px);
}

.ampera-team-quote__inner {
	max-width: 1296px;
	margin-inline: auto;
	padding-inline: 72px;
}

/* --- Head ------------------------------------------------------------- */

.ampera-team-quote__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ampera-team-quote__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: clamp(36px, 5vw, 60px);
	line-height: 1.2;
}

.ampera-team-quote__logo {
	margin-top: 0;
	/* The logo IS the section heading now (client correction 2026-07). */
	height: clamp(48px, 4.6vw, 66px);
}

.ampera-team-quote__logo-img {
	display: block;
	width: auto;
	height: 100%;
}

.ampera-team-quote__intro {
	margin: 20px 0 0;
	max-width: 492px;
	font-size: 16px;
	line-height: 24px;
}

/* --- Media row (photo + quote column) --------------------------------- */

.ampera-team-quote__media-row {
	display: flex;
	align-items: stretch;
	gap: clamp(48px, 8.6vw, 124px);
	/* Client correction 2026-07: the intro→photo gap read as "didelis tuščias
	   tarpas" and pushed the block past one screen — halved from 52/5.5vw/80,
	   then eased again in the second pass. */
	margin-top: clamp(28px, 2.9vw, 40px);
	/* Figma 1440: row ends at x1310 → 130px right slack (130/1440 = 9.028%).
	   Client correction 2026-07: past 1440 this slack used to grow at HALF the
	   viewport rate, which swallowed every extra pixel — the photo stayed 701px
	   and the quote sat frozen at x825, i.e. adrift in the middle of a wide
	   monitor. Proportional slack keeps the Figma composition at every width. */
	padding-right: max(130px, 9.028%);
}

.ampera-team-quote__figure {
	position: relative;
	flex: 1 1 55%;
	min-width: 0;
	margin: 0;
	/* --tq-ar: set inline (and per-tab by view.js) when the active photo is
	   WIDER than the Figma frame — the figure takes the photo's ratio so a
	   group shot shows whole (client 2026-08-06). Default = designed frame.
	   align-self guards the ratio: flex stretch would pull a SHORTER (wider)
	   figure back to the quote column's height and re-crop the photo. No-op
	   in the designed case, where the figure is the tallest row item. */
	aspect-ratio: var(--tq-ar, 701 / 510);
	align-self: center;
	/* Hold the Figma ratio instead of a hard px cap: 53.52% of the row's
	   content box == 701/1440 of the viewport at every width ≥1440, so the
	   photo keeps ~half the screen. Below 1440 the 701px arm wins and the
	   existing flex-shrink behaviour (and all of mobile) is untouched. */
	/* Client 2026-08-27 ("like 25% bigger"): the Figma 53.52% arm scaled by
	   1.25 - the composition now favours the photo over the exact 1440 sheet. */
	max-width: max(876px, 66.9%);
	overflow: hidden;
	background: var(--wp--preset--color--juoda);
}

/* Every member's shot stacked; only the active one is visible (cross-fades).
   A shot = an optional blurred backdrop + the photo, faded as ONE layer. */
.ampera-team-quote__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.ampera-team-quote__shot.is-active {
	opacity: 1;
}

.ampera-team-quote__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A photo meaningfully narrower than the shared frame shows WHOLE (client
   2026-08-26: the founder's head was the crop). The blurred cover copy behind
   it extends the photo's own backdrop into the side bands; scale hides the
   blur's darkened edges. */
.ampera-team-quote__shot--contain .ampera-team-quote__photo {
	object-fit: contain;
}

.ampera-team-quote__photo-fill {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(32px);
	transform: scale(1.12);
}

.ampera-team-quote__col {
	flex: 0 1 485px;
	/* Growing photo (round 100) squeezes the column via flex-shrink; below
	   ~380px the quote wraps into a shaft. Floor it - the photo yields instead. */
	min-width: min(380px, 100%);
	display: flex;
	flex-direction: column;
	/* Centre the quote + tabs group against the (taller) photo's height. */
	justify-content: center;
}

/* Quote panels stacked in one grid cell: the column reserves the tallest quote's
   height so switching tabs never shifts the layout; only opacity cross-fades. */
.ampera-team-quote__quotes {
	display: grid;
}

.ampera-team-quote__blockquote {
	grid-area: 1 / 1;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.ampera-team-quote__blockquote.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ampera-team-quote__quote-icon {
	display: block;
	width: clamp(40px, 4.2vw, 60px);
	height: clamp(40px, 4.2vw, 60px);
}

.ampera-team-quote__quote-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ampera-team-quote__quote {
	margin: clamp(16px, 3.3vw, 48px) 0 0;
	font-size: clamp(18px, 1.4vw, 20px);
	line-height: 28px;
}

/* Job title above the name (client 2026-07-29): a quiet caption, so the name
   below stays the loudest thing in the attribution. */
.ampera-team-quote__position {
	display: block;
	margin-top: 16px;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

/* The name follows the title directly when one is present. */
.ampera-team-quote__position + .ampera-team-quote__author {
	margin-top: 2px;
}

.ampera-team-quote__author {
	display: block;
	margin-top: 16px;
	font-style: normal;
	font-weight: 800;
	font-size: clamp(18px, 1.4vw, 20px);
	line-height: 28px;
}

/* --- Role tags --------------------------------------------------------- */

.ampera-team-quote__roles {
	list-style: none;
	margin: 48px 0 0;
	padding: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.ampera-team-quote__role-item {
	display: flex;
	margin: 0;
}

/* Tabs: reset the button chrome; active = bold + underline, hover previews it. */
.ampera-team-quote__role {
	appearance: none;
	margin: 0;
	padding: 0 0 4px;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.ampera-team-quote__role:hover {
	border-bottom-color: currentColor;
}

.ampera-team-quote__role:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.ampera-team-quote__role.is-active {
	font-weight: 800;
	border-bottom-color: currentColor;
}

/* --- Placeholders (editor preview only) -------------------------------- */

.ampera-team-quote__placeholder {
	opacity: 0.5;
}

.ampera-team-quote__figure .ampera-team-quote__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--wp--preset--color--balta);
	padding: 24px;
}

/* --- Mobile (Figma 1103:6903) ------------------------------------------ */

/* --- One-screen fit on a laptop (client 2026-08-24) ---------------------
   The client kept losing either the DOMĖ logo or the DOMĖ/2BRICKS tabs off the
   edge. Two things were missed before:

   1. Every gap scaled with vw ALONE, so their wide-but-short 1440x724 laptop
      resolved each clamp to its MAXIMUM. Height was never in the equation.
   2. The real budget is not 100vh. Once the page scrolls, .ampera-header goes
      position:fixed at 84px over the content, so the section has 100vh - 84px
      to live in. Measuring against 100vh is what left the logo under the header.

   So: compact when height is scarce, and size the photo against the REAL budget.
   The threshold is deliberately generous, because the section's natural height
   GROWS with viewport width (the photo scales with it): 754px is only the 1440
   figure — at 1512 it is 777 and at 1920 it is 910. A tight threshold is why
   1512x850 still clipped by 11px on the first pass. 1100px covers every laptop;
   only genuinely tall desktop monitors keep the original airy composition.
   The photo is object-fit:cover in an absolute frame, so its cap re-crops rather
   than distorts. Type is deliberately untouched — spacing only.
   Verified 1440x724 / 1366x768 / 1280x800 / 1512x850 / 1440x900 / 1680x1050 /
   1920x1080 / 2560x1440: logo below the header and tabs above the fold in all. */
@media (max-height: 1100px) {
	.ampera-team-quote {
		padding-block: clamp(32px, 5.5vh, 56px);
	}

	.ampera-team-quote__logo {
		height: clamp(40px, 7vh, 58px);
	}

	.ampera-team-quote__intro {
		margin-top: clamp(10px, 2vh, 16px);
	}

	.ampera-team-quote__media-row {
		margin-top: clamp(18px, 3.3vh, 28px);
	}

	/* Cap the WIDTH, never the height (client 2026-08-24, second pass: "make sure
	   all people fit in the photo, but the section must not get taller").
	   The frame carries the ACTIVE photo's own ratio via --tq-ar, which view.js
	   rewrites per tab so a wide group shot shows whole. Capping max-height broke
	   exactly that: the frame went to 1.798 against the group photo's 1.665, and
	   object-fit:cover then ate 7.4% off the top and bottom — the heads and the
	   feet (16.5% on the narrower DOMĖ portrait). Constrain the width instead and
	   the ratio does the work: the derived height lands on the same budget with
	   NOTHING cropped, so the section height is unchanged.
	   84px header + 250px of the section's own chrome above/below the row. */
	.ampera-team-quote__figure {
		/* Client 2026-08-27, fourth size round ("like 25% bigger"): the photo
		   now DELIBERATELY outgrows the fold on roomy screens - the reserve
		   slides continuously from 250px (<=780px tall, where the 2026-08-24
		   one-screen laptop fit keeps its exact math) down to 70px (>=860px),
		   which lands the requested +25% at the client's ~850px laptop. The
		   74% arm keeps mid-wide windows from being capped before the height
		   budget speaks; the column min-width floor keeps the quote readable
		   when the two race for room. */
		max-width: min(
			max(701px, 74%),
			calc((100vh - 84px - clamp(70px, 250px - (100vh - 780px) * 2.25, 250px)) * var(--tq-ar, 1.3745))
		);
	}

	/* Once the photo is capped the quote column is the tallest thing in the row,
	   so the quote->tabs gap is the last one worth shaving. */
	.ampera-team-quote__roles {
		margin-top: 24px;
	}
}

@media (max-width: 900px) {
	.ampera-team-quote__inner {
		padding-inline: 24px;
	}

	/* The desktop ratio-guard (align-self: center) collapses the figure to
	   0x0 in the mobile COLUMN flex: every child is absolutely positioned, so
	   a centred item has no width of its own and the aspect-ratio multiplies
	   nothing. The team photo was simply absent on phones (measured live
	   2026-08-26). Stretch restores the full-width photo; the ratio then
	   derives its height. */
	.ampera-team-quote__figure {
		width: 100%;
		align-self: stretch;
	}

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

	.ampera-team-quote__media-row {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
		padding: 0 24px;
	}

	.ampera-team-quote__col {
		flex: 0 0 auto;
	}

	.ampera-team-quote__roles {
		margin-top: 56px;
	}

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

/* Entrance: the photo settles first, the quote column follows in beats. */
@media (prefers-reduced-motion: no-preference) {
	.ampera-team-quote .ampera-team-quote__figure {
		/* aspect-ratio rides along so the frame glides between a group photo's
		   ratio and a portrait's on tab switch (same curve as the crossfade). */
		transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), aspect-ratio 1.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ampera-team-quote .ampera-team-quote__col {
		transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
		/* Tight beat: the long 0.45s lag left a visibly empty violet band while
		   scrolling into the section. */
		transition-delay: 0.15s;
	}
	.ampera-team-quote.ampera-reveal:not(.is-visible) .ampera-team-quote__figure,
	.ampera-team-quote.ampera-reveal:not(.is-visible) .ampera-team-quote__col {
		opacity: 0;
		transform: translateY(20px);
	}

	/* Tab switch: photos cross-fade with the SAME animation as every other
	   gallery on the site (statement / rezidencijos / feature carousels all
	   run opacity 1.4s cubic-bezier(0.4,0,0.2,1) — client 2026-08-06). The
	   frame's aspect-ratio glides on the same curve, so a group photo and a
	   portrait morph as one motion. Reduced motion = instant swap. */
	.ampera-team-quote__shot {
		transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ampera-team-quote__blockquote {
		transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.ampera-team-quote__role {
		transition: border-color 0.2s ease;
	}
}