/*
 * Tipurile de panou. Pe desktop au înălțimea benzii și lățimea derivată din
 * --ar; pe mobil devin secțiuni pe lățime completă (mobile.css).
 *
 * În conținutul scrolabil nu se folosește galben: doar alb, negru și griuri.
 * Accentul rămâne strict în chrome — butoane și iconuri sociale.
 */

/* --- Comun --- */

/*
 * Elementul `picture` se interpune între casetă și imagine, deci umple el
 * caseta: altfel `height: 100%` de pe imagine nu are la ce să se raporteze.
 * Sursa lui prinde layoutul orizontal și oferă doar originalul (helpers.php).
 */
.sv-panel__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * `contain`, nu `cover`: poza se vede întreagă, niciodată tăiată. Cu lățimea
 * panoului calculată din poză, umple exact caseta și nu rămâne spațiu gol.
 * Cardurile și miniaturile din grila finală rămân pe `cover`: acolo decupajul
 * e intenționat, formatul lor fiind fix.
 */
.sv-panel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Raza vine de la casetă. Părintele taie deja cu `overflow: hidden`, dar Safari
 * nu decupează de încredere un `<video>` așa, deci o punem și pe element.
 */
.sv-panel__video {
	border-radius: inherit;
}

/* În design sunt label-uri gri cu majuscule, nu titluri albe. */
.sv-panel__heading {
	margin: 0 0 16px;
	color: var(--sv-ink-label);
	font-size: calc(var(--panel-h, 721px) * 0.0416);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
}

.sv-panel--media {
	margin: 0;
}

/* --- Stiva de imagini --- */

/*
 * Panoul devine transparent și fiecare imagine e propriul card rotunjit.
 * --sv-rows vine inline din PHP, în `fr`: cu `%` gap-urile s-ar adăuga peste
 * 100% și stiva ar depăși panoul.
 *
 * Grila are două coloane, ca două imagini de 50% să încapă pe același rând.
 * Plasarea automată le așază singură; PHP grupează după aceeași regulă, deci
 * numărul de rânduri din --sv-rows corespunde rândurilor reale.
 */
.sv-panel--image {
	--sv-panel-bg: transparent;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: var(--sv-rows, 1fr);
	gap: calc(var(--panel-h, 721px) * 0.0139); /* ≈10px la 721 */
	overflow: visible;
}

.sv-stack__item {
	margin: 0;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--sv-radius-card);
	/* background: var(--sv-surface); */
}

.sv-stack__item--full {
	grid-column: 1 / -1;
}

.sv-stack__item .sv-panel__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Intro --- */

.sv-intro {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: 24px 48px;
	height: 100%;
	/* Meta și tag-urile se opresc la 91.3% din panou, nu pe muchie. */
	padding: 8px 8.7% 8px 0;
}

.sv-meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 46px;
	margin: 0;
	justify-content: flex-end;
}

.sv-meta__item {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* Label-urile au culoarea titlului decorativ; valorile din dd rămân albe. */
.sv-meta dt {
	color: var(--sv-ink-faint);
	font-size: var(--sv-fs-cta);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.sv-meta dd {
	margin: 0;
	font-size: var(--sv-fs-meta);
	font-weight: 700;
}

/* Se termină pe aceeași margine dreapta ca meta; 764/1565 din casetă. */
.sv-intro__text {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: start;
	margin-left: auto;
	max-width: 48.8%;
	text-align: justify;
}

.sv-tags {
	grid-column: 2;
	grid-row: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	color: var(--sv-ink-faint);
	font-size: clamp(16px, 2.3vh, 30px);
	font-weight: 700;
}

/*
 * Ancorat jos-stânga, niciodată centrat. Două plafoane, se ia cel mic: unul pe
 * înălțime (proporția din design), unul pe lățime, ca un nume lung să nu iasă
 * din cadru la dimensiunea unuia scurt. --sv-display-chars vine din PHP.
 */
.sv-intro__display {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	color: var(--sv-ink-display);
	font-size: min(
		calc(var(--panel-h, 721px) * 0.469),
		calc(var(--panel-h, 721px) * var(--ar, 2.3786) * 0.8 / (var(--sv-display-chars, 8) * 0.6))
	);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

/* --- Imagine + text --- */

/*
 * Două rânduri; ordinea din DOM decide cine e sus, deci fără `order`.
 * --sv-rows vine inline: `40fr 60fr` cu înălțime fixată, altfel `1fr auto`.
 */
.sv-panel--image_text {
	--sv-panel-bg: transparent;

	display: grid;
	grid-template-rows: var(--sv-rows, 1fr auto);
	gap: calc(var(--panel-h, 721px) * 0.0139);
	overflow: visible;
}

.sv-panel--image_text .sv-panel__figure {
	min-height: 0;
	overflow: hidden;
	border-radius: var(--sv-radius-card);
	/* background: var(--sv-surface); */
}

.sv-panel--image_text .sv-panel__figure:empty {
	display: none;
}

/*
 * Textul și padding-ul se scalează cu banda, ca tot restul panoului: 0.0222 și
 * 0.0388 dau exact 16px și 28px la banda de bază de 721px. Cu mărime fixă,
 * caseta se micșora odată cu fereastra iar textul nu, deci același conținut
 * încăpea pe un ecran și dădea pe dinafară pe altul.
 *
 * --sv-fit e factorul calculat de text-fit.js: rămâne 1 cât timp textul încape,
 * și scade doar când e mai mult text decât permite înălțimea aleasă. Titlul
 * scade odată cu paragrafele, ca proporția dintre ele să rămână cea din design.
 */
.sv-panel--image_text .sv-panel__text {
	min-height: 0;
	overflow: hidden;
	padding: calc(var(--panel-h, 721px) * 0.0388);
	border-radius: var(--sv-radius-card);
	background: var(--sv-surface);
	font-size: calc(var(--panel-h, 721px) * 0.026 * var(--sv-fit, 1));
	font-weight: 500;
}

.sv-panel--image_text .sv-panel__heading {
	font-size: calc(var(--panel-h, 721px) * 0.0416 * var(--sv-fit, 1));
	/* 0.53em ≈ cei 16px din design la mărimea de bază a titlului. */
	margin-bottom: 0.53em;
}

.sv-panel--image_text p {
	margin-bottom: 0.75em;
	text-align: justify;
}

/* --- Testimoniale --- */

.sv-quotes {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 0;
}

/*
 * Se stivuiesc pe verticală, nu una lângă alta: în design au același x.
 * Un citat singur se centrează; două împart panoul în jumătăți egale, fiecare
 * centrat în jumătatea lui — `1fr 1fr` plus `align-self`, nu înălțimi fixe,
 * care ar tăia un citat mai lung. Lățimea coloanei e 612px din design.
 */
.sv-quotes__grid {
	display: grid;
	grid-template-columns: minmax(0, calc(var(--panel-h, 721px) * 0.8488));
	grid-auto-rows: auto;
	align-content: center;
	justify-content: start;
	gap: 32px;
	flex: 1 1 auto;
	min-height: 0;
}

.sv-quotes__grid[data-count="2"] {
	grid-template-rows: 1fr 1fr;
	align-content: stretch;
}

.sv-quotes__grid > .sv-quote {
	align-self: center;
}

.sv-quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: calc(var(--panel-h, 721px) * 0.8488); /* 612px în design */
}

/*
 * Pozițiile naturale ale celor două glife sunt la niveluri diferite („ pe linia
 * de bază, “ la înălțimea majusculelor). În design sunt la același nivel, deci
 * a doua se coboară explicit, în em, ca să țină pasul cu fontul.
 */
.sv-quote__mark {
	display: inline-flex;
	align-items: flex-end;
	gap: 0.1em;
	color: var(--sv-ink);
	font-size: calc(var(--panel-h, 721px) * 0.08);
	font-weight: 700;
	line-height: 1;
}

.sv-quote__mark-hi {
	transform: translateY(0.62em);
}

.sv-quote__byline {
	color: var(--sv-ink-label);
	font-size: calc(var(--panel-h, 721px) * 0.0333);
	font-weight: 700;
}

.sv-quote__text {
	margin: 0;
	font-size: calc(var(--panel-h, 721px) * 0.0277);
	line-height: 1.44;
}

/* --- Final --- */

/* Grila stă direct pe fundalul paginii, fără suprafață de panou. */
.sv-panel--closing,
.sv-panel--quotes {
	--sv-panel-bg: transparent;
}

/* Spațierea vine din `gap`; marginea headingului ar împinge ultimul rând afară. */
.sv-closing .sv-panel__heading,
.sv-quotes .sv-panel__heading {
	margin-bottom: 0;
}

.sv-closing {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding: 0;
}

/* Carduri 286×225, două pe rând, practic fără spațiu între ele. */
.sv-closing__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	/* 0.793 ar fi raportul exact, dar rândul 3 iese cu câțiva px; 0.775 îl încape. */
	max-width: calc(var(--panel-h, 721px) * 0.775);
	min-height: 0;
	align-content: start;
}

/*
 * În repaus, grila arată ca o tablă de șah: poza stă ascunsă și se vede doar
 * numele, jos-stânga. Cele două nuanțe alternează pe două coloane, deci
 * tiparul e 4n+1 / 4n+4 pentru una și 4n+2 / 4n+3 pentru cealaltă.
 */
.sv-closing__card {
	--sv-closing-pad: 14px;

	position: relative;
	display: block;
	aspect-ratio: 286 / 225;
	background: var(--sv-surface);
	overflow: hidden;
}

.sv-closing__grid > li:nth-child(4n + 2) .sv-closing__card,
.sv-closing__grid > li:nth-child(4n + 3) .sv-closing__card {
	background: var(--sv-surface-2);
}

.sv-closing__media {
	position: absolute;
	inset: 0;
}

/*
 * Același tratament ca pe cardurile de homepage (.sv-card__media::after din
 * pages.css): vignetă radială plus umbră interioară, ca numele alb să rămână
 * lizibil peste orice fotografie.
 *
 * Gradientul e în procente, deci se potrivește singur. Umbra de acolo e în `em`
 * și ajunge la 10-14% din lățimea cardului, în funcție de viewport. Cardul de
 * aici e mult mai mic — 0.3875 × bandă, față de 0.83 la cardul înalt — deci
 * copiată ca atare ar fi apăsat de peste două ori mai tare. Coeficienții de mai
 * jos dau ~11.6% din lățime, adică aceeași pondere, constantă la orice ecran.
 */
.sv-closing__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(115% 85% at 50% 42%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.82));
	box-shadow:
		inset 0 0 calc(var(--panel-h, 721px) * 0.045) calc(var(--panel-h, 721px) * 0.0067)
		rgba(0, 0, 0, 0.55);
}

.sv-closing__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Numele e ancorat jos-stânga prin `top: 100%` plus o translație pe propria
 * înălțime, iar la hover trece în centru. Ambele stări sunt `left`/`top` plus
 * un singur `translate()`, deci trecerea se interpolează — spre deosebire de
 * alinierea din flex, care ar fi sărit dintr-o poziție în alta.
 */
.sv-closing__name {
	position: absolute;
	z-index: 1;
	left: var(--sv-closing-pad);
	top: 100%;
	transform: translate(0, calc(-100% - var(--sv-closing-pad)));
	max-width: calc(100% - var(--sv-closing-pad) * 2);
	color: var(--sv-ink);
	font-size: calc(var(--panel-h, 721px) * 0.0277);
	font-weight: 700;
	line-height: 1.1;
	transition:
		left 0.26s ease,
		top 0.26s ease,
		transform 0.26s ease,
		font-size 0.26s ease;
}

/*
 * Poza apare doar la hover, ca pe cardurile de homepage. Regula e prinsă în
 * `hover: hover`: pe touch, unde hover-ul nu există, poza rămâne vizibilă și
 * numele stă unde era.
 */
@media (hover: hover) {
	.sv-closing__media {
		opacity: 0;
		transition: opacity 0.28s ease;
	}

	.sv-closing__card:hover .sv-closing__media,
	.sv-closing__card:focus-visible .sv-closing__media {
		opacity: 1;
	}

	.sv-closing__card:hover .sv-closing__name,
	.sv-closing__card:focus-visible .sv-closing__name {
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: calc(var(--panel-h, 721px) * 0.0333);
		text-align: center;
	}
}