/* Scoped image helpers for post view and TinyMCE content */

/* Base sizing: responsive without global img rules */
.vv-post-content img,
.mce-content-body img {
  max-width: 100%;
  height: auto;
}

/* Float left (aliases: alignleft, vv-float-left) */
.vv-post-content img.alignleft,
.vv-post-content .alignleft img,
.vv-post-content img.vv-float-left,
.vv-post-content .vv-float-left img,
.mce-content-body img.alignleft,
.mce-content-body .alignleft img,
.mce-content-body img.vv-float-left,
.mce-content-body .vv-float-left img {
  float: left !important;
  display: inline-block !important;
  margin: 0.35rem 1rem 0.5rem 0 !important;
  max-width: min(50%, 520px) !important;
}

/* Float right (aliases: alignright, vv-float-right) */
.vv-post-content img.alignright,
.vv-post-content .alignright img,
.vv-post-content img.vv-float-right,
.vv-post-content .vv-float-right img,
.mce-content-body img.alignright,
.mce-content-body .alignright img,
.mce-content-body img.vv-float-right,
.mce-content-body .vv-float-right img {
  float: right !important;
  display: inline-block !important;
  margin: 0.35rem 0 0.5rem 1rem !important;
  max-width: min(50%, 520px) !important;
}

/* Center (aliases: aligncenter, vv-center) */
.vv-post-content img.aligncenter,
.vv-post-content .aligncenter img,
.vv-post-content img.vv-center,
.vv-post-content .vv-center img,
.mce-content-body img.aligncenter,
.mce-content-body .aligncenter img,
.mce-content-body img.vv-center,
.mce-content-body .vv-center img {
  float: none !important;
  display: block !important;
  margin: 0.75rem auto !important;
  max-width: min(900px, 100%) !important;
  clear: both;
}

/* No float (alias: alignnone) */
.vv-post-content img.alignnone,
.vv-post-content .alignnone img,
.mce-content-body img.alignnone,
.mce-content-body .alignnone img {
  float: none !important;
  display: inline-block !important;
  margin: 0.5rem 0 !important;
}

/* Figure wrappers with TinyMCE align classes */
.vv-post-content figure.alignleft,
.mce-content-body figure.alignleft {
  float: left !important;
  margin: 0.35rem 1rem 0.5rem 0 !important;
}

.vv-post-content figure.alignright,
.mce-content-body figure.alignright {
  float: right !important;
  margin: 0.35rem 0 0.5rem 1rem !important;
}

.vv-post-content figure.aligncenter,
.mce-content-body figure.aligncenter {
  float: none !important;
  display: block;
  margin: 0.75rem auto !important;
  text-align: center;
}

.vv-post-content figure.alignnone,
.mce-content-body figure.alignnone {
  float: none !important;
  margin: 0.5rem 0 !important;
}

.vv-post-content figure.alignleft img,
.vv-post-content figure.alignright img,
.vv-post-content figure.aligncenter img,
.vv-post-content figure.alignnone img,
.mce-content-body figure.alignleft img,
.mce-content-body figure.alignright img,
.mce-content-body figure.aligncenter img,
.mce-content-body figure.alignnone img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Clear helper */
.vv-post-content .vv-clear,
.mce-content-body .vv-clear {
  clear: both;
}
/* === VRV Layout blocks (TinyMCE) ========================================= */
/* Supporta sia i nuovi vv-layout-* che eventuali legacy vv-grid-* */

.vv-layout,
.vv-grid {
  display: grid;
  gap: 14px;
  margin: 12px 0;
  align-items: start;
}

/* 1 colonna */
.vv-layout-1,
.vv-grid-1 {
  grid-template-columns: 1fr;
}

/* 2 colonne (foto+testo / testo+foto) */
.vv-layout-2,
.vv-grid-2 {
  grid-template-columns: 1fr 1fr;
}

/* 3 colonne (galleria / composizione) */
.vv-layout-3,
.vv-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Mobile: tutto in colonna */
@media (max-width: 900px) {
  .vv-layout-2,
  .vv-grid-2,
  .vv-layout-3,
  .vv-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Immagini dentro i layout: mai “a misura attributi width/height” */
.vv-layout img,
.vv-grid img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Evita spazi strani dei <p> vuoti/nbsp dentro blocchi layout */
.vv-layout p,
.vv-grid p {
  margin: 0;
}