/* Carduri de homepage, About Us, Contact, pagini simple, 404. */

/* --- Coloane și carduri de homepage --- */

.sv-column {
	display: flex;
	flex-direction: column;
	gap: var(--sv-gap);
	width: 100%;
}

@media (min-width: 1024px) and (min-height: 600px) {
	.sv-column {
		flex: 0 0 auto;
		height: var(--panel-h);
		width: calc(var(--panel-h) * var(--ar, 1));
	}

	.sv-card__title {
		font-size: clamp(22px, 3.5vh, 48px);
	}
}

.sv-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-height: 0;
	padding: 24px;
	border-radius: var(--sv-radius-card);
	background: var(--sv-surface);
	overflow: hidden;
	transition: transform 0.22s ease;
}

.sv-card--half {
	aspect-ratio: 513 / 352;
}

.sv-card--tall {
	aspect-ratio: 600 / 721;
}

@media (min-width: 1024px) and (min-height: 600px) {
	.sv-card--half,
	.sv-card--tall {
		aspect-ratio: auto;
	}
}

.sv-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

/*
 * Umbra interioară în gradient: vignetă radială plus un inset shadow, ca titlul
 * alb și tag-urile să rămână lizibile peste orice fotografie. Raza e în em,
 * deci ține pasul cu tipografia cardului, care se scalează cu banda.
 */
.sv-card__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 4em 0.6em rgba(0, 0, 0, 0.55);
}

.sv-card__title {
	position: relative;
	z-index: 2;
	font-size: var(--sv-fs-card);
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
}

/*
 * Tag-urile stau peste poză, deci albe, nu gri ca pe panouri. Sunt poziționate
 * absolut față de card: așa nu intră în fluxul care centrează titlul, iar
 * cele două plasări din design se obțin doar din CSS.
 */
.sv-card__tags {
	position: absolute;
	z-index: 2;
	display: flex;
    color: var(--sv-ink-muted);
    line-height: 1.25;
    font-weight: 600;
	pointer-events: none;
}

/* Cardul înalt: stivuite jos-dreapta, aliniate la dreapta. */
.sv-card--tall > .sv-card__tags {
	right: 5%;
	bottom: 4.5%;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35em;
	font-size: clamp(14px, 2.2vh, 30px);
	text-align: right;
}

/* Cardul jumătate: un singur rând, centrat, sub titlu. */
.sv-card--half > .sv-card__tags {
	left: 8%;
	right: 8%;
	bottom: 9%;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3em 1em;
	font-size: clamp(12px, 1.9vh, 24px);
}

.sv-card:hover {
	transform: translateY(-4px);
}

/*
 * Poza și tag-urile apar doar la hover. Regula e prinsă în `hover: hover`, ca pe
 * touch — unde hover-ul nu există — cardul să nu rămână gol.
 */
@media (hover: hover) {
	.sv-card__media,
	.sv-card__tags {
		opacity: 0;
		transition: opacity 0.28s ease;
	}

	.sv-card:hover .sv-card__media,
	.sv-card:hover .sv-card__tags,
	.sv-card:focus-visible .sv-card__media,
	.sv-card:focus-visible .sv-card__tags {
		opacity: 1;
	}
}

.sv-panel--empty {
	display: grid;
	place-items: center;
}

.sv-empty {
	color: var(--sv-ink-muted);
}

/* --- About Us --- */

/* Ritmul de secțiuni de pe About e mai larg decât gap-ul obișnuit de panou. */
@media (min-width: 1024px) and (min-height: 600px) {
	.sv-track--about {
		gap: calc(var(--panel-h) * 0.1664); /* ≈120px la h=721 */
	}

	/*
	 * Excepție: grila finală stă la 51px de testimoniale, nu la distanța dintre
	 * secțiuni — în design fac practic aceeași secțiune. 0.0707 = 51/721.
	 */
	.sv-panel--about-quotes + .sv-panel--closing {
		margin-left: calc( (var(--panel-h) * 0.0707) - (var(--panel-h) * 0.1664) );
	}
}

.sv-panel--about-intro,
.sv-panel--about-process,
.sv-panel--about-quotes {
	--sv-panel-bg: transparent;
	overflow: visible;
}

/* --- Titlul mare, decorativ --- */

/* Dosis Bold #191919, aliniat dreapta, ultimul cuvânt pe rândul doi. */
.sv-bigtitle {
	margin: 0;
	color: var(--sv-ink-display);
	/*
	 * Două plafoane, se ia cel mic: 454/721 din bandă (proporția din design) și
	 * spațiul rămas după rail și gutter-e, împărțit la lungimea celui mai lung
	 * rând. 0.5 per caracter e o supraestimare sigură pentru Dosis Bold.
	 */
	font-size: min(
		calc(var(--panel-h, 721px) * 0.6297),
		calc((100vw - 264px) / (var(--sv-title-chars, 7) * 0.5))
	);
	font-weight: 700;
	/*
	 * Designul are 0.6718, dar acolo rândul doi e „us" cu minusculă, deci urcă
	 * doar la x-height. Titlurile reale au majusculă, care la 0.6718 intră în
	 * rândul de deasupra; 0.78 lasă spațiu vizibil în ambele cazuri.
	 */
	line-height: 0.78;
	text-align: right;
	text-shadow: 0.0308em 0.0308em 0.0529em rgba(0, 0, 0, 0.22);
	white-space: nowrap;
	user-select: none;
}

.sv-bigtitle__line {
	display: block;
}

/* Rândul doi e minusculă în design — dar numai când chiar există un rând doi. */
.sv-bigtitle__line:last-child:not(:only-child) {
	text-transform: lowercase;
}

/* --- About: intro --- */

.sv-about {
	position: relative;
	height: 100%;
}

.sv-about__title {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
}

/* Ancorat la BAZA panoului: de sus, ieșea sub margine și tăia ultimul tag. */
.sv-about__cols {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 63.99%;
	display: grid;
	grid-template-columns: 38.36% 49.09%;
	column-gap: 6.16%;
}

.sv-about__label,
.sv-process__label {
	margin: 0;
	color: var(--sv-ink-label);
	font-size: calc(var(--panel-h, 721px) * 0.0416);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.sv-about__label--tags {
	text-align: right;
}

.sv-about__rule {
	grid-column: 1 / -1;
	height: 0;
	margin: calc(var(--panel-h, 721px) * 0.0333) 0 calc(var(--panel-h, 721px) * 0.0263);
	border-top: 1px solid var(--sv-line);
}

.sv-about__rule__mobile{
	display: none;
}

.sv-about__tags {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: calc(var(--panel-h, 721px) * 0.0166);
	color: var(--sv-ink-label);
	font-size: calc(var(--panel-h, 721px) * 0.0416);
	font-weight: 700;
	line-height: 1;
	text-align: right;
}

.sv-about__text {
	color: var(--sv-ink);
    font-size: calc(var(--panel-h, 721px) * 0.029);
    font-weight: 500;
    line-height: 1.34;
}

/* --- the process --- */

.sv-process {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	height: 100%;
	padding-block: 12%;
}

.sv-process__label {
	flex: 0 0 auto;
	writing-mode: horizontal-tb;
}

.sv-process__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 auto;
}

/* 325px în design; fără plafon, textul s-ar întinde pe toată coloana. */
.sv-step {
	max-width: calc(var(--panel-h, 721px) * 0.4508);
}

.sv-step__title {
	margin: 0 0 12px;
	font-size: calc(var(--panel-h, 721px) * 0.0333);
	font-weight: 700;
	line-height: 1.2;
}

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

/* --- Testimoniale în About --- */

.sv-quotes--about {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: visible;
	justify-content: center;
}

/* Regulile grilei de citate sunt comune, în panels.css. */

/* --- Contact --- */

/* Padding-ul respectă exact bugetul de chrome; 8px peste și apare scroll. */
.sv-contact {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: var(--sv-chrome-top) var(--sv-pad-x) var(--sv-chrome-bottom);
}

@media (min-width: 1024px) {
	.sv-contact {
		padding-left: calc(var(--sv-rail-w) + var(--sv-pad-x));
	}
}

.sv-contact__inner {
	width: 100%;
	max-width: 1440px;
}

@media (min-width: 1024px) and (min-height: 600px) {
	/*
	 * Titlul decorativ e absolut; ce iese din bloc ar adăuga înălțime la
	 * document și ar da scroll pe o pagină care n-are ce derula. Regula stă
	 * în media query: sub 600px înălțime pagina trebuie să rămână derulabilă,
	 * altfel formularul devine inaccesibil.
	 */
	.sv-contact {
		overflow: hidden;
	}

	/*
	 * Bloc 1631×709 = 2.2622 × înălțimea de referință. Înălțimea se plafonează
	 * și la bandă: minimul de 420px din --panel-h e util în track, dar aici
	 * împingea blocul peste ecran pe viewporturi scunde.
	 */
	.sv-contact__inner {
		position: relative;
		height: min( var(--panel-h), calc(100vh - var(--sv-chrome)) );
		max-width: calc(var(--panel-h) * 2.2622);
	}

	.sv-contact__title {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
	}

	/* Formularul se suprapune peste titlu, jos-stânga, ancorat la bază. */
	.sv-contact__body {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 55.55%;
	}
}

/*
 * Coloanele curg pe verticală: NAME/EMAIL în prima, PHONE/MESSAGE în a doua.
 * `grid-auto-flow: column` face asta fără să atingă ordinea din DOM, deci
 * tabularea rămâne name → email → phone → message.
 */
.sv-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 427px));
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
	column-gap: 52px;
	/*
	 * Spațierile pe verticală se scalează cu banda, ca restul paginii; 0.0569 și
	 * 0.068 dau exact 41px și 49px la banda de bază. Fixe fiind, pe laptopurile
	 * de 13" formularul urca peste primul rând al titlului decorativ, în loc să
	 * se așeze peste al doilea ca în design. Mărimile de text rămân neatinse —
	 * într-un formular care se completează, acelea nu se micșorează.
	 */
	row-gap: clamp(22px, calc(var(--panel-h, 721px) * 0.0569), 41px);
	max-width: 906px;
}

.sv-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * Două familii de culoare, ca în design, pe desktop și pe mobil deopotrivă:
 * textul de cadru — etichete și nota de subsol — în tonul stins al titlurilor,
 * iar câmpul propriu-zis în alb, ca să se vadă unde se scrie.
 */
.sv-field__label {
	color: var(--sv-ink-label);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.sv-field__input {
	width: 100%;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--sv-ink);
	background: transparent;
	color: var(--sv-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	resize: none;
}

.sv-field__input::placeholder {
	color: var(--sv-ink);
	opacity: 1;
}

.sv-field__input:focus {
	outline: none;
	border-bottom-color: var(--sv-accent);
}

/* .sv-field__input:focus-visible {
	outline: 2px solid var(--sv-focus);
	outline-offset: 4px;
} */

.sv-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(26px, calc(var(--panel-h, 721px) * 0.068), 49px);
	max-width: 906px;
	flex-wrap: wrap;
}

.sv-form__submit {
	min-width: 194px;
	min-height: 60px;
	background: transparent;
	cursor: pointer;
}

.sv-form__note {
	margin: 0;
	color: var(--sv-ink-label);
	font-size: 15px;
}

/* Vizibil doar administratorului, când nu e configurat niciun shortcode. */
.sv-contact__warn {
	margin: 0;
	padding: 14px 20px;
	border: 1px solid var(--sv-accent);
	border-radius: var(--sv-radius);
	color: var(--sv-ink);
	font-size: 16px;
}

.sv-contact__warn a {
	color: var(--sv-accent);
}

/* --- Formular din plugin (Contact Form 7) --- */

/*
 * CF7 produce aceleași clase ca formularul propriu — sunt puse pe fiecare
 * form-tag în șablonul din docs/contact-form-7.md — dar adaugă în jur marcaj
 * și foaie de stil proprii.
 *
 * Toți selectorii de mai jos pornesc din `.sv-contact` dintr-un singur motiv:
 * CF7 își scrie regulile ca `.wpcf7 form .wpcf7-…`, adică două clase și un
 * element. O regulă scrisă pe clasa goală ar pierde în fața lor indiferent de
 * ordinea în care se încarcă foile.
 *
 * Unde CF7 scrie chiar `.wpcf7 form .x` — 0-2-1 — nu ajunge nici
 * `.sv-contact .x`, care e 0-2-0. Acolo intră și `.wpcf7-form` în lanț, ca să
 * fie trei clase. Verificat cu foaia CF7 încărcată și înainte, și după a
 * noastră: câștigă în ambele ordini.
 */

/* Învelișul fiecărui control: transparent pentru layout. */
.sv-contact .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Cu autop-ul stins, CF7 lasă un <p> gol la coada formularului. */
.sv-contact .wpcf7-form > p:empty {
	display: none;
}

/*
 * Spinnerul ocupă loc și ascuns fiind — 24px plus 48px de margini. În
 * `.sv-form__foot`, care pe mobil e `nowrap`, ar înghesui nota și butonul.
 * Scos din flux cu totul, apare doar cât ține trimiterea.
 */
.sv-contact .wpcf7-form .wpcf7-spinner {
	display: none;
	margin: 0 0 0 12px;
}

.sv-contact .wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
}

/* Eroarea de sub un câmp. */
.sv-contact .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	color: var(--sv-accent);
	font-size: 14px;
	font-weight: 700;
}

.sv-contact .sv-field__input.wpcf7-not-valid {
	border-bottom-color: var(--sv-accent);
}

/*
 * Bara de răspuns. Ascunsă din start și arătată doar pe o stare anume: CF7 o
 * tipărește goală în pagină de la încărcare, iar cu bordura ei implicită ar
 * apărea o casetă albastră goală sub formular înainte de orice trimitere.
 */
.sv-contact .wpcf7-form .wpcf7-response-output {
	display: none;
	margin: 24px 0 0;
	padding: 14px 20px;
	border: 1px solid var(--sv-line);
	border-radius: var(--sv-radius);
	color: var(--sv-ink);
	font-size: 16px;
}

.sv-contact .wpcf7-form.sent .wpcf7-response-output,
.sv-contact .wpcf7-form.invalid .wpcf7-response-output,
.sv-contact .wpcf7-form.unaccepted .wpcf7-response-output,
.sv-contact .wpcf7-form.payment-required .wpcf7-response-output,
.sv-contact .wpcf7-form.failed .wpcf7-response-output,
.sv-contact .wpcf7-form.aborted .wpcf7-response-output {
	display: block;
}

.sv-contact .wpcf7-form.sent .wpcf7-response-output {
	border-color: transparent;
	background: var(--sv-accent);
	color: var(--sv-on-accent);
	font-weight: 700;
}

.sv-contact .wpcf7-form.invalid .wpcf7-response-output,
.sv-contact .wpcf7-form.unaccepted .wpcf7-response-output,
.sv-contact .wpcf7-form.payment-required .wpcf7-response-output,
.sv-contact .wpcf7-form.failed .wpcf7-response-output,
.sv-contact .wpcf7-form.aborted .wpcf7-response-output {
	border-color: var(--sv-accent);
}

/* --- Pagini simple și 404 --- */

.sv-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: var(--sv-chrome-top) var(--sv-pad-x) var(--sv-chrome-bottom);
}

@media (min-width: 1024px) {
	.sv-page {
		padding-left: calc(var(--sv-rail-w) + var(--sv-pad-x));
	}
}

.sv-page__inner {
	width: 100%;
	max-width: 760px;
}

.sv-page__title {
	margin: 0 0 20px;
	font-size: clamp(30px, 5vh, 52px);
	font-weight: 700;
	line-height: 1.05;
}

.sv-404__code {
	margin: 0 0 8px;
	color: var(--sv-ink-faint);
	font-size: clamp(80px, 22vh, 200px);
	font-weight: 700;
	line-height: 0.8;
}

.sv-404__actions {
	margin-top: 32px;
}

.sv-list {
	display: flex;
	flex-direction: column;
	margin-top: 24px;
}

.sv-list__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sv-line);
	font-size: 20px;
	font-weight: 700;
}

.sv-list__link:hover {
	color: var(--sv-ink-label);
}

.sv-entry__content > * + * {
	margin-top: 1em;
}