/*
Theme Name: Zephyr Child
Template: Zephyr
Version: 1.0
Author:	UpSolution
Theme URI: http://zephyr.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

.asp_product_item_thumbnail img {
  width: 100%;
  height: 100%;
  float: left;
  margin-right: 10px;
}

/* ==========================================================================
   Cartoline notizie (griglie "layout_blog_10")
   Il testo non sta piu sopra la foto: ogni cartolina ha la foto in alto
   e sotto un blocco grigio pieno con categorie e titolo.
   ========================================================================== */

/* Catena di altezze: il tema fissa la cartolina a un'altezza calcolata sul
   layout vecchio e taglia l'eccedenza con overflow:hidden. Qui la lasciamo
   crescere fino al contenuto, restando tutte allineate alla piu alta. */
.w-grid.layout_blog_10 .w-grid-list .owl-item {
  display: flex;
}

.w-grid.layout_blog_10 .w-grid-list .owl-item > .w-grid-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}

/* Il tema mette max-height:100% qui: e questo che tagliava il testo,
   perche il contenuto (foto intera + titolo) e piu alto del riquadro. */
.w-grid.layout_blog_10 .w-grid-item > .w-grid-item-h {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  overflow: visible;
}

/* La cartolina diventa una colonna: prima la foto, poi il blocco testo. */
.w-grid.layout_blog_10 .w-grid-item .w-grid-item-h {
  display: flex;
  flex-direction: column;
  background: #333;
}

/* Riquadro foto uguale per tutte le cartoline: stessa larghezza e stessa altezza.
   Proporzione 4:5 (verticale) perche la maggior parte delle foto e verticale:
   e il formato che lascia meno spazio vuoto senza tagliare niente. */
.w-grid.layout_blog_10 .w-grid-item .w-post-elm.post_image {
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: #2a2a2a;
}

/* "contain" e non "cover": la foto entra tutta nel riquadro, mai ritagliata.
   Lo spazio che avanza resta grigio e fa da cornice. */
.w-grid.layout_blog_10 .w-grid-item .w-post-elm.post_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* Il testo esce dalla sovrapposizione e prende il suo spazio grigio.
   Selettore con 4 classi: batte la regola inline del tema anche se arriva dopo. */
.w-grid.layout_blog_10 .w-grid-item .w-grid-item-h > .w-vwrapper {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 1 1 auto;
  background: #333 !important;
  padding: 1.2rem 1.4rem 1.4rem !important;
}

/* Su schermi piccoli un filo piu compatto. */
@media (max-width: 599px) {
  .w-grid.layout_blog_10 .w-grid-item .w-grid-item-h > .w-vwrapper {
    padding: 1rem 1.1rem 1.1rem !important;
  }
}