/* vrv-post-content.css */

/* stessi font sia in modifica (iframe) che in visualizza */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Comic+Neue:wght@300;400;700&family=Baloo+2:wght@400;600;700&display=swap');

:root {
  --vv-content-font: Fredoka, "Baloo 2", "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* contenuto post in VISUALIZZA */
.vv-post-content {
  font-family: var(--vv-content-font);
  line-height: 1.6;
  font-size: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* LA COLONNA DEL POST (vitti 24/10/2026): la larghezza utile del testo e' la
   stessa nell'editor e nell'anteprima, al massimo --vv-colonna. Sotto (tablet,
   telefono) e' larga quanto c'e' posto, con la stessa regola nei due.
   Anteprima: vedi #vv-post-body in theme-default.d/vrv-container.css.
   Editor: il body dell'iframe tiene il riquadro .vv-postbg (cornice 10 + 20 di
   margine per lato = 60). */
:root { --vv-colonna: 1060px; }
body.vv-editor-body {
  max-width: calc(var(--vv-colonna) + 60px);
  margin-inline: auto;
}
html.vv-tutto-schermo:has(body > .vv-postbg) body.vv-editor-body { margin-inline: auto; }

/* contenuto dentro l'IFRAME TinyMCE (MODIFICA) */
.mce-content-body {
  font-family: var(--vv-content-font);
  line-height: 1.6;
  font-size: 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* CARTA del foglio-editor: senza questo il body era trasparente (si vedeva il
     bianco di default dell'iframe); con la "scrivania" grigia dietro (margini)
     il buco si vedeva tutto. Bianco = come la vista col sfondo Predefinito;
     i colori veri li da' il riquadro .vv-postbg dentro il contenuto. */
  background: #fff;
}

/* titoli */
.vv-post-content h1,
.vv-post-content h2,
.vv-post-content h3,
.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3 {
  font-weight: 600;
  margin: 1.2rem 0 .6rem;
}

/* paragrafi */
.vv-post-content p,
.mce-content-body p {
  margin: .4rem 0;
}

/* Immagini: niente francobolli, niente full-width forzato */
.vv-post-content img,
.mce-content-body img {
  /* width/height HTML restano, solo max-width per il responsive */
  height: auto;
  max-width: 100%;
  display: inline-block;
}

.vv-layout-2 img,
.vv-layout-3 img,
.mce-content-body .vv-layout-2 img,
.mce-content-body .vv-layout-3 img {
  width: 100%;
  height: auto;
}

/* layout 2/3 colonne (neutro: niente bordi qui) */
.vv-layout-2,
.vv-layout-3 {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.vv-layout-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vv-layout-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {

  .vv-layout-2,
  .vv-layout-3 {
    grid-template-columns: 1fr;
  }
}

/* 1) REGOLA BASE: MAI width:100% globale sulle immagini del contenuto */
.vv-post-content img {
  max-width: 100%;
  height: auto;
}

/* 2) NELLE GRIGLIE 2/3 COLONNE: rispetta resize e blocca overflow */
.vv-post-content .vv-grid-3>* {
  min-width: 0;
  /* permette ai flex/grid item di restringersi */
}

.vv-post-content .vv-grid-3 img {
  width: auto !important;
  /* niente full width forzato dal resize */
  max-width: 100% !important;
  /* non uscire mai dalla colonna */
  height: auto !important;
  display: inline-block;
  /* evita blocco a tutta riga */
  margin: 0;
  /* niente auto-centering casuale */
  float: none !important;
  /* disattiva float dentro le colonne */
}

/* 3) NELLE GRIGLIE: niente float (altrimenti rompe layout) */
.vv-post-content .vv-grid-3 img[style*="float"] {
  float: none !important;
  margin: 0 !important;
}

/* 4) (opzionale) se dentro colonna vuoi CENTRO “a blocco” quando l’immagine è centrata */
.vv-post-content .vv-grid-3 img[style*="margin: auto"] {
  /* display: block; */
  margin: 0.5em auto !important;
}

/* DEBUG_VV_CSS_20251225_XXXX */
/* 5) Fuori griglia: allineamento foto (testo attorno) */
/* Le foto con la CLASSE (vv-float-left / -right / vv-center) le veste
   vrv-post-content-images.css. Qui restano le foto vecchie, quelle che il
   float ce l'hanno scritto a mano nello stile (5 post). */
.vv-post-content img[style*="float: left"] {
  float: left;
  margin: 0.3em 1em 0.5em 0;
  display: inline-block;
}

.vv-post-content img[style*="float: right"] {
  float: right;
  margin: 0.3em 0 0.5em 1em;
  display: inline-block;
}

.vv-post-content img[style*="float: none"] {
  float: none;
  display: block;
  margin: 0.5em auto;
}

/* Nelle griglie resta come hai già: float none + clamp */

/* ============================== */
/* VV Slot + Carousel (fade)      */
/* ============================== */
/* Base unico per Maserati/Slot */
.vv-slot {
  margin: 14px auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;

  --vv-slot-w: 760px;
  --vv-slot-ar: 16 / 9;
  --vv-slot-pos: 50% 50%;

  width: min(100%, var(--vv-slot-w));
  aspect-ratio: var(--vv-slot-ar);
}

/* POSIZIONE DEL MASERATI NEL TESTO (voce di menu "Posizione nel testo").
   Le classi sono le STESSE gia' usate dalle foto libere: qui si dice solo come
   si comportano quando stanno addosso a una cornice. Su schermo stretto la
   cornice torna larga tutta, che il testo di fianco non si legge. */
.vv-slot.vv-float-left  { float: left;  margin: 6px 18px 10px 0;  max-width: 45%; clear: left;  }
.vv-slot.vv-float-right { float: right; margin: 6px 0 10px 18px;  max-width: 45%; clear: right; }
.vv-slot.vv-center      { float: none;  margin: 14px auto; max-width: 70%; }   /* il 70% arrivava dalla vecchia .vv-center generica */
/* «da solo» (vitti 24/10/2026): contro il bordo, SENZA testo a fianco. Il maserati
   ha overflow:hidden, quindi accanto a una foto flottante si stringe nello spazio
   libero: senza queste due classi li' si centrava e non toccava il margine. */
.vv-slot.vv-solo-left   { float: none;  margin: 14px auto 14px 0; }
.vv-slot.vv-solo-right  { float: none;  margin: 14px 0 14px auto; }

/* ⚠️ IL `clear` NON E' UN VEZZO (20/09/2026, foto di Elena dall'iPad).
   Due figure sullo stesso lato possono finire AFFIANCATE: la seconda non trova
   posto contro il bordo e si mette a fianco della prima. Quello che resta al
   testo e' una striscia, e siccome qui sopra c'e' `overflow-wrap: anywhere` il
   testo non sborda - si SBRICIOLA, una sillaba per riga: «chi / sta / usa /
   ndo / la / pia / tta / forma». Misurato: 12 px di larghezza, 11 righe.
   Con `clear` la seconda figura scende sotto la prima e non puo' succedere.
   Una a sinistra e una a destra restano libere di stare in coppia: ognuna
   scansa solo le sue.
   COME SI RIFA' SENZA UN iPAD: `public/_mastro_render/ipad_20260920/`. Chrome
   da solo NON lo riproduce a nessuna larghezza da 740 a 1400 px, perche' la
   regola `li { display: flow-root list-item }` di vrv-content.css chiude la voce
   di elenco attorno al suo float. L'iPad di Elena ha un Safari che non capisce
   quelle DUE PAROLE insieme e butta via la riga: allora i float sbordano e si
   accavallano. `ipad_vecchio.mjs` spegne quella riga e il guasto si vede. */

@media (max-width: 700px) {
  .vv-slot.vv-float-left,
  .vv-slot.vv-float-right { float: none; margin: 14px auto; max-width: 100%; }
}

/* landscape (XS e XLP aggiunte da vitti 24/10/2026; LG = 1100 e' gia' piu'
   larga della colonna da 1060: e' lei la «tutta larghezza») */
.vv-slot--xs {
  --vv-slot-w: 360px;
  --vv-slot-ar: 16 / 9;
}

.vv-slot--sm {
  --vv-slot-w: 520px;
  --vv-slot-ar: 16 / 9;
}

.vv-slot--md {
  --vv-slot-w: 760px;
  --vv-slot-ar: 16 / 9;
}

.vv-slot--lg {
  --vv-slot-w: 1100px;
  --vv-slot-ar: 16 / 9;
}

/* PANORAMICA (vitti, 03/11/2026: «un maserati ad hoc, lungo e stretto»):
   tutta la colonna, quattro volte piu' larga che alta. Ci nasce dentro da
   sola la foto molto sdraiata (vedi vvInsertImageFromPopup). */
.vv-slot--pano {
  --vv-slot-w: 1100px;
  --vv-slot-ar: 4 / 1;
}

/* STRISCIA (vitti, 03/11/2026: «la cornice precisa sulle dimensioni della
   foto»). Tutta la colonna, e l'altezza la decide la PRIMA foto: la cornice
   non ha proporzioni sue, la prima foto sta «in piano» e le altre (se e'
   uno slideshow) le restano sopra. Nessuna misura scritta nel post: il
   browser legge la foto. Nell'editor la prima e' un <img> diretto, nella
   vista e' la prima diapositiva di vrv-carousel.js. */
.vv-slot.vv-slot--striscia {
  --vv-slot-w: 1100px;
  aspect-ratio: auto;
}
.vv-slot.vv-slot--striscia > img:first-child,
.vv-slot.vv-slot--striscia > .vv-carousel-slide:first-child,
.vv-slot.vv-slot--striscia > .vv-carousel-slide:first-child > .vv-carousel-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.vv-slot.vv-slot--striscia:not(:has(img)) {
  min-height: 90px;   /* vuota non avrebbe altezza: la si deve poter vedere */
}

/* portrait */
.vv-slot--xsP {
  --vv-slot-w: 150px;
  --vv-slot-ar: 3 / 4;
}

.vv-slot--smP {
  --vv-slot-w: 214px;
  --vv-slot-ar: 3 / 4;
}

.vv-slot--mdP {
  --vv-slot-w: 293px;
  --vv-slot-ar: 3 / 4;
}

.vv-slot--lgP {
  --vv-slot-w: 428px;
  --vv-slot-ar: 3 / 4;
}

.vv-slot--xlP {
  --vv-slot-w: 600px;
  --vv-slot-ar: 3 / 4;
}

/* portrait: leggermente più su */
.vv-slot--xsP,
.vv-slot--smP,
.vv-slot--mdP,
.vv-slot--lgP,
.vv-slot--xlP {
  --vv-slot-pos: 50% 40%;
}

/* Ritaglio PER-FOTO: NON si fa piu' con le classi (9 posizioni fisse, e per giunta
   con !important, che vinceva su tutto). Adesso la foto porta i tre numeri
   data-vrp-crop="x y zoom" e il LETTORE UNICO js/vrp_crop.js li traduce in
   object-position + scale quando disegna. Le vecchie classi vv-pos-* dei post gia'
   scritti le traduce lui: il contenuto storico non si tocca. */

/* immagini */
.vv-slot>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: var(--vv-slot-pos);
  opacity: 0;
  transition: opacity .35s ease;
}

/* cover solo per slot omogenei */
.vv-slot:not(.vv-slot--mix)>img {
  object-fit: cover;
}

/* contain + blur solo se mix */
.vv-slot--mix>img {
  object-fit: contain;
}

/* mostra quella attiva */
.vv-slot>img.is-active {
  opacity: 1;
}

.vv-slot>img:first-child {
  opacity: 1;
}

.vv-slot--carousel {
  position: relative;
}

.vv-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

.vv-carousel-slide.is-active {
  opacity: 1;
}

/* Zoom mirato (vrp-lente): le slide stanno una sopra l'altra, quindi i
   riquadri di quelle spente prenderebbero il clic pur non vedendosi. */
.vv-carousel-slide:not(.is-active) .vrp-lente-strato {
  display: none;
}

.vv-carousel-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(12px) brightness(.62);
  transform: scale(1.12);
  opacity: 1;
  display: none;
}

/* blur fallback solo con mix */
.vv-slot--mix .vv-carousel-bg {
  display: block;
}

.vv-carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: var(--vv-slot-pos);
}

.vv-slot:not(.vv-slot--mix) .vv-carousel-img {
  object-fit: cover;
}

.vv-slot--mix .vv-carousel-img {
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .vv-carousel-slide {
    transition: none;
  }
}

/* Editor: slot statico, mostra solo la prima immagine */
body.vv-editor-body .vv-slot--carousel img {
  display: none;
}

body.vv-editor-body .vv-slot--carousel img:first-child {
  display: block;
}

body.vv-editor-body .vv-slot--carousel .vv-carousel-slide {
  transition: none;
  opacity: 0;
  position: relative;
}

body.vv-editor-body .vv-slot--carousel .vv-carousel-slide:first-child {
  opacity: 1;
}

body.vv-editor-body .vv-slot--carousel .vv-carousel-bg {
  display: none;
}

/* ====== EDITOR (TinyMCE iframe): slot statico, 1a immagine visibile ====== */
.mce-content-body .vv-slot--carousel>img {
  display: none;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: none;
}

.mce-content-body .vv-slot--carousel>img:first-child {
  display: block;
}

/* Editor: cornice sempre visibile su tutti gli slot */
body.vv-editor-body .vv-slot,
.mce-content-body .vv-slot {
  outline: 2px dashed #7ab3e0;
  outline-offset: 2px;
}

/* Slot vuoto: placeholder testo centrato */
body.vv-editor-body .vv-slot:not(:has(img))::before,
.mce-content-body .vv-slot:not(:has(img))::before {
  content: '🖼️ Maserati vuoto — aggiungi foto dal menu';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #7ab3e0;
  pointer-events: none;
  text-align: center;
  padding: 8px;
}

/* accessibilità */
@media (prefers-reduced-motion: reduce) {
  .vv-slot>img {
    transition: none;
  }
}

/* --------------------------------------------------
   🌈 Sfondi principali VittRosViaggi
   -------------------------------------------------- */

body.bg-giallo {
  background: #faf3cf;
  /* sabbia / giallo caldo */
  color: #223;
  /* testo scuro leggibile */
}

body.bg-azzurro {
  background: #eaf4ff;
  /* cielo / azzurro chiaro */
  color: #123;
}

body.bg-verde {
  background: #e8f6e0;
  /* verde oliva chiaro */
  color: #1f331f;
}

body.bg-rosa {
  background: #fce8ef;
  /* rosa tenue */
  color: #331f2a;
}

body.bg-arancio {
  background: #fff0dc;
  /* arancio / pesca */
  color: #332012;
}

#vv-post-body hr,
.mce-content-body hr {
  clear: both;
  display: block;
  width: 100%;
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid rgba(120, 140, 160, 0.55);
}

/* ===== MARGINI LATERALI DI TUTTO IL POST (menu Layout -> Margini) =====
   DECISO da vitti 22/07 guardando le due opzioni DAL VIVO (post 164): vince
   l'Opzione 2 "testo rientrato" — il FOGLIO (sfondo colorato) e la CORNICETTA
   restano fermi a tutta larghezza, si sposta SOLO il testo, dei px scelti.
   (L'Opzione 1 "foglio sul tavolo" spostava anche la cornicetta: scartata.)
   La scelta vive NEL CONTENUTO come lo sfondo: marcatore nascosto
   <div class="vv-postmargin vv-mx-*"> in cima. Stessi valori in vista e in
   editor -> le due parti dicono la stessa cosa (morto il "medio pare piccolo"). */
.vv-postmargin { display: none; }

/* In VISTA il padding orizzontale lo detta vrv-container.css via var(--vv-mx, 20px):
   qui si imposta SOLO la variabile (niente guerre di specificita' col suo !important).
   In EDITOR (.mce-content-body) la variabile non c'e': vale il padding-inline diretto. */
#vv-post-body:has(.vv-mx-sm), .mce-content-body:has(.vv-mx-sm) { --vv-mx: 24px; padding-inline: 24px; }
#vv-post-body:has(.vv-mx-md), .mce-content-body:has(.vv-mx-md) { --vv-mx: 56px; padding-inline: 56px; }
#vv-post-body:has(.vv-mx-lg), .mce-content-body:has(.vv-mx-lg) { --vv-mx: 96px; padding-inline: 96px; }

@media (max-width: 700px) {
  #vv-post-body:has(.vv-mx-sm), .mce-content-body:has(.vv-mx-sm),
  #vv-post-body:has(.vv-mx-md), .mce-content-body:has(.vv-mx-md),
  #vv-post-body:has(.vv-mx-lg), .mce-content-body:has(.vv-mx-lg) { --vv-mx: 14px; padding-inline: 14px; }
}

/* Allineamento PER-RIGA ("bottone furbo"): una singola riga di un
   paragrafo multi-riga avvolta in .vv-tline diventa un blocco a se',
   cosi' il text-align (inline, ammesso da valid_styles) la centra/allinea
   da sola senza toccare le altre righe. display:block sta QUI (in
   valid_styles 'display' non c'e' -> l'inline verrebbe strippato).
   La classe la mette/toglie l'editor (js caricaTinyMCE) -> SAFELIST per
   lo sfrondamento CSS, come vv-pos-*. */
.vv-tline { display: block; }