/* ===================================================================
   FOCUS POINT — punto focale per dispositivo
   Namespace: [data-focus]
   PHP: inc/focus-point.php (metabox + variabili inline)

   Il punto focale non può essere dichiarato inline: uno style inline vince
   su tutto e non esiste dentro una media query. L'inline porta quindi solo
   i due valori — `--focus` e `--focus-m` — e la scelta fra desktop e telefono
   la fa questo foglio.

   Il fallback annidato è l'eredità fra dispositivi:
     tablet orizz. → var(--focus-tl, var(--focus, 50% 50%))
     tablet vert.  → var(--focus-tp, var(--focus, 50% 50%))
     telefono      → var(--focus-m, var(--focus-tp, var(--focus, 50% 50%)))
   cioè: il suo punto, altrimenti quello da cui eredita, altrimenti il centro.
   I due tablet sono rami paralleli dal desktop — mai l'uno dall'altro, perché
   hanno proporzioni opposte — e il telefono segue il tablet verticale, che è
   quello che gli somiglia. Nessun valore da tenere allineato a mano.

   Si applica solo dove l'immagine è ritagliata (`object-fit: cover`);
   altrove `object-position` è innocuo.

   Niente zoom qui: queste sono immagini in griglia, dove il ritaglio è piccolo
   e le card hanno già trasformazioni proprie all'hover. Lo zoom resta alle
   copertine (hero.css, services-page.css, article.css).
   =================================================================== */

[data-focus] {
	object-position: var(--focus, 50% 50%);
}

/* L'ordine conta: un telefono in verticale rientra anche nella query del tablet
   verticale, e a parità di specificità vince l'ultima scritta. */
@media (max-width: 1366px) and (orientation: landscape) {
	[data-focus] {
		object-position: var(--focus-tl, var(--focus, 50% 50%));
	}
}

@media (max-width: 1024px) and (orientation: portrait) {
	[data-focus] {
		object-position: var(--focus-tp, var(--focus, 50% 50%));
	}
}

@media (max-width: 767px) {
	[data-focus] {
		object-position: var(--focus-m, var(--focus-tp, var(--focus, 50% 50%)));
	}
}