/*
Theme Name: palazzettomarcello
Theme : http://wordpress.org/themes/twentythirteen
Author: Luca Zoccola
Author URI: http://wordpress.org/
Description:
Version: 1.4
Tested up to: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, sticky-post, translation-ready
Text Domain: palazzettomarcello

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ----------------------------------------------------------
   FONT
---------------------------------------------------------- */
@font-face {
  font-family: 'Pilota';
  src: url('fonts/PilotaRTMBeta-Bold.woff2') format('woff2'),
       url('fonts/PilotaRTMBeta-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* corsivo (Bold Italic): si usa da solo con <em> / <i> o font-style: italic */
@font-face {
  font-family: 'Pilota';
  src: url('fonts/PilotaRTMBeta-BoldItalic.woff2') format('woff2'),
       url('fonts/PilotaRTMBeta-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------
   BASE
---------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #EDEAE1 !important;
  color: #536669 !important;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.5px;
  overflow-x: hidden;
  padding: 0px !important;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  padding-left: calc(7.5px + env(safe-area-inset-left, 0px));
  padding-right: calc(7.5px + env(safe-area-inset-right, 0px));
}

.row {
  --bs-gutter-x: 10px;
  margin-left: -5px;
  margin-right: -5px;
}

.row > * {
  padding-left: 5px;
  padding-right: 5px;
}

/* righe senza spazi: colonne attaccate */
.row.no-gutters,
.row.g-0 {
  --bs-gutter-x: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.row.no-gutters > *,
.row.g-0 > * {
  padding-left: 0px;
  padding-right: 0px;
}

p {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  color: #536669 !important;
}

.pm-footer-descrizione1 p {  
  line-height: 19px !important;
  letter-spacing: -0.5px;
  color: #536669 !important;
}
  
.pm-footer-descrizione2 p {  
  line-height: 19px !important;
}


a {
  display: inline;
  color: inherit !important;
  text-decoration: none;
}

/* passando sopra, i link NON si sottolineano (prima: sottolineatura 2px all'hover).
   I link che sono già sottolineati di loro (link nei testi, h5 a…) restano sottolineati come sono.
   Senza !important di proposito: così non toglie la sottolineatura a quei link */
a:hover {
  text-decoration: none;
}

/* footer: nessuna sottolineatura all'hover, anche se un'altra regola (es. Bootstrap) la mettesse.
   ITA / ENG della lingua attiva resta sottolineato (regola più forte in footer.php) */
.site-footer a:hover {
  text-decoration: none !important;
}

h5 a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

img {
  border-radius: 5px !important;
}

/* le immagini dell'intro in home restano a filo, senza angoli arrotondati */
.pm-intro img {
  border-radius: 0 !important;
}

#trp-floater-ls {
  display: none !important;
}

/* ----------------------------------------------------------
   TITOLI
---------------------------------------------------------- */
h1 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 3.2vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}

h2 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 2.25vw !important;
  line-height: 2.25vw !important;
  letter-spacing: -0.9px;
  color: #536669 !important;
}

h3 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px !important;
  line-height: 35px !important;
  letter-spacing: -0.66px;
  color: #536669 !important;
}

h4 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  color: #536669 !important;
}

h5 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: -0.27px;
  color: #536669 !important;
}

h6 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8px !important;
  line-height: 10px !important;
  letter-spacing: -0.16px;
  color: #536669 !important;
}

.big-h1 h1 {
  text-align: center;
}

/* ----------------------------------------------------------
   CLASSI USATE SUI CONTENITORI (es. campi ACF, footer)
---------------------------------------------------------- */
.h1 p {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 3.2vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}

.h1-footer {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 3.2vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}

.h2 p {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.25vw !important;
  line-height: 2.25vw !important;
  letter-spacing: -0.9px;
  color: #536669 !important;
}

.h3 p {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px !important;
  line-height: 35px !important;
  letter-spacing: -0.66px;
  color: #536669 !important;
}

.widget-title {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  color: #536669 !important;
}

.footer-text p {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  color: #536669 !important;
}

.didascalie-footer {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8px !important;
  line-height: 10px !important;
  letter-spacing: -0.16px;
  color: #536669 !important;
}

.didascalie-footer p {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8px !important;
  line-height: 10px !important;
  letter-spacing: -0.16px;
  color: #536669 !important;
}

/* ----------------------------------------------------------
   CLASSI DI TESTO (la misura senza cambiare il tag)
---------------------------------------------------------- */
/* titoli 3.2vw */
.pm-h1 {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 2.8vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}

.pm-h1 p{
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 2.8vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}



/* strilli 2.25vw */
.pm-big {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 2.8vw !important;
  letter-spacing: -0.9px;
  color: #536669 !important;
}

/* date di apertura 28px */
.pm-date {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px !important;
  line-height: 35px !important;
  letter-spacing: -0.66px;
  color: #536669 !important;
}

/* testi medi 22px */
.pm-md {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 3.2vw !important;
  line-height: 2.8vw !important;
  letter-spacing: -1.2px;
  color: #536669 !important;
}

.pm-event__type {
    font-size: 16px !important;
  line-height: 16px !important;
  text-transform: uppercase;
}

/* switch IT/EN e piccoli testi 13px */
.pm-sm {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: -0.27px;
  color: #536669 !important;
}

/* crediti footer 8px */
.pm-xs {
  margin: 0;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 8px !important;
  line-height: 10px !important;
  letter-spacing: -0.16px;
  color: #536669 !important;
}

/* ----------------------------------------------------------
   MISURA INTERMEDIA (da 992px a 1199px): i titoli grandi decisamente più grandi (5.5vw invece di 3.2vw)
   Vale per tutto il sito: titoli delle mostre, artisti (es. "Luca Bertolo"), titoli delle sezioni,
   titoli degli eventi… Da 1200px in su e da tablet in giù non cambia niente
---------------------------------------------------------- */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  h1,
  .h1 p,
  .h1-footer {
    font-size: 5.5vw !important;
    line-height: 5.5vw !important;
  }

  .pm-h1,
  .pm-h1 p,
  .pm-big,
  .pm-md {
    font-size: 5.5vw !important;
    line-height: 4.8vw !important; /* stessa proporzione di 3.2vw / 2.8vw */
  }
}

/* ----------------------------------------------------------
   BOTTONI — tre tipi
   1. normale → .pm-btn
      (stesso stile anche per button, .btn, input submit e bottoni dei blocchi WP)
   2. banda   → .pm-btn .pm-btn--gold    bande che scorrono: stile normale, fondo dorato
   3. header  → .pm-btn .pm-btn--header  "Oggi aperto" / "Oggi chiuso": piccolo, 13px
                (lo usa anche il "Chiudi" del lightbox, con i suoi colori)
   Tutti uguali: 22px di testo, 3px sopra e sotto e stessa larghezza (tranne quello dell'header
   e Indietro / Avanti della collezione, che dividono a metà il loro spazio).
   La larghezza si cambia in un punto solo, "LARGHEZZA DEI BOTTONI" qui sotto, e vale ovunque.
   Se un bottone sta per uscire dal suo contenitore si stringe fino alla sua larghezza,
   e solo se il testo non ci sta più va a capo.
   HOVER: tutti uguali, fondo blu #536669 (il colore dei testi) e testo panna #EDEAE1
   (normali, dorati, quello dell'header, quelli degli eventi).
   Eccezione: sulle card eventi blu #536669 il bottone all'hover è panna con testo blu scuro #334240
---------------------------------------------------------- */

/* 1. normale */
.pm-btn,
.btn,
button,
input[type="submit"],
.wp-block-button__link {
  display: inline-block;
  padding-top: 3px;
  padding-right: 13px;
  padding-bottom: 3px;
  padding-left: 13px;
  border: 0;
  outline: none;
  border-radius: 5px !important;
  background: #BABCAD;
  color: #EDEAE1 !important;
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  text-align: center;
  text-decoration: none !important;
  text-transform:uppercase;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}

/* LARGHEZZA DEI BOTTONI: si cambia solo qui e vale per tutti
   (Google Maps, Contattaci, Prenota ora nelle bande e negli eventi, Scopri di più…).
   È la larghezza del bottone "Prenota ora" nelle card degli eventi: metà dello spazio interno
   della card (card = 1/3 dello schermo, meno 7.5px di margine per lato), quindi
   (33.3333vw - 15px) / 2 = 16.6667vw - 7.5px. Così è uguale in tutto il sito.
   (prima era 350px) */
.pm-btn,
.btn,
input[type="submit"],
.wp-block-button__link {
  width: calc(16.6667vw - 7.5px);
  min-width: 0px;
  max-width: 100%;
}

/* schermi desktop piccoli (da 992px a 1299px): con 1/6 dello schermo i bottoni sarebbero troppo stretti,
   quindi qui sono larghi il 25% dello schermo. Regola qui */
@media screen and (min-width: 992px) and (max-width: 1299px) {
  .pm-btn,
  .btn,
  input[type="submit"],
  .wp-block-button__link {
    width: 25vw;
  }
}

.pm-btn:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background: #536669;
  color: #EDEAE1 !important;
  text-decoration: none !important;
}

.pm-btn:focus-visible,
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 1px solid #536669;
  outline-offset: 3px;
}

/* 2. banda che scorre: fondo dorato */
.pm-btn.pm-btn--gold {
  background: #908C69;
  color: #EDEAE1 !important;
}

.pm-btn.pm-btn--gold:hover {
  background: #536669;
  color: #EDEAE1 !important;
}

/* 3. header: piccolo, 13px, con la sua larghezza */
.pm-btn.pm-btn--header {
  width: auto;
  min-width: min(225px, 100%);
  padding: 3px 10px;
  font-size: 13px !important;
  line-height: 13px !important;
  letter-spacing: -0.28px;
  background-color: #908C69;
  color: white !important;
}

.pm-btn.pm-btn--header:hover {
  background: #536669;
  color: #EDEAE1 !important;
}

/* "Oggi chiuso": stesso bottone, ma non cliccabile e senza hover */
.pm-btn.pm-btn--header.is-closed {
  color: #EDEAE1 !important;
  cursor: default;
}

.pm-btn.pm-btn--header.is-closed:hover {
  background: #BABCAD;
  color: #EDEAE1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .pm-btn,
  .btn,
  button,
  input[type="submit"],
  .wp-block-button__link {
    transition-duration: 1ms;
  }
}

/* ----------------------------------------------------------
   BANDA CHE SCORRE ALL'INFINITO — uguale in Visita e Il Palazzo
   bottone dorato "Prenota ora" + "Scopri i prossimi eventi…", ripetuti.
   La distanza dal blocco sopra (margin-top) la decide ogni pagina
---------------------------------------------------------- */
/* esce dal container e occupa tutta la larghezza dello schermo */
.pm-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: #BABCAD;
}

/* due metà identiche: quando la prima è uscita del tutto, la seconda è esattamente al suo posto */
.pm-marquee__track {
  display: flex;
  width: max-content;
  animation: pm-marquee 70s linear infinite; /* velocità: più secondi = più lenta (prima 40s). Regola qui */
}

/* passando sopra con il mouse la banda si ferma, così il bottone si clicca comodamente */
.pm-marquee:hover .pm-marquee__track {
  animation-play-state: paused;
}

.pm-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.pm-marquee__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 20px; /* spazio tra bottone e scritta: deve essere uguale a padding-right */
  padding-top: 5px;
  padding-right: 20px; /* spazio tra la scritta e il bottone successivo */
  padding-bottom: 5px;
  padding-left: 0px;
}

/* nella banda il bottone non si stringe mai (lo spazio è infinito):
   ha la larghezza di tutti i bottoni e il testo su una riga, così non finisce sopra alla scritta */
.pm-marquee__item .pm-btn {
  flex-shrink: 0;
  max-width: none;
  white-space: nowrap;
}

.pm-marquee__text {
  flex-shrink: 0;
  margin: 0px !important;
  font-size: 22px !important;
  line-height: 22px !important;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: #536669 !important;
}

@keyframes pm-marquee {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-50%);
  }
}

/* desktop (da 992px): bottone più staccato dal testo, a sinistra e a destra (prima 20px). Regola qui */
@media screen and (min-width: 992px) {
  .pm-marquee__item {
    gap: 80px;           /* bottone → scritta (prima 40px) */
    padding-right: 80px; /* scritta → bottone successivo (prima 40px) */
  }
}

/* mobile: spazi più stretti (sempre uguali ai due lati) */
@media screen and (max-width: 767px) {
  .pm-marquee__item {
    gap: 10px;
    padding-right: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-marquee__track {
    animation: none;
  }
}

/* ----------------------------------------------------------
   ANIMAZIONI
---------------------------------------------------------- */
.animated {
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fade in leggero: solo opacità, nessuno spostamento */
.animated.fadeIn {
  transform: none;
  animation-name: fadeIn;
  animation-duration: 800ms;
  animation-timing-function: ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* il contenuto sotto all'header entra poco dopo */
.site-main .animated.fadeIn {
  animation-delay: 150ms;
}

/* se in home c'è l'intro, le animazioni aspettano che finisca */
html:not(.pm-intro-seen):has(#pm-intro) .animated {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animated.fadeIn {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

.logo-svg-inline svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Navbar Header
-------------------------------------------------------- */

.navbar {
  padding-right: 2vw !important;
  padding-left: 2vw !important;
}

.menu-item {
  font-family: 'Pilota', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2vw !important;
  margin-right: 11vw !important;
}

/* voce del menu: all'hover nessuna sottolineatura (resta sottolineata solo quella della pagina attiva) */
a.menu-item:hover {
  font-size: 2vw !important;
}

a.menu-item.active {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
}

a.navbar-brand {
  font-size: 16px;
}

a.navbar-brand:hover {
  font-size: 16px !important;
}

nav {
  padding: 0px !important;
}

.logo-svg {
  transition: opacity 0.3s ease-in-out;
  width: 100% !important;
  align-items: normal;
}

.logo-hidden .logo-svg {
  opacity: 0;
  pointer-events: none;
}


/* info carosello
-------------------------------------------------------- */

.carousel-control-prev {
  width: 25vw !important;
  cursor: url('https://palazzettomarcellonetwork.it/wp-content/themes/palazzettomarcello/img/arrow-left-sm.svg'), auto !important;
}

.carousel-control-next {
  cursor: url('https://palazzettomarcellonetwork.it/wp-content/themes/palazzettomarcello/img/arrow-right-sm.svg'), auto !important;
  width: 25vw !important;
}

.carousel,
.carousel-inner,
.carousel-item {
  height: auto;
  box-sizing: border-box;
}

#next-button {
  cursor: url('https://palazzettomarcellonetwork.it/wp-content/themes/palazzettomarcello/img/arrow-right-sm.svg'), default !important;
  height: 100vh;
}

#previous-button {
  cursor: url('https://palazzettomarcellonetwork.it/wp-content/themes/palazzettomarcello/img/arrow-left-sm.svg'), default !important;
  height: 100vh;
}

.baguetteBox-button#previous-button {
  width: 48% !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0% !important;
}

.baguetteBox-button#next-button {
  width: 48% !important;
  height: 100vh !important;
  position: fixed !important;
  top: 0% !important;
}

.img-middle {
  display: flex;
  align-items: center;
  padding-left: 6vw !important;
  padding-right: 6vw !important;
  padding-bottom: 8vw !important;
  padding-top: 4vw !important;
}


/* navbar
-------------------------------------------------------- */
.main-header {
  background: #fff;
  padding: 13px 0;
  z-index: 999;
}

/* MENU DESKTOP */
.menu-desktop {
  gap: 2vw;
}

.menu-desktop li {
  list-style: none;
}

.menu-desktop a {
  text-decoration: none;
}

/* HAMBURGER */
.hamburger {
  width: 50px;
  max-width: 50px !important;
  min-width: 50px !important;
  height: 22px;
  padding: 0px !important;
  position: relative;
  border: none;
  background: none;
  box-shadow: none !important;
}

.hamburger:hover {
  background: none;
}

.hamburger span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #000;
  left: 0;
  transition: 0.3s ease;
}

/* 3 linee */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* trasformazione in X */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}

/* MOBILE MENU */
.mobile-menu {
  position: fixed;
  top: 70px; /* altezza header */
  left: 0;
  width: 100%;
  max-height: 60vh; /* <-- NON fullscreen */
  background: #fff;
  z-index: 998;

  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;

  transition: 0.3s ease;
  overflow-y: auto;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.mobile-menu.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#menu-overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 997;
}

#menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* il contenuto occupa almeno tutto lo schermo: il footer resta sempre sotto */
main {
  min-height: 100vh;
  box-sizing: border-box;
}

.site-main {
  min-height: 100vh;
  box-sizing: border-box;
}

#primary {
  min-height: 100vh;
  box-sizing: border-box;
}



/* QUERY menu-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 991px) and (max-height: 2366px){

}



@media screen and (max-width: 568px) and (max-height: 2366px){
}


@media screen and (max-width: 500px) and (max-height: 2366px){

}

@media screen and (max-width: 450px) and (max-height: 2366px){

}

@media screen and (max-width: 400px) and (max-height: 2366px){

}

@media screen and (max-width: 350px) and (max-height: 2366px){
 
}

@media screen and (max-width: 300px) and (max-height: 2366px){

}

@media screen and (max-width: 250px) and (max-height: 2366px){

}


/* QUERY IPHONE VERTICALE-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 450px) and (max-height: 2366px){

}

/* QUERY IPHONE 5S ORIZZONTALE -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 900px) and (max-height: 420px){


}



/* =WordPress Core/ CLASSI CSS
--------------------------------------------------------------- */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17.5px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 13px 24px 13px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}


/* ##########################################################
   STILI DELLE PAGINE
   Stanno in fondo al file apposta: così vincono sulle regole generali
   esattamente come quando erano dentro le singole pagine.
   Ogni regola è legata alla sua pagina (.pm-visit, .pm-palace, .pm-events, .pm-show…),
   quindi non tocca le altre.
########################################################## */

/* ==========================================================
   HOME — INTRO
   front-page.php · i tempi sono nello script della pagina (T)
========================================================== */
/* intro già vista: non viene mostrata */
html.pm-intro-seen #pm-intro {
  display: none !important;
}

/* mentre c'è l'intro il contenuto della home è già al suo posto, visibile sotto:
   quando lo sfondo blu sfuma si vede subito, senza aspettare la sua dissolvenza */
html.pm-intro-played .animated {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* blocca lo scroll finché l'intro è nel DOM (solo se va mostrata) */
html:not(.pm-intro-seen):has(#pm-intro) {
  overflow: hidden;
}

html:not(.pm-intro-seen):has(#pm-intro) body {
  overflow: hidden;
}

/* ---------- contenitore intro ---------- */
.pm-intro {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  background: #334240;
  transition: opacity 1000ms cubic-bezier(.22, .61, .36, 1); /* fade out finale, lento: deve combaciare con T.out in front-page.php */
}

.pm-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ---------- coppie 50 / 50 ----------
   tutte partono invisibili: ognuna compare solo quando le sue due immagini sono scaricate
   e pronte (lo decide lo script di front-page.php), così non si vedono mai a metà */
.pm-intro__pair {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  display: flex;
  z-index: 1;
  opacity: 0;
  transition: opacity 300ms ease-out; /* dissolvenza tra una coppia e l'altra: breve, quasi uno stacco morbido */
  will-change: opacity;
}

.pm-intro__pair.is-active {
  opacity: 1;
}

.pm-intro__pair figure {
  width: 50%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.pm-intro__pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0px !important;
}

/* ---------- sfondo finale ---------- */
.pm-intro__final {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  background: #536669;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}

.pm-intro__final.is-active {
  opacity: 1;
}

/* ---------- logo centrato ---------- */
.pm-intro__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 97vw !important; /* larghezza del logo da desktop (prima per errore 911vw: il logo era 9 volte lo schermo e non si vedeva) */
  z-index: 3;
  pointer-events: none;
}

.pm-intro__logo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px !important;
}

/* ---------- mobile ---------- */
@media screen and (max-width: 1024px) {
  .pm-intro__logo {
    width: 96.11vw !important;
  }
}

/* ---------- telefono (fino a 767px): taglio della PRIMA coppia verso il centro ----------
   Solo la prima coppia (le altre restano tagliate al centro). Invece di tagliarla al centro:
   - immagine di sinistra: allineata a destra → si taglia la sua parte sinistra
   - immagine di destra:  allineata a sinistra → si taglia la sua parte destra
   così le due immagini si "incontrano" al centro dello schermo con il loro lato interno */
@media screen and (max-width: 767px) {
  .pm-intro__pair:first-child figure:first-child img {
    object-position: right center;
  }

  .pm-intro__pair:first-child figure:last-child img {
    object-position: left center;
  }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .pm-intro {
    transition-duration: 1ms;
  }

  .pm-intro__pair {
    transition-duration: 1ms;
  }

  .pm-intro__final {
    transition-duration: 1ms;
  }
}


/* ==========================================================
   HOME — MOSTRE
   front-page.php
========================================================== */
.pm-shows {
  margin-top: calc(var(--pm-band-top, 0px) * -1);
  padding-top: 0px;
  padding-bottom: 0px;
}

/* ogni mostra occupa tutto lo schermo e i due quadrati stanno al centro,
   in orizzontale e in verticale */
.pm-show {
  min-height: 100vh;
  min-height: 100svh; /* su mobile: altezza vera, senza la barra del browser */
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  box-sizing: border-box;
}

/* da desktop grande (da 1200px): i due quadrati un po' più piccoli e sempre centrati.
   Prima occupavano 8 colonne su 12 (66.67% dello schermo, ogni quadrato 33.3%);
   ora il 60% (ogni quadrato 30%). Per cambiarli regola solo --pm-show-w */
@media screen and (min-width: 1200px) {
  .pm-show {
    --pm-show-w: 60%;
  }

  .pm-show > .col-lg-8 {
    flex: 0 0 var(--pm-show-w);
    width: var(--pm-show-w);
    max-width: var(--pm-show-w);
    margin-left: calc((100% - var(--pm-show-w)) / 2);
  }
}

/* i due quadrati sono un unico link verso l'articolo */
.pm-show .pm-show__link {
  color: inherit !important;
  text-decoration: none !important;
}

.pm-show .pm-show__link:hover {
  text-decoration: none !important;
}

/* quadrato sinistro: informazioni */
.pm-show .pm-show__info {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  padding: 5px;
  box-sizing: border-box;
}

/* i testi prendono il colore scelto, non quello globale */
.pm-show .pm-show__info p {
  color: inherit !important;
}

.pm-show .pm-show__info h1 {
  color: inherit !important;
}

/* date: inizio sul vertice sinistro, fine sul vertice destro */
.pm-show .pm-show__dates {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.pm-show .pm-show__artists {
  margin-top: 0px !important;
}

/* titolo: parte dal vertice in basso a sinistra e cresce verso l'alto */
.pm-show .pm-show__title {
  margin-top: auto;
  padding-top: 0px;
}

/* quadrato destro: immagine in evidenza */
.pm-show .pm-show__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #BABCAD;
}

.pm-show .pm-show__image img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0px !important;
}

/* ---------- da 768px a 1199px ----------
   i due quadrati restano affiancati (anche con l'immagine a sinistra nelle mostre pari)
   ma più grandi: tutta la larghezza, ognuno metà schermo.
   Restano centrati in verticale nello schermo, come da desktop */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .pm-show > .col-lg-8 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
  }

  /* a tutta larghezza senza margini: i quadrati arrivano ai bordi dello schermo (full bleed) */
  .pm-shows .container-fluid {
    padding-left: 0px;
    padding-right: 0px;
  }

  .pm-shows .pm-show {
    margin-left: 0px;
    margin-right: 0px;
  }

  .pm-shows .pm-show > .col-lg-8 {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* ---------- telefono (fino a 767px) ----------
   solo qui i due quadrati vanno uno sotto l'altro: immagine sopra e informazioni sotto,
   con una colonna su 12 di spazio ai lati. Niente centratura sull'altezza dello schermo:
   la prima mostra parte sotto l'header e ci finisce sotto solo scorrendo */
@media screen and (max-width: 767px) {
  /* niente margine negativo: il contenuto parte sotto l'header */
  .pm-shows {
    margin-top: 0px;
  }

  /* ogni mostra alta quanto il suo contenuto, con spazio sopra e sotto */
  .pm-show {
    min-height: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* la card al centro: a destra e a sinistra lo spazio di una colonna su 12 (8.3333%) */
  .pm-show > .col-12 {
    padding-left: 8.3333%;
    padding-right: 8.3333%;
  }

  /* i due quadrati uno sotto l'altro, sempre immagine sopra e informazioni sotto
     (anche nelle mostre che da desktop hanno l'immagine a sinistra) */
  .pm-show .pm-show__link {
    flex-direction: column-reverse !important;
  }

  .pm-show .pm-show__info {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }

  .pm-show .pm-show__image {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
}


/* ==========================================================
   PAGINA EVENTI
   page-eventi.php
========================================================== */
.pm-events {
  padding-top: 0px; /* la prima riga parte senza margine sopra */
  padding-bottom: 30px;
}

/* nessun margine laterale: le card arrivano ai bordi dello schermo */
.pm-events .container-fluid {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

/* card attaccate tra loro ai lati, spazio tra una riga di tre e la successiva */
.pm-events .pm-events__grid {
  row-gap: 60px; /* spazio tra le righe: regola qui */
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* da mobile: una card sotto l'altra, attaccate */
@media screen and (max-width: 767px) {
  .pm-events .pm-events__grid {
    row-gap: 0px;
  }
}

.pm-events .pm-event-col {
  position: relative;
  padding-left: 0px !important;
  padding-right: 0px !important;
  margin-bottom: 0px;
}

/* la card che sta girando passa sopra alle vicine */
.pm-events .pm-event-col.is-turning {
  z-index: 2;
}

/* ---------- prisma che ruota ---------- */
/* il "palcoscenico" 3D: quadrato, con la prospettiva (più è bassa, più la rotazione è profonda) */
.pm-events .pm-flip {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1000px;
  --pm-depth: 0px; /* metà della larghezza della card: la imposta lo script */
}

/* la scatola che ruota davvero: il centro di rotazione è il centro del prisma */
.pm-events .pm-flip__box {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--pm-depth) * -1)) rotateY(0deg);
}

/* l'animazione c'è solo mentre la card gira (lo script aggiunge .is-animating al click):
   così all'apertura della pagina, o quando si ridimensiona la finestra, non c'è nessun effetto zoom */
.pm-events .pm-flip.is-animating .pm-flip__box {
  transition: transform 800ms ease;
}

/* girata: il fianco destro viene davanti */
.pm-events .pm-flip.is-open .pm-flip__box {
  transform: translateZ(calc(var(--pm-depth) * -1)) rotateY(-90deg);
}

/* le due facce: quando girano di spalle spariscono */
.pm-events .pm-flip__face {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}

/* solo la faccia rivolta verso chi guarda riceve i click:
   quella girata di spalle, anche se invisibile, non deve mai stare sopra ai bottoni */
.pm-events .pm-flip:not(.is-open) .pm-flip__side {
  pointer-events: none;
}

.pm-events .pm-flip.is-open .pm-flip__front {
  pointer-events: none;
}

/* card girata, rotazione finita: la faccia di lato viene "appiattita".
   Ha esattamente lo stesso aspetto, ma senza trasformazioni 3D, perché dentro una faccia
   ruotata in 3D i browser non sempre fanno arrivare hover e click ai bottoni (es. "Prenota ora").
   La classe is-flat la mette e la toglie lo script di page-eventi.php */
.pm-events .pm-flip.is-flat .pm-flip__box {
  transform: none;
}

.pm-events .pm-flip.is-flat .pm-flip__side {
  transform: none;
}

.pm-events .pm-flip.is-flat .pm-flip__front {
  visibility: hidden;
}

/* faccia davanti */
.pm-events .pm-flip__front {
  transform: rotateY(0deg) translateZ(var(--pm-depth));
}

/* faccia di lato: il fianco destro del prisma, fondo panna.
   Sopra il testo, che scorre dentro la card; sotto, ferma, la riga con tipologia e bottoni */
.pm-events .pm-flip__side {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 7.5px; /* uguale alla faccia davanti: la riga sotto resta nello stesso punto */
  background: #EDEAE1;
  transform: rotateY(90deg) translateZ(var(--pm-depth));
}

/* testo dell'evento: prende tutto lo spazio sopra la riga in basso e, se è lungo, scorre lì dentro */
.pm-events .pm-flip__text {
  flex: 1 1 auto;
  min-height: 0px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* riga in basso della faccia di lato: fondo panna pieno, così il testo che scorre non ci passa sopra */
.pm-events .pm-flip__side .pm-event__bottom {
  flex: 0 0 auto;
  margin-top: 0px;
  padding-top: 7.5px;
  background: #EDEAE1;
}

.pm-events .pm-flip__side p {
  color: #536669 !important;
}

.pm-events .pm-flip__side p + p {
  margin-top: 25px !important;
}

/* solo i link dentro il testo sono sottolineati, non i bottoni */
.pm-events .pm-flip__text a {
  text-decoration: underline !important;
}

@media (prefers-reduced-motion: reduce) {
  .pm-events .pm-flip.is-animating .pm-flip__box {
    transition-duration: 1ms;
  }
}

/* ---------- contenuto della card ---------- */
/* card: testi sempre #EDEAE1 (la forma quadrata la dà .pm-flip) */
.pm-events .pm-event {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 7.5px;
  box-sizing: border-box;
  border-radius: 0px;
  color: #EDEAE1 !important;
}

.pm-events .pm-event p {
  color: #EDEAE1 !important;
}

.pm-events .pm-event h1 {
  color: #EDEAE1 !important;
}

/* solo il link del titolo: i bottoni hanno i loro colori */
.pm-events .pm-event .pm-event__title a {
  color: #EDEAE1 !important;
  text-decoration: none !important;
}

/* il titolo non si sottolinea passandoci sopra (la regola generale dei link lo farebbe) */
.pm-events .pm-event .pm-event__title a:hover {
  text-decoration: none !important;
}

/* in alto: data di inizio sul vertice sinistro, data di fine sul vertice destro */
.pm-events .pm-event__dates {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

/* titolo sotto le date */
.pm-events .pm-event__title {
  margin-top: 0px;
}

/* in basso: tipologia a sinistra, bottone a destra, centrati tra loro in verticale */
.pm-events .pm-event__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 0px;
}

/* tipologia: prende lo spazio che resta e, se serve, va a capo */
.pm-events .pm-event__type {
  flex: 1 1 auto;
  min-width: 0px;
}

/* bottoni: da desktop solo "Prenota ora".
   Larghezza uguale a tutti i bottoni del sito; se la card è stretta si stringono e non escono mai */
.pm-events .pm-event__actions {
  display: flex;
  flex: 0 1 auto;
  justify-content: flex-end;
  min-width: 0px;
  gap: 5px;
}

/* bottoni della card: misure da style.css, qui solo il fondo chiaro */
.pm-events .pm-event .pm-btn {
  background: #EDEAE1;
}

/* testo del bottone = colore di sfondo della sua card
   (la classe pm-event--xxxxxx la mette page-eventi.php: una regola per ogni colore delle card) */
.pm-events .pm-event--334240 .pm-btn {
  color: #334240 !important;
}

.pm-events .pm-event--908C69 .pm-btn {
  color: #908C69 !important;
}

.pm-events .pm-event--BABCAD .pm-btn {
  color: #BABCAD !important;
}

.pm-events .pm-event--536669 .pm-btn {
  color: #536669 !important;
}

/* hover: come tutti i bottoni, blu #536669 con testo panna */
.pm-events .pm-event .pm-btn:hover {
  background: #536669;
  color: #EDEAE1 !important;
}

/* card blu #536669: il bottone blu sparirebbe nella card, quindi all'hover è panna con testo blu scuro */
.pm-events .pm-event--536669 .pm-btn:hover {
  background: #EDEAE1;
  color: #334240 !important;
}

/* ---------- faccia di lato: stessa riga, su fondo panna ----------
   tipologia del colore dei testi (#536669, come i paragrafi della faccia di lato)
   e bottoni normali come tutti gli altri del sito: nessuna regola in più */

/* da desktop (da 992px): il bottone ha la larghezza comune di tutti i bottoni
   ("LARGHEZZA DEI BOTTONI", che corrisponde a metà della card) e non supera mai metà della riga;
   la tipologia prende l'altra metà, andando a capo se serve: così non si sovrappongono mai */
@media screen and (min-width: 992px) {
  .pm-events .pm-event__actions {
    flex: 0 0 auto;
    max-width: 50%;
  }

  .pm-events .pm-event__type {
    flex: 1 1 0px;
    min-width: 0px;
    overflow-wrap: anywhere;
  }
}

/* "Scopri di più" c'è solo da mobile */
.pm-events .pm-event__more {
  display: none;
}

/* ---------- mobile: tipologia sopra, sotto "Scopri di più" e "Prenota ora" al 50% ciascuno ---------- */
@media screen and (max-width: 767px) {
  .pm-events .pm-event__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pm-events .pm-event__type {
    flex: 0 0 auto;
  }

  .pm-events .pm-event__actions {
    flex: 0 0 auto;
    width: 100%;
  }

  .pm-events .pm-event__actions .pm-btn {
    flex: 1 1 0px;
    min-width: 0px;
  }

  .pm-events .pm-event__more {
    display: inline-block;
  }
}


/* ==========================================================
   PAGINA VISITA
   page-visita.php
========================================================== */
.pm-visit {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* contenuto della pagina: testo a 45px */
.pm-visit .pm-visit__content p {
  font-size: 2.25vw !important;
  line-height: 2.2vw !important;
  letter-spacing: -0.9px;
}

.pm-visit .pm-visit__content p + p {
  margin-top: 0px !important;
}

/* solo da mobile e tablet: Oggi aperto / chiuso e "Dove siamo" in apertura */
.pm-visit .pm-visit__mobile-top {
  display: none;
}

@media screen and (max-width: 991px) {
  .pm-visit .pm-visit__mobile-top {
    display: flex;
    flex-wrap: wrap;
  }

  /* grandezza e interlinea: in fondo al file, sezione "TESTI DA MOBILE E TABLET" */
  .pm-visit .pm-visit__where {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.27px;
    text-transform: uppercase;
  }
}

/* link Google Maps */
.pm-visit .pm-visit__map {
  margin-top: 5px;
}

/* sezioni: Orari, Tragitto, Accessibilità */
.pm-visit .pm-visit__section {
  margin-top: 90px;
  /* arrivando con #orari (o #tragitto, #accessibilita) la sezione si ferma
     esattamente sotto l'header, compreso il blocco con Oggi aperto e Italiano / English */
  scroll-margin-top: var(--pm-band-top, 0px);
}

.pm-visit .pm-visit__section-title {
  margin-bottom: 0px;
}

.pm-visit .pm-visit__section-text p + p {
  margin-top: 22px !important;
}

.pm-visit .pm-visit__section-text a {
  text-decoration: underline !important;
}

/* ---------- banda che scorre all'infinito ---------- */
/* lo stile è in style.css (uguale alla pagina Il Palazzo): qui solo la distanza dagli orari */
.pm-visit .pm-marquee {
  margin-top: 10px; /* 5px in più (prima 5px) */
}

/* bottone Contattaci: 90px di spazio sotto, prima del footer */
.pm-visit .pm-visit__contact {
  margin-top: 5px;
  margin-bottom: 90px;
}

@media screen and (max-width: 767px) {
  .pm-visit .pm-visit__section {
    margin-top: 5px;
  }

  .pm-visit .pm-visit__contact {
    margin-top: 5px;
  }
}

/* ---------- aggiunte: spazi e titolo "Dove siamo" da mobile e tablet (fino a 991px) ----------
   vengono dopo le regole qui sopra, quindi vincono su quelle */
@media screen and (max-width: 991px) {
  /* "Dove siamo": come gli altri titoli (stessa spaziatura tra le lettere, niente spazio sotto) */
  .pm-visit .pm-visit__where {
    margin-bottom: 0px !important;
    letter-spacing: -1.2px;
  }

  /* Oggi aperto / chiuso ora è nell'header, sotto il logo: il contenuto parte come nelle altre pagine
     (niente spazio in più sopra "Dove siamo") */
  .pm-visit {
    padding-top: 0px;
  }

  .pm-visit .pm-visit__where {
    margin-top: 0px !important;
  }

  /* tra un paragrafo e l'altro una riga vuota (19.1px, quanto il testo da mobile),
     sia nel testo di apertura sia in Orari / Tragitto / Accessibilità */
  .pm-visit .pm-visit__content p + p {
    margin-top: 19.1px !important;
  }

  .pm-visit .pm-visit__section-text p + p {
    margin-top: 19.1px !important;
  }
}

/* da mobile: 60px sopra Orari, Tragitto e Accessibilità (al posto dei 5px qui sopra) */
@media screen and (max-width: 767px) {
  .pm-visit .pm-visit__section {
    margin-top: 60px;
  }
}

/* immagine della mappa (ACF "immagine_mappa"): da tablet in su 3 colonne a sinistra del testo,
   allineata in alto; da telefono larga 12 colonne sotto al testo. Sempre intera, mai tagliata */
.pm-visit .pm-visit__map-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0px !important; /* senza angoli arrotondati (la regola generale delle immagini li metterebbe) */
}

@media screen and (max-width: 767px) {
  .pm-visit .pm-visit__map-image {
    margin-top: 5px; /* prima 19.1px */
  }

  /* Google Maps da telefono: sotto l'immagine della mappa, 5px di spazio sopra */
  .pm-visit .pm-visit__map {
    margin-top: 5px;
  }
}


/* ==========================================================
   PAGINA IL PALAZZO (ora "Chi siamo")
   page-chi-siamo.php
========================================================== */
.pm-palace img {
  border-radius: 0px !important;
}

/* spazio sopra ogni apertura di capitolo (Il Palazzo, La Collezione, Contatti) */
.pm-palace .pm-palace__block {
  margin-top: 90px;
}

/* Contatti: spazio sotto, prima del footer (prima 0px) */
.pm-palace .pm-palace__contacts {
  margin-bottom: 5px;
}

.pm-palace .pm-palace__title {
  margin-bottom: 0px;
}

.pm-palace .pm-palace__text p + p {
  margin-top: 29px !important;
}

.pm-palace .pm-palace__text a {
  text-decoration: underline !important;
}

/* titolo "Origini" sopra il primo testo: c'è solo da mobile e tablet (fino a 991px) */
.pm-palace .pm-palace__mobile-title {
  display: none;
}

@media screen and (max-width: 991px) {
  .pm-palace .pm-palace__mobile-title {
    display: block;
  }
}

/* ---------- 1. contenuto della pagina a 2.25vw ---------- */
.pm-palace .pm-palace__content p {
  font-size: 2.25vw !important;
  line-height: 2.25vw !important;
  letter-spacing: -0.9px;
}

.pm-palace .pm-palace__content p + p {
  margin-top: 2.25vw !important;
}

/* spazio tra il testo di apertura e le 4 immagini affiancate */
.pm-palace .pm-palace__content {
  margin-bottom: 5px;
}

/* ---------- 2. immagini di apertura: 4 affiancate, da bordo a bordo ---------- */
.pm-palace .pm-palace__opening {
  margin-left: 0px;
  margin-right: 0px;
}

.pm-palace .pm-palace__opening-item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.pm-palace .pm-palace__opening-item img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- 4. galleria: immagini affiancate, una sola grande ---------- */
.pm-palace .pm-gallery {
  display: flex;
  align-items: center;
  gap: 5px;
  box-sizing: content-box;
}

.pm-palace .pm-gallery__item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  min-width: 0px;
  margin: 0px;
  cursor: pointer; /* al click si apre il lightbox */
  transition: flex-grow 150ms ease-out; /* passaggio da un'immagine all'altra: rapido (prima 280ms). Quale immagine si ingrandisce lo decide lo script di page-chi-siamo.php */
}

.pm-palace .pm-gallery__item:focus-visible {
  outline: 1px solid #536669;
  outline-offset: 3px;
}

/* da desktop: la manina su tutta la galleria (anche negli spazi tra le immagini e mentre si allargano)
   e le immagini "trasparenti" al mouse, così Safari non perde il passaggio da un'immagine all'altra */
@media screen and (min-width: 992px) {
  .pm-palace .pm-gallery {
    cursor: pointer;
  }

  .pm-palace .pm-gallery__item img {
    pointer-events: none;
  }
}

/* l'immagine grande: all'inizio la centrale, poi quella sotto al mouse.
   2.25 = larga 2,25 volte le altre (prima 2.5, poi 2, all'inizio 1.4).
   Se cambi questo valore, cambia anche GROW nello script di page-chi-siamo.php */
.pm-palace .pm-gallery__item.is-active {
  flex-grow: 2.25; /* prima 2, poi 2.5 */
}

.pm-palace .pm-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 5. testo a 2.25vw ---------- */
/* spazio tra la galleria e il testo sotto */
.pm-palace .pm-palace__big-text {
  margin-top: 0px;
}

.pm-palace .pm-palace__big-text p {
  font-size: 2.25vw !important;
  line-height: 2.25vw !important;
  letter-spacing: -0.9px;
}

.pm-palace .pm-palace__big-text p + p {
  margin-top: 2.25vw !important;
}

/* ---------- 6. banda che scorre all'infinito ---------- */
/* lo stile è in style.css (uguale alla pagina Visita): qui solo la distanza dal testo sopra */
.pm-palace .pm-marquee {
  margin-top: 5px;
}

/* ---------- 7. slider della collezione ---------- */
.pm-palace .pm-slider {
  position: relative;
}

.pm-palace .pm-slider__viewport {
  overflow: hidden;
}

/* tutte le slide una sopra l'altra: cambio immagine in dissolvenza */
.pm-palace .pm-slider__track {
  display: grid;
}

.pm-palace .pm-slider__slide {
  grid-area: 1 / 1;
  margin: 0px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 600ms;
}

.pm-palace .pm-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.pm-palace .pm-slider__image {
  position: relative;
  aspect-ratio: 4 / 3; /* spazio fisso dell'immagine: largo quanto la colonna, alto 3/4 della larghezza (altezza massima).
                          Così Indietro / Avanti restano sempre nello stesso punto, qualunque immagine ci sia */
  overflow: hidden;
  cursor: pointer; /* al click si apre il lightbox */
}

.pm-palace .pm-slider__image:focus-visible {
  outline: 1px solid #536669;
  outline-offset: 3px;
}

.pm-palace .pm-slider__image img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  /* immagine intera, mai tagliata: orizzontale → larga quanto la colonna, altezza proporzionale;
     verticale → alta quanto lo spazio, larghezza proporzionale.
     Sempre attaccata in alto e centrata in orizzontale */
  object-fit: contain;
  object-position: center top;
}

.pm-palace .pm-slider__caption {
  margin-top: 5px !important; /* 2.5px in più (prima 2.5px; ancora prima 10px): regola qui */
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: -0.27px;
}

/* Indietro / Avanti: bottoni normali .pm-btn */
.pm-palace .pm-slider__nav {
  display: flex;
  gap: 5px;
  margin-top: 5px; /* prima 15px */
}

/* Indietro / Avanti larghi metà ciascuno */
.pm-palace .pm-slider__nav .pm-btn {
  flex: 1 1 0px;
  min-width: 0px;
}

/* ---------- mobile ---------- */
@media screen and (max-width: 991px) {
  .pm-palace .pm-slider {
    margin-top: 5px !important; /* da mobile e tablet (prima 40px): regola qui */
  }

  /* galleria: slider con il dito, immagini tutte uguali,
     si vede la prima e un pezzo della seconda sulla destra */
  .pm-palace .pm-gallery {
    height: auto !important; /* annulla l'altezza fissa che lo script usa da desktop */
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pm-palace .pm-gallery::-webkit-scrollbar {
    display: none;
  }

  /* trascinabile anche con il mouse */
  .pm-palace .pm-gallery {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  /* mentre si trascina lo scorrimento segue il mouse, senza agganciarsi alle immagini */
  .pm-palace .pm-gallery.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .pm-palace .pm-gallery img {
    -webkit-user-drag: none;
    pointer-events: none;
  }

  .pm-palace .pm-gallery__item,
  .pm-palace .pm-gallery__item.is-active {
    flex: 0 0 78%; /* larghezza di ogni immagine: il resto è il pezzo della successiva */
    aspect-ratio: 3 / 4;
    overflow: hidden;
    scroll-snap-align: start;
    transition: none;
  }

  .pm-palace .pm-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* slider della Collezione da mobile e tablet: lo spazio ha le proporzioni della PRIMA immagine
     (--pm-slider-ratio, lo scrive page-chi-siamo.php), che quindi è larga il 100%.
     Le altre stanno dentro la stessa altezza massima, intere, in alto e centrate */
  .pm-palace .pm-slider__image {
    aspect-ratio: var(--pm-slider-ratio, 4 / 3);
  }

  /* slider da mobile e tablet: 7.5px tra un'immagine e l'altra (da desktop restano 5px)
     e 5px di spazio sotto */
  .pm-palace .pm-gallery {
    gap: 7.5px;
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 767px) {
  .pm-palace .pm-palace__block {
    margin-top: 60px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pm-palace .pm-gallery__item {
    transition-duration: 1ms;
  }

  .pm-palace .pm-slider__slide {
    transition-duration: 1ms;
  }
}


/* ==========================================================
   LIGHTBOX
   pagina Il Palazzo (galleria e collezione); la pagina mostra ne ha una copia identica dentro single.php
========================================================== */
/* a tutto schermo, sfondo blu come quello dell'intro in home; ovunque il cursore è la manina.
   Bottone Chiudi fisso in alto, didascalia fissa in basso, immagine al centro in uno spazio fisso:
   niente si sposta, che la didascalia ci sia o no */
.pm-lightbox {
  --lb-gap: 20px;    /* distanza uguale: Chiudi → immagine, immagine → didascalia, immagine → fondo (senza didascalia). Regola qui */
  --lb-top: 50px;    /* spazio riservato in alto al bottone Chiudi (lo ricalcola lo script con --lb-gap) */
  --lb-bottom: 70px; /* spazio riservato in basso alla didascalia (fino a 3 righe) */
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10000; /* sopra all'header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lb-top) 10px var(--lb-bottom) 10px;
  box-sizing: border-box;
  background: #536669;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 300ms;
}

.pm-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.pm-lightbox * {
  cursor: pointer;
}

/* con il lightbox aperto la pagina sotto non scorre */
html.pm-lightbox-open {
  overflow: hidden;
}

/* spazio dell'immagine: tutto quello che resta tra bottone e didascalia */
.pm-lightbox .pm-lightbox__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* bottone Chiudi, fisso in alto al centro dello schermo.
   Ha le classi "pm-btn pm-btn--header": misure identiche a "Oggi aperto / Oggi chiuso",
   da desktop e da mobile, e se cambi quel bottone cambia anche lui.
   Qui solo la posizione e i colori suoi (panna con testo blu) */
.pm-lightbox .pm-lightbox__close {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 20px);
  background: #EDEAE1;
  color: #536669 !important;
  transform: translateX(-50%);
}

.pm-lightbox .pm-lightbox__close:hover {
  background: #BABCAD;
  color: #536669 !important;
}

.pm-lightbox .pm-lightbox__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0px;
}

/* immagine intera, con un'altezza massima fissa: non va mai sopra a bottone e didascalia.
   Compare in dissolvenza (come il resto del sito) solo quando è caricata */
.pm-lightbox .pm-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - var(--lb-top) - var(--lb-bottom));
  max-height: calc(100svh - var(--lb-top) - var(--lb-bottom));
  border-radius: 0px !important;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1); /* entrata: morbida */
}

/* cambio immagine: la vecchia sfuma via in fretta, la nuova entra solo quando è pronta */
.pm-lightbox .pm-lightbox__img.is-loading {
  opacity: 0;
  transition-duration: 250ms; /* uscita: veloce (deve combaciare con FADE_OUT nello script) */
}

/* didascalia fissa in basso al centro dello schermo, larga tutto lo schermo (meno 10px per lato).
   Gli a capo scritti nella didascalia della libreria media restano a capo anche qui (white-space: pre-line);
   tutte le righe si vedono: lo spazio sopra lo ricalcola lo script */
.pm-lightbox .pm-lightbox__caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  display: block;
  width: calc(100vw - 20px);
  max-width: none;
  margin: 0px;
  font-size: 13px !important;
  line-height: 16px !important;
  letter-spacing: -0.27px;
  text-align: center;
  white-space: pre-line;
  color: #EDEAE1 !important;
  transform: translateX(-50%);
}

.pm-lightbox .pm-lightbox__caption[hidden] {
  display: none !important;
}

/* la didascalia cambia insieme all'immagine */
.pm-lightbox .pm-lightbox__caption {
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1);
}

.pm-lightbox .pm-lightbox__caption.is-loading {
  opacity: 0;
  transition-duration: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  .pm-lightbox {
    transition-duration: 1ms;
  }

  .pm-lightbox .pm-lightbox__img,
  .pm-lightbox .pm-lightbox__img.is-loading,
  .pm-lightbox .pm-lightbox__caption,
  .pm-lightbox .pm-lightbox__caption.is-loading {
    transition-duration: 1ms;
  }
}


/* ##########################################################
   TESTI DA MOBILE E TABLET (fino a 991px)
   Tutte le grandezze e le interlinee dei testi del sito, in un unico posto.
   Cambiale qui: valgono solo da 991px in giù (da desktop non cambia niente).
   Sta in fondo al file apposta, così vince sulle regole precedenti.
   I selettori con "body" davanti vincono anche sugli stili ancora dentro
   header.php e single.php.
   Qui ci sono anche spazio interno e larghezza dei bottoni da mobile e tablet.
   Non ci sono: il blocco sotto al logo (indirizzo, Oggi aperto, lingue),
   che da mobile è nascosto, e gli eventuali stili scritti dentro footer.php.
########################################################## */
@media screen and (max-width: 991px) {

  /* ---------- BASE ---------- */

  /* testo di base del sito */
  body {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* Contatti del Palazzo (blocco con le classi pm-h1 e mobile) */
  .pm-h1.mobile {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
    letter-spacing: 0px;
    margin-bottom:60px;
  }

  .pm-h1.mobile p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
    letter-spacing: 0px;
  }

  /* tutti i paragrafi (testi delle pagine, orari, tragitto, testo degli eventi girati…) */
  p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- TITOLI ---------- */

  /* h1 */
  h1 {
    font-size: 3.2vw !important;
    line-height: 3.2vw !important;
  }

  /* h2 (maiuscolo) */
  h2 {
    font-size: 2.25vw !important;
    line-height: 2.25vw !important;
  }

  /* h3 */
  h3 {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* h4 */
  h4 {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* h5 */
  h5 {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* h6 */
  h6 {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* ---------- CLASSI DI TESTO ---------- */

  /* titoli grandi: titoli delle mostre, Orari / Tragitto / Accessibilità, Il Palazzo / La Collezione / Contatti */
  .pm-h1 {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* paragrafi dentro un blocco .pm-h1 (es. testo dei Contatti nel Palazzo) */
  .pm-h1 p {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* titoli delle card eventi */
  .pm-big {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* artisti delle mostre (home e pagina mostra) */
  .pm-md {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* date di inizio e fine (home, eventi, pagina mostra) */
  .pm-date {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* tipologia dell'evento in fondo alla card (davanti e dietro) */
  .pm-event__type {
    font-size: 16px !important;
    line-height: 16px !important;
  }

  /* piccoli testi 13px */
  .pm-sm {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* testi minimi 8px */
  .pm-xs {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* contenitori con classe .h1 */
  .h1 p {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* contenitori con classe .h2 */
  .h2 p {
    font-size: 2.25vw !important;
    line-height: 2.25vw !important;
  }

  /* contenitori con classe .h3 */
  .h3 p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- FOOTER ---------- */

  /* frase grande del footer */
  .h1-footer {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* testi del footer */
  .footer-text p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* prima descrizione del footer */
  .pm-footer-descrizione1 p {
    font-size: 19.1px !important;
    line-height: 19px !important;
  }

  /* seconda descrizione del footer */
  .pm-footer-descrizione2 p {
    font-size: 19.1px !important;
    line-height: 19px !important;
  }

  /* titoli dei widget */
  .widget-title {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* crediti del footer */
  .didascalie-footer {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* crediti del footer (paragrafi) */
  .didascalie-footer p {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* ITA / ENG nel footer */
  .site-footer .pm-footer-lang__item {
    margin-top: -3px;
    font-size: 19.1px !important;
    line-height: 19.1px !important;
    letter-spacing: -0.27px;
  }

  /* ---------- HEADER (body davanti: così vince sulle regole di header.php) ---------- */

  /* voci di menu ai 4 vertici */
  body .pm-band__link {
    font-size: 25.5px !important;
    line-height: 23px !important;
    letter-spacing: 0px;
  }

  /* ---------- BOTTONI ---------- */

  /* tutti i bottoni del sito (da telefono: 17px, prima 19.1px) */
  .pm-btn {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* bottoni con classe .btn (da telefono: 17px, prima 19.1px) */
  .btn {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* bottoni <button> (da telefono: 17px, prima 19.1px) */
  button {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* bottoni di invio dei moduli (da telefono: 17px, prima 19.1px) */
  input[type="submit"] {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* bottoni dei blocchi WordPress (da telefono: 17px, prima 19.1px) */
  .wp-block-button__link {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* Oggi aperto / Oggi chiuso (da mobile in apertura della pagina Visita): come tutti gli altri bottoni */
  .pm-btn.pm-btn--header {
    font-size: 17px !important;
    line-height: 17px !important;
  }

  /* spazio interno dei bottoni: 7px sopra e 7px sotto (da desktop 3px; prima 10px), testo centrato
     in verticale e in orizzontale. Il Chiudi del lightbox e l'hamburger hanno regole loro */
  .pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  button {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  input[type="submit"] {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* Oggi aperto / Oggi chiuso: stesso spazio interno e stessa larghezza degli altri bottoni */
  .pm-btn.pm-btn--header {
    padding-top: 7px;
    padding-right: 13px;
    padding-bottom: 7px;
    padding-left: 13px;
  }

  /* larghezza: sempre al 100% del loro spazio; quando sono due affiancati
     (Scopri di più + Prenota ora negli eventi, Indietro + Avanti nella Collezione)
     dividono lo spazio a metà, con il gap in mezzo */
  .pm-btn {
    width: 100%;
    max-width: 100%;
  }

  .btn {
    width: 100%;
    max-width: 100%;
  }

  input[type="submit"] {
    width: 100%;
    max-width: 100%;
  }

  .wp-block-button__link {
    width: 100%;
    max-width: 100%;
  }

  .pm-btn.pm-btn--header {
    width: 100%;
    min-width: 0px;
  }

  /* banda che scorre: lo spazio è infinito, quindi il 100% non funziona.
     Il bottone è largo quanto gli altri bottoni a tutta larghezza
     (lo schermo meno i margini del sito: 7.5px + 5px per lato = 25px) */
  .pm-marquee__item .pm-btn {
    width: calc(100vw - 25px);
    max-width: none;
  }

  /* eventi: da 991px in giù tipologia sopra e bottoni sotto, a tutta larghezza */
  .pm-events .pm-event__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pm-events .pm-event__type {
    flex: 0 0 auto;
  }

  .pm-events .pm-event__actions {
    flex: 0 0 auto;
    width: 100%;
  }

  .pm-events .pm-event__actions .pm-btn {
    flex: 1 1 0px;
    min-width: 0px;
  }

  /* ---------- BANDA CHE SCORRE (Visita e Il Palazzo) ---------- */

  /* Scopri i prossimi eventi… */
  .pm-marquee__text {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- PAGINA VISITA ---------- */

  /* Dove siamo: ora è un titolo come Orari / Tragitto / Accessibilità, stessa grandezza */
  .pm-visit .pm-visit__where {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* testo di apertura */
  .pm-visit .pm-visit__content p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* titoli Orari / Tragitto / Accessibilità */
  .pm-visit .pm-visit__section-title {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* testi di Orari / Tragitto / Accessibilità */
  .pm-visit .pm-visit__section-text p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- PAGINA IL PALAZZO ---------- */

  /* testo di apertura */
  .pm-palace .pm-palace__content p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* titoli Origini / Il Palazzo / La Collezione / Contatti */
  .pm-palace .pm-palace__title {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* testo della Collezione (il testo grande sotto la galleria ha anche questa classe: la sua regola viene subito dopo e vince) */
  .pm-palace .pm-palace__text p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* testo grande sotto la galleria */
  .pm-palace .pm-palace__big-text p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* didascalia sotto lo slider della Collezione */
  .pm-palace .pm-slider__caption {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* ---------- PAGINA EVENTI ---------- */

  /* titolo della card */
  .pm-events .pm-event__title {
    font-size: 11vw !important;
    line-height: 10vw  !important;
  }

  /* testo dell'evento sulla faccia girata */
  .pm-events .pm-flip__text p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- PAGINA MOSTRA (body davanti: così vince sulle regole di single.php) ---------- */

  /* titolo della mostra */
  body .pm-single-show .pm-single-show__title {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* artisti */
  body .pm-single-show .pm-single-show__artists {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* testo della mostra */
  body .pm-single-show .pm-single-show__content p {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* didascalie sotto le immagini */
  body .pm-single-show .pm-single-show__images .wp-caption-text {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* spazio sopra il testo della mostra */
  .pm-single-show .pm-single-show__content {
    margin-top: 5px !important; /* prima 11vw */
  }

  /* ---------- HOME ---------- */

  /* titolo della mostra nel quadrato */
  .pm-show .pm-show__title {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* artisti nel quadrato */
  .pm-show .pm-show__artists {
    font-size: 11vw !important;
    line-height: 9vw !important;
  }

  /* ---------- LIGHTBOX (Il Palazzo e pagina mostra; body davanti per vincere anche su single.php) ---------- */

  /* bottone Chiudi: misure di "Oggi aperto" da mobile (vengono dalle regole di .pm-btn--header qui sopra);
     qui solo la larghezza, perché è posizionato sopra all'immagine: lo schermo meno 10px per lato */
  body .pm-lightbox .pm-lightbox__close {
    width: calc(100vw - 20px);
  }

  /* più spazio riservato in alto, perché il Chiudi è più alto */
  body .pm-lightbox {
    --lb-top: 64px;
  }

  /* didascalia dell'immagine aperta */
  body .pm-lightbox .pm-lightbox__caption {
    font-size: 13px !important;
    line-height: 16px !important;
  }
}


/* ##########################################################
   TESTI E BOTTONI DA TABLET (da 768px a 991px) — misura intermedia
   Le misure del blocco qui sopra ("TESTI DA MOBILE E TABLET") valgono da telefono;
   da tablet vincono queste.
   Testi: un po' più piccoli della metà esatta tra desktop e mobile (× 0.95).
   Accanto a ogni regola ci sono i due valori da cui viene la misura: cambiala qui
   se un testo da tablet ti sembra troppo grande o troppo piccolo.
   calc((A + B) / 2 * 0.95) = a metà tra A e B, un 5% più piccolo, anche con unità diverse (vw e px)
   Bottoni: al 50% del loro spazio (da telefono 100%)
########################################################## */
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* ---------- BASE ---------- */

  /* testo di base del sito
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  body {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* Contatti del Palazzo (blocco con le classi pm-h1 e mobile)
     desktop 3.2vw / 2.8vw · mobile 19.1px / 19.1px */
  .pm-h1.mobile {
    font-size: calc((3.2vw + 19.1px) / 2 * 0.95) !important;
    line-height: calc((2.8vw + 19.1px) / 2 * 0.95) !important;
  }

  /* Contatti del Palazzo (paragrafi)
     desktop 3.2vw / 2.8vw · mobile 19.1px / 19.1px */
  .pm-h1.mobile p {
    font-size: calc((3.2vw + 19.1px) / 2 * 0.95) !important;
    line-height: calc((2.8vw + 19.1px) / 2 * 0.95) !important;
  }

  /* tutti i paragrafi
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* ---------- TITOLI ---------- */

  /* h1 (uguale da desktop e da mobile)
     desktop 3.2vw / 3.2vw · mobile 3.2vw / 3.2vw */
  h1 {
    font-size: 3.2vw !important;
    line-height: 3.2vw !important;
  }

  /* h2, maiuscolo (uguale da desktop e da mobile)
     desktop 2.25vw / 2.25vw · mobile 2.25vw / 2.25vw */
  h2 {
    font-size: 2.25vw !important;
    line-height: 2.25vw !important;
  }

  /* h3
     desktop 28px / 35px · mobile 19.1px / 19.1px */
  h3 {
    font-size: 22.3725px !important;
    line-height: 25.6975px !important;
  }

  /* h4
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  h4 {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* h5 (uguale da desktop e da mobile)
     desktop 13px / 16px · mobile 13px / 16px */
  h5 {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* h6 (uguale da desktop e da mobile)
     desktop 8px / 10px · mobile 8px / 10px */
  h6 {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* ---------- CLASSI DI TESTO ---------- */

  /* titoli grandi: mostre, Orari / Tragitto / Accessibilità, Il Palazzo / La Collezione / Contatti
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-h1 {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* paragrafi dentro un blocco .pm-h1
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-h1 p {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* titoli delle card eventi
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-big {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* artisti delle mostre (home e pagina mostra)
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-md {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* date di inizio e fine
     desktop 28px / 35px · mobile 19.1px / 19.1px */
  .pm-date {
    font-size: 22.3725px !important;
    line-height: 25.6975px !important;
  }

  /* tipologia dell'evento (uguale da desktop e da mobile)
     desktop 16px / 16px · mobile 16px / 16px */
  .pm-event__type {
    font-size: 16px !important;
    line-height: 16px !important;
  }

  /* piccoli testi 13px (uguale da desktop e da mobile)
     desktop 13px / 16px · mobile 13px / 16px */
  .pm-sm {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* testi minimi 8px (uguale da desktop e da mobile)
     desktop 8px / 10px · mobile 8px / 10px */
  .pm-xs {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* contenitori con classe .h1
     desktop 3.2vw / 3.2vw · mobile 11vw / 11vw */
  .h1 p {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 4.5vw !important; /* prima 6.745vw */
  }

  /* contenitori con classe .h2 (uguale da desktop e da mobile)
     desktop 2.25vw / 2.25vw · mobile 2.25vw / 2.25vw */
  .h2 p {
    font-size: 2.25vw !important;
    line-height: 2.25vw !important;
  }

  /* contenitori con classe .h3
     desktop 28px / 35px · mobile 19.1px / 19.1px */
  .h3 p {
    font-size: 22.3725px !important;
    line-height: 25.6975px !important;
  }

  /* ---------- FOOTER ---------- */

  /* frase grande del footer
     desktop 3.2vw / 3.2vw · mobile 11vw / 11vw */
  .h1-footer {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 4.5vw !important; /* prima 6.745vw */
  }

  /* testi del footer
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .footer-text p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* prima descrizione del footer
     desktop 22px / 19px · mobile 19.1px / 19px */
  .pm-footer-descrizione1 p {
    font-size: 19.5225px !important;
    line-height: 19px !important;
  }

  /* seconda descrizione del footer
     desktop 22px / 19px · mobile 19.1px / 19px */
  .pm-footer-descrizione2 p {
    font-size: 19.5225px !important;
    line-height: 19px !important;
  }

  /* titoli dei widget
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .widget-title {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* crediti del footer (uguale da desktop e da mobile)
     desktop 8px / 10px · mobile 8px / 10px */
  .didascalie-footer {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* crediti del footer, paragrafi (uguale da desktop e da mobile)
     desktop 8px / 10px · mobile 8px / 10px */
  .didascalie-footer p {
    font-size: 8px !important;
    line-height: 10px !important;
  }

  /* ITA / ENG nel footer (da desktop non c'è: resta come da mobile)
     desktop 19.1px / 19.1px · mobile 19.1px / 19.1px */
  .site-footer .pm-footer-lang__item {
    font-size: 19.1px !important;
    line-height: 19.1px !important;
  }

  /* ---------- HEADER (body davanti: così vince sulle regole di header.php) ---------- */

  /* voci di menu ai 4 vertici
     desktop 3.3417vw / 2.066vw · mobile 23px / 23px */
  body .pm-band__link {
    font-size: calc((3.3417vw + 23px) / 2 * 0.95) !important;
    line-height: calc((2.066vw + 23px) / 2 * 0.95) !important;
  }

  /* ---------- BOTTONI ---------- */

  /* tutti i bottoni del sito
     desktop 22px / 22px · mobile 17px / 17px */
  .pm-btn {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* bottoni con classe .btn
     desktop 22px / 22px · mobile 17px / 17px */
  .btn {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* bottoni <button>
     desktop 22px / 22px · mobile 17px / 17px */
  button {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* bottoni di invio dei moduli
     desktop 22px / 22px · mobile 17px / 17px */
  input[type="submit"] {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* bottoni dei blocchi WordPress
     desktop 22px / 22px · mobile 17px / 17px */
  .wp-block-button__link {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* Oggi aperto / Oggi chiuso e Chiudi del lightbox: da tablet come tutti gli altri bottoni
     (stessa grandezza di .pm-btn qui sopra; da desktop restano piccoli, 13px) */
  .pm-btn.pm-btn--header {
    font-size: 18.525px !important;
    line-height: 18.525px !important;
  }

  /* ---------- BANDA CHE SCORRE (Visita e Il Palazzo) ---------- */

  /* Scopri i prossimi eventi…
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .pm-marquee__text {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* ---------- PAGINA VISITA ---------- */

  /* Dove siamo (come gli altri titoli; da desktop non c'è)
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-visit .pm-visit__where {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* testo di apertura
     desktop 2.25vw / 2.2vw · mobile 19.1px / 19.1px */
  .pm-visit .pm-visit__content p {
    font-size: calc((2.25vw + 19.1px) / 2 * 0.95) !important;
    line-height: calc((2.2vw + 19.1px) / 2 * 0.95) !important;
  }

  /* titoli Orari / Tragitto / Accessibilità
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-visit .pm-visit__section-title {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* testi di Orari / Tragitto / Accessibilità
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .pm-visit .pm-visit__section-text p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* ---------- PAGINA IL PALAZZO ---------- */

  /* testo di apertura
     desktop 2.25vw / 2.25vw · mobile 19.1px / 19.1px */
  .pm-palace .pm-palace__content p {
    font-size: calc((2.25vw + 19.1px) / 2 * 0.95) !important;
    line-height: calc((2.25vw + 19.1px) / 2 * 0.95) !important;
  }

  /* titoli Origini / Il Palazzo / La Collezione / Contatti
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-palace .pm-palace__title {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* testo della Collezione (il testo grande sotto la galleria ha anche questa classe: la sua regola viene subito dopo e vince)
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .pm-palace .pm-palace__text p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* testo grande sotto la galleria
     desktop 2.25vw / 2.25vw · mobile 19.1px / 19.1px */
  .pm-palace .pm-palace__big-text p {
    font-size: calc((2.25vw + 19.1px) / 2 * 0.95) !important;
    line-height: calc((2.25vw + 19.1px) / 2 * 0.95) !important;
  }

  /* didascalia sotto lo slider della Collezione (uguale da desktop e da mobile)
     desktop 13px / 16px · mobile 13px / 16px */
  .pm-palace .pm-slider__caption {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* ---------- PAGINA EVENTI ---------- */

  /* titolo della card
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-events .pm-event__title {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* testo dell'evento sulla faccia girata
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  .pm-events .pm-flip__text p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* ---------- PAGINA MOSTRA (body davanti: così vince sulle regole di single.php) ---------- */

  /* titolo della mostra
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  body .pm-single-show .pm-single-show__title {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* artisti
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  body .pm-single-show .pm-single-show__artists {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* testo della mostra
     desktop 22px / 22px · mobile 19.1px / 19.1px */
  body .pm-single-show .pm-single-show__content p {
    font-size: 19.5225px !important;
    line-height: 19.5225px !important;
  }

  /* didascalie sotto le immagini (uguale da desktop e da mobile)
     desktop 13px / 16px · mobile 13px / 16px */
  body .pm-single-show .pm-single-show__images .wp-caption-text {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* ---------- HOME ---------- */

  /* titolo della mostra nel quadrato
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-show .pm-show__title {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* artisti nel quadrato
     desktop 3.2vw / 2.8vw · mobile 11vw / 11vw */
  .pm-show .pm-show__artists {
    font-size: 4.5vw !important; /* prima 6.745vw */
    line-height: 3.95vw !important; /* prima 6.555vw */
  }

  /* ---------- LIGHTBOX (body davanti per vincere anche su single.php) ---------- */

  /* didascalia dell'immagine aperta (uguale da desktop e da mobile)
     desktop 13px / 16px · mobile 13px / 16px */
  body .pm-lightbox .pm-lightbox__caption {
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* spazio sopra il testo della mostra
     desktop 2.5vw · mobile 11vw */
  .pm-single-show .pm-single-show__content {
    margin-top: 5px !important; /* prima 6.75vw */
  }

  /* ---------- LARGHEZZA DEI BOTTONI DA TABLET ----------
     da telefono sono al 100% (blocco qui sopra), da tablet al 50% del loro spazio */
  .pm-btn {
    width: 50%;
  }

  .btn {
    width: 50%;
  }

  input[type="submit"] {
    width: 50%;
  }

  .wp-block-button__link {
    width: 50%;
  }

  /* Oggi aperto / Oggi chiuso (in apertura della pagina Visita) */
  .pm-btn.pm-btn--header {
    width: 50%;
  }

  /* Chiudi del lightbox: metà della larghezza che ha da telefono */
  body .pm-lightbox .pm-lightbox__close {
    width: calc((100vw - 20px) / 2);
  }

  /* banda che scorre: metà della larghezza che ha da telefono */
  .pm-marquee__item .pm-btn {
    width: calc((100vw - 25px) / 2);
  }

  /* eventi: anche da tablet, sotto la categoria, "Scopri di più" e "Prenota ora" affiancati,
     metà ciascuno (come da telefono) */
  .pm-events .pm-event__more {
    display: inline-flex;
  }

  .pm-events .pm-event__actions .pm-btn {
    flex: 1 1 0px;
    min-width: 0px;
  }

  /* due bottoni affiancati (Indietro / Avanti nella Collezione): restano a metà ciascuno,
     come da telefono: le regole loro (flex) hanno la precedenza sulla larghezza */
}