/* =============================================================================
   HOMEPAGE  (se încarcă doar pe pagina `home`, vezi inc/assets.php)
   =============================================================================

   CE E AICI
   Partea din designul homepage-ului (canvas-ul „Modula homepage", Main.dc.html)
   pe care blocurile core nu o pot exprima singure: grilele cu poziții fixe,
   benzile care se mișcă, scenele animate și machetele de interfață. Tot textul,
   pozele, culorile de fundal, mărimile de font și spațierile secțiunilor sunt
   setate pe blocuri, în editor. Aici stă doar „coregrafia".

   CUM E ORGANIZAT FIȘIERUL
     1. CULORI DE MACHETĂ
     2. HERO ȘI BANDA DE FOTOGRAFII
     3. 01 SHOWCASE — banda orizontală de site-uri
     4. 02 COMPOZIȚIE — grila de 12 coloane
     5. 03 LAYOUTS — scena care își schimbă aranjamentul
     6. CITATUL CU FOTOGRAFIE
     7. 04 CLIENȚI — zidul de recenzii
     8. 05 FUNCȚII — tab-urile și scenele de pe negru
     9. 06 AI — demo-ul „vorbește cu galeria"
    10. 07 UNELTE — machetele de dashboard
    11. 08 GHIDURI — ultimele articole rescrise
    12. MIȘCARE REDUSĂ

   REGULI
   - Culorile vin din paleta temei (`--wp--preset--color--*`), amestecate cu
     `color-mix()` acolo unde designul cere o nuanță intermediară. Excepția sunt
     culorile de machetă din secțiunea 07 (verdele de „creștere", pastilele
     de status) și bulinele cu inițiale din recenzii: nu sunt culori de brand, ci
     date de exemplu. Sunt declarate o singură dată, în `.mh-section`, mai jos.
   - Nu declarăm `font-family` cu nume de fonturi, doar token-ul temei, acolo
     unde un citat trebuie să folosească fontul de titluri.
   - Toate selectoarele încep cu `.mh-`, ca să nu atingă nimic din restul site-ului.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. CULORI DE MACHETĂ
   Nuanța de fundal a machetelor, curba de mișcare și culorile de machetă (vezi
   „REGULI"). Ritmul secțiunilor (`.mh-section`, `--mh-hd`), culorile de bază
   (`--mc-*`), eticheta numerotată (`.mh-rule`), capul de secțiune (`.mh-head`)
   și CTA-ul final (`.mh-start-box`) vin din site.css.
   -------------------------------------------------------------------------- */

:root {
	--mh-soft: color-mix(in srgb, var(--wp--preset--color--main) 6%, var(--wp--preset--color--tertiary));
	--mh-ease: cubic-bezier(.7, 0, .2, 1);
	--mh-up: #3E7B4F;
	--mh-up-soft: #E7F0E8;
	--mh-up-ink: #2F6A3E;
}

/* Rigla numerotată: „01 ──────────── SHOWCASE". Linia și culorile vin din bloc. */



/* -----------------------------------------------------------------------------
   2. HERO ȘI BANDA DE FOTOGRAFII
   -------------------------------------------------------------------------- */

.mh-hero .mh-inner > * + * { margin-block-start: 36px; }

/* Două rânduri: primul la stânga, al doilea împins la dreapta. */
.mh-hero-title {
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	line-height: .95;
}
.mh-hero-title span:last-child { align-self: flex-end; }
/* A doua linie e lungă: pe ecrane obișnuite titlul se micșorează ca să rămână pe două rânduri. */
@media (min-width: 782px) {
	.mh-hero-title { font-size: min(var(--wp--preset--font-size--xxx-large), 5.9vw, 85px) !important; }
	.mh-hero-title span { white-space: nowrap; }
}

.mh-hero-lead { max-width: 520px; padding-left: 6%; line-height: 1.55; }

/* Trei fotografii; cea din mijloc e mai înaltă și coboară peste secțiunea următoare. */
.mh-hero-strip {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1.7fr 1fr;
	grid-template-rows: 620px;   /* rândul fix, ca doar poza din mijloc să iasă în jos */
	gap: 6px;
	height: 620px;
	padding: 0 6px;
	align-items: start;
	margin-block: 0 !important;
}
.mh-hero-strip > figure { margin: 0; height: 100%; will-change: transform; }
.mh-hero-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-hero-strip .mh-strip-mid { height: 740px; box-shadow: var(--wp--preset--shadow--large, 0 24px 60px rgb(0 0 0 / .18)); }

@media (max-width: 760px) {
	.mh-hero-title span:last-child { align-self: flex-start; }
	.mh-hero-lead { padding-left: 0; }
	.mh-hero-strip { grid-template-columns: 1fr 1fr; grid-template-rows: 360px; height: 360px; }
	.mh-hero-strip > figure:last-child { display: none; }
	.mh-hero-strip .mh-strip-mid { height: 100%; }
}


/* -----------------------------------------------------------------------------
   3. 01 SHOWCASE
   Banda se mișcă singură când ajunge în ecran (home.js), se oprește la hover și
   se poate trage cu mouse-ul. Cardurile sunt dublate din JavaScript ca bucla să
   nu aibă capăt.
   -------------------------------------------------------------------------- */

.mh-showcase { margin-block: 0 !important; z-index: 1; box-sizing: border-box; }
.mh-sc-intro { margin: 0; }

/* „Twenty-two" nu se rupe la cratimă; titlul se împarte în două rânduri egale. */
.mh-showcase .mh-title { text-wrap: balance; }
.mh-nowrap { white-space: nowrap; }

.mh-sc-viewport {
	margin-block: var(--mh-hd) 0 !important;
	overflow-x: auto;
	scrollbar-width: none;
}
.mh-sc-viewport::-webkit-scrollbar { display: none; }

.mh-sc-track {
	display: flex;
	gap: 24px;
	width: max-content;
	padding: 0 var(--wp--preset--spacing--medium);
}
.mh-sc-track > * { margin: 0 !important; }

.mh-sc-card {
	flex: 0 0 470px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	box-sizing: border-box;
	padding: 28px;
	background: var(--wp--preset--color--primary-accent);
	border: 1px solid color-mix(in srgb, var(--mc-line) 70%, var(--wp--preset--color--primary-accent));
	border-radius: var(--mc-radius-card);
	transition: background .3s ease;
}
.mh-sc-card:hover { background: color-mix(in srgb, var(--wp--preset--color--primary-accent) 94%, var(--mc-ink)); }
.mh-sc-card > * { margin: 0 !important; }

.mh-sc-head { gap: 14px; align-items: center; }
.mh-sc-av { margin: 0; flex: 0 0 46px; }
.mh-sc-av img { width: 46px; height: 46px; border-radius: var(--wp--preset--border-radius--full); object-fit: cover; display: block; }
.mh-sc-meta > * { margin: 0; }
.mh-sc-name { font-size: 19px; line-height: 1.3; }
.mh-sc-name strong { font-weight: 600; }

.mh-sc-shot {
	width: 300px;
	margin-inline: auto !important;
	aspect-ratio: 1440 / 1700;
	box-shadow: 0 22px 50px rgb(30 30 28 / .18);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.mh-sc-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mh-sc-card:hover .mh-sc-shot { transform: translateY(-6px); }
.mh-sc-foot { font-size: 17px; }

/* Bara de sub bandă (adăugată de home.js): progresul și cele trei butoane. */
.mh-sc-bar {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: 1240px;
	width: calc(100% - 2 * var(--wp--preset--spacing--medium));
	margin: var(--mh-hd) auto 0;
}
.mh-sc-progress {
	flex: 1 1 auto;
	height: 2px;
	background: var(--mc-line);
}
.mh-sc-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.mh-sc-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 75%, var(--wp--preset--color--base));
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--tertiary);
	color: var(--mc-ink);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mh-sc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-sc-btn svg .mh-fill { fill: currentColor; stroke: none; }
.mh-sc-btn:hover { border-color: var(--mc-ink); background: var(--mc-ink); color: var(--wp--preset--color--tertiary); }
.mh-sc-btn:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: 3px; }
.mh-sc-progress i {
	display: block;
	height: 100%;
	background: var(--mc-ink);
	transform-origin: left;
	transform: scaleX(0);
	will-change: transform;
}

/* Tras cu mouse-ul (clasa e pusă de home.js). */
.mh-drag { cursor: grab; -webkit-user-select: none; user-select: none; }
.mh-drag.is-dragging { cursor: grabbing; scroll-snap-type: none !important; }
.mh-drag img { -webkit-user-drag: none; pointer-events: none; }

@media (max-width: 760px) {
	.mh-sc-track { gap: 16px; }
	.mh-sc-card { flex: 0 0 80vw; padding: 24px; gap: 24px; }
	.mh-sc-shot { width: min(300px, calc(80vw - 50px)); }
}


/* -----------------------------------------------------------------------------
   4. 02 COMPOZIȚIE
   O grilă de 12 coloane cu rânduri pătrate (înălțimea unui rând = lățimea unei
   coloane). Pozele așteaptă strânse ca un teanc în mijloc și zboară la locurile
   lor când grila intră în ecran (home.js).
   -------------------------------------------------------------------------- */

.mh-compositions { z-index: 2; }
.mh-compositions .mh-inner { container-type: inline-size; }

.mh-fg {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: calc((100cqw - 22px) / 12);
	gap: 2px;
}
.mh-fg > * { margin: 0 !important; }

.mh-fg-tile { overflow: hidden; background: var(--wp--preset--color--primary-accent); }
.mh-fg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.mh-fg-tile:hover img { transform: scale(1.06); }

.mh-fg-1 { grid-column: 1 / span 3;  grid-row: 1 / span 4; }
.mh-fg-2 { grid-column: 4 / span 3;  grid-row: 1 / span 4; }
.mh-fg-3 { grid-column: 1 / span 2;  grid-row: 5 / span 3; }
.mh-fg-4 { grid-column: 3 / span 2;  grid-row: 5 / span 3; }
.mh-fg-5 { grid-column: 5 / span 6;  grid-row: 5 / span 8; }
.mh-fg-6 { grid-column: 1 / span 4;  grid-row: 8 / span 3; }
.mh-fg-7 { grid-column: 11 / span 2; grid-row: 10 / span 3; }

/* Citatul ocupă colțul din dreapta sus. Ghilimelele sunt desenate din CSS. */
.mh-fg-quote {
	grid-column: 7 / span 6;
	grid-row: 1 / span 4;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 4px 4px 0 56px !important;
	border: 0 !important;
}
.mh-fg-quote::before {
	content: "";
	width: 34px;
	height: 26px;
	opacity: .25;
	background: var(--mc-ink);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20.4C0 8.9 6.2 2.1 18.6 0l1.9 4.6C13.4 6.6 10 10.4 9.4 16H18v18H0zm25.5 0V20.4C25.5 8.9 31.7 2.1 44 0l1.9 4.6c-7.1 2-10.5 5.8-11.1 11.4h8.6v18H25.5z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 34V20.4C0 8.9 6.2 2.1 18.6 0l1.9 4.6C13.4 6.6 10 10.4 9.4 16H18v18H0zm25.5 0V20.4C25.5 8.9 31.7 2.1 44 0l1.9 4.6c-7.1 2-10.5 5.8-11.1 11.4h8.6v18H25.5z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mh-fg-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 500;
	font-size: 2.45cqw;
	line-height: 1.14;
	letter-spacing: -.01em;
}
/* Semnătura: bulina de avatar e un pseudo-element, numele și rolul vin din bloc. */
.mh-fg-quote cite {
	position: relative;
	display: block;
	padding-left: 52px;
	font-size: 15px;
	font-style: normal;
	line-height: 1.35;
	color: var(--wp--preset--color--secondary);
}
.mh-fg-quote cite strong { color: var(--mc-ink); font-weight: 600; }
.mh-fg-quote cite::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--primary-alt);
}

@media (max-width: 760px) {
	.mh-fg { grid-auto-rows: auto; }
	.mh-fg-tile { grid-column: auto / span 6 !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
	.mh-fg-quote { grid-column: 1 / -1 !important; grid-row: auto !important; padding: 28px 0 0 !important; }
	.mh-fg-quote p { font-size: 24px; }
}


/* -----------------------------------------------------------------------------
   5. 03 LAYOUTS
   Șase rame poziționate absolut, fiecare cu zece fotografii suprapuse. O singură
   animație de 32 de secunde le mută prin zece aranjamente (grilă, masonry,
   colțuri rotunde, rame etc.), iar fotografiile se schimbă odată cu ele.
   Animațiile sunt generate din canvas: vezi blocul `@keyframes mhFit…` de la final.
   -------------------------------------------------------------------------- */

.mh-fit-head { max-width: 760px; margin-inline: auto !important; }
.mh-fit-head > * { margin: 0; }
.mh-fit-head > * + * { margin-top: 24px; }
.mh-fit-head .mh-lead { max-width: 620px; margin-inline: auto; line-height: 1.6; }

.mh-fit-stage { position: relative; width: 100%; height: 620px; }
.mh-fit-tile {
	position: absolute;
	overflow: hidden;
	margin: 0 !important;
	box-sizing: border-box;
	border: 0 solid var(--wp--preset--color--tertiary);
	background: var(--wp--preset--color--primary-accent);
}
.mh-fit-tile > figure { position: absolute; inset: 0; margin: 0 !important; opacity: 0; }
.mh-fit-tile > figure.mh-fit-l0 { opacity: 1; }
.mh-fit-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Poziția de start a fiecărei rame (primul cadru al animației). */
.mh-fit-t0 { left: 0;     top: 10%; width: 18.5%; height: 80%; }
.mh-fit-t1 { left: 17.5%; top: 26%; width: 21%;   height: 56%; }
.mh-fit-t2 { left: 37%;   top: 0;   width: 23%;   height: 100%; }
.mh-fit-t3 { left: 58.5%; top: 12%; width: 16.5%; height: 64%; }
.mh-fit-t4 { left: 78%;   top: 10%; width: 18.5%; height: 80%; }
.mh-fit-t5 { left: 78%;   top: 10%; width: 18.5%; height: 80%; opacity: 0; }

@media (max-width: 760px) {
	.mh-fit-stage { height: 380px; }
}


/* -----------------------------------------------------------------------------
   6. CITATUL CU FOTOGRAFIE
   -------------------------------------------------------------------------- */

.mh-iv { margin-block: 0 !important; }
.mh-iv-figure {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	align-items: center;
}
.mh-iv-figure > * { margin: 0 !important; }
.mh-iv-img img { width: 100%; height: 780px; object-fit: cover; object-position: 50% 25%; display: block; }

.mh-iv-text {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 0 max(var(--wp--preset--spacing--medium), calc((100vw - 1240px) / 2)) 0 9%;
}
.mh-iv-text > * { margin: 0 !important; }

.mh-iv-quote { margin: 0; padding: 0 !important; border: 0 !important; max-width: 520px; }
.mh-iv-quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 500;
	font-size: clamp(2rem, 3.4vw, 3.5rem);
	line-height: 1.1;
}
.mh-iv-quote cite {
	display: block;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--mc-line);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}
.mh-iv-quote cite strong { font-size: 16px; font-weight: 600; color: var(--mc-ink); }

@media (max-width: 760px) {
	.mh-iv-figure { grid-template-columns: 1fr; }
	.mh-iv-img img { height: 460px; }
	.mh-iv-text { padding: var(--mh-hd) var(--wp--preset--spacing--medium) 0; }
	.mh-iv-quote p { font-size: 2.4rem; }
}


/* -----------------------------------------------------------------------------
   7. 04 CLIENȚI — ZIDUL DE RECENZII
   Cinci coloane care urcă și coboară încet. Fundalul e bej sus și negru jos, ca
   zidul să se topească în secțiunea neagră de dedesubt. home.js dublează
   cardurile din fiecare coloană, ca bucla să nu se vadă.
   -------------------------------------------------------------------------- */

.mh-customers { margin-block: 0 !important; }
.mh-customers-intro { margin: 0; }

.mh-wall {
	position: relative;
	height: 780px;
	overflow: hidden;
	margin-block: var(--mh-hd) 0 !important;
	background: linear-gradient(180deg, var(--wp--preset--color--primary-alt) 0 46%, var(--mc-ink) 46% 100%);
}
.mh-wall::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 260px;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--mc-ink) 0%, transparent), var(--mc-ink) 92%);
}
.mh-wall-cols {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1900px;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
}
.mh-wall-cols > * { margin: 0 !important; }
.mh-wall-col { overflow: hidden; }
.mh-wall-col-1 { padding-top: 140px; }
.mh-wall-col-2 { padding-top: 20px; }
.mh-wall-col-3 { padding-top: 210px; }
.mh-wall-col-4 { padding-top: 70px; }
.mh-wall-col-5 { padding-top: 170px; }

.mh-wall-track { display: flex; flex-direction: column; gap: 24px; }
.mh-wall-track > * { margin: 0 !important; }
.mh-wall-col-1 .mh-wall-track { animation: mhWallUp 70s linear infinite; }
.mh-wall-col-2 .mh-wall-track { animation: mhWallDown 84s linear infinite; }
.mh-wall-col-3 .mh-wall-track { animation: mhWallUp 64s linear infinite; }
.mh-wall-col-4 .mh-wall-track { animation: mhWallDown 90s linear infinite; }
.mh-wall-col-5 .mh-wall-track { animation: mhWallUp 76s linear infinite; }
.mh-wall:hover .mh-wall-track { animation-play-state: paused; }

@keyframes mhWallUp   { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 12px)); } }
@keyframes mhWallDown { from { transform: translateY(calc(-50% - 12px)); } to { transform: translateY(0); } }

.mh-wall-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
	box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.mh-wall-card > * { margin: 0 !important; }
.mh-wall-stars { color: var(--mc-star); font-size: 20px; letter-spacing: 3px; line-height: 1; }
.mh-star { color: var(--mc-star); }
.mh-wall-text { font-size: 16px; line-height: 1.55; color: var(--wp--preset--color--border-dark); }
.mh-wall-cap { gap: 14px; align-items: center; }
.mh-wall-cap > * { margin: 0; }
.mh-wall-cap .wp-block-group > * { margin: 0; }
.mh-wall-name { font-size: 17px; line-height: 1.3; }
.mh-wall-name strong { font-weight: 500; }

/* Bulina cu inițiala. Nuanțele sunt cele din canvas, rotite pe coloane. */
.mh-wall-av {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--preset--border-radius--full);
	font-size: 16px;
	font-weight: 600;
	color: #FFFFFF;
	background: #8C8478;
}
.mh-wall-col-1 .mh-wall-card:nth-child(4n+1) .mh-wall-av { background: #9A7B4F; }
.mh-wall-col-1 .mh-wall-card:nth-child(4n+2) .mh-wall-av { background: #6E7F73; }
.mh-wall-col-1 .mh-wall-card:nth-child(4n+3) .mh-wall-av { background: #B5532F; }
.mh-wall-col-1 .mh-wall-card:nth-child(4n+4) .mh-wall-av { background: #4F6B8A; }
.mh-wall-col-2 .mh-wall-card:nth-child(4n+1) .mh-wall-av { background: #4F6B8A; }
.mh-wall-col-2 .mh-wall-card:nth-child(4n+2) .mh-wall-av { background: #7A1F2B; }
.mh-wall-col-2 .mh-wall-card:nth-child(4n+3) .mh-wall-av { background: #8C8478; }
.mh-wall-col-2 .mh-wall-card:nth-child(4n+4) .mh-wall-av { background: #2F3E46; }
.mh-wall-col-3 .mh-wall-card:nth-child(4n+1) .mh-wall-av { background: #2F3E46; }
.mh-wall-col-3 .mh-wall-card:nth-child(4n+2) .mh-wall-av { background: #9A7B4F; }
.mh-wall-col-3 .mh-wall-card:nth-child(4n+3) .mh-wall-av { background: #6E7F73; }
.mh-wall-col-3 .mh-wall-card:nth-child(4n+4) .mh-wall-av { background: #B5532F; }
.mh-wall-col-4 .mh-wall-card:nth-child(4n+1) .mh-wall-av { background: #B5532F; }
.mh-wall-col-4 .mh-wall-card:nth-child(4n+2) .mh-wall-av { background: #4F6B8A; }
.mh-wall-col-4 .mh-wall-card:nth-child(4n+3) .mh-wall-av { background: #7A1F2B; }
.mh-wall-col-4 .mh-wall-card:nth-child(4n+4) .mh-wall-av { background: #8C8478; }
.mh-wall-col-5 .mh-wall-card:nth-child(4n+1) .mh-wall-av { background: #8C8478; }
.mh-wall-col-5 .mh-wall-card:nth-child(4n+2) .mh-wall-av { background: #2F3E46; }
.mh-wall-col-5 .mh-wall-card:nth-child(4n+3) .mh-wall-av { background: #9A7B4F; }
.mh-wall-col-5 .mh-wall-card:nth-child(4n+4) .mh-wall-av { background: #6E7F73; }

@media (max-width: 760px) {
	.mh-wall { height: auto; padding: 8px 0 40px; background: var(--wp--preset--color--primary-alt); }
	.mh-wall::after { display: none; }
	.mh-wall-cols {
		position: static;
		transform: none;
		width: auto;
		display: flex;
		gap: 16px;
		padding: 0 var(--wp--preset--spacing--medium);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.mh-wall-cols::-webkit-scrollbar { display: none; }
	.mh-wall-col, .mh-wall-track { display: contents; }
	.mh-wall-track { animation: none !important; }
	.mh-wall-card { flex: 0 0 82%; box-sizing: border-box; scroll-snap-align: center; padding: 24px; }
	.mh-wall-card[aria-hidden="true"] { display: none; }
	.mh-wall-text { font-size: 15px; }
}


/* -----------------------------------------------------------------------------
   8. 05 FUNCȚII
   Lista din stânga devine un tablist din home.js (butoane cu rol de tab, cu
   săgeți de la tastatură). Fiecare tab are o scenă în dreapta; se vede doar cea
   activă. Tab-urile avansează singure la 5 secunde până când vizitatorul alege unul.
   -------------------------------------------------------------------------- */

.mh-features { margin-block: 0 !important; }
.mh-features .mh-title { color: var(--wp--preset--color--tertiary); }

.mh-fx { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.mh-fx > * { margin: 0 !important; }

.mh-fx-list {
	flex: 1 1 340px;
	min-width: 0;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--wp--preset--color--border-dark);
}
.mh-fx-list > * { margin: 0 !important; }

.mh-fx-item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
	cursor: pointer;
	opacity: .55;
	transition: opacity .3s ease;
}
.mh-fx-item > * { margin: 0 !important; }
.mh-fx-item:hover, .mh-fx-item[aria-selected="true"] { opacity: 1; }
.mh-fx-item:focus-visible { outline: 2px solid var(--wp--preset--color--tertiary); outline-offset: 4px; }
.mh-fx-n { font-size: 12px; letter-spacing: .14em; color: var(--wp--preset--color--main-accent); }
.mh-fx-t { font-size: var(--wp--preset--font-size--medium); line-height: 1.1; color: var(--wp--preset--color--tertiary); }
.mh-fx-d { grid-column: 2; display: none; padding-top: 10px; line-height: 1.55; }
.mh-fx-item[aria-selected="true"] .mh-fx-d { display: block; }

/* Bara care se umple în 5 secunde sub tab-ul activ (adăugată de home.js). */
.mh-fx-prog { grid-column: 2; display: block; height: 2px; margin-top: 14px; overflow: hidden; background: var(--wp--preset--color--border-dark); }
.mh-fx-prog i { display: block; height: 100%; background: var(--wp--preset--color--tertiary); transform-origin: left; animation: mhFxProg 5s linear forwards; }
@keyframes mhFxProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mh-fx-stage { flex: 1.6 1 520px; min-width: 0; position: relative; min-height: 520px; }
.mh-fx-scene { position: absolute; inset: 0; display: none; margin: 0 !important; }
.mh-fx-scene.is-active { display: block; animation: mhFxIn .6s ease; }
/* Fără JavaScript, rămâne vizibilă prima scenă. */
.mh-fx-stage:not(.is-live) .mh-fx-s0 { display: block; }
@keyframes mhFxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mh-fx-scene > *, .mh-fx-dim > * { margin: 0 !important; }
.mh-fx-img { position: absolute; overflow: hidden; background: color-mix(in srgb, var(--mc-ink) 92%, var(--wp--preset--color--tertiary)); }
.mh-fx-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scena 0 — custom grid: o fotografie se întinde, cu mânere în colțuri. */
.mh-fx-s0 > :nth-child(1) { left: 0;     top: 0;   width: 40%; height: 100%; }
.mh-fx-s0 > :nth-child(2) { left: 41.5%; top: 0;   width: 30%; height: 49%; }
.mh-fx-s0 > :nth-child(3) { left: 73%;   top: 0;   width: 27%; height: 100%; }
.mh-fx-s0 > :nth-child(4) { left: 41.5%; top: 51%; width: 30%; height: 49%; }
.mh-fx-grow {
	z-index: 2;
	overflow: visible !important;
	outline: 2px dashed var(--wp--preset--color--tertiary);
	outline-offset: -2px;
	animation: mhFxGrow 2.6s cubic-bezier(.6, 0, .3, 1) infinite alternate;
}
.mh-fx-grow::after {
	content: "";
	position: absolute;
	inset: -6px;
	pointer-events: none;
	--h: var(--wp--preset--color--tertiary);
	--k: var(--mc-ink);
	background:
		linear-gradient(var(--h), var(--h)) 2px 2px / 8px 8px no-repeat,
		linear-gradient(var(--h), var(--h)) calc(100% - 2px) 2px / 8px 8px no-repeat,
		linear-gradient(var(--h), var(--h)) 2px calc(100% - 2px) / 8px 8px no-repeat,
		linear-gradient(var(--h), var(--h)) calc(100% - 2px) calc(100% - 2px) / 8px 8px no-repeat,
		linear-gradient(var(--k), var(--k)) 0 0 / 12px 12px no-repeat,
		linear-gradient(var(--k), var(--k)) 100% 0 / 12px 12px no-repeat,
		linear-gradient(var(--k), var(--k)) 0 100% / 12px 12px no-repeat,
		linear-gradient(var(--k), var(--k)) 100% 100% / 12px 12px no-repeat;
}
@keyframes mhFxGrow { from { width: 30%; height: 49%; } to { width: 30%; height: 100%; } }

/* Scena 1 — aceleași șase fotografii trec prin grilă, masonry și justified. */
.mh-fx-s1 { bottom: 56px; }
.mh-fx-m0 { animation: mhM0 7.5s infinite; } .mh-fx-m1 { animation: mhM1 7.5s infinite; } .mh-fx-m2 { animation: mhM2 7.5s infinite; }
.mh-fx-m3 { animation: mhM3 7.5s infinite; } .mh-fx-m4 { animation: mhM4 7.5s infinite; } .mh-fx-m5 { animation: mhM5 7.5s infinite; }
@keyframes mhM0 { 0%, 28% { left: 0; top: 0; width: 32%; height: 48%; } 36%, 61% { left: 0; top: 0; width: 32%; height: 62%; } 69%, 95% { left: 0; top: 0; width: 44%; height: 48%; } 100% { left: 0; top: 0; width: 32%; height: 48%; } }
@keyframes mhM1 { 0%, 28% { left: 34%; top: 0; width: 32%; height: 48%; } 36%, 61% { left: 34%; top: 0; width: 32%; height: 36%; } 69%, 95% { left: 46%; top: 0; width: 24%; height: 48%; } 100% { left: 34%; top: 0; width: 32%; height: 48%; } }
@keyframes mhM2 { 0%, 28% { left: 68%; top: 0; width: 32%; height: 48%; } 36%, 61% { left: 68%; top: 0; width: 32%; height: 54%; } 69%, 95% { left: 72%; top: 0; width: 28%; height: 48%; } 100% { left: 68%; top: 0; width: 32%; height: 48%; } }
@keyframes mhM3 { 0%, 28% { left: 0; top: 52%; width: 32%; height: 48%; } 36%, 61% { left: 0; top: 65%; width: 32%; height: 35%; } 69%, 95% { left: 0; top: 52%; width: 30%; height: 48%; } 100% { left: 0; top: 52%; width: 32%; height: 48%; } }
@keyframes mhM4 { 0%, 28% { left: 34%; top: 52%; width: 32%; height: 48%; } 36%, 61% { left: 34%; top: 39%; width: 32%; height: 61%; } 69%, 95% { left: 32%; top: 52%; width: 40%; height: 48%; } 100% { left: 34%; top: 52%; width: 32%; height: 48%; } }
@keyframes mhM5 { 0%, 28% { left: 68%; top: 52%; width: 32%; height: 48%; } 36%, 61% { left: 68%; top: 57%; width: 32%; height: 43%; } 69%, 95% { left: 74%; top: 52%; width: 26%; height: 48%; } 100% { left: 68%; top: 52%; width: 32%; height: 48%; } }
.mh-fx-chips { position: absolute; left: 0; bottom: -56px; gap: 6px; }
.mh-fx-chips > p {
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: var(--wp--preset--border-radius--full);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--main-accent);
}
.mh-fx-c1 { animation: mhChip 7.5s infinite; }
.mh-fx-c2 { animation: mhChip 7.5s -5s infinite; }
.mh-fx-c3 { animation: mhChip 7.5s -2.5s infinite; }
@keyframes mhChip {
	0%, 32% { background: var(--wp--preset--color--tertiary); color: var(--mc-ink); border-color: var(--wp--preset--color--tertiary); }
	34%, 100% { background: transparent; color: var(--wp--preset--color--main-accent); border-color: var(--wp--preset--color--border-dark); }
}

/* Scena 2 — lightbox: grila din spate se estompează, poza se deschide mare. */
.mh-fx-dim { position: absolute; inset: 0; opacity: .25; filter: blur(1px); }
.mh-fx-dim > :nth-child(1) { left: 0;   top: 0;   width: 32%; height: 48%; }
.mh-fx-dim > :nth-child(2) { left: 34%; top: 0;   width: 32%; height: 48%; }
.mh-fx-dim > :nth-child(3) { left: 68%; top: 0;   width: 32%; height: 48%; }
.mh-fx-dim > :nth-child(4) { left: 0;   top: 52%; width: 32%; height: 48%; }
.mh-fx-dim > :nth-child(5) { left: 34%; top: 52%; width: 32%; height: 48%; }
.mh-fx-dim > :nth-child(6) { left: 68%; top: 52%; width: 32%; height: 48%; }
.mh-fx-lb {
	left: 14%;
	right: 14%;
	top: 6%;
	bottom: 6%;
	overflow: visible !important;
	box-shadow: 0 30px 80px rgb(0 0 0 / .6);
	animation: mhLbIn .7s cubic-bezier(.2, .8, .2, 1);
}
@keyframes mhLbIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
/* Săgețile și „×" sunt desenate pe scenă și pe ramă, nu sunt butoane reale. */
.mh-fx-s2::before, .mh-fx-s2::after {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-50%);
	border-radius: var(--wp--preset--border-radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 92%, transparent);
	color: var(--mc-ink);
	font-size: 26px;
	line-height: 1;
}
.mh-fx-s2::before { content: "‹"; left: 4%; }
.mh-fx-s2::after { content: "›"; right: 4%; }
.mh-fx-lb::after { content: "×"; position: absolute; top: -4.5%; right: -16.5%; color: var(--wp--preset--color--tertiary); font-size: 30px; line-height: 1; }

/* Scena 3 — video: unul rulează, celelalte au buton de play. */
.mh-fx-v0 { left: 0;   top: 0;   width: 62%; height: 100%; }
.mh-fx-v1 { left: 64%; top: 0;   width: 36%; height: 32%; }
.mh-fx-v2 { left: 64%; top: 34%; width: 36%; height: 32%; }
.mh-fx-v3 { left: 64%; top: 68%; width: 36%; height: 32%; }
.mh-fx-v0::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	height: 3px;
	background: linear-gradient(var(--wp--preset--color--tertiary), var(--wp--preset--color--tertiary)) 0 0 / 0 100% no-repeat, rgb(255 255 255 / .35);
	animation: mhVbar 5s linear infinite;
}
@keyframes mhVbar { to { background-size: 100% 100%, auto; } }
.mh-fx-v1::after, .mh-fx-v2::after, .mh-fx-v3::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%);
	border-radius: var(--wp--preset--border-radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 92%, transparent);
}
.mh-fx-v1::before, .mh-fx-v2::before, .mh-fx-v3::before {
	content: "";
	position: absolute;
	left: calc(50% + 2px);
	top: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--mc-ink);
}
.mh-fx-live {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 2;
	padding: 6px 10px;
	border-radius: var(--wp--preset--border-radius--full);
	background: color-mix(in srgb, var(--mc-ink) 75%, transparent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* Scena 4 — albume și filtre (filtrele chiar filtrează, din home.js). */
.mh-fx-filters { position: absolute; left: 0; top: 0; gap: 6px; }
.mh-alb-chip .wp-block-button__link {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--border-dark);
	background: transparent;
	color: var(--wp--preset--color--main-accent);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}
.mh-alb-chip.is-active .wp-block-button__link,
.mh-alb-chip .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--tertiary);
	background: var(--wp--preset--color--tertiary);
	color: var(--mc-ink);
}
.mh-fx-albums {
	position: absolute;
	inset: 64px 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-content: start;
}
.mh-alb { display: flex; flex-direction: column; gap: 10px; animation: mhFxIn .5s ease; }
.mh-alb[hidden] { display: none; }
.mh-alb > * { margin: 0 !important; }
.mh-alb-img { position: relative; aspect-ratio: 4 / 3; }
.mh-alb-img::before, .mh-alb-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--border-dark);
	transform: rotate(-4deg);
}
.mh-alb-img::after { background: color-mix(in srgb, var(--wp--preset--color--border-dark) 85%, var(--wp--preset--color--tertiary)); transform: rotate(3deg); }
.mh-alb-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-alb-cap { font-size: 13px; color: var(--wp--preset--color--main-accent); }
.mh-alb-cap > * { margin: 0; }
.mh-alb-cap strong { font-weight: 600; color: var(--wp--preset--color--tertiary); }

/* Scena 5 — încărcare rapidă: pozele trec din neclar în clar, pe rând. */
.mh-fx-s5 > :nth-child(1) { left: 0;   top: 0;   width: 49%; height: 62%; }
.mh-fx-s5 > :nth-child(2) { left: 51%; top: 0;   width: 24%; height: 49%; }
.mh-fx-s5 > :nth-child(3) { left: 77%; top: 0;   width: 23%; height: 49%; }
.mh-fx-s5 > :nth-child(4) { left: 51%; top: 51%; width: 49%; height: 49%; }
.mh-fx-s5 > :nth-child(5) { left: 0;   top: 64%; width: 49%; height: 36%; }
.mh-fx-load img { animation: mhBlurUp 3.2s ease infinite; }
.mh-fx-s5 > :nth-child(2) img { animation-delay: .25s; }
.mh-fx-s5 > :nth-child(3) img { animation-delay: .5s; }
.mh-fx-s5 > :nth-child(4) img { animation-delay: .75s; }
.mh-fx-s5 > :nth-child(5) img { animation-delay: 1s; }
@keyframes mhBlurUp { 0% { filter: blur(18px) saturate(.4); transform: scale(1.08); opacity: .6; } 35%, 100% { filter: none; transform: none; opacity: 1; } }
.mh-fx-speed {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 12px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--tertiary);
	color: var(--mc-ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 760px) {
	.mh-fx-stage { min-height: 380px; }
}


/* -----------------------------------------------------------------------------
   9. 06 AI
   Bara de text e un bloc Search obișnuit, îmbrăcat de componenta `.mc-search`
   din site.css (varianta `is-voice`, cu microfon): home.js îi preia trimiterea și
   rearanjează galeria de dedesubt. Fără JavaScript, formularul caută pe site.
   -------------------------------------------------------------------------- */

.mh-ty { display: flex; flex-direction: column; gap: 16px; }
.mh-ty > * { margin: 0 !important; }

.mh-ty-chips { gap: 8px; }
.mh-ty-chip .wp-block-button__link {
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--mc-line);
	background: var(--mc-card);
	color: var(--mc-ink);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	transition: border-color .2s ease;
}
.mh-ty-chip .wp-block-button__link:hover { border-color: var(--mc-ink); background: var(--mc-card); color: var(--mc-ink); }

.mh-ty-reply {
	gap: 16px;
	align-items: center;
	padding: 12px 12px 12px 18px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-row);
	font-size: 15px;
}
.mh-ty-reply > * { margin: 0 !important; }
/* Cererea și răspunsul trec pe rânduri ca întreg, punctul rămâne lângă primul rând. */
.mh-ty-msg { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; padding-left: 18px; }
.mh-ty-msg::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--mh-up);
	box-shadow: 0 0 0 4px var(--mh-up-soft);
}
.mh-ty-msg .mh-ty-you { color: var(--wp--preset--color--secondary); }
.mh-ty-msg strong { font-weight: 600; }
.mh-ty-tools { flex: none; gap: 8px; align-items: center; }
.mh-ty-steps { font-size: 12px; color: var(--wp--preset--color--secondary); white-space: nowrap; }
.mh-ty-undo .wp-block-button__link {
	min-height: 36px;
	padding: 0 14px;
	background: var(--mh-soft);
	color: var(--mc-ink);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}
.mh-ty-undo .wp-block-button__link:hover { background: var(--wp--preset--color--primary-accent); color: var(--mc-ink); }
.mh-ty-undo .wp-block-button__link[disabled] { opacity: .4; cursor: default; }

.mh-ty-wrap { container-type: inline-size; padding: 16px; border: 1px solid var(--mc-line); border-radius: var(--mc-radius-card); }
/* Fără JavaScript: o grilă simplă. home.js pune `is-live` și poziționează pozele. */
.mh-ty-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mh-ty-stage > * { margin: 0 !important; }
.mh-ty-stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .6s ease; }
.mh-ty-stage.is-live { display: block; position: relative; transition: height .7s var(--mh-ease); }
.mh-ty-stage.is-live > .mh-ty-tile {
	position: absolute;
	overflow: hidden;
	transition: left .7s var(--mh-ease), top .7s var(--mh-ease), width .7s var(--mh-ease), height .7s var(--mh-ease), border-radius .5s ease;
}

@media (max-width: 760px) {
	.mh-ty-reply { flex-direction: column; align-items: flex-start; }
}


/* -----------------------------------------------------------------------------
   10. 07 UNELTE
   Machete de interfață: cifrele sunt exemple, graficul e desenat de home.js.
   -------------------------------------------------------------------------- */

.mh-tl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.mh-tl-grid > * { margin: 0 !important; }
.mh-span-4 { grid-column: span 4; }
.mh-span-3 { grid-column: span 3; }
.mh-span-2 { grid-column: span 2; }

.mh-tl-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-card);
}
.mh-tl-card > * { margin: 0 !important; }
.mh-tl-card p { margin: 0; }
.mh-tl-title { display: flex; flex-direction: column; gap: 6px; }
.mh-tl-title > * { margin: 0 !important; }
.mh-tl-title p { line-height: 1.55; }


.mh-leg-cur::before { content: ""; width: 16px; height: 2px; background: var(--mh-up); }
.mh-leg-prev::before { content: ""; width: 16px; border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--secondary) 60%, transparent); }

.mh-w-100 { width: 100%; } .mh-w-44 { width: 44%; } .mh-w-38 { width: 38%; } .mh-w-6 { width: 6%; } .mh-w-3 { width: 3%; }
.mh-d1 { animation-delay: .25s; } .mh-d2 { animation-delay: .5s; } .mh-d3 { animation-delay: .75s; }

.mh-tl-prod img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--wp--preset--border-radius--md); }
.mh-tl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--mc-ink);
	color: var(--wp--preset--color--tertiary);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mh-tl-suggest { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--mc-radius-row); }
.mh-tl-suggest > * { margin: 0 !important; }
.mh-tl-suggest strong { font-size: 15px; font-weight: 600; }
.mh-tl-suggest .mh-tl-btn { align-self: flex-start; padding: 0 18px; }
.mh-tl-thumbs { gap: 10px; }
.mh-tl-thumbs > * { margin: 0 !important; flex: 1 1 0; }
.mh-tl-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: var(--mc-radius-control); }

/* Cardul cu video: clipul acoperă tot cardul, textul stă jos, peste un voal. */
.mh-tl-video { position: relative; min-height: 420px; padding: 0; overflow: hidden; border-color: var(--mc-ink); }
.mh-tl-vid { position: absolute !important; inset: 0; }
.mh-tl-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-tl-video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgb(20 18 16 / 0) 40%, rgb(20 18 16 / .82) 100%);
}
.mh-tl-vtext {
	position: absolute !important;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	padding: 22px;
	font-size: 13px;
}
.mh-tl-vtext > * { margin: 0 !important; }
.mh-tl-vtext strong { font-weight: 600; }
.mh-tl-badge {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 7px 11px;
	border-radius: var(--wp--preset--border-radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--tertiary) 92%, transparent);
	color: var(--mc-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
/* Butonul de play e decor: clipul rulează deja, fără sunet. */
.mh-tl-vquote::before {
	content: "";
	display: block;
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231E1E1C'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 56% 50% / 18px;
	box-shadow: 0 8px 24px rgb(0 0 0 / .3);
}
.mh-tl-vquote { font-family: var(--wp--preset--font-family--cormorant-garamond); font-size: 1.55rem; font-weight: 500; line-height: 1.15; }
.mh-tl-credit { font-size: 11px; opacity: .6; }

.mh-tl-rows > * { margin: 0 !important; }
.mh-tl-row { gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--mh-soft); }
.mh-tl-row > * { margin: 0 !important; }
.mh-tl-row strong { font-size: 14px; font-weight: 600; }
.mh-tl-pill { padding: 5px 10px; border-radius: var(--wp--preset--border-radius--full); background: var(--mh-up-soft); color: var(--mh-up-ink); font-size: 12px; font-weight: 600; }

@media (max-width: 980px) {
	.mh-tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-tl-grid > .mh-tl-card { grid-column: span 1; }
	.mh-tl-grid > .mh-tl-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.mh-tl-grid { grid-template-columns: 1fr; }
	.mh-tl-grid > .mh-tl-card { grid-column: auto; }
}


/* -----------------------------------------------------------------------------
   11. 08 GHIDURI
   Ultimele șase ghiduri rescrise (query-ul e în inc/blog.php): coperta, titlul și
   primele rânduri, cu aceeași copertă și aceeași rază ca pe blog.
   -------------------------------------------------------------------------- */

.mh-gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; margin: 0; padding: 0; list-style: none; }
.mh-gd-grid > .wp-block-post { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; }
.mh-gd-grid > .wp-block-post > * { margin: 0; }
.mh-gd-img { overflow: hidden; border-radius: var(--mc-radius-row); outline: 1px solid var(--mc-line); outline-offset: -1px; }
.mh-gd-img img { display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mh-gd-grid > .wp-block-post:hover .mh-gd-img img { transform: scale(1.03); }
.mh-gd-title { line-height: 1.3; }
.mh-gd-title a { color: inherit; text-decoration: none; }
.mh-gd-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mh-gd-excerpt { color: var(--wp--preset--color--secondary); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }
.mh-gd-excerpt p { margin: 0; }
.mh-gd-excerpt .wp-block-post-excerpt__more-text { display: none; }
.mh-gd-more { margin-top: 48px !important; }

@media (max-width: 980px) {
	.mh-gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mh-gd-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* -----------------------------------------------------------------------------
   12. MIȘCARE REDUSĂ
   Cine a cerut mai puțină mișcare vede totul static, la prima poziție.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
.mh-wall-track, .mh-fx-scene, .mh-fx-grow, [class*="mh-fx-m"], .mh-fx-c1, .mh-fx-c2, .mh-fx-c3, .mh-fx-lb, .mh-fx-load img, .mh-fx-v0::after, .mh-fx-prog i, .mh-alb, .mh-tl-row, [class*="mh-fit-t"], .mh-fit-tile > figure {
		animation: none !important;
	}
	.mh-gd-img img, .mh-fg-tile img, .mh-ty-stage img, .mh-ty-stage.is-live, .mh-ty-stage.is-live > .mh-ty-tile, .mh-sc-shot { transition: none; }
	.mh-fg-tile:hover img, .mh-gd-grid > .wp-block-post:hover .mh-gd-img img { transform: none; }
}


/* -----------------------------------------------------------------------------
   ANIMAȚIILE DIN 03 LAYOUTS (generate din canvas, nu le edita de mână)
   -------------------------------------------------------------------------- */
@keyframes mhFitT0{0.000%,7.030%{left:0%;top:10%;width:18.5%;height:80%;opacity:1;border-radius:0px;border-width:0px;z-index:1}10.000%,17.030%{left:0%;top:0%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:0%;top:0%;width:36%;height:100%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:0%;top:0%;width:36%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:18%;top:12%;width:30%;height:88%;opacity:1;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:0%;top:0%;width:50%;height:66%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:0%;top:0%;width:66%;height:100%;opacity:1;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:6%;top:10%;width:24%;height:74%;opacity:1;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:2%;top:0%;width:30%;height:100%;opacity:1;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:3.4%;top:0%;width:13%;height:37%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:0%;top:10%;width:18.5%;height:80%;opacity:1;border-radius:0px;border-width:0px;z-index:1}}
.mh-fit-t0{animation:mhFitT0 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitT1{0.000%,7.030%{left:17.5%;top:26%;width:21%;height:56%;opacity:1;border-radius:0px;border-width:0px;z-index:2}10.000%,17.030%{left:33.85%;top:0%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:37.5%;top:0%;width:36%;height:48.5%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:37%;top:0%;width:36%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:49.5%;top:0%;width:32.5%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:51%;top:0%;width:24%;height:32.5%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:67.5%;top:0%;width:32.5%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:38%;top:0%;width:24%;height:80%;opacity:1;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:35%;top:60%;width:11%;height:32%;opacity:1;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:16.8%;top:0%;width:36.6%;height:100%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:17.5%;top:26%;width:21%;height:56%;opacity:1;border-radius:0px;border-width:0px;z-index:2}}
.mh-fit-t1{animation:mhFitT1 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitT2{0.000%,7.030%{left:37%;top:0%;width:23%;height:100%;opacity:1;border-radius:0px;border-width:0px;z-index:3}10.000%,17.030%{left:67.7%;top:0%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:75%;top:0%;width:25%;height:48.5%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:74%;top:0%;width:26%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:49.5%;top:51.5%;width:32.5%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:76%;top:0%;width:24%;height:32.5%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:67.5%;top:51.5%;width:32.5%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:70%;top:16%;width:24%;height:74%;opacity:1;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:49%;top:0%;width:49%;height:58%;opacity:1;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:53.8%;top:38%;width:26%;height:62%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:37%;top:0%;width:23%;height:100%;opacity:1;border-radius:0px;border-width:0px;z-index:3}}
.mh-fit-t2{animation:mhFitT2 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitT3{0.000%,7.030%{left:58.5%;top:12%;width:16.5%;height:64%;opacity:1;border-radius:0px;border-width:0px;z-index:4}10.000%,17.030%{left:0%;top:51.5%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:37.5%;top:51.5%;width:17%;height:48.5%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:0%;top:51.5%;width:46%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:49.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:51%;top:33.5%;width:24%;height:32.5%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:67.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:70%;top:16%;width:24%;height:74%;opacity:0;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:63%;top:64%;width:11%;height:32%;opacity:1;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:80.2%;top:38%;width:13%;height:37%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:58.5%;top:12%;width:16.5%;height:64%;opacity:1;border-radius:0px;border-width:0px;z-index:4}}
.mh-fit-t3{animation:mhFitT3 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitT4{0.000%,7.030%{left:78%;top:10%;width:18.5%;height:80%;opacity:1;border-radius:0px;border-width:0px;z-index:1}10.000%,17.030%{left:33.85%;top:51.5%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:56%;top:51.5%;width:17.5%;height:48.5%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:47%;top:51.5%;width:25%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:49.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:76%;top:33.5%;width:24%;height:32.5%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:67.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:70%;top:16%;width:24%;height:74%;opacity:0;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:63%;top:64%;width:11%;height:32%;opacity:0;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:53.8%;top:0%;width:12.8%;height:37.4%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:78%;top:10%;width:18.5%;height:80%;opacity:1;border-radius:0px;border-width:0px;z-index:1}}
.mh-fit-t4{animation:mhFitT4 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitT5{0.000%,7.030%{left:78%;top:10%;width:18.5%;height:80%;opacity:0;border-radius:0px;border-width:0px;z-index:0}10.000%,17.030%{left:67.7%;top:51.5%;width:32.3%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}20.000%,27.030%{left:75%;top:51.5%;width:25%;height:48.5%;opacity:1;border-radius:28px;border-width:0px;z-index:1}30.000%,37.030%{left:73%;top:51.5%;width:27%;height:48.5%;opacity:1;border-radius:0px;border-width:0px;z-index:1}40.000%,47.030%{left:49.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}50.000%,57.030%{left:0%;top:67.5%;width:100%;height:32.5%;opacity:1;border-radius:4px;border-width:0px;z-index:1}60.000%,67.030%{left:67.5%;top:51.5%;width:32.5%;height:48.5%;opacity:0;border-radius:0px;border-width:0px;z-index:1}70.000%,77.030%{left:70%;top:16%;width:24%;height:74%;opacity:0;border-radius:0px;border-width:10px;z-index:1}80.000%,87.030%{left:63%;top:64%;width:11%;height:32%;opacity:0;border-radius:0px;border-width:0px;z-index:1}90.000%,97.030%{left:67%;top:0%;width:12.8%;height:37.4%;opacity:1;border-radius:0px;border-width:0px;z-index:1}100%{left:78%;top:10%;width:18.5%;height:80%;opacity:0;border-radius:0px;border-width:0px;z-index:0}}
.mh-fit-t5{animation:mhFitT5 32s cubic-bezier(.7,0,.2,1) infinite}
@keyframes mhFitL0{0%,8.516%{opacity:1}9.453%,98.516%{opacity:0}100%{opacity:1}}
.mh-fit-tile > .mh-fit-l0{animation:mhFitL0 32s linear infinite}
@keyframes mhFitL1{0%,8.516%{opacity:0}10.000%,18.516%{opacity:1}19.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l1{animation:mhFitL1 32s linear infinite}
@keyframes mhFitL2{0%,18.516%{opacity:0}20.000%,28.516%{opacity:1}29.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l2{animation:mhFitL2 32s linear infinite}
@keyframes mhFitL3{0%,28.516%{opacity:0}30.000%,38.516%{opacity:1}39.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l3{animation:mhFitL3 32s linear infinite}
@keyframes mhFitL4{0%,38.516%{opacity:0}40.000%,48.516%{opacity:1}49.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l4{animation:mhFitL4 32s linear infinite}
@keyframes mhFitL5{0%,48.516%{opacity:0}50.000%,58.516%{opacity:1}59.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l5{animation:mhFitL5 32s linear infinite}
@keyframes mhFitL6{0%,58.516%{opacity:0}60.000%,68.516%{opacity:1}69.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l6{animation:mhFitL6 32s linear infinite}
@keyframes mhFitL7{0%,68.516%{opacity:0}70.000%,78.516%{opacity:1}79.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l7{animation:mhFitL7 32s linear infinite}
@keyframes mhFitL8{0%,78.516%{opacity:0}80.000%,88.516%{opacity:1}89.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l8{animation:mhFitL8 32s linear infinite}
@keyframes mhFitL9{0%,88.516%{opacity:0}90.000%,98.516%{opacity:1}99.453%,100%{opacity:0}}
.mh-fit-tile > .mh-fit-l9{animation:mhFitL9 32s linear infinite}

/* Hero: butonul și dovezile de lângă el. */
.mh-hero-cta { gap: 16px 24px; padding-left: 6%; }
.mh-hero-cta > * { margin: 0 !important; }
.mh-hero-cta p { line-height: 1.5; }
@media (max-width: 781px) { .mh-hero-cta { padding-left: 0; } }

/* 07 Protection: filigranul, galeria blocată, licența. */
.mh-tl-wmwrap { position: relative; flex: 1 1 auto; display: flex; min-height: 200px; }
.mh-tl-wmwrap > figure { flex: 1 1 auto; width: 100%; height: auto !important; }
.mh-tl-wmwrap > figure img { width: 100%; height: 100% !important; object-fit: cover; }
.mh-tl-wm {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--tertiary);
	font-size: 1.25rem;
	font-weight: 600;
	opacity: .78;
	transform: rotate(-18deg);
	pointer-events: none;
}
.mh-tl-thumbs.is-locked img { filter: blur(7px); }
.mh-tl-thumbs.is-locked figure { overflow: hidden; border-radius: var(--mc-radius-row, 10px); }
.mh-tl-field {
	padding: 10px 14px;
	border: 1px solid var(--mc-line);
	border-radius: var(--mc-radius-row, 10px);
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--secondary);
	font-size: 14px;
}
.mh-tl-license { margin-top: 12px !important; line-height: 1.5; }
.mh-tl-licwrap > figure { aspect-ratio: 21 / 9; overflow: hidden; }
.mh-tl-licwrap > figure img { width: 100%; height: 100% !important; object-fit: cover; }
.mh-tl-card .modula-proof-grid { gap: 10px; }
@media (max-width: 781px) { .mh-tl-card .modula-proof-badge { display: none; } }