/**
 * Eticheta de la hover — utilitar de site.
 *
 * Se pune un singur atribut pe control:
 *
 *   <a data-inco-eticheta="Comparator produse">…</a>
 *
 * și apare o etichetă mică **sub** el, la trecerea mouse-ului sau la focus de
 * tastatură. Nimic de scris în JS, niciun element nou în pagină.
 *
 * De ce nu `title`, de ce numai la mouse și de ce stă în `src/`: `src/Eticheta.php`.
 */

[data-inco-eticheta] {
	/*
	 * Ancora. Controalele noastre sunt oricum `position: relative`, dar utilitarul
	 * nu are voie să se bazeze pe asta: pus pe al treilea control, s-ar fi agățat
	 * de primul strămoș poziționat și eticheta ar fi apărut în alt colț al paginii.
	 */
	position: relative;
}

[data-inco-eticheta]::after {
	content: attr(data-inco-eticheta);
	position: absolute;

	/*
	 * 🔑 Se deschide în JOS, fiindcă amândouă locurile unde o folosim sunt sus:
	 * pastila din antet *(la 20px de marginea de sus)* și butonul din colțul
	 * cardului. O etichetă deasupra lor ar fi ieșit din ecran, respectiv ar fi
	 * intrat sub antetul lipicios.
	 *
	 * 🔴 **Alinierea se ALEGE, nu se presupune.** Implicit eticheta pleacă din
	 * marginea de start a controlului și crește spre dreapta — bun pentru butonul
	 * cardului, care stă în colțul din STÂNGA al imaginii, iar imaginea are
	 * `overflow: hidden`. Prima variantă o aliniasem la dreapta „ca să crească
	 * spre interior"; măsurat, ieșea **33px în afara casetei** și se tăia exact pe
	 * jumătatea cu textul. **Interiorul e în altă parte pentru fiecare colț.**
	 */
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;

	z-index: 5;
	padding: 5px 8px;
	border-radius: 6px;
	background: #0a435c;
	color: #fafcff;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(10, 67, 92, .25);

	/*
	 * ⚠️ Eticheta nu prinde niciodată mouse-ul. Fără asta, apărând chiar sub
	 * cursor, ar fi putut înghiți apăsarea de pe controlul de deasupra ei — adică
	 * lucrul care explică butonul l-ar fi și stricat.
	 */
	pointer-events: none;

	opacity: 0;
	transform: translateY(-4px);

	/*
	 * 🔑 Întârzierea de 350ms e partea care contează. Fără ea, eticheta clipește
	 * la fiecare trecere a mouse-ului peste rândul de pastile — iar o etichetă
	 * care apare când NU e căutată e zgomot, nu ajutor. Apare instantaneu doar la
	 * ieșire *(fără întârziere pe stingere)*, ca să nu rămână în urma cursorului.
	 */
	transition: opacity .15s ease, transform .15s ease;
}

/*
 * 🔴 LATERAL, pentru controalele așezate unul SUB altul.
 *
 * Butoanele din colțul cardului *(favorite, comparare)* sunt o coloană: eticheta
 * celui de sus, deschisă în jos, ar fi căzut **exact peste** cel de dedesubt
 * *(măsurat: 619 față de 618,9)*. Nu l-ar fi blocat — eticheta nu prinde
 * mouse-ul — dar l-ar fi acoperit, adică ar fi ascuns tocmai al doilea buton pe
 * care omul nu-l înțelege.
 *
 * → **O etichetă se deschide în direcția în care controlul are vecini mai
 *   puțini.** Într-o coloană, aia e lateral.
 */
[data-inco-eticheta][data-inco-eticheta-lateral]::after {
	inset-block-start: 50%;
	inset-inline-start: calc(100% + 8px);
	inset-inline-end: auto;
	transform: translateY(-50%) translateX(-4px);
}

[data-inco-eticheta][data-inco-eticheta-lateral]:hover::after,
[data-inco-eticheta][data-inco-eticheta-lateral]:focus-visible::after {
	transform: translateY(-50%);
}

/*
 * Pentru controalele din marginea din DREAPTA — pastila comparatorului din antet
 * stă la ~1064px din 1440, iar pe telefon aproape lipită de margine. Aliniată la
 * start, o etichetă de 135px ar fi ieșit din ecran.
 */
[data-inco-eticheta][data-inco-eticheta-dreapta]::after {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/*
 * 🔴 Numai unde există un mouse adevărat. Pe ecran tactil `:hover` rămâne lipit
 * după atingere, deci eticheta ar fi rămas pe ecran, peste produse, până la
 * următoarea apăsare. → §4bf
 */
@media (hover: hover) {
	[data-inco-eticheta]:hover::after {
		opacity: 1;
		transform: none;
		transition-delay: .35s;
	}
}

/*
 * Tastatura o vede FĂRĂ întârziere: acolo nu e o trecere întâmplătoare, e o
 * oprire anume pe control.
 */
[data-inco-eticheta]:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-inco-eticheta]::after {
		transform: none;
		transition: none;
	}
}