/**
 * Homepage — secțiunea 1: hero, plăci promo, beneficii.
 *
 * Valorile sunt MĂSURATE pe pagina Elementor randată, la 1440 *(9 aug 2026)*,
 * nu deduse din ochi:
 *
 *   container   1344 · coloană · gap 16
 *   video       raport 1344/560
 *   plăci       3 × 439×178 · gap 16 · colț 12 · imagine 176×176 · text la 24
 *   beneficii   4 × 324×100 · gap 16 · colț 12 · padding 24 · iconiță 50 · text la 16
 *
 * Culorile vin din variabilele globale ale kitului, traduse:
 *   darker-cyan #0A435C *(text)* · light-gray #C4D2D7 *(contur)* · #ffffff *(fundal)*
 *
 * Convenție de clase: `.inco-home*`. Cardul de produs și grila rămân ale lor.
 */

.inco-home {
	--home-container: 84rem;          /* 1344 */
	--home-gap:       16px;
	--home-radius:    12px;
	--home-ink:       var(--darker-cyan, #0A435C);
	--home-line:      var(--light-gray, #C4D2D7);
	--home-surface:   var(--pure-white, #fff);
	--home-muted:     #53798A;

	box-sizing: border-box;
	inline-size: min(100% - 32px, var(--home-container));
	margin-inline: auto;
}

/*
 * Aceleași variabile, găzduite de altă pagină.
 *
 * 🔑 `.inco-home` face DOUĂ lucruri: declară variabilele componentelor și ține
 * lățimea paginii. Când o secțiune de aici e chemată în altă parte *(newsletter,
 * pe pagina de produs)*, primul lucru e obligatoriu, al doilea e în plus —
 * gazda își are deja containerul, iar cele două s-ar fi strâns una peste alta.
 *
 * ⚠️ Distanța de deasupra NU se declară aici: e ritmul paginii-gazdă, nu al
 * paginii de start. O scrie fiecare gazdă, la ea în foaie.
 */
.inco-home--incastrat {
	inline-size: 100%;
	margin-inline: 0;
}
.inco-home *, .inco-home ::before, .inco-home ::after { box-sizing: border-box; }

/*
 * 🔴 Tema pune `main.site-main { max-width: 1140px }`, iar `:not()` din regula ei
 * o duce la (0,2,1). Aceeași capcană ca pe arhivă, unde `/magazin/` ieșea la
 * 1108 și cardurile treceau în varianta de mobil pe desktop.
 */
html body.inco-home-page main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

.inco-home__sectiune {
	display: flex;
	flex-direction: column;
	gap: var(--home-gap);
}
.inco-home__sectiune--hero { margin-block-start: 20px; }

/* ------------------------------------------------------------------ hero ---*/
/*
 * ⚠️ `aspect-ratio` pe amândouă variantele: fără el, pagina sare în jos când se
 * încarcă videoclipul și tot ce e dedesubt se mișcă sub degetul omului.
 */
/*
 * Rama heroului. Cerută de Seba: 1px `#C4D2D7`.
 *
 * 🔑 Raza și `overflow: hidden` se repetă aici, deși le are și `__media`:
 * bordura stă pe wrapper, deci fără rază ar fi un dreptunghi ascuțit în jurul
 * unei cutii rotunjite — s-ar fi văzut patru colțuri de fundal între ele.
 */
.inco-home-hero {
	inline-size: 100%;
	overflow: hidden;
	border: 1px solid var(--light-gray, #C4D2D7);
	border-radius: var(--home-radius);
}

.inco-home-hero__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--home-radius);
	background: #EAF1F5;
}
.inco-home-hero__media--desktop { aspect-ratio: var(--inco-hero-rap-d, 1344/560); }
.inco-home-hero__media--mobil   { aspect-ratio: var(--inco-hero-rap-m, 328/380); display: none; }

.inco-home-hero__video,
.inco-home-hero__imagine {
	position: absolute; inset: 0;
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------ plăci promo ---*/
.inco-home-promo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--home-gap);
	margin: 0; padding: 0; list-style: none;
}

.inco-home-promo__card {
	display: flex;
	align-items: center;
	block-size: 100%;
	overflow: hidden;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius);
	background: var(--home-surface);
	color: var(--home-ink);
	text-decoration: none;
	/* 400ms ease, cerut de Seba — pe TOT ce se schimbă la hover: conturul,
	   culoarea textului, și linia imaginii *(declarată la `__img`)*. */
	transition: border-color .4s ease, color .4s ease;
}

/*
 * 🔑 Hover: TOT ce e contur și text trece pe `#0B8669` — placa, linia din
 * dreapta a imaginii, și titlul.
 *
 * ⚠️ Nu e verdele `--green` `#239278`. Îl măsurasem pe pagina VECHE și de acolo
 * îl luasem; Seba l-a dat din machetă ca `#0B8669`. **Pagina veche e o
 * implementare, nu o sursă de adevăr** — când cele două se contrazic, macheta
 * câștigă. E același verde ca hover-ul butonului cu gradient.
 * *(De tokenizat odată cu gradientul → `05-todo.md`.)*
 *
 * ⚠️ NU pe `a.` — plăcile n-au link *(`cursor: auto`)*, deci efectul trebuie să
 * meargă și pe varianta fără link.
 *
 * ⚠️ Și NU pe cardurile de beneficii: verificat separat, sub mouse rămân
 * `#C4D2D7`. Doar plăcile promo reacționează.
 */
.inco-home-promo__card:hover,
.inco-home-promo__card:focus-visible {
	border-color: #0B8669;
	color: #0B8669;
}

/* Titlul își declară culoarea în repaus, deci trebuie declarată și aici —
   altfel ar rămâne bleumarin pe o placă devenită verde. */
.inco-home-promo__card:hover .inco-home-promo__titlu,
.inco-home-promo__card:focus-visible .inco-home-promo__titlu { color: #0B8669; }

/* „Toate borderele" înseamnă și linia dintre imagine și text. */
.inco-home-promo__card:hover .inco-home-promo__img,
.inco-home-promo__card:focus-visible .inco-home-promo__img { border-right-color: #0B8669; }

/* Imaginea nu se strânge: 176 fix, cât în machetă. Textul cedează. */
.inco-home-promo__img {
	flex: 0 0 176px;
	inline-size: 176px; block-size: 176px;
	/*
	 * 🔴 `cover`, nu `contain`. Cu `contain`, o imagine care nu e pătrată era
	 * încadrată cu alb pe margini — se vedea la placa din mijloc, unde poza e mai
	 * lată decât înaltă, și placa arăta altfel decât surorile ei.
	 *
	 * `contain` arată imaginea întreagă; `cover` umple caseta. Aici caseta e
	 * fixă *(176×176)* și e parte din desenul plăcii, deci ea comandă.
	 */
	object-fit: cover;
	display: block;
	/*
	 * Colțul și linia din dreapta, din machetă *(radius 12, stroke 1px
	 * `grey-border-fill` = `#C4D2D7`)*.
	 *
	 * ⚠️ Doar pe DREAPTA. În stânga, sus și jos imaginea stă lipită de marginea
	 * plăcii, care are deja colț și bordură; dublate acolo ar fi ieșit două linii
	 * una lângă alta. Dreapta e singura latură care dă spre alb.
	 */
	border-radius: 0 12px 12px 0;
	border-right: 1px solid var(--home-line);
	transition: border-color .4s ease;
}

.inco-home-promo__titlu {
	margin: 0;
	padding-inline-start: 24px;
	font-size: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem);   /* 18 → 24 */
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--home-ink);

	/*
	 * 🔑 Cel mult DOUĂ rânduri, apoi „…". Cerut de Seba: pe modurile de ofertă
	 * titlul e numele produsului, iar numele astea au 60 de caractere
	 * *(„Scutece Adulți Chilot EGOSAN XXL Maxi Absorbtie 2000ml 14buc")* — pe
	 * trei-patru rânduri, placa se înalță și împinge prețul afară din ea.
	 *
	 * ⚠️ Se taie ce nu încape, dar **nu se ascunde ce trebuie citit**: prețul e
	 * frate cu titlul, nu copil, deci rămâne întreg oricât ar fi numele.
	 *
	 * `-webkit-` fără prefix modern: `line-clamp` nestandardizat e singurul
	 * sprijinit peste tot, iar `display: -webkit-box` e condiția lui.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* 🔴 Titlul are nevoie de tranziția LUI. Cea de pe placă nu se moștenește:
	   fiecare element își animă propriile proprietăți. Fără asta, conturul se
	   colora lin în 400ms, iar textul sărea instantaneu. */
	transition: color .4s ease;
}

/* ------------------------------------------------------------- beneficii ---*/
.inco-home-benef {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--home-gap);
	margin: 0; padding: 0; list-style: none;
}

.inco-home-benef__item {
	display: flex;
	align-items: center;
	padding: 24px;
	border: 1px solid var(--home-line);
	border-radius: var(--home-radius);
	background: var(--home-surface);
}

.inco-home-benef__icon {
	flex: 0 0 50px;
	inline-size: 50px; block-size: 50px;
	display: inline-flex; align-items: center; justify-content: center;
	line-height: 0;
}
.inco-home-benef__icon svg { inline-size: 100%; block-size: 100%; display: block; }

.inco-home-benef__text {
	display: flex; flex-direction: column; gap: 4px;
	padding-inline-start: 16px;
	min-inline-size: 0;
}

.inco-home-benef__titlu {
	font-size: clamp(0.875rem, 0.7917rem + 0.3704vw, 1.125rem);   /* 14 → 18 */
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--home-ink);
}
.inco-home-benef__sub {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--home-muted);
}

/* =============================================================== sub 900 ====*/
@media (max-width: 899.98px) {
	/*
	 * Hero: se schimbă VARIANTA, nu doar mărimea. Pe telefon se poate cere alt
	 * fișier decât pe desktop — de aceea sunt două elemente, nu unul scalat.
	 */
	.inco-home-hero__media--desktop { display: none; }
	.inco-home-hero__media--mobil   { display: block; }

	/* Dacă nu s-a completat nimic pentru telefon, rămâne desktopul. */
	.inco-home-hero:not(:has(.inco-home-hero__media--mobil)) .inco-home-hero__media--desktop { display: block; }

	.inco-home-promo { grid-template-columns: minmax(0, 1fr); }
	.inco-home-benef { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Sub 600: rămân tot DOUĂ pe rând, cerut de Seba. Aveam una singură.
 *
 * 🔑 Nu e de ajuns să schimb numărul de coloane — cardul trebuie și el întors.
 * Măsurat la 360: cardul iese 156 lat, din care iconița ia 50 și paddingul 48,
 * deci textului îi rămâneau **40px**. Titlul se rupea pe 3 rânduri, subtitlul pe
 * 6, iar cele patru carduri ieșeau de înălțimi diferite.
 *
 * Cu iconița deasupra și paddingul la 16, textul primește 124: **titlul intră pe
 * un rând, subtitlul pe două, toate patru au 150px** înălțime.
 *
 * ✅ Confirmat de machetă: iconița deasupra, titlul și subtitlul sub ea, aliniate
 * la stânga. *(Am ajuns la forma asta din măsurătoare, înainte s-o văd — dar
 * abia captura lui Seba o face sigură.)*
 */
@media (max-width: 599.98px) {
	.inco-home-benef { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.inco-home-benef__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px;
	}
	.inco-home-benef__text { padding-inline-start: 0; }
}

/* Pe ecrane înguste imaginea plăcii nu mai poate ține 176 fix. */
@media (max-width: 419.98px) {
	.inco-home-promo__img { flex-basis: 120px; inline-size: 120px; block-size: 120px; }
	/*
	 * ⚠️ Aerul plăcii NU se strânge aici — regula lui de bază e scrisă mai jos
	 * în fișier, deci ar bate blocul ăsta la specificitate egală. E mutat lângă
	 * ea. **Un `@media` nu bate ordinea, doar o filtrează.** → §4g
	 */
}

/* ==================================================== secțiunile 2–5 =======*/
/*
 * Gapurile sunt cele din Elementor, traduse în `clamp()`:
 *   secțiuni       16 → 32   (1rem → 2rem)
 *   comparator     16 → 130  (rând, spațiu mare între text și video)
 *   newsletter     16 → 82
 */
.inco-home__sectiune--cat,
.inco-home__sectiune--prod { gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem); }

/* Distanța dintre secțiuni — nu era în Elementor pe container, ci din marginile
   lor; o punem explicit, ca ritmul să nu depindă de conținut. */
.inco-home__sectiune + .inco-home__sectiune { margin-block-start: clamp(2.5rem, 1.6667rem + 3.7037vw, 5rem); }

.inco-home__titlu {
	margin: 0;
	font-size: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);   /* 24 → 40 */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--home-ink);
}
/* Titlurile din secțiunile 4 și 5 au interlinie 100% în machetă, nu 120%. */
.inco-home__titlu--strans { line-height: 1; }

/* Antetul secțiunii de produse: titlu la stânga, „Vezi tot" la dreapta. */
.inco-home__antet {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--home-gap);
}
/*
 * „Vezi tot" — buton plin pe desktop, text simplu pe telefon.
 *
 * ⚠️ Paddingul e ASIMETRIC din machetă: 16 la stânga, 12 la dreapta. Nu e o
 * greșeală de măsurare — săgeata are aer propriu în desenul ei, deci dreapta
 * arată egală cu stânga deși cifrele diferă.
 */
.inco-home__vezi-tot {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px 8px 16px;
	border-radius: 8px;
	background: var(--blue, #056E9B);
	color: var(--white-bg, #FAFCFF);
	font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -.01em;
	text-decoration: none; white-space: nowrap;
	transition: background-color .3s ease;
}

/*
 * Caseta iconiței: 32×32, cu desenul de 21×12 centrat în ea.
 *
 * 🔑 Ea dă înălțimea butonului — 8 + 32 + 8 = 48. Fără ea ieșeau 32, fiindcă
 * textul de 16 cu interlinie 100% e mai scund decât iconița.
 */
.inco-home__sageata {
	flex: none;
	inline-size: 32px; block-size: 32px;
	display: inline-flex; align-items: center; justify-content: center;
}
.inco-home__sageata svg { display: block; }

/*
 * Hover: fundal verde `#239278`. E `secondary-button` din sistem — scris deja
 * în `02-design-system.md`: „radius 8px, background `var(--cyan)`;
 * hover → `var(--green)`". Trebuia să mă uit acolo, nu în Figma.
 *
 * 🔴 `color` NU e de prisos, e ESENȚIALĂ. `reset.css`-ul temei are
 * `a:active, a:hover { color: #333366 }`. Declarasem pe hover doar fundalul,
 * deci sub mouse textul trecea pe bleumarin închis, peste verde. **Fundalul era
 * corect de la început; culoarea era bug-ul.**
 * → 🔑 pe o STARE se declară tot ce atinge tema acolo, nu doar ce schimb eu
 *   intenționat. `a:hover` din temă valorează (0,1,1), deci prinde orice link
 *   al nostru care nu-și declară culoarea pe hover.
 *
 * Săgeata vine odată cu textul, prin `currentColor`.
 */
@media (min-width: 900px) {
	.inco-home__vezi-tot:hover,
	.inco-home__vezi-tot:focus-visible {
		background: var(--green, #239278);
		color: var(--white-bg, #FAFCFF);
	}
}

/* Prefixat din același motiv: butonul de newsletter e `[type="button"]`, care
   valorează cât o clasă și ar fi la egalitate cu a noastră. → §4g */
.inco-home .inco-home__buton {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 24px;
	border: 0; border-radius: 8px;
	background: var(--blue, #056E9B);
	color: var(--pure-white, #fff);
	/* Măsurat pe butonul de newsletter din pagina veche: 600 și −2%, nu 500. */
	font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -.02em;
	text-decoration: none; cursor: pointer;
	transition: background-color .3s ease;
}
/*
 * 🔴 APĂSAT CU MOUSE-UL, BUTONUL SE FĂCEA ROZ. Semnalat de Seba.
 *
 * Aveam declarate `:hover` și `:focus-visible`, dar nu `:focus` simplu — iar un
 * clic de mouse dă în Chrome `:focus` FĂRĂ `:focus-visible` *(acela e rezervat
 * tastaturii)*. Deci pe apăsare nu se potrivea niciuna dintre regulile noastre,
 * și rămânea a temei:
 *
 *     reset.css   [type=submit]:focus, button:focus { background-color:#c36 }
 *     base.css    [type=submit]:focus, …            { background-color:#c36 }
 *
 * 🔑 Aritmetica explică de ce câștigă: `[type=submit]:focus` cântărește (0,2,0),
 * exact cât `.inco-home .inco-home__buton` — egalitate, iar tema se încarcă DUPĂ
 * noi. Regula de hover e (0,3,0), de aia hover-ul mergea și apăsarea nu.
 *
 * 🔑 Pe `:focus` punem culoarea de REPAUS, nu verdele: apăsarea nu trebuie să
 * lase butonul verde până dai clic în altă parte. Verdele rămâne pentru mouse
 * deasupra și pentru focusul de la tastatură.
 *
 * ⚠️ ORDINEA e parte din reparație: `:focus` are aceeași greutate ca
 * `:focus-visible` și ca `:hover`, iar la egalitate câștigă cea scrisă mai jos.
 * Deci `:focus` PRIMA — altfel ar fi șters și verdele de la tastatură, și pe cel
 * de sub mouse. → §4n
 */
.inco-home .inco-home__buton:focus {
	background: var(--blue, #056E9B);
	color: var(--pure-white, #fff);
}

.inco-home .inco-home__buton:hover,
.inco-home .inco-home__buton:focus-visible { background: var(--green, #239278); color: var(--pure-white, #fff); }
.inco-home .inco-home__buton[disabled] { opacity: .55; cursor: not-allowed; }

/* ----------------------------------------------- 4. text lângă video ------*/
.inco-home__sectiune--comp {
	flex-direction: row;
	align-items: center;
	gap: clamp(1rem, -1.375rem + 10.5556vw, 8.125rem);   /* 16 → 130 */
}
.inco-home-comp__text {
	flex: 1 1 0; min-inline-size: 0;
	display: flex; flex-direction: column;
	gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
}
.inco-home-comp__rand {
	margin: 0;
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 16px; line-height: 1.5; color: var(--home-ink);
}
.inco-home-comp__icon { flex: 0 0 32px; inline-size: 32px; line-height: 0; }
.inco-home-comp__icon svg { inline-size: 100%; block-size: auto; display: block; }
/*
 * „Adaugă în coș" — componenta cardului de produs, scoasă din card.
 * Stilul vine tot din `product-card.css`; aici sunt DOAR cele trei lucruri
 * care depindeau de card și care în afara lui n-au cine să le dea.
 */
.inco-home-comp__actiune {
	margin: 0;
	display: flex;          /* altfel `<p>`-ul întinde butonul pe toată linia */
	/*
	 * Butonul își ia mărimea textului din lățimea CARDULUI, prin
	 * `clamp(14px, calc(14px + var(--inco-pc-t) * 2), 16px)`. În afara unui card
	 * variabila nu există, iar un `calc()` cu o variabilă nedefinită e invalid —
	 * pică tot `clamp`-ul, deci și mărimea. `1` = capătul de sus, adică 16px,
	 * cât are butonul pe cardul lat.
	 */
	--inco-pc-t: 1;
}

/* Se lungește cât cere textul. În card e `flex: 1 1 auto`, ca să împartă rândul
   cu stepperul; aici n-are cu cine să-l împartă. */
.inco-home-comp__actiune .inco-add-to-cart { flex: 0 0 auto; }

/*
 * 🔑 Eticheta NU se scurtează niciodată — cerut explicit de Seba: „mereu se va
 * lungi butonul cât e nevoie, textul nu se ascunde".
 *
 * În card are `flex: 1 1 auto` cu `text-overflow: ellipsis`, fiindcă acolo
 * lățimea e dată și textul trebuie să cedeze. Aici cedează butonul.
 */
.inco-home-comp__actiune .inco-add-to-cart__label {
	flex: 0 0 auto;
	overflow: visible;
	text-overflow: clip;
	/*
	 * 🔴 `padding-inline`, pe AMBELE părți — aveam doar `-start`, deci textul
	 * avea 16px la stânga și **0 la dreapta**, lipit de pastilă. Măsurat: tușul
	 * mergea de la 16 la 122, iar pastila începea fix la 122.
	 *
	 * În card centrarea vine de la sine, fiindcă eticheta are `flex: 1` și ia
	 * tot spațiul rămas. Aici eticheta se strânge pe text, deci aerul trebuie
	 * dat explicit — și simetric, altfel „centrat" nu înseamnă nimic.
	 */
	padding-inline: 16px;
}

.inco-home-comp__media { flex: 1 1 0; min-inline-size: 0; }

/*
 * `.inco-home-media` e cutia comună pentru „video sau imagine". Raportul e fix,
 * ca locul să fie rezervat înainte să se încarce ceva — altfel pagina sare.
 */
.inco-home-media {
	position: relative; overflow: hidden;
	aspect-ratio: 664/390;
	border-radius: 8px;
	border: 1px solid var(--home-line);
	background: #EAF1F5;
}
.inco-home-media img,
.inco-home-media video {
	position: absolute; inset: 0;
	inline-size: 100%; block-size: 100%;
	object-fit: cover; display: block;
}

/* --------------------------------------------------- 5. newsletter --------*/
.inco-home__sectiune--news {
	flex-direction: row;
	align-items: center;
	gap: clamp(1rem, -0.375rem + 6.1111vw, 5.125rem);   /* 16 → 82 */
}
.inco-home-news__text {
	flex: 1 1 0; min-inline-size: 0;
	display: flex; flex-direction: column; justify-content: center;
	gap: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
}
.inco-home-news__lista { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.inco-home-news__punct {
	display: flex; align-items: center; gap: 8px;
	font-size: 16px; line-height: 1.5; color: var(--home-ink);
}
.inco-home-news__icon { flex: 0 0 32px; inline-size: 32px; line-height: 0; }
.inco-home-news__icon svg { inline-size: 100%; block-size: auto; display: block; }

/*
 * Formularul, măsurat pe pagina veche — nu improvizat, cum era înainte.
 *
 * 🔑 `align-items: stretch` NU e decor: câmpul are înălțime proprie 42px
 * *(24 + 8 + 8 + 2 de bordură)*, iar butonul 52. Cele 52 măsurate pe câmp vin
 * din întindere, nu din paddingul lui. Dacă aș fi scris 52 direct în câmp, ar
 * fi rămas 52 și atunci când butonul se schimbă.
 */
/*
 * 🔑 Prefixat cu `.inco-home`, ca tot ce e componentă de-a noastră.
 *
 * `input[type="email"]` din `reset.css`-ul temei valorează (0,1,1) și bătea
 * clasa noastră (0,1,0): raza ieșea 3px în loc de 8. E a cincea oară când
 * pierdem pe același selector — §4g.
 */
.inco-home-news__form { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.inco-home .inco-home-news__camp {
	flex: 1 1 220px; min-inline-size: 0;
	padding: 8px 16px;
	border: 1px solid var(--home-line); border-radius: 8px;
	background: var(--pure-white, #fff);
	font-family: inherit;
	font-size: 16px; font-weight: 500; line-height: 24px;
	color: var(--home-ink);
}
/*
 * ⚠️ Placeholderul are culoarea LUI *(`#53798A`)*, diferită de a textului
 * introdus. Aveam o singură culoare pentru amândouă, deci ce scria omul ieșea
 * la fel de șters ca îndemnul — părea că n-a intrat.
 *
 * `opacity: 1` fiindcă Firefox estompează placeholderul din oficiu.
 */
.inco-home .inco-home-news__camp::placeholder { color: var(--home-muted); opacity: 1; }
.inco-home .inco-home-news__camp:focus-visible {
	outline: 2px solid var(--blue, #056E9B);
	outline-offset: 1px;
	border-color: var(--blue, #056E9B);
}
.inco-home-news__nota { margin: 0; font-size: 13px; line-height: 1.4; color: var(--home-muted); }

/*
 * Confirmarea abonării.
 *
 * ⚠️ Verdele NU e singurul semn: textul spune el însuși ce s-a întâmplat
 * *(„Gata — ești pe listă")*. Cine nu deosebește culorile primește aceeași
 * informație.
 */
.inco-home-news__nota.is-ok { color: var(--home-verde, #0B8669); font-weight: 500; }

/*
 * Bifa de consimțământ — pe toată lățimea, sub rândul cu câmpul și butonul.
 *
 * ⚠️ `align-items: flex-start` și `margin-block-start` pe casetă: textul are
 * două rânduri pe telefon, iar o bifă centrată pe verticală ar fi plutit la
 * mijlocul frazei, departe de începutul ei.
 */
.inco-home-news__acord {
	flex: 1 0 100%;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--home-muted);
	cursor: pointer;
}
.inco-home .inco-home-news__acord input {
	inline-size: 16px;
	block-size: 16px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var(--home-verde, #0B8669);
}
.inco-home-news__acord a { color: inherit; text-decoration: underline; }
.inco-home-news__acord a:hover { color: var(--home-ink); }

.inco-home-news__media { flex: 1 1 0; min-inline-size: 0; }
.inco-home-news__img {
	inline-size: 100%; block-size: auto;
	aspect-ratio: 664/390; object-fit: cover;
	border: 1px solid var(--home-line); border-radius: 8px;
	display: block;
}

@media (max-width: 899.98px) {
	.inco-home__sectiune--comp,
	.inco-home__sectiune--news { flex-direction: column; align-items: stretch; }

	/*
	 * ⚠️ Pe telefon imaginea de la newsletter trece PRIMA — așa e în machetă
	 * *(`order: -99999` în Elementor)*. Nu e un moft: pe un ecran îngust, un
	 * bloc de text urmat de încă unul de text arată ca un perete.
	 *
	 * 🔑 La fel și banda de prezentare *(„Protecție inteligentă")* — cerut de
	 * Seba pe 13 aug: *„aici ordinea divurilor dinăuntru trebuie să fie inversă
	 * pe mobile, adică cel de jos să fie sus."* Aceeași situație și același
	 * motiv: pe desktop textul stă în stânga imaginii, dar strânse una peste
	 * alta ordinea firească e imaginea întâi.
	 *
	 * Se schimbă DOAR ordinea vizuală, nu marcajul: în cod media rămâne după
	 * text, deci ordinea la citire *(cititoare de ecran, tastatură)* e cea în
	 * care titlul explică imaginea, nu invers.
	 */
	.inco-home-news__media,
	.inco-home-comp__media { order: -1; }

	/*
	 * „Vezi tot" pe telefon: rămâne DOAR paddingul și gapul. Fără fundal, fără
	 * colț rotunjit — text și săgeată, în bleumarinul titlurilor.
	 *
	 * Săgeata se schimbă odată cu textul fiindcă desenul folosește
	 * `currentColor` — de aceea nu apare aici. → `Continut::sageata()`
	 *
	 * 🔑 Regula stă AICI, nu în blocul „sub 900" de mai sus, deși pragul e
	 * același. Acela e scris ÎNAINTEA definiției butonului, iar la specificitate
	 * egală câștigă cea de jos: pe telefon ar fi rămas fundalul albastru.
	 * → un `@media` nu bate ordinea, doar o filtrează *(§4g)*
	 */
	/*
	 * ⚠️ Și `:hover` aici, deși pe telefon nu există mouse: `a:hover` din temă
	 * valorează (0,1,1) și ar bate regula noastră (0,1,0) la prima atingere pe
	 * un ecran tactil — textul ar fugi pe `#333366`. Aceeași cauză ca pe desktop.
	 */
	.inco-home__vezi-tot,
	.inco-home__vezi-tot:hover,
	.inco-home__vezi-tot:focus-visible {
		background: none;
		border-radius: 0;
		color: var(--home-ink);
	}
}

/* Linkul heroului: doar un înveliș. Nu adaugă spațiu și nu-și ia stilurile de
   link de la temă — subliniere, culoare — fiindcă înăuntru e o imagine. */
.inco-home-hero__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.inco-home-hero__link:focus-visible {
	outline: 2px solid var(--green-fill-primary-default, #056e9b);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Placa promo care urmărește un produs — subtitlu deasupra, preț dedesubt
   ---------------------------------------------------------------------------
   🔑 Se adaugă la componenta existentă, nu se face o a doua placă. O placă cu
   preț și una fără trebuie să arate identic până la rândurile în plus; altfel
   rândul de trei s-ar rupe vizual exact când începe o promoție.
   ═══════════════════════════════════════════════════════════════════════════ */

.inco-home-promo__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-inline-size: 0;        /* altfel titlurile lungi împing imaginea */
}

/*
 * 🔴 Paddingul orizontal trece pe ÎNVELIȘ, ca toate cele trei rânduri să
 * înceapă de pe aceeași linie.
 *
 * ⚠️ Prima oară l-am scos de pe titlu și **am uitat să-l pun aici** — golul
 * dintre imagine și text a dispărut cu totul. Prins de Seba pe ecran, nu de
 * mine. → **o mutare de proprietate are DOUĂ capete; scrisul doar pe unul e
 * o ștergere.**
 *
 * Valorile sunt cele originale ale titlului: 24 pe desktop, 16 pe telefon.
 */
/*
 * 🔑 Aerul din DREAPTA e cât cel din stânga — 24px, adică exact distanța dintre
 * imagine și text. Cerut de Seba: fără el, un titlu lung ajungea până în
 * marginea plăcii, iar placa arăta strâmb tocmai la produsele cu nume lungi.
 * O singură valoare pentru amândouă laturile, ca să nu se poată depărta.
 */
.inco-home-promo__text {
	padding-inline: 24px;
	/* Textul cedează, nu împinge: imaginea are lățime fixă. */
	min-inline-size: 0;
}
.inco-home-promo__text > * { padding-inline: 0; }

/*
 * 🔴 Aerul de pe telefon stă AICI, nu în blocul de `@media` de mai sus.
 *
 * Acolo era scris de la început — și **n-a avut niciodată efect**: regula de
 * bază e mai jos în fișier, iar la specificitate egală câștigă ultima. Deci
 * comentariul de deasupra promitea „24 pe desktop, 16 pe telefon", iar pagina
 * ținea 24 peste tot. Măsurat la 360: **24, nu 16**.
 * → §4g *(un `@media` nu bate ordinea, doar o filtrează)* și §4o *(un comentariu
 * care promite nu e o dovadă că se și întâmplă)*.
 */
@media (max-width: 419.98px) {
	.inco-home-promo__text { padding-inline: 16px; }
}

.inco-home-promo__sub {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cyan, #056E9B);
}

/*
 * Prețul: cel de acum mare și verde, cel dinainte mic, tăiat, în dreapta lui.
 *
 * 🔑 `center` — cea mică stă la MIJLOCUL înălțimii celei mari.
 *
 * Trei variante, toate cerute de Seba, în ordinea în care le-a văzut: întâi
 * „sus", apoi „jos", apoi „pe mijloc". **Nu e răzgândire, e cum funcționează:**
 * o descriere în cuvinte a unei așezări e o ipoteză despre cum va arăta, iar
 * ecranul e proba. De aia se aplică live și se măsoară înainte de a împacheta —
 * așa fiecare schimbare costă o linie, nu o livrare. → §4ar
 */
.inco-home-promo__pret {
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}

/*
 * 🔑 Aceeași scală ca titlul plăcii: **18 pe telefon, 24 pe desktop**, interpolat
 * liniar între ancorele din machetă. Valorile sunt cele date de Seba.
 */
.inco-home-promo__pret-nou {
	font-size: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem);   /* 18 → 24 */
	font-weight: 600;
	color: #0B8669;
}

/*
 * ⚠️ Culoarea se declară și pe sumă, și pe `bdi`. `wc_price()` întoarce
 * `<span class="amount"><bdi>…</bdi></span>`, iar foaia WooCommerce le dă
 * culoare — o culoare nedeclarată de noi e o culoare scrisă de altcineva. → §4n
 */
.inco-home-promo__pret-nou .amount,
.inco-home-promo__pret-nou bdi { color: inherit; font: inherit; }

/*
 * Prețul dinainte: mai mic, stins, tăiat. `#9CA3AF` e **exact** griul de pe
 * cardul de produs — cele două trebuie să se citească la fel, altfel același
 * produs are două înfățișări pe aceeași pagină.
 */
.inco-home-promo__pret-vechi {
	font-size: 14px;
	font-weight: 500;
	color: #9CA3AF;
	text-decoration: line-through;
	/* Nu se rupe niciodată pe două rânduri: e o singură sumă. */
	white-space: nowrap;
}

.inco-home-promo__pret-vechi .amount,
.inco-home-promo__pret-vechi bdi { color: inherit; font: inherit; text-decoration: inherit; }