/**
 * Beágyazás-bemutató (showcase-present) — PROMO_SPLIT panel, MIRROR
 * ==========================================================================
 * A CTA-szekciók (closing-cta / first-5-free) anatómiájára ÉS SZÍNEIRE építve:
 * `.section--brand` (primary-kék háttér, fehér szöveg) + kerekített `__panel`
 * split grid. TÜKRÖZVE: vizuál BAL, szöveg JOBB.
 *
 * Bal: 6mp-enként váltakozó screenshot-slideshow — a slide-ok teljes magasságban
 * be-/kigördülnek (JS: showcase-present.js). A kép a keretben, középre igazítva.
 * ========================================================================== */

/* Szekció-wrapper — neutrális háttér. Felül kompakt (a ticker felől), ALUL
   standard szekció-spacing, hogy a következő (what-it-does, aminek padding-top:0
   — a hero-hoz volt igazítva) ne csússzon rá. */
.showcase-present {
	padding: 24px var(--container-padding-mobile) var(--spacing-section-mobile);
	/* Átlátszó háttér: a hero-band alól átlógó háttér-shape-ek a panel körül/mögött
	   átlátszanak (a panel a formák FÖLÖTT ül). */
	background-color: transparent;
}

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

@media (min-width: 1200px) {
	.showcase-present {
		padding: 40px var(--container-padding-desktop) var(--spacing-section-desktop);
	}
}

.showcase-present__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* ==========================================================================
   Panel — .section--brand (primary-kék, a záró CTA-val AZONOS), split grid
   ========================================================================== */
.showcase-present__panel {
	position: relative;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	min-height: 340px;
	/* Gradiens háttér (brand-kék alap + világoskék spotlight jobb-fent + átlós mélység
	   navy-felé a bal-alsó sarokban). A section--brand adja a fehér szöveg-színeket. */
	background-color: var(--color-primary);
	background-image:
		radial-gradient(70% 85% at 92% 6%, #0983ff, rgb(13 132 252 / 0%) 58%),
		linear-gradient(315deg, #0d84fc 0%, #0983fd 36%, #071430b5 100%);
}

@media (min-width: 992px) {
	.showcase-present__panel {
		/* MIRROR: vizuál (bal) | szöveg (jobb). A vizuál kap egy kicsit több helyet. */
		grid-template-columns: 1.1fr 1fr;
		min-height: 440px;
	}
}

/* ==========================================================================
   Bal — FÜGGŐLEGES TICKER a boxon belül (edge-to-edge, padding NÉLKÜL)
   --------------------------------------------------------------------------
   A `__visual` a ticker VIEWPORT-ja: kitölti a panel bal felét (a box
   overflow:hidden + lekerekített sarka vágja), overflow:hidden. Benne a `__reel`
   (a screenshotok függőleges oszlopa, 2× szett) folyamatosan úszik felfelé.
   ========================================================================== */
.showcase-present__visual {
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* Mobil: definit magasság (a reel abszolút, nem adna magasságot). */
	height: clamp(240px, 62vw, 360px);
}

@media (min-width: 992px) {
	.showcase-present__visual {
		/* Desktopon a grid a szöveg-oszlop magasságára nyújtja (min 440px). */
		height: auto;
	}
}

/* Reel — a screenshot-KÁRTYÁK függőleges „szalagja". LÉPEGETŐS: a szettet 3×-rendereljük;
   a JS (showcase-present.js) 6mp-enként EGY kártyányit léptet a `transform: translateY`-nal
   (~1s transition), mindig a következő kártyát KÖZÉPRE igazítva; a középső szett szélén
   ugrás nélkül visszaáll → végtelen loop, végig van szelet fent ÉS lent. Oldalt `--sp-inset`
   padding. Abszolút, hogy ne adjon magasságot a viewportnak (azt a grid/`height` adja). */
.showcase-present__reel {
	--sp-inset: clamp(20px, 4vw, 44px); /* vízszintes térköz a box szélétől */
	--sp-gap: clamp(16px, 2.4vw, 26px); /* függőleges rés a kártyák között */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-inline: var(--sp-inset);
	display: flex;
	flex-direction: column;
	/* A ~1s átpörgetés — a translateY-t a JS állítja; a snap-visszaállásnál a JS
	   ideiglenesen `transition:none`-t tesz. */
	transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Reduced-motion: nincs csúszó átmenet — a JS ugrással vált (6mp-enként más kép). */
@media (prefers-reduced-motion: reduce) {
	.showcase-present__reel {
		transition: none;
	}
}

/* Egy kártya = mat-KERET (fotó-háttér + navy overlay + padding), UGYANAZ, mint a
   horizontális tickernél. A box szélétől beljebb, egymástól `--sp-gap` réssel →
   egyszerre több látszik: egy középen, felette-alatta egy-egy szelet. A rés a kártya
   saját alsó marginja (nem flex-gap), hogy a `-50%` loop pontos maradjon. */
.showcase-present__card {
	position: relative;
	padding: var(--sp-mat, 16px);
	border-radius: var(--radius-panel);
	background-color: #071430;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 12px 30px rgba(7, 20, 48, 0.28);
	margin-bottom: var(--sp-gap);
}

/* Overlay a fotó fölött, a screenshot alatt — brand-kék → navy gradiens (a panel
   gradiensével harmonizál, visszafogja/egységesíti a háttér-fotókat). */
.showcase-present__card::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;
}

/* A screenshot a maton — fix 16/10 (a site top-ját mutatja), saját radius + árnyék,
   a fotó/overlay FÖLÖTT (z-index:1). */
.showcase-present__shot {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--radius-input);
	box-shadow: var(--shadow-card-hover);
}

/* ==========================================================================
   Jobb — szöveg + CTA (a .section--brand adja a fehér szövegszíneket)
   ========================================================================== */
.showcase-present__content {
	position: relative;
	z-index: 2;
	padding: 16px 28px 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

@media (min-width: 768px) {
	.showcase-present__content {
		padding: 48px 40px;
	}
}

@media (min-width: 1200px) {
	.showcase-present__content {
		padding: 64px;
		gap: 22px;
	}
}

.showcase-present__title {
	margin: 0;
	max-width: 18ch;
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
}

.showcase-present__subtitle {
	margin: 0;
	max-width: 46ch;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
}

.showcase-present__cta-row {
	margin-top: 6px;
}

/* CTA — a záró CTA (closing-cta) gombjával AZONOS: sötét navy háttér + fehér
   szöveg (kontraszt a primary-kék panelen). Hover: fehér kör + primary-kék szöveg. */
.showcase-present__cta {
	background-color: var(--color-text);
	color: #ffffff;
	padding: 14px 24px;
	border-radius: var(--radius-button);
	font-size: var(--fs-body-md);
	line-height: 1;
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	border: 1px solid var(--color-text);
	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.showcase-present__cta::before {
	background: #ffffff;
}

.showcase-present__cta:hover {
	color: #0D84FC;
	border-color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.showcase-present__cta:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.showcase-present__cta i {
	font-size: 14px;
}

/* Mobil sorrend: vizuál FELÜL, szöveg ALUL (a desktop bal→jobb megfelelője). */
@media (max-width: 991px) {
	.showcase-present__visual {
		order: 1;
	}
	.showcase-present__content {
		order: 2;
	}
}