/*
 * Mobil, sub 1024px. Același HTML, alt CSS: track-ul de panouri redevine
 * document normal, cu scroll vertical și fără scroll snap, la fel ca pe
 * desktop. Excepția e homepage-ul: acolo tot flow-ul e orizontal, un slider cu
 * snap, iar pagina nu se derulează deloc pe verticală.
 */

@media (max-width: 1023px), (max-height: 599px) {

	/*
	 * Titlul paginii, o singură valoare pentru toate trei — client, About,
	 * Contact. Pe desktop se scalează cu banda; aici banda nu mai dictează
	 * nimic, iar cele trei trebuie să arate identic, deci un token comun.
	 */
	:root {
		--sv-title-mobile: 56px;

		/*
		 * Înălțimea topbar-ului: 58px de bară plus 14px de aer deasupra, ca
		 * hamburgerul și logo-ul să nu stea lipite de marginea ecranului. Tot
		 * ce trebuie să înceapă sub bară se raportează la valoarea asta.
		 */
		--sv-topbar-mobile: 72px;
	}

	/* --- Cadru --- */

	body,
	body.sv-has-track {
		height: auto;
		overflow: visible;
	}

	/* Rail-ul vertical dispare; navigația trece în off-canvas. */
	.sv-rail {
		display: none;
	}

	/* --- Topbar --- */

	.sv-topbar {
		height: var(--sv-topbar-mobile);
		padding: 14px var(--sv-gutter) 0;
		align-items: center;
		gap: 12px;
		background: var(--sv-base);
	}

	/* Hamburger stânga, logo dreapta. */
	.sv-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 50px;
		border-radius: 8px;
		background: var(--sv-surface);
		order: 1;
	}

	.sv-logo {
		order: 3;
		margin-left: auto;
		width: 43px;
	}

	.sv-logo__img {
		width: 43px;
	}

	/* Eticheta paginii și tagline-ul nu apar pe mobil. */
	.sv-topbar__label,
	.sv-topbar__tagline {
		display: none;
	}

	/* --- Bottombar --- */

	/*
	 * Fără fundal solid și fără linie: doar elementele, iar conținutul trece pe
	 * dedesubt și se stinge într-un gradient care urcă din marginea de jos.
	 */
	.sv-bottombar {
		bottom: 0;
		left: 0;
		right: 0;
		height: 58px;
		padding: 0 var(--sv-gutter);
		background: transparent;
		border-top: 0;
	}

	/*
	 * Aceeași cădere gaussiană ca umbra de pe marginea dreaptă a track-ului de
	 * pe desktop (track.css), doar rotită: exp(-(2.4t)²). Se întinde peste bară
	 * și încă 70px în sus, ca stingerea să înceapă înainte de butoane.
	 *
	 * z-index negativ într-un părinte care are deja context de stivuire: intră
	 * sub iconuri și buton, dar rămâne peste conținutul paginii.
	 */
	.sv-bottombar::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100% + 70px);
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(
			to top,
			var(--sv-base) 0%,
			rgba(var(--sv-base-rgb), 0.961) 8.3%,
			rgba(var(--sv-base-rgb), 0.852) 16.7%,
			rgba(var(--sv-base-rgb), 0.698) 25%,
			rgba(var(--sv-base-rgb), 0.527) 33.3%,
			rgba(var(--sv-base-rgb), 0.368) 41.7%,
			rgba(var(--sv-base-rgb), 0.237) 50%,
			rgba(var(--sv-base-rgb), 0.141) 58.3%,
			rgba(var(--sv-base-rgb), 0.077) 66.7%,
			rgba(var(--sv-base-rgb), 0.039) 75%,
			rgba(var(--sv-base-rgb), 0.018) 83.3%,
			rgba(var(--sv-base-rgb), 0.008) 91.7%,
			rgba(var(--sv-base-rgb), 0) 100%
		);
	}

	.sv-follow__label {
		display: none;
	}

	/*
	 * Datele de contact din bara de jos, pe mobil.
	 *
	 * Homepage: nu apar deloc — bara rămâne cum era, social plus „Hire us".
	 * About și Contact: apar doar ele, fără social și fără butoane. Trei
	 * elemente cu text nu încap pe un rând de 360px, deci se așază pe două,
	 * iar bara crește pe înălțime în loc să taie din text. Gradientul de
	 * dedesubt are `height: calc(100% + 70px)`, deci crește odată cu ea.
	 */
	.sv-bottombar--home .sv-contact-info {
		display: none;
	}

	.sv-bottombar--contact {
		height: auto;
		min-height: 58px;
		padding: 10px var(--sv-gutter) 14px;
		justify-content: flex-start;
	}

	.sv-bottombar--contact .sv-cta {
		display: none;
	}

	.sv-bottombar--contact .sv-contact-info {
		flex-wrap: wrap;
		gap: 10px 18px;
	}

	.sv-bottombar--contact .sv-contact-info__link {
		gap: 8px;
		font-size: 15px;
	}

	.sv-bottombar--contact .sv-contact-info__icon {
		width: 30px;
		height: 30px;
	}

	/*
	 * Bara crește la circa 95px pe două rânduri, iar pagina lăsa jos doar
	 * 90px: ultimul rând de conținut ar fi rămas sub ea. `:has()` fiindcă bara
	 * e după conținut în DOM, deci n-are cum să-l țintească altfel.
	 */
	body:has(.sv-bottombar--contact) .sv-track,
	body:has(.sv-bottombar--contact) .sv-contact {
		padding-bottom: 140px;
	}

	/* „Download pitch deck" nu apare pe mobil. */
	.sv-cta__deck {
		display: none;
	}

	.sv-btn {
		padding: 10px 22px;
		font-size: 22px;
	}

	/* --- Track vertical --- */

	.sv-track {
		position: static;
		display: flex;
		flex-direction: column;
		height: auto;
		gap: 24px;
		padding: calc(var(--sv-topbar-mobile) + 24px) var(--sv-gutter) 90px;
		overflow: visible;
	}

	/* --ar devine irelevant: panourile trec pe lățime completă. */
	.sv-panel,
	.sv-column {
		width: 100%;
		height: auto;
		flex: 0 0 auto;
	}

	/* Casetele cresc după conținut, deci și poza își dictează înălțimea. */
	.sv-panel__picture,
	.sv-panel__img {
		height: auto;
	}

	/* Înălțimile procentuale nu au sens aici: stiva devine flux normal. */
	.sv-panel--image {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	/*
	 * Fără format impus: cu `contain`, o casetă 16/10 ar lăsa dungi goale în
	 * jurul pozelor mai late. Aici fiecare poză își dictează înălțimea și se
	 * vede întreagă, una sub alta.
	 */
	.sv-stack__item {
		aspect-ratio: auto;
	}

	.sv-stack__item .sv-panel__img {
		height: auto;
	}

	/* --- Panou intro --- */

	.sv-intro {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 0;
	}

	.sv-meta {
		flex-direction: column;
		gap: 2px;
		justify-content: flex-start;
	}

	.sv-intro__text,
	.sv-tags {
		grid-column: auto;
		grid-row: auto;
		margin-left: 0;
		max-width: none;
		font-weight: 500;
	}

	.sv-intro__text {
		text-align: left;
	}

	/*
	 * Două coloane fixe, nu `wrap`: la wrap, un tag lung împingea perechea pe
	 * rândul următor și a doua coloană nu mai era aliniată. Culoarea și
	 * grosimea sunt cele de pe desktop; 16px, fiindcă la 14 Dosis Bold citea
	 * ca semibold.
	 *
	 * Regula ține și tag-urile de pe About: sunt aceeași listă, cu același
	 * tratament, deci stau împreună ca să nu se depărteze una de alta.
	 */
	.sv-tags,
	.sv-about__tags {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 4px 14px;
		font-size: 22px;
		font-weight: 700;
		/* Explicit: pe desktop About are `line-height: 1`, intro n-are nimic. */
		line-height: 1.45;
		color: var(--sv-ink-label);
	}

	/*
	 * Apare, ca pe About și Contact: același tratament de titlu pe toate
	 * paginile. Pe desktop e blocul decorativ uriaș ancorat jos-stânga; aici
	 * intră în flux, deasupra meta-urilor.
	 */
	.sv-intro__display {
		position: static;
		order: -1;
		font-size: var(--sv-title-mobile);
		line-height: 1.05;
		color: var(--sv-ink-label);
		letter-spacing: normal;
		white-space: normal;
	}

	/* --- Panou imagine + text --- */

	.sv-panel--image_text {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.sv-panel--image_text .sv-panel__figure {
		flex: 0 0 auto;
		aspect-ratio: auto;
	}

	.sv-panel--image_text .sv-panel__figure .sv-panel__img {
		height: auto;
	}

	/* Aici casetele cresc după conținut, deci nu se scalează nimic. */
	.sv-panel--image_text .sv-panel__text {
		padding: 20px;
		font-size: var(--sv-fs-body);
	}

	.sv-panel--image_text p {
		text-align: left;
	}

	/* --- Testimoniale --- */

	.sv-quotes {
		padding: 20px;
		overflow: visible;
	}

	.sv-quotes__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.sv-quote__text {
		text-align: left;
	}

	/* --- Carduri de homepage --- */

	/* Masonry vizual pe două coloane, în flex, ca să păstreze repartizarea. */
	/*
	 * Homepage: o coloană care umple exact ecranul.
	 *
	 * Tagline-ul își ia înălțimea din conținut, sliderul primește restul, iar
	 * din el cardul își întinde caseta de fond. Așa cardul ajunge chiar între
	 * tagline și bara de jos, fără nicio înălțime ghicită în px.
	 *
	 * `100dvh`, nu `100vh`: pe telefon bara de adrese intră și iese din ecran,
	 * iar `vh` rămâne la valoarea cu bara ascunsă — cardul ar fi ieșit sub
	 * marginea de jos cât timp bara e vizibilă.
	 *
	 * `height`, nu `min-height`, plus `overflow: hidden` pe body: pagina nu se
	 * derulează deloc pe verticală, tot flow-ul e orizontal, ca pe desktop.
	 * `overflow` pus pe body trece la viewport, fiindcă `html` nu are unul al
	 * lui; `overscroll-behavior` oprește și elasticul de la margini, pe iOS.
	 * Un tagline neașteptat de înalt nu mai împinge pagina: cardul se scurtează,
	 * până la plasa de 120px de pe casetă.
	 */
	body.home {
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		overscroll-behavior: none;
	}

	body.home .sv-main {
		display: flex;
		flex-direction: column;
		height: 100vh;
		height: 100dvh;
		/* Barele fixe, plus aer: topbar-ul deasupra, 58px de bottombar dedesubt. */
		padding: calc(var(--sv-topbar-mobile) + 12px) 0 78px;
	}

	.sv-home__tagline {
		display: block;
		flex: 0 0 auto;
		padding: 0 var(--sv-gutter);
		margin-bottom: 22px;
	}

	/*
	 * Imaginea de tagline se întinde pe lățime; proporția o ține fișierul.
	 * `--sv-tagline-h` din Customizer e mărimea din topbar-ul de desktop și n-are
	 * ce căuta aici.
	 */
	.sv-home__tagline-img {
		display: block;
		width: 100%;
		height: auto;
	}

	.sv-home__tagline-text {
		margin: 0;
		font-size: clamp(30px, 9vw, 46px);
		font-weight: 500;
		line-height: 1.05;
	}

	/*
	 * Homepage: slider orizontal cu snap.
	 *
	 * Singurul loc din proiect cu `scroll-snap`. Track-ul de panouri, pe
	 * desktop, se oprește liber, oriunde — acolo orice aliniere forțată e un
	 * bug. Aici e invers: e cerut ca un swipe să ducă exact un card mai departe.
	 *
	 * Gruparea în `.sv-column` e o noțiune de desktop — coloanele track-ului
	 * orizontal. Pe mobil dispare, ca fiecare card să fie propriul element al
	 * sliderului, nu perechi lipite.
	 */
	.sv-track--home {
		display: flex;
		flex-direction: row;
		/* `stretch`, ca fiecare card să primească toată înălțimea benzii. */
		align-items: stretch;
		gap: 14px;
		/* Spațiul vertical îl împarte `body.home .sv-main`, mai jos. */
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
		padding: 0 var(--sv-gutter);
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		/* Prima poziție se aliniază la gutter, nu la marginea ecranului. */
		scroll-padding-left: var(--sv-gutter);
		/* Swipe-ul nu trage pagina de sub el și nu declanșează pull-to-refresh. */
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sv-track--home::-webkit-scrollbar {
		display: none;
	}

	.sv-track--home .sv-column {
		display: contents;
	}

	/*
	 * 72vw lasă la vedere o fâșie din cardul următor — semnalul că sliderul
	 * continuă. Unități de viewport, nu procente: procentul s-ar raporta la
	 * cutia de conținut a track-ului, deci ar scădea cu gutter-ul și cardul ar
	 * ieși vizibil mai îngust decât ce arată designul.
	 *
	 * `scroll-snap-stop: always` e ce face diferența față de un swipe liber:
	 * browserul n-are voie să sară peste un card, oricât de tare ar fi gestul,
	 * deci un swipe = un card.
	 */
	.sv-track--home .sv-card {
		flex: 0 0 72vw;
		width: auto;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: transparent;
		border-radius: 0;
		overflow: visible;
		aspect-ratio: auto;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/*
	 * Caseta de fond iese din `position: absolute` și devine un bloc propriu:
	 * titlul și tag-urile trec sub ea, nu peste. Negrul e starea de dinainte de
	 * dezvăluire — se vede prin fondul care urcă din opacitate.
	 */
	.sv-track--home .sv-card__media {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		/*
		 * Fără raport fix: caseta ia tot ce rămâne între tagline și bara de jos,
		 * după ce titlul și tag-urile își iau rândurile. `min-height` e plasa
		 * pentru ecranele foarte scunde, unde altfel s-ar turti la zero.
		 * Poza rămâne `object-fit: cover`, deci umple oricare ar fi raportul.
		 */
		flex: 1 1 auto;
		min-height: 120px;
		border-radius: var(--sv-radius-card);
		overflow: hidden;
		background: #000;
		opacity: 1;
	}

	/*
	 * Varianta de desktop a fondului, când cardul o are și pe cea de mobil.
	 * Aceeași specificitate ca regula de deasupra și scrisă după ea, deci
	 * câștigă peste `display: block`.
	 */
	.sv-track--home .sv-card__media--desktop {
		display: none;
	}

	/*
	 * Umbra interioară servea titlul așezat peste poză. Titlul a ieșit dedesubt,
	 * deci n-are ce întuneca.
	 */
	.sv-track--home .sv-card__media::after {
		display: none;
	}

	/*
	 * Dezvăluirea, prinsă în `.is-reveal-ready`.
	 *
	 * Steagul îl pune card-media.js pe track la pornire, iar `.is-revealed`
	 * stă doar pe cardul activ — cel aflat în cadru. Vecinii, și cel dinainte,
	 * și cel de după, rămân negri; la trecerea mai departe poza se stinge la
	 * loc, cu aceeași tranziție. Condiționarea de steag e intenționată:
	 * fără ea, regula ar fi „poza pornește invizibilă și o aprinde JS-ul", deci
	 * orice JS care nu rulează ar lăsa homepage-ul fără nicio poză. Așa, efectul
	 * lipsește în cazul acela, dar pozele se văd.
	 */
	.sv-track--home.is-reveal-ready .sv-card__img {
		opacity: 0;
		transition: opacity 0.55s ease;
	}

	.sv-track--home.is-reveal-ready .sv-card.is-revealed .sv-card__img {
		opacity: 1;
	}

	@media (prefers-reduced-motion: reduce) {
		.sv-track--home.is-reveal-ready .sv-card__img {
			transition: none;
		}
	}

	/* Titlul și tag-urile, sub casetă, aliniate la stânga. */
	.sv-track--home .sv-card__title {
		position: static;
		z-index: auto;
		margin-top: 14px;
		font-size: 26px;
		font-weight: 500;
		text-align: left;
	}

	.sv-track--home .sv-card__tags {
		position: static;
		z-index: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 0 10px;
		inset: auto;
		margin-top: 6px;
		font-size: 16px;
		font-weight: 700;
		color: var(--sv-ink-label);
		/*
		 * Pe desktop tag-urile apar la hover, deci pornesc de la `opacity: 0`.
		 * Regula e prinsă în `hover: hover`, dar unele Android-uri raportează
		 * `hover: hover`, iar aici nu există hover de așteptat: fără asta,
		 * tag-urile ar rămâne invizibile pe telefoanele acelea.
		 */
		opacity: 1;
	}

	/* Hover-ul nu există aici; cardul nu se ridică la atingere. */
	.sv-track--home .sv-card:hover {
		transform: none;
	}

	/* --- Titlul mare --- */

	/*
	 * Nu blocul decorativ de 454px de pe desktop, ci un titlu de --sv-title-mobile — dar
	 * păstrează tonul: aceeași culoare ca label-urile, nu alb.
	 */
	.sv-bigtitle {
		color: var(--sv-ink-label);
		font-size: var(--sv-title-mobile);
		line-height: 1.05;
		text-align: left;
		text-shadow: none;
		white-space: normal;
	}

	.sv-bigtitle__line {
		display: inline;
	}

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

	.sv-about {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 24px;
		height: auto;
		justify-content: flex-start;
	}

	/* Absolut ar rămâne peste „What we do"; aici titlul intră în flux. */
	.sv-about__title {
		position: static;
		width: auto;
	}

	/*
	 * Ordinea din DOM servește grila de pe desktop (două coloane, etichetele pe
	 * primul rând). Pe mobil, o singură coloană: fiecare etichetă stă lipită de
	 * conținutul ei, iar linia desparte cele două blocuri.
	 *
	 * Aici „who we are" trece înaintea lui „what we do": pe telefon se citește
	 * întâi cine suntem, abia apoi lista de servicii. `order` face schimbul
	 * fără a atinge DOM-ul, deci desktopul rămâne exact cum e.
	 */
	.sv-about__cols {
		position: static;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.sv-about__label--text {
		order: 1;
	}

	.sv-about__text {
		order: 2;
	}

	.sv-about__rule {
		order: 3;
	}

	.sv-about__label--tags {
		order: 4;
	}

	.sv-about__tags {
		order: 5;
	}

	.sv-about__rule__mobile{
		display: block;
		order: 6;
		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__label--tags,
	.sv-about__tags {
		text-align: left;
	}

	/*
	 * Titlurile secundare — „what we do", „who we are", „the process". Pe
	 * desktop se scalează cu banda; aici banda nu mai dictează nimic, deci
	 * mărime explicită, cu un pas clar peste corpul textului.
	 */
	.sv-about__label,
	.sv-process__label {
		font-size: 25px;
	}

	.sv-about__text {
		font-size: 16px;
	}

	.sv-process {
		flex-direction: column;
		gap: 16px;
		padding-block: 0;
	}

	.sv-step,
	.sv-quote {
		max-width: none;
	}

	.sv-step__title {
		font-size: 18px;
	}

	.sv-step__body,
	.sv-quote__text,
	.sv-closing__name {
		font-size: 16px;
	}

	.sv-quote__byline,
	.sv-panel__heading {
		font-size: 18px;
	}

	.sv-process__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* --- Contact --- */

	.sv-contact,
	.sv-page {
		min-height: 0;
		align-items: flex-start;
		padding: calc(var(--sv-topbar-mobile) + 24px) var(--sv-gutter) 90px;
	}

	.sv-contact__inner {
		position: static;
		height: auto;
		max-width: none;
	}

	.sv-contact__title {
		position: static;
		width: auto;
		margin-bottom: 28px;
	}

	.sv-contact__body {
		position: static;
		width: 100%;
	}

	.sv-form__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		gap: 22px;
	}

	.sv-form__foot {
		margin-top: 28px;
		gap: 16px;
	}

	/* Nota și butonul pe același rând, ca în design. */
	.sv-form__foot {
		flex-wrap: nowrap;
	}

	.sv-form__submit {
		flex: 0 0 auto;
	}

	/* --- Meniu off-canvas --- */

	.sv-mobile-menu__panel {
		inset: 0 20% 0 0;
	}

	.sv-closing{
		margin-top: 20px;
	}

	.sv-closing__grid{
		max-width: 100%;
	}
}

/* Ecrane foarte înguste: gutter mai mic, ca textul să respire. */
/* Ecrane foarte înguste: doar gutterul scade. Cardurile rămân două pe rând. */
@media (max-width: 380px) {
	:root {
		--sv-gutter: 16px;
	}
}