/**
 * Showcase-ticker blokk — „Élő beágyazások" futószalag (a hero alatt)
 * ==========================================================================
 * Vízszintesen, végtelenül úszó screenshot-szalag. A marquee-technika a
 * testimonials V1 marquee-ből átemelve (bevált, JS-mentes): a track a szettet
 * `--st-copies`-szor tartalmazza (1 valódi + klónok); `translateX(-100% /
 * var(--st-copies))` pont egy szettnyit lép → zökkenőmentes loop. Az animáció
 * csak `prefers-reduced-motion: no-preference` mellett fut; egyébként sima
 * görgethető sor (a klónok elrejtve). Hover / focus megállítja.
 *
 * Minden elem: lekerekített „mat" keret (soft accent szín vagy háttér-kép) +
 * a rajta lebegő screenshot (saját radiussal + árnyékkal), opcionális felirat.
 *
 * Scope: minden szabály `.showcase-ticker`-re szkópolva.
 * ========================================================================== */

.showcase-ticker {
	/* A screenshot fix magassága (a kártya-méret fő vezérlője) — az előző verzió
	   mérete. Egy helyen hangolható. */
	--st-shot-h: clamp(126px, 16.1vw, 210px);
	/* A hero ALATT, a KÖZÖS .hero-band-en belül ül. Felül NINCS térköz (a hero
	   bottom-paddingja adja a levegőt), alul standard szekció-spacing (→104px). A
	   sima, teljes szélességű szalag; a marquee edge-fade maszkkal vág mindkét szélen. */
	padding-block: 0 var(--spacing-section-mobile);
	overflow: hidden; /* a track ne adjon vízszintes scrollt az oldalnak */
	/* A hero háttér-shape-jei (.hero__shapes, z-index:0 a band-en) átfolynak ide;
	   a ticker z-index:1 + átlátszó háttér → a formák a kártyák közti résekben
	   látszanak, de a szöveg/kártyák a formák FÖLÖTT maradnak. */
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.showcase-ticker {
		padding-bottom: var(--spacing-section-tablet);
	}
}

@media (min-width: 1200px) {
	.showcase-ticker {
		/* Desktopon a ticker pozíciója margóval (user, 2026-07-17): -64px top (közelebb
		   a heróhoz) + 128px bottom (a showcase-present-ig). A bottom-térközt innentől a
		   margó adja, ezért a padding-bottom 0 (nincs dupla alsó térköz). */
		margin: -64px auto 128px;
		padding-bottom: 0;
	}

	/* Ha a hero és a ticker közé az ügyfél-idézet (hero-quote) ékelődik, a
	   heróhoz húzást az idézet viszi → itt nincs negatív felső margó. */
	.hero-quote + .showcase-ticker {
		margin-top: 0;
	}
}

/* Mobilon a horizontális ticker ELREJTVE (2026-07-18, user). */
@media (max-width: 767px) {
	.showcase-ticker {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Marquee viewport — teljes oldalszélesség, edge-fade maszkkal.
   Alapból (reduced-motion / no-JS) vízszintesen görgethető fallback.
   -------------------------------------------------------------------------- */
.showcase-ticker__marquee {
	position: relative;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Függőleges levegő a kártya-árnyéknak + felirat-sornak. */
	padding-block: 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.showcase-ticker__marquee::-webkit-scrollbar {
	display: none;
}

/* Track — vízszintes flex-sor. NINCS `gap`: a térközt minden elem a saját záró
   marginjával birtokolja, hogy a `translateX(-100% / copies)` PONTOSAN egy
   szettnyit lépjen (a gap-alapú megoldás gap/copies eltérést halmozna → apró
   ugrás minden loop-kör végén). */
.showcase-ticker__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	width: max-content;
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   Elem = keret-wrap (figure) + opcionális felirat. A záró margin adja a térközt.
   -------------------------------------------------------------------------- */
.showcase-ticker__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin-inline-end: 16px;
}

@media (min-width: 768px) {
	.showcase-ticker__item {
		margin-inline-end: 24px;
	}
}

@media (min-width: 1200px) {
	.showcase-ticker__item {
		margin-inline-end: 32px;
	}
}

.showcase-ticker__frame-wrap {
	margin: 0;
	display: flex;
	flex-direction: column;
	/* `center`: a keret (flex-item → blokkosodik) a KÉP szélességére zsugorodjon,
	   ne nyúljon szét a wrap szélességére (stretch). A felirat is így középre kerül. */
	align-items: center;
	gap: 10px;
}

/* A „mat" keret — a screenshot háttere. NINCS saját fix arány: a keret PONTOSAN a
   képhez simul, és csak a `padding` (`--st-mat`) értékével nyúlik túl körben. A
   screenshot fix MAGASSÁGGAL renderelődik (--st-shot-h), szélessége auto → a kép
   EREDETI képaránya megmarad; a keret shrink-to-fit (inline-block) ehhez idomul.
   A `--st-mat` a felező-változóval a screenshot radiusát is „behúzza" a mat alá. */
.showcase-ticker__frame {
	--st-mat: 16px; /* szegély-padding (a kép körüli mat-sáv) — mint a vertikális tickernél */
	position: relative;
	display: inline-block;
	line-height: 0; /* inline-block baseline-rés kiiktatása */
	padding: var(--st-mat);
	border-radius: var(--radius-panel);
	background-color: var(--color-primary-light);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: var(--shadow-card);
}

/* Overlay a háttér-fotó FÖLÖTT, de a screenshot ALATT — brand-kék → navy gradiens
   (a showcase-present panel/kártya overlay-jével AZONOS), visszafogja/egységesíti a
   fotókat. A screenshot z-index:1 ezen ül. */
.showcase-ticker__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(150deg,
		rgba(13, 132, 252, 0.45) 0%,
		rgba(7, 20, 48, 0.40) 100%);
	pointer-events: none;
	z-index: 0;
}

/* Soft accent hátter-presetek (a screenshot háttér-matja). A brand-kékre
   és semleges meleg/zöld/szilva tónusokra hangolva — a screenshot ezeken „ül". */
.showcase-ticker__frame--accent-blue {
	background-image: linear-gradient(150deg, #E3F0FD 0%, #C9E2FB 100%);
}

.showcase-ticker__frame--accent-green {
	background-image: linear-gradient(150deg, #E4F4EA 0%, #C7E9D3 100%);
}

.showcase-ticker__frame--accent-warm {
	background-image: linear-gradient(150deg, #FBEEE3 0%, #F6D9C4 100%);
}

.showcase-ticker__frame--accent-plum {
	background-image: linear-gradient(150deg, #ECE7F6 0%, #D8CEEC 100%);
}

/* A screenshot — fix MAGASSÁG, auto szélesség (eredeti képarány), saját radiussal
   + emelt árnyékkal a maton. A keret ehhez a rendert idomul (shrink-to-fit). */
.showcase-ticker__shot {
	position: relative; /* a fotó-háttér + overlay FÖLÉ (z-index:1) */
	z-index: 1;
	display: block;
	height: var(--st-shot-h);
	width: auto;
	border-radius: var(--radius-input);
	box-shadow: var(--shadow-card-hover);
}

/* 1. fázis placeholder — üres „böngésző-lap" a screenshot helyén (ugyanaz a fix
   magasság; default 16/10 arány adja a szélességet, hogy a keret hozzáidomuljon). */
.showcase-ticker__shot--placeholder {
	box-sizing: border-box;
	height: var(--st-shot-h);
	aspect-ratio: 16 / 10;
	width: auto;
	background-color: var(--color-card-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.showcase-ticker__shot--placeholder i {
	font-size: 22px;
	opacity: 0.5;
}

/* Felirat a kártya alatt (pl. cégnév / oldal neve). */
.showcase-ticker__label {
	margin: 0;
	padding-inline: 4px;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: var(--color-text-muted);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Marquee-klónok — alapból (reduced-motion fallback) rejtve, hogy a görgethető
   sorban ne legyen duplikátum; csak az animált módban jelennek meg.
   -------------------------------------------------------------------------- */
.showcase-ticker__item--clone {
	display: none;
}

/* Animált mód — csak ha a user nem kérte a mozgás-csökkentést. */
@media (prefers-reduced-motion: no-preference) {
	.showcase-ticker__marquee {
		overflow: hidden;
		scroll-snap-type: none;
	}

	.showcase-ticker__item--clone {
		display: block;
	}

	.showcase-ticker__track {
		/* 18.7s = a vertikális tickerrel AZONOS px/s sebesség (a vertikális 85 px/s;
		   a horizontális szett ~1596px → 1596/85 ≈ 18.7s). (2026-07-17, user) */
		animation: showcase-ticker-scroll var(--st-duration, 18.7s) linear infinite;
		will-change: transform;
	}

	/* Hover-re NEM áll meg, csak LELASSUL — a sima (ugrásmentes) sebességváltást a
	   showcase-ticker.js intézi (Web Animations playbackRate). CSS-ből az
	   animation-duration váltás ugrana, ezért nincs itt hover-szabály; ha a JS nem
	   tölt be, a szalag egyszerűen fut tovább (nem áll meg). */
}

@keyframes showcase-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Pont egy szettnyit lép (a track 1/`--st-copies` része). */
		transform: translateX(calc(-100% / var(--st-copies)));
	}
}