/*
 * PMC — Immagini editoriali nel grid prodotti home (.pmc--featured__products)
 * Le tile sono iniettate dal mu-plugin pmc-featured-grid-images.php.
 * Quadrata = size_1x1 (1 colonna) | larga = size_2x1 (2 colonne, span responsive gestito da Impreza).
 */

/* La tile riempie l'altezza della riga senza contribuire a determinarla
   (inner in absolute), così la riga resta dimensionata dalle card prodotto. */
.pmc-featured-tile .w-grid-item-h {
  position: relative;
  height: 100%;
  min-height: 280px; /* fallback se la tile resta sola nella riga */
}

/* L'immagine è allineata alla card prodotto, non a tutta la riga.
   Nella riga la card (.usg_vwrapper_1, height 390px dallo scoped CSS del grid
   layout_213) è l'ultimo elemento e chiude in fondo alla riga; sopra sporge la
   foto prodotto (.usg_hwrapper_2, height 270px + margin-bottom -45%).
   Quindi: bottom:0 + altezza card = stessi bordi superiore e inferiore delle
   card, senza dipendere dalla larghezza colonna né dal gap. */
.pmc-featured-tile__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pmc-featured-card-height, 390px);
  display: block;
  overflow: hidden;
  border-radius: 24px; /* stesso radius delle card prodotto */
}

/* Sotto 1024px lo scoped CSS del grid nasconde la foto prodotto
   (.usg_hwrapper_2 display:none) → la card occupa tutta la riga. */
@media (max-width: 1023px) {
  .pmc-featured-tile__inner {
    top: 0;
    height: auto;
  }
}

.pmc-featured-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile (<=600px): proporzione decorativa invece del solo min-height. */
@media (max-width: 600px) {
  .pmc-featured-tile .w-grid-item-h {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .pmc-featured-tile--wide .w-grid-item-h {
    aspect-ratio: 16 / 9;
  }
}