/* ==========================================================================
   Bannerele de sus ale primei pagini (carusel): inc/banner.php, template-parts/erou-carusel.php.
   Se încarcă ȘI în admin (Aspect → Bannere prima pagină), pentru previzualizare ⇒ nu depinde de shopius.css:
   variabilele au rezervă, butonul are stilul lui. Textul se scalează cu lățimea coloanei (cqw, cu rezervă în px pentru
   browserele vechi), ca să stea pe poză la fel pe orice ecran: ce vezi în previzualizare e ce apare pe site.
   Poza ocupă TOATĂ lățimea ecranului, fără bandă și fără colțuri (userul, 30.10: „Se vede foarte nașpa trecerea asta
   intre banner și background"); textul stă în coloana site-ului, aliniat cu logoul.
   Întâi telefonul (poza 4 : 5, textul sus), apoi ≥ 768 (poza 3 : 1, cel mult 600 px înălțime, textul în stânga).
   ========================================================================== */

.sp-carusel__scena { position: relative; }
/* ⛔ FĂRĂ scroll-behavior: smooth pe bandă: cu snap „mandatory", o aliniere la încărcare devine scroll animat și
   Chrome nu mai înregistrează LCP-ul deloc (pățit pe european, 12.10). Derularea lină o face JS-ul, prin scrollTo.
   Fără padding pe bandă: poziția 0 rămâne punct de snap, deci nu e nimic de aliniat la încărcare. */
.sp-carusel__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sp-carusel__pista::-webkit-scrollbar { display: none; }

.sp-slide {
	--sp-s-titlu: var(--sp-albastru, #004ace);
	--sp-s-sub: var(--sp-text, #0b1b4d);
	--sp-s-btn: var(--sp-albastru, #004ace);
	--sp-s-btn-text: #fff;
	/* coloana site-ului (ca .sp-cont din shopius.css, care în admin lipsește): lățimea și marginea ei din stânga, în
	   procente din banner ⇒ aceleași valori pentru cutia textului și pentru umbrire (acolo, procentele sunt din poză,
	   care e tot cât bannerul). Previzualizarea din admin le schimbă (inc/banner.php). */
	--sp-z-lat: calc(min(var(--sp-lat, 1320px), 100%) - 2 * var(--sp-gutter, 16px));
	--sp-z-st: calc((100% - var(--sp-z-lat)) / 2);
	position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
	background: var(--sp-slide-fond, #fed002); /* se vede cât se încarcă poza și, fără poză de telefon, sub ea */
}
/* text alb: pe poze închise; pe telefon fără poză de telefon, după culoarea din jur (textul stă sub poză).
   ⛔ Fără umbră sub litere: pe fundalul albastru uniform le încețoșa, „asta nu mai e text" (userul, 30.10). Textul
   stă pe zona lăsată liberă în poză, deci se citește fără ea. */
.sp-slide--tel-alb {
	--sp-s-titlu: #fff; --sp-s-sub: #fff; --sp-s-btn: var(--sp-galben, #fed002); --sp-s-btn-text: var(--sp-albastru, #004ace);
}
.sp-slide__poza { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 4 / 5; }
.sp-slide--fara-mobil .sp-slide__poza { aspect-ratio: 3 / 1; }
.sp-slide__poza picture, .sp-slide__poza img { display: block; width: 100%; height: 100%; max-width: none; }
.sp-slide__poza img { object-fit: cover; }
/* Umbrirea sub text (câmpul „Umbrire" din admin): pe pozele unde locul textului are și lumină, și umbră, nici albul, nici
   albastrul nu trec de 3 : 1 peste tot (măsurat pe bannerele din 30.10: fereastra cu zăpadă, bucătăria cu soare, parcul).
   Umbrirea e pe POZĂ, nu pe litere ⇒ literele rămân clare (fără text-shadow, vezi mai sus). Opririle (0 / 35 / 62 % din
   coloana textului) și intensitățile (închis .65, deschis .55) sunt cele cu care s-a măsurat contrastul. Pe telefon spre
   sus, pe calculator spre stânga; pe telefon fără poză de telefon textul stă sub poză ⇒ fără umbrire acolo. */
.sp-slide--voal-inchis .sp-slide__poza::after, .sp-slide--voal-deschis .sp-slide__poza::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
}
.sp-slide--voal-inchis:not(.sp-slide--fara-mobil) .sp-slide__poza::after {
	background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .52) 35%, rgba(0, 0, 0, 0) 62%);
}
.sp-slide--voal-deschis:not(.sp-slide--fara-mobil) .sp-slide__poza::after {
	background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .44) 35%, rgba(255, 255, 255, 0) 62%);
}

/* cutia textului = coloana site-ului, peste poză. Clicul trece la poză (e link), dar titlul, textul și butonul îl
   primesc: altfel textul nu se putea selecta și copia, „asta nu mai e text" (userul, 30.10). */
.sp-slide__zona {
	position: absolute; inset: 0 auto 0 var(--sp-z-st); width: var(--sp-z-lat);
	display: grid; align-content: start; container-type: inline-size; pointer-events: none;
}
.sp-slide__text {
	box-sizing: content-box; display: grid; justify-items: start; align-content: start;
	gap: 9px; gap: 2.4cqw; padding: 22px 0 0; padding: 6.5cqw 0 0;
}
.sp-slide__text > * { pointer-events: auto; }
.sp-slide__titlu, .sp-slide__sub { -webkit-user-select: text; user-select: text; cursor: text; }
.sp-slide__titlu {
	margin: 0; font-size: 30px; font-size: 8.6cqw; font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
	color: var(--sp-s-titlu); text-wrap: balance;
}
.sp-slide__sub { margin: 0; font-size: 15px; font-size: 4.4cqw; font-weight: 700; line-height: 1.3; color: var(--sp-s-sub); }
.sp-slide__btn {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 20px; border-radius: 12px;
	background: var(--sp-s-btn); color: var(--sp-s-btn-text) !important; font-size: 15px; font-weight: 800; line-height: 1.15;
	text-decoration: none; transition: filter .15s, transform .15s;
}
.sp-slide__btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.sp-slide__btn svg { flex: none; }
/* fără poză de telefon: pe telefon, poza lată sus și textul DEDESUBT, pe culoarea din jur */
.sp-slide--fara-mobil .sp-slide__zona { position: static; width: auto; padding: 0 var(--sp-gutter, 16px) 16px; }
.sp-slide--fara-mobil .sp-slide__text { gap: 8px; padding-top: 14px; }
.sp-slide--fara-mobil .sp-slide__titlu { font-size: 28px; }
.sp-slide--fara-mobil .sp-slide__sub { font-size: 16px; }
/* titlu lung (h1-ul SEO, 03.11; inc/banner.php pune clasa peste 34 de litere): cât un titlu scurt pe două rânduri */
.sp-slide--titlu-lung .sp-slide__titlu { font-size: 23px; font-size: 6.2cqw; }
.sp-slide--fara-mobil.sp-slide--titlu-lung .sp-slide__titlu { font-size: 24px; }

/* Numărătoarea inversă (inc/banner.php: shopius_banner_ceas_html), peste chenarul lăsat liber în poză.
   Stratul are mărimea pozei ÎNTREGI, centrat pe verticală ca ea (object-fit: cover, poziția implicită 50% 50%): pe
   ecranele mai late de 1800 px poza (3 : 1, cel mult 600 px înălțime) se taie sus și jos, iar stratul la fel ⇒
   procentele măsurate pe fișier cad pe chenar la orice lățime. Pe telefon, poza 4 : 5 nu se taie deloc.
   Cifrele se scalează cu chenarul (cq*, rezervă în px). Culorile: ale bannerului (fundalul închis, albastrul punctelor). */
.sp-slide__strat {
	position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 4 / 5; transform: translateY(-50%); pointer-events: none;
}
.sp-slide--fara-mobil .sp-slide__strat { aspect-ratio: 3 / 1; }
.sp-ceas {
	position: absolute; left: var(--c-ml); top: var(--c-mt); width: var(--c-mw); height: var(--c-mh);
	display: grid; place-items: center; container-type: size; padding: 0 5%; box-sizing: border-box;
	color: #1f1a12; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-variant-numeric: tabular-nums; line-height: 1; text-align: center;
}
.sp-slide__strat--fara-tel { display: none; }
.sp-ceas [hidden] { display: none !important; }
.sp-ceas__ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 03.11, userul: „o idee mai mare timerul". Cifrele cât încap: pe lățime 4 × 1,2em + 3 × „:" (~0,3em) + 6 goluri
   ≈ 5,9em + 7% ⇒ cel mult ~15,7cqw; pe înălțime cifrele + eticheta ≈ 70% + 17% din chenar. Prima variantă: 11,5cqw / 54cqh. */
.sp-ceas__rand { display: flex; align-items: flex-start; justify-content: center; gap: 3px; gap: 1.2cqw; }
.sp-ceas__b { display: grid; justify-items: center; min-width: 1.2em; }
.sp-ceas__b b, .sp-ceas__doua { font-size: 38px; font-size: min(68cqh, 15cqw); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.sp-ceas__doua { color: var(--sp-albastru, #004ace); font-weight: 800; }
.sp-ceas__b small {
	margin-top: 2px; margin-top: 2.5cqh; font-size: 10px; font-size: max(9px, min(17cqh, 3.4cqw)); font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: #6b5f4b; line-height: 1.05;
}
.sp-ceas__gata { font-size: 30px; font-size: min(60cqh, 12cqw); font-weight: 900; }

/* punctele + pauza (sub bannere), săgețile (≥ 1024) */
.sp-carusel__nav { display: flex; align-items: center; justify-content: center; gap: 2px; padding-top: 8px; }
.sp-carusel__punct {
	box-sizing: content-box; width: 10px; height: 10px; padding: 7px; border: 0; border-radius: 999px;
	background: var(--sp-linie, #e1e8f5); background-clip: content-box; cursor: pointer; transition: width .2s, background-color .2s;
}
.sp-carusel__punct[aria-current="true"] { width: 26px; background-color: var(--sp-albastru, #004ace); }
.sp-carusel__pauza {
	display: grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; padding: 0;
	border: 1px solid var(--sp-linie, #e1e8f5); border-radius: 50%; background: #fff; color: var(--sp-albastru, #004ace); cursor: pointer;
}
.sp-carusel__pauza svg { width: 14px; height: 14px; }
.sp-carusel__pauza [data-sp-pornit] { display: none; }
.sp-carusel__pauza[aria-pressed="true"] [data-sp-pornit] { display: block; }
.sp-carusel__pauza[aria-pressed="true"] [data-sp-oprit] { display: none; }
/* săgețile: în stânga / dreapta coloanei, cu 16 px până la text; pe ecranele unde nu încap acolo (< ~1420), lângă
   margine — și atunci textul se dă la o parte (vezi ≥ 1024) */
.sp-carusel__sageata {
	display: none; position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; place-items: center;
	border: 0; border-radius: 50%; background: #fff; color: var(--sp-albastru, #004ace); box-shadow: 0 6px 18px rgba(11, 27, 77, .18); cursor: pointer;
}
.sp-carusel__sageata--st { left: max(12px, calc((100% - 1320px) / 2 - 36px)); }
.sp-carusel__sageata--dr { right: max(12px, calc((100% - 1320px) / 2 - 36px)); }
.sp-carusel__sageata:hover { background: var(--sp-albastru, #004ace); color: #fff; }
.sp-carusel :focus-visible { outline: 3px solid var(--sp-albastru, #004ace); outline-offset: 2px; }

@media (min-width: 768px) {
	/* pe calculator textul e mereu PESTE poză ⇒ culoarea lui e cea aleasă, nu cea de pe telefon */
	.sp-slide, .sp-slide--tel-alb {
		--sp-s-titlu: var(--sp-albastru, #004ace); --sp-s-sub: var(--sp-text, #0b1b4d); --sp-s-btn: var(--sp-albastru, #004ace);
		--sp-s-btn-text: #fff;
	}
	.sp-slide--alb {
		--sp-s-titlu: #fff; --sp-s-sub: #fff; --sp-s-btn: var(--sp-galben, #fed002); --sp-s-btn-text: var(--sp-albastru, #004ace);
	}
	/* 3 : 1 până la 1800 px lățime; mai lat, poza se taie puțin sus și jos (la 1920: 40 px din 640) */
	.sp-slide__poza, .sp-slide--fara-mobil .sp-slide__poza { aspect-ratio: 3 / 1; max-height: 600px; }
	/* numărătoarea: stratul cât poza lată (vezi mai sus), chenarul de pe ea */
	.sp-slide__strat { aspect-ratio: 3 / 1; }
	.sp-slide__strat--fara-tel { display: block; }
	.sp-ceas { left: var(--c-l); top: var(--c-t); width: var(--c-w); height: var(--c-h); }
	/* aceeași greutate ca regulile de telefon (.a:not(.b) .c), ca să le bată; și fără poză de telefon */
	.sp-slide.sp-slide--voal-inchis .sp-slide__poza::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .52) calc(var(--sp-z-st) + .35 * var(--sp-z-lat)), rgba(0, 0, 0, 0) calc(var(--sp-z-st) + .62 * var(--sp-z-lat)));
	}
	.sp-slide.sp-slide--voal-deschis .sp-slide__poza::after {
		background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .44) calc(var(--sp-z-st) + .35 * var(--sp-z-lat)), rgba(255, 255, 255, 0) calc(var(--sp-z-st) + .62 * var(--sp-z-lat)));
	}
	/* zona textului: 42% din coloană, în stânga, centrată pe verticală */
	.sp-slide__zona, .sp-slide--fara-mobil .sp-slide__zona {
		position: absolute; inset: 0 auto 0 var(--sp-z-st); width: var(--sp-z-lat); padding: 0; align-content: center;
	}
	.sp-slide__text, .sp-slide--fara-mobil .sp-slide__text {
		width: 504px; width: 42cqw; gap: 12px; gap: 1.3cqw; padding: 0;
	}
	.sp-slide__titlu, .sp-slide--fara-mobil .sp-slide__titlu { font-size: 44px; font-size: clamp(26px, 5.2cqw, 68px); }
	.sp-slide--titlu-lung .sp-slide__titlu, .sp-slide--fara-mobil.sp-slide--titlu-lung .sp-slide__titlu { font-size: 34px; font-size: clamp(22px, 3.7cqw, 48px); }
	.sp-slide__sub, .sp-slide--fara-mobil .sp-slide__sub { font-size: 17px; font-size: clamp(14px, 1.55cqw, 20px); }
	.sp-slide__btn {
		margin-top: 6px; margin-top: .5cqw; font-size: clamp(14px, 1.35cqw, 17px);
		padding: clamp(10px, 1.15cqw, 15px) clamp(16px, 2cqw, 26px); border-radius: clamp(10px, 1.1cqw, 14px);
	}
}
@media (min-width: 1024px) {
	.sp-carusel__sageata { display: grid; }
	/* loc pentru săgeata din stânga (12 + 44 + 16 px de la marginea ecranului) când coloana e prea aproape de margine;
	   (100vw − 100cqw) / 2 = marginea coloanei (+ jumătate de bară de derulare ⇒ 80, nu 72) */
	.sp-slide__text, .sp-slide--fara-mobil .sp-slide__text { padding-left: max(0px, 80px - (100vw - 100cqw) / 2); }
}
@media (prefers-reduced-motion: reduce) {
	.sp-slide__btn, .sp-carusel__punct { transition: none; }
}