/*
 * Memelio Magija — struktūra: konteineriai, sekcijos, tinkleliai, panelės.
 */

.mm-container {
	width: 100%;
	max-width: var(--mm-maxw);
	margin-inline: auto;
	padding-inline: var(--mm-gutter);
}

.mm-container--narrow { max-width: var(--mm-maxw-narrow); }
.mm-container--wide { max-width: 1680px; }
.mm-container--flush { padding-inline: 0; }

.mm-section {
	position: relative;
	padding-block: var(--mm-section);
}

.mm-section--sm { padding-block: var(--mm-section-sm); }
.mm-section--flush-top { padding-top: 0; }
.mm-section--flush-bottom { padding-bottom: 0; }
.mm-section--alt { background: var(--mm-bg-alt); }
.mm-section--deep { background: var(--mm-black); }

/* Sekcijos, kurios turi savo atmosferinį švytėjimą kampe. */
.mm-section--lit {
	isolation: isolate;
}

.mm-section--lit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(
		60% 70% at 78% 8%,
		var(--mm-red-wash) 0%,
		transparent 70%
	);
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Sekcijos antraštė: eyebrow + H2 + įvadas + veiksmas dešinėje.
 * ------------------------------------------------------------------ */

.mm-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--mm-5) var(--mm-8);
	margin-bottom: var(--mm-8);
}

.mm-section-head__text { max-width: 62ch; }
.mm-section-head__title { margin-bottom: var(--mm-4); }
.mm-section-head__title:last-child { margin-bottom: 0; }

.mm-section-head--stack {
	flex-direction: column;
	align-items: flex-start;
}

.mm-section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mm-section-head--center .mm-section-head__text { margin-inline: auto; }

/* ---------------------------------------------------------------------
 * Tinkleliai
 * ------------------------------------------------------------------ */

.mm-grid {
	display: grid;
	gap: var(--mm-5);
}

.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mm-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mm-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Automatinis tinklelis — kortelės niekada nesusispaudžia per siaurai. */
.mm-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.mm-grid--auto-sm {
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.mm-grid--auto-lg {
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Dviejų stulpelių tekstas + vizualas. */
.mm-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(var(--mm-6), 4vw, var(--mm-10));
}

.mm-split--text-narrow { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mm-split--visual-narrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.mm-split--top { align-items: start; }

@media (max-width: 900px) {
	.mm-grid--3,
	.mm-grid--4,
	.mm-grid--5,
	.mm-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mm-split,
	.mm-split--text-narrow,
	.mm-split--visual-narrow { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.mm-grid--2,
	.mm-grid--3,
	.mm-grid--4,
	.mm-grid--5,
	.mm-grid--6 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
 * Panelė — pagrindinis "dėžės" primityvas visame tinklapyje.
 * ------------------------------------------------------------------ */

.mm-panel {
	position: relative;
	background: var(--mm-surface);
	border: 1px solid var(--mm-line);
	border-radius: var(--mm-radius);
	padding: clamp(var(--mm-5), 3vw, var(--mm-8));
}

.mm-panel--flush { padding: 0; overflow: hidden; }
.mm-panel--tight { padding: var(--mm-5); }
.mm-panel--ghost { background: transparent; }

/* Panelė su raudona šviesa fone — naudojama CTA blokams. */
.mm-panel--cta {
	overflow: hidden;
	background:
		radial-gradient(80% 140% at 88% 50%, rgba(224, 27, 36, 0.14), transparent 62%),
		var(--mm-surface);
}

/* ---------------------------------------------------------------------
 * Juostos: statistika ir pasitikėjimo ženklai
 * ------------------------------------------------------------------ */

.mm-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	border-top: 1px solid var(--mm-line);
	border-bottom: 1px solid var(--mm-line);
}

.mm-strip > * {
	padding: var(--mm-6) var(--mm-5);
	border-right: 1px solid var(--mm-line);
}

.mm-strip > *:last-child { border-right: 0; }

@media (max-width: 900px) {
	.mm-strip > * { border-right: 0; border-bottom: 1px solid var(--mm-line); }
	.mm-strip > *:last-child { border-bottom: 0; }
}

/* ---------------------------------------------------------------------
 * Puslapio antraštė (visi vidiniai puslapiai)
 * ------------------------------------------------------------------ */

.mm-pagehead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	min-height: clamp(340px, 46vw, 520px);
	overflow: hidden;
	background: var(--mm-black);
}

.mm-pagehead__text {
	position: relative;
	z-index: 2;
	padding: var(--mm-9) 0 var(--mm-9) var(--mm-gutter);
	max-width: 640px;
	margin-left: auto;
	width: 100%;
}

.mm-pagehead__title { margin-bottom: var(--mm-5); }
.mm-pagehead__lead { margin-bottom: var(--mm-6); }
.mm-pagehead__lead:last-child { margin-bottom: 0; }

.mm-pagehead__media {
	position: relative;
	align-self: stretch;
	min-height: 260px;
	overflow: hidden;
}

/*
 * Paveikslėlis išimamas iš srauto.
 *
 * Su height:100% konteineryje, kurio aukštis nenustatytas, naršyklė
 * grįžta prie natūralių vaizdo proporcijų ir pats vaizdas ištempia visą
 * antraštę — vertikali nuotrauka 1920 px ekrane ją išaugino iki 1190 px.
 * Absoliuti pozicija aukščio nebediktuoja: jį lemia tekstas kairėje ir
 * min-height, kaip ir buvo sumanyta.
 *
 * Vertikalus rezervas (-4%) palieka vietos parallax poslinkiui, kad
 * judant neatsivertų tuščias kraštas.
 */
.mm-pagehead__media img {
	position: absolute;
	inset: -4% 0;
	width: 100%;
	height: 108%;
	object-fit: cover;
}

/* Vaizdas įsilieja į juodą tekstinę pusę — jokių kietų briaunų. */
.mm-pagehead__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--mm-black) 0%,
		rgba(5, 5, 6, 0.75) 22%,
		rgba(5, 5, 6, 0.1) 62%,
		rgba(5, 5, 6, 0.45) 100%
	);
}

/*
 * Kai svarbiausias objektas yra kairėje kadro pusėje.
 *
 * Siauresniuose languose antraštės vieta beveik kvadratinė, todėl iš
 * plataus kadro nusikerpa iki pusės pločio. Poslinkis į kairę užtikrina,
 * kad pagrindinis objektas liktų sveikas, o iš dešinės esantis fonas
 * išeitų iš kadro palaipsniui.
 */
.mm-pagehead__media--left img { object-position: 32% center; }

/*
 * Kai kadre svarbūs objektai yra abiejuose kraštuose.
 *
 * Apkarpymas tokiu atveju netinka iš principo: jei vienas objektas yra
 * ties 15 % pločio, o kitas ties 95 %, reikia matyti 80 % kadro, o
 * siauresniuose languose cover parodo vos 47 %. Todėl vietai suteikiamas
 * pačios nuotraukos santykis — tada karpyti nebereikia visai.
 *
 * Vieta nebesitempia per visą antraštės aukštį, o centruojama. Likusi
 * erdvė lieka juoda, bet to nesimato, nes ir pačios nuotraukos fonas
 * juodas — vaizdas tiesiog susilieja su puslapiu.
 *
 * Santykis perduodamas per --mm-media-ratio, nes jis priklauso nuo
 * konkrečios nuotraukos.
 */
.mm-pagehead__media--fit {
	align-self: center;
	aspect-ratio: var(--mm-media-ratio, 16 / 9);
	min-height: 0;
}

.mm-pagehead__media--fit img {
	inset: 0;
	height: 100%;
	object-fit: contain;
}

/*
 * Švelnesnė perdanga.
 *
 * Įprastas variantas užtamsina kairįjį kraštą iki 0,83 ties 22 % pločio,
 * nes ten paprastai būna tik fonas. Čia kairėje stovi švyturys, todėl
 * tamsinamas tik pats kraštas — tiek, kiek reikia briaunai paslėpti.
 */
.mm-pagehead__media--fit::after {
	background: linear-gradient(
		90deg,
		rgba(5, 5, 6, 0.8) 0%,
		rgba(5, 5, 6, 0.28) 6%,
		transparent 16%,
		transparent 90%,
		rgba(5, 5, 6, 0.3) 100%
	);
}

@media (max-width: 900px) {
	.mm-pagehead__media.mm-pagehead__media--fit {
		height: auto;
	}

	.mm-pagehead__media--fit::after {
		background: linear-gradient(
			180deg,
			transparent 0%,
			transparent 72%,
			rgba(5, 5, 6, 0.55) 92%,
			var(--mm-black) 100%
		);
	}
}

/*
 * Platesnė vaizdo pusė.
 *
 * Kai vaizdas nekarpomas, jo aukštį lemia stulpelio plotis. Prie 1:1
 * dalybos nuotrauka užimdavo tik apie pusę antraštės aukščio ir likdavo
 * per daug tuščios erdvės. Platesnis stulpelis nuotrauką paaukština,
 * o tekstui vis tiek lieka daugiau vietos, nei jam reikia (max-width 640).
 *
 * Žemiau 1100 px tekstas jau būtų per siauras, todėl ten grįžtama į pusę.
 */
@media (min-width: 1101px) {
	.mm-pagehead--wide-media {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* Trumpi pasitikėjimo ženklai po įvadu. */
.mm-pagehead__marks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-5) var(--mm-6);
	padding-top: var(--mm-5);
	border-top: 1px solid var(--mm-line);
}

@media (max-width: 900px) {
	.mm-pagehead {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.mm-pagehead__text {
		order: 2;
		max-width: none;
		padding: var(--mm-8) var(--mm-gutter);
	}

	.mm-pagehead__media {
		order: 1;
		height: clamp(200px, 52vw, 320px);
	}

	.mm-pagehead__media::after {
		background: linear-gradient(180deg, rgba(5, 5, 6, 0.3), var(--mm-black) 94%);
	}
}