/* ==========================================================================
   assets.css — cablaggio degli asset immagine
   --------------------------------------------------------------------------
   Ogni segnaposto `.ph` contiene gia un <img> che punta al percorso
   definitivo dell'asset. Finche il file non esiste l'<img> e invisibile e
   resta leggibile il tratteggio con la didascalia; appena il file viene
   messo nella cartella giusta l'immagine lo copre. Nessuna modifica al
   codice, in nessuno dei due casi.

   PERCORSO UNICO — `img/` accanto a index.html
   Gli <img> stanno nell'HTML, quindi la base relativa e la posizione di
   index.html: `proto/` in locale e `vidim-home/` nel pacchetto di deploy.
   Lo stesso `img/logo/...` funziona in entrambi senza cascata (i font hanno
   bisogno delle due sorgenti solo perche sono referenziati da un CSS che sta
   una cartella piu sotto). Al pacchetto va aggiunta `proto/img/` accanto a
   `css/` e `js/`.

     img/logo/    loghi        (SVG)
     img/icon/    icone        (SVG)
     img/media/   immagini     (PNG)

   Questo foglio e caricato DOPO i fogli di sezione e PRIMA di animations.css:
   non tocca nessuna geometria di sezione, aggiunge solo le regole degli <img>.
   ========================================================================== */


/* --- Regola base ----------------------------------------------------------
   L'<img> e assoluto e riempie esattamente il box del `.ph`:
   - fuori flusso  -> non puo alterare l'altezza della sezione, ne quando
     l'immagine c'e ne quando manca;
   - `position: absolute` con z-index auto dipinge comunque sopra la
     didascalia `.ph::after` (che e un flex item non posizionato), quindi NON
     serve uno z-index esplicito: alzarlo scavalcherebbe gli overlay gradiente
     di Application Card ed Easy Introduce, che sono fratelli con z-index auto;
   - ICONA DI IMMAGINE ROTTA: Chromium la disegna solo se `alt` NON e vuoto
     (verificato su Chromium 141: con `alt=""` il riquadro e pixel per pixel
     identico a quello senza <img>). Per questo TUTTI gli <img> hanno
     `alt=""`; dove serve un nome accessibile e dato con
     `role="img" aria-label="..."`, che non fa disegnare nulla. Il
     `text-indent` qui sotto e una difesa ulteriore: sposta fuori dal box
     l'eventuale testo alt nei browser che lo dipingono comunque.
   - `max-width: none` neutralizza `img { max-width: 100% }` di base.css e di
     responsive/00-core.css, che sui box in crop (How, Easy) lascerebbe banda.
--------------------------------------------------------------------------- */
.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  text-indent: -10000px;
  overflow: hidden;
  -webkit-user-drag: none;
}


/* --- Loghi e icone: `contain` --------------------------------------------
   I box dei loghi hanno gia il rapporto d'aspetto del marchio (spec 99 §1),
   quindi `contain` e `cover` coincidono; `contain` e la scelta prudente:
   se il file arriva con qualche pixel di margine il marchio resta intero
   invece di essere ritagliato. Le tre altezze di Trusted By restano quelle
   dichiarate in 02-trusted-by.css: qui non si tocca nessuna dimensione.
--------------------------------------------------------------------------- */
.nav__logo-img > img,
.foot__logo > img,
.trusted__logo > img,
.story-card__logo > img,
.why-card__icon > img,
.lingua__world > img,
.lingua__arrow > img {
  object-fit: contain;
}


/* --- Hero 14:533 — 1432 x 800 --------------------------------------------
   Box 1.79:1, export 2864 x 1600 nello stesso rapporto: `cover` e `contain`
   coincidono. `cover` protegge dal caso in cui l'asset arrivi fuori formato.
--------------------------------------------------------------------------- */
.hero__media > img {
  object-fit: cover;
  object-position: center;
}


/* --- How Vidim Helps I63:2908;123:2993 — le tre schermate -----------------
   In Figma il fill e reso al 174.63% della larghezza del box, ancorato
   left 0 / top 0, height 100%: il lato destro esce ed e tagliato.
   `cover` + `object-position: left top` riproduce esattamente quel crop —
   l'immagine viene scalata finche riempie i 700px di altezza (696 x 700 su
   una sorgente 1215.4 x 700 significa scala sull'altezza) e poi ancorata a
   sinistra. Vale anche ai breakpoint, dove il box cambia proporzione.
--------------------------------------------------------------------------- */
.how__media-img > img {
  object-fit: cover;
  object-position: left top;
}


/* --- Application Card 42:2354 / 2364 / 2382 / 2400 — 708 x 600 ------------
   `cover` centrata, sotto l'overlay gradiente. L'overlay resta sopra perche
   l'<img> non ha z-index (vedi regola base).
--------------------------------------------------------------------------- */
.app-card__img > img {
  object-fit: cover;
  object-position: center;
}


/* --- Core Capabilities 32:1421 — 1432 x 800 ------------------------------
   UNICO asset in `contain` (scale mode "Fit" di Figma): l'immagine non viene
   mai ritagliata. Se l'aspect ratio non e 1.79:1 restano bande vuote — e il
   comportamento voluto dal design, non un bug.
--------------------------------------------------------------------------- */
.core__media > img {
  object-fit: contain;
  object-position: center;
}


/* --- Easy Introduce 34:1602 / 34:1583 — 708 x 500 ------------------------
   Card 1: `cover` centrata su inset 0.
   Card 2: il crop (w 129.23%, h 135.54%, left -14.62%, top -35.54%) e gia
   fatto dal box `.easy-card__img--crop`, che sborda dentro un wrapper con
   overflow hidden. L'<img> deve solo riempire quel box in `cover`: per
   questo serve un file piu grande del riquadro (>= 1830 x 1356).
--------------------------------------------------------------------------- */
.easy-card__img > img {
  object-fit: cover;
  object-position: center;
}


/* --- Customer Story I85:7880;85:7776 — ritratto 346 x 400 ----------------
   In Figma il fill e a height 118.64% / top -4.04%, width 100%: inquadratura
   ancorata in alto. `cover` + `center top`, come annotato in
   sections/10-customer-story.css. Serve l'originale non ritagliato
   (>= 692 x 950), altrimenti il volto viene tagliato in basso.
--------------------------------------------------------------------------- */
.story__photo > img {
  object-fit: cover;
  object-position: center top;
}


/* ==========================================================================
   Icone del selettore Lingua — un solo file per icona
   --------------------------------------------------------------------------
   La spec elenca 4 file (I5-I8): World e Arrow in bianco per gli stati
   Default/Hover e in blu #008ed0 per Aperto/Inglese/Italiano. La nota B
   osserva che con `currentColor` ne basterebbero 2.

   Qui si chiedono infatti 2 soli file, in BIANCO, montati come <img> negli
   stati chiusi (gli unici presenti nella Home statica). Lo stato aperto —
   quando il dropdown verra implementato aggiungendo `.is-open` — riusa lo
   STESSO file come maschera CSS colorata con `currentColor`: components.css
   gia imposta `color: var(--color-primary)` su `.lingua.is-open`, quindi la
   ricolorazione avviene da sola. Nessun secondo export, nessun ritocco.
   ========================================================================== */
.lingua.is-open .lingua__world > img,
.lingua.is-open .lingua__arrow > img {
  visibility: hidden;
}

.lingua.is-open .lingua__world::before,
.lingua.is-open .lingua__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;          /* -> #008ed0 via .lingua.is-open */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.lingua.is-open .lingua__world::before {
  -webkit-mask-image: url("../img/icon/ui-world.svg");
  mask-image: url("../img/icon/ui-world.svg");
}
.lingua.is-open .lingua__arrow::before {
  -webkit-mask-image: url("../img/icon/ui-arrow.svg");
  mask-image: url("../img/icon/ui-arrow.svg");
}


/* --- Stampa ---------------------------------------------------------------
   In stampa il tratteggio dei segnaposto non ha senso: resta il bianco.
--------------------------------------------------------------------------- */
@media print {
  .ph { background: none; outline: none; }
  .ph::after { content: none; }
}