/* LE FOTO LIBERE DEL POST - un posto solo (12/10/2026)
   Vale nella pagina del post (.vv-post-content) e mentre si scrive
   (.mce-content-body): per questo le manopole stanno qui e non nel :root del
   tema, che dentro TinyMCE non entra.
   Prima la stessa «foto a sinistra» era vestita in sette posti (tema,
   vrv-content.css due volte, vrv-post-content.css, questo file, TinyMCE, un JS) e
   vinceva chi gridava !important. Nei post veri le classi stanno solo sulle
   foto e sulle cornici, mai insieme a stili scritti a mano: non c'e' nessuno
   da battere, e gli !important sono spariti.
   Le CORNICI (.vv-slot) con le stesse classi stanno in vrv-post-content.css. */

.vv-post-content,
.mce-content-body {
  --vv-foto-fianco-max: min(50%, 520px);    /* foto con il testo a fianco */
  --vv-foto-centro-max: min(900px, 100%);   /* foto centrata */
  --vv-foto-stacco: 1rem;                   /* aria fra la foto e il testo a fianco */
}

/* tutte le foto, mentre si scrive: mai piu' larghe della colonna
   (nella pagina del post lo dice gia' vrv-post-content.css) */
.mce-content-body img {
  max-width: 100%;
  height: auto;
}

.vv-post-content img.vv-float-left,
.mce-content-body img.vv-float-left {
  float: left;
  display: inline-block;
  margin: 0.35rem var(--vv-foto-stacco) 0.5rem 0;
  max-width: var(--vv-foto-fianco-max);
}

.vv-post-content img.vv-float-right,
.mce-content-body img.vv-float-right {
  float: right;
  display: inline-block;
  margin: 0.35rem 0 0.5rem var(--vv-foto-stacco);
  max-width: var(--vv-foto-fianco-max);
}

.vv-post-content img.vv-center,
.mce-content-body img.vv-center {
  float: none;
  display: block;
  margin: 0.75rem auto;
  max-width: var(--vv-foto-centro-max);
  clear: both;
}

/* MEDAGLIONI (.vv-med-left / .vv-med-right) - i tondini ai lati del testo.
   Classe VECCHIA: le testate di oggi usano .vrs-med (vrv-content.css). Al
   13/10/2026 vive in 4 foto, nel testo dei post 140 e 141, sempre insieme a
   vv-float-*: per questo il blocco sta DOPO le foto a fianco, e vince per
   ordine. Prima era scritto in tre pezzi di vrv-content.css e gridava 13 volte. */
.vv-post-content,
.mce-content-body {
  --vv-foto-med: 220px;                     /* larghezza del medaglione */
}

.vv-post-content img.vv-med-left,
.vv-post-content img.vv-med-right,
.mce-content-body img.vv-med-left,
.mce-content-body img.vv-med-right {
  display: block;
  width: var(--vv-foto-med);
  max-width: var(--vv-foto-med);
  height: auto;
  border: 0;
  border-radius: 8px;
}

.vv-post-content img.vv-med-left,
.mce-content-body img.vv-med-left {
  float: left;
  margin: 0.35rem 1.2rem 0.6rem 0;
}

.vv-post-content img.vv-med-right,
.mce-content-body img.vv-med-right {
  float: right;
  margin: 0.35rem 0 0.6rem 1.2rem;
}

/* schermo stretto: al centro, uno sotto l'altro */
@media (max-width: 700px) {
  .vv-post-content img.vv-med-left,
  .vv-post-content img.vv-med-right,
  .mce-content-body img.vv-med-left,
  .mce-content-body img.vv-med-right {
    float: none;
    margin: 0.5rem auto 0.8rem auto;
    max-width: min(46vw, var(--vv-foto-med));
  }
}

/* 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 {
  grid-template-columns: 1fr;
}

/* 2 colonne (foto+testo / testo+foto) */
.vv-layout-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-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;
}