/* vv-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;
}

/* 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;
}

/* 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;
}

/* VISUALIZZA: immagini responsive ma rispettano width/height se presenti */
.vv-post-content img:not([width]):not([height]) {
  max-width: 100%;
  height: auto;
  /* NON mettere width:100% qui */
}

.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,
.vv-post-content figure img {
  max-width: 100%;
  height: auto;
}

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

.vv-post-content .vv-grid-2 img,
.vv-post-content .vv-grid-3 img,
.vv-post-content .vv-grid-2 figure img,
.vv-post-content .vv-grid-3 figure 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-2 img[style*="float"],
.vv-post-content .vv-grid-3 img[style*="float"],
.vv-post-content .vv-grid-2 .alignleft,
.vv-post-content .vv-grid-2 .alignright,
.vv-post-content .vv-grid-3 .alignleft,
.vv-post-content .vv-grid-3 .alignright {
  float: none !important;
  margin: 0 !important;
}

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

/* DEBUG_VV_CSS_20251225_XXXX */
/* 5) Fuori griglia: allineamento foto (testo attorno) */
.vv-post-content img.vv-float-left,
.vv-post-content img[style*="float: left"],
.vv-post-content .alignleft {
  float: left;
  margin: 0.3em 1em 0.5em 0;
  display: inline-block;
}

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

.vv-post-content img.vv-center,
.vv-post-content img[style*="float: none"],
.vv-post-content .aligncenter {
  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);
}

/* landscape */
.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;
}

/* portrait */
.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;
}

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

/* 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;
}

.vv-carousel-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(18px);
  transform: scale(1.08);
  opacity: .35;
  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);
}