/* =========================================================================
   VINÒFORUM — Design System
   Tradotto 1:1 dai token/componenti dell'handoff Claude Design
   (vinoforum-design-system/project/tokens/*.css e components/core/*.jsx).
   Le regole con !important servono a garantire la resa quando le classi
   sono applicate a container/widget nativi di Elementor, che generano
   già del CSS proprio.
   ========================================================================= */

/* ---- Token: colori (project/tokens/colors.css) ---- */
:root {
  --vf-red: #fb3910;
  --vf-green: #00be67;
  --vf-purple: #8060af;

  --vf-ill-red: #e74426;
  --vf-ill-green: #3fad5a;
  --vf-ill-purple: #654c99;
  --vf-ill-pink: #f6bcd2;

  --vf-ink: #1d1d1b;
  --vf-paper: #ffffff;
  --vf-wine: #a72a35;

  --text-primary: var(--vf-ink);
  --text-on-color: var(--vf-ink);
  --text-inverse: var(--vf-paper);
  --surface-page: var(--vf-paper);
  --surface-brand: var(--vf-red);
  --border-strong: #000000;
}

/* ---- Token: tipografia (project/tokens/typography.css) ---- */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;

  --text-hero: clamp(96px, 12.5vw, 190px);
  --text-display: clamp(64px, 8vw, 120px);
  --text-statement: clamp(40px, 6.4vw, 96px);
  --text-bar-link: clamp(44px, 7vw, 104px);
  --text-marquee: 52px;
  --text-sub: 38px;
  --text-ticket-title: clamp(48px, 5.6vw, 108px);
  --text-meta: 15px;
  --text-body: 18px;

  --weight-display: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --tracking-display: -0.03em;
  --tracking-caps: 0.06em;

  --leading-display: 0.94;
  --leading-statement: 1.18;
}

/* ---- Token: layout (project/tokens/layout.css) ---- */
:root {
  --page-margin: clamp(20px, 3.6vw, 55px);
  --content-max: 1398px;

  --band-pad-y: clamp(48px, 7vw, 110px);
  --marquee-h: 105px;
  --bar-h: clamp(80px, 11vw, 160px);

  --radius-none: 0;
  --radius-ticket: 24px;
}

body {
  background: var(--surface-page);
}

/* =========================================================================
   Compatibilità Elementor Container (editor "atomic", v4.x)
   1) Ogni container Elementor a larghezza "boxed" (default, anche senza
      alcuna impostazione esplicita) genera un wrapper interno ".e-con-inner"
      incappucciato a min(100%, 1140px): il nostro design è full-bleed (solo
      --page-margin come inset), quindi va neutralizzato SEMPRE, sia sul
      ".e-con" esterno che sull'inner wrapper.
   2) L'".e-con-inner" è anche quello che governa davvero flex-direction dei
      figli (default: colonna), non il ".e-con" esterno a cui assegniamo le
      nostre classi — per questo i container con figli multipli in riga
      (".vf-flex-row") duplicano qui il flex anche sull'inner wrapper.
   Applicare la classe ".vf-full" a QUALSIASI container di primo livello /
   qualsiasi container con più figli in riga per risolvere entrambi i punti.
   ========================================================================= */
.vf-full,
.vf-full > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
}

.vf-flex-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

/* Varianti mirate: quando un ".vf-flex-row" non basta (serve anche
   space-between, o un grid invece di un flex) usiamo un selettore composto
   dedicato invece di generalizzare l'utility a scapito degli altri usi. */
.vf-ticket__row.vf-flex-row > .e-con-inner {
  justify-content: space-between !important;
}

/* =========================================================================
   Header — components/core/SiteHeader.jsx
   ========================================================================= */
.vf-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 24px 32px !important;
  padding: 28px var(--page-margin) !important;
  background: var(--surface-page);
  font-family: var(--font-sans);
}

.vf-header__logo img,
.vf-header__logo {
  height: 40px;
  width: auto;
  display: block;
}

.vf-header__nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  gap: 12px 36px !important;
}

.vf-header__nav-item,
.vf-header__nav-item .elementor-heading-title {
  margin: 0;
}

.vf-header__nav-item a,
.vf-header__nav-item .elementor-heading-title,
.vf-header__nav-item .elementor-heading-title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  text-underline-offset: 4px;
  font-family: var(--font-sans) !important;
  font-size: var(--text-meta) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

.vf-header__nav-item.is-active a,
.vf-header__nav-item.is-active .elementor-heading-title {
  text-decoration: underline !important;
}

/* =========================================================================
   Hero — key visual "Behind Every Taste" come SVG unico (intro.svg)
   Proporzioni fisse (1616x792): niente più flex/clamp da ricostruire,
   la composizione resta identica su qualsiasi dispositivo, si scala e basta.
   ========================================================================= */
.vf-hero-svg {
  padding: 1.5vw var(--page-margin) 2.5vw !important;
}

.vf-hero-svg img,
.vf-hero-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================================
   Marquee — components/core/MarqueeBand.jsx (widget HTML)
   ========================================================================= */
.vf-marquee {
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-page);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: var(--marquee-h);
  font-family: var(--font-sans);
  font-size: var(--text-marquee);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.vf-marquee__track {
  display: flex;
  flex-shrink: 0;
  animation: vf-marquee 24s linear infinite;
}

.vf-marquee__item {
  padding: 0 42px;
  white-space: nowrap;
}

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

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

/* =========================================================================
   Statement band — components/core/StatementBand.jsx
   ========================================================================= */
.vf-statement {
  background: var(--vf-red) !important;
  padding: var(--band-pad-y) var(--page-margin) !important;
}

.vf-statement--green { background: var(--vf-green) !important; }
.vf-statement--purple { background: var(--vf-purple) !important; }

.vf-statement p,
.vf-statement .elementor-widget-text-editor,
.vf-statement .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: var(--text-statement);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-statement);
  color: var(--text-on-color);
  margin: 0;
  text-wrap: pretty;
}

/* Animazione "fade + slide up" a comparsa (vf-statement-reveal.js spacca il
   testo in parole al caricamento e aggiunge .is-visible quando la sezione
   entra in viewport). Ogni parola è mascherata da un contenitore con
   overflow:hidden così la salita dal basso non "sborda" sulla riga sopra. */
.vf-reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.vf-reveal-word__inner {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease-out;
  transition-delay: calc(30ms * min(var(--i, 0), 40));
  will-change: transform, opacity;
}

.vf-statement.is-visible .vf-reveal-word__inner {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .vf-reveal-word__inner {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* =========================================================================
   "Scopri cosa facciamo" — accordion ad-fasce colorate (widget HTML).
   Le fasce si sovrappongono leggermente da ferme; al click quella cliccata
   si apre rivelando testo + CTA, le altre si richiudono.
   ========================================================================= */
.vf-accordion {
  padding: 5vw 0 var(--band-pad-y);
}

.vf-accordion__title {
  margin: 0 var(--page-margin) 0.5em;
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--vf-ink);
}

.vf-accordion__item + .vf-accordion__item {
  margin-top: -10px;
}

.vf-accordion__summary {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--bar-h);
  padding: 0 var(--page-margin);
  cursor: pointer;
  font-family: var(--font-sans);
}

.vf-accordion__item--red .vf-accordion__summary { background: var(--vf-red); }
.vf-accordion__item--green .vf-accordion__summary { background: var(--vf-green); }
.vf-accordion__item--purple .vf-accordion__summary { background: var(--vf-purple); }

.vf-accordion__label {
  color: var(--text-on-color);
  font-size: var(--text-bar-link);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-accordion__icon {
  flex: 0 0 auto;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  color: var(--text-on-color);
  margin-left: 24px;
  transition: transform 0.25s ease;
}

.vf-accordion__item.is-open .vf-accordion__icon {
  transform: rotate(45deg);
}

.vf-accordion__panel {
  max-height: 0;
  overflow: hidden;
  background: var(--vf-ink);
  transition: max-height 0.35s ease;
}

.vf-accordion__panel-inner {
  padding: clamp(28px, 4vw, 48px) var(--page-margin);
  max-width: var(--content-max);
}

.vf-accordion__panel-inner p {
  margin: 0 0 1.2em;
  color: var(--text-inverse);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 60ch;
}

/* Sotto i 600px la label più lunga ("Servizi per le Aziende") non ci sta più
   su una riga alla dimensione minima del clamp: lasciamo che vada a capo su
   due righe invece di tagliarla con l'ellissi. */
@media (max-width: 600px) {
  .vf-accordion__summary {
    height: auto;
    min-height: var(--bar-h);
    padding: 18px var(--page-margin);
  }

  .vf-accordion__label {
    white-space: normal;
    line-height: 1.05;
  }
}

/* =========================================================================
   Tickets — index.html Tickets(), TicketCard.jsx (widget HTML)
   ========================================================================= */
.vf-tickets {
  position: relative;
  margin: 5vw var(--page-margin) 6vw;
  min-height: 96vh;
  background: repeating-linear-gradient(45deg, #ececea 0 14px, #f5f5f3 14px 28px);
  padding: 6vw 0;
  box-sizing: border-box;
}

/* Il grid che centra la pila di ticket vive sull'e-con-inner, non
   sull'.e-con esterno (che porta solo box model/sfondo). */
.vf-tickets > .e-con-inner {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100%;
}

.vf-tickets__note {
  position: absolute;
  top: 16px;
  left: 20px;
}
.vf-tickets__note .elementor-heading-title {
  margin: 0;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  color: #8a8a86 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.vf-tickets__stack {
  width: min(640px, 60%);
}

.vf-tickets__stack > .e-con-inner {
  display: grid !important;
  width: 100% !important;
}

.vf-ticket {
  --notch-x: 66%;
  border-radius: var(--radius-ticket);
  aspect-ratio: 1.75;
  padding: 4.2% 4.6%;
  box-sizing: border-box;
  color: var(--text-inverse);
  font-family: var(--font-sans);
  container-type: inline-size;
  -webkit-mask:
    radial-gradient(circle 16px at var(--notch-x) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat,
    radial-gradient(circle 16px at var(--notch-x) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 16px at var(--notch-x) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat,
    radial-gradient(circle 16px at var(--notch-x) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
}

/* Il grid a due righe (fascia superiore + titolo centrato) va applicato
   sull'".e-con-inner" perché il ticket ora è un vero Container Elementor:
   i figli reali vivono lì dentro, non nel wrapper esterno ".e-con". */
.vf-ticket > .e-con-inner {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  width: 100% !important;
  height: 100% !important;
}

.vf-ticket__title > .e-con-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
}

.vf-ticket--red { background: var(--vf-red); }
.vf-ticket--green { background: var(--vf-green); }
.vf-ticket--purple { background: var(--vf-purple); }

.vf-ticket--extra {
  transform: rotate(-4deg);
  margin-top: -6%;
}

.vf-ticket--privilege {
  margin-top: -6%;
}

.vf-ticket__row {
  display: flex;
  justify-content: space-between;
}

.vf-ticket__row .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(12px, 3.4cqw, 30px) !important;
  font-weight: 500 !important;
  color: var(--text-inverse) !important;
  margin: 0;
}

.vf-ticket__title,
.vf-ticket__title .elementor-heading-title {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 12cqw, 110px) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: -0.02em !important;
  color: var(--text-inverse) !important;
  text-align: center;
  padding-bottom: 4%;
}

/* =========================================================================
   Componenti condivisi — bottone, link con freccia, placeholder foto
   (usati nelle sezioni "contenuti fiera" qui sotto)
   ========================================================================= */
.vf-btn,
.vf-btn .elementor-heading-title a {
  display: inline-block;
  background: var(--vf-red);
  color: var(--text-inverse) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-meta) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 1.1em 2em;
  border-radius: var(--radius-none);
}

/* Quando il bottone è un Heading widget nativo con link (invece di un
   semplice <a class="vf-btn">), il colore/padding vanno sull'<a> annidato
   (già "display: inline-block" dalla regola raggruppata qui sopra): il
   wrapper ".vf-btn" stesso resta "trasparente" a livello di box. */
.vf-btn .elementor-heading-title {
  margin: 0;
}

.vf-btn--outline,
.vf-btn--outline .elementor-heading-title a {
  background: transparent;
  color: inherit !important;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Quando ".vf-btn" è applicato a un Container Elementor (Heading con link
   annidato) invece che a un <a> semplice, il contenitore e i suoi wrapper
   intermedi devono restare "invisibili" a livello di box: altrimenti
   ricevono lo stesso sfondo/box-shadow del vero elemento cliccabile
   annidato, mostrando cornici o sfondi doppi. Il selettore ".e-con" esiste
   solo quando ".vf-btn" è un Container, quindi non tocca mai il caso
   "<a class=vf-btn>" reale (usato da solo, senza wrapper Elementor). */
.vf-btn.e-con,
.vf-btn .e-con-inner,
.vf-btn .elementor-widget-container {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: fit-content !important;
}

.vf-link-arrow,
.vf-link-arrow .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--vf-ink) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-meta) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--vf-ink);
  padding-bottom: 0.2em;
}
.vf-link-arrow .elementor-heading-title {
  margin: 0;
}

/* Riquadro segnaposto per foto non ancora disponibili: stessa texture a
   righe diagonali già usata per i ticket, cosi il pattern resta coerente
   ovunque manchi ancora la fotografia definitiva. */
.vf-photo-placeholder {
  position: relative !important;
  background: repeating-linear-gradient(45deg, #ececea 0 14px, #f5f5f3 14px 28px) !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
}

.vf-photo-placeholder::after {
  content: 'Foto in arrivo';
  display: block;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a86;
}

/* =========================================================================
   Countdown + info evento (contenuti reali da vinoforum.it/vinoforum-la-fiera)
   ========================================================================= */
.vf-event {
  background: var(--vf-ink);
  color: var(--text-inverse);
  padding: var(--band-pad-y) var(--page-margin);
  font-family: var(--font-sans);
}

/* Foto/video con il countdown in overlay sopra (widget "VF – Countdown
   su Media"): il countdown è posizionato in assoluto, centrato, molto
   grande, per stare sopra al media senza spingerlo in basso. */
.vf-event__media {
  position: relative;
  aspect-ratio: 21 / 9;
  margin-bottom: clamp(28px, 4vw, 48px);
  overflow: hidden;
}

.vf-event__media-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
}

.vf-event__media-photo.vf-photo-placeholder {
  background-image: repeating-linear-gradient(45deg, #2b2b29 0 14px, #232321 14px 28px);
}

.vf-event__media-video {
  object-fit: cover;
  background: #232321;
}

.vf-event__media-photo.vf-photo-placeholder::after {
  color: #9a9a96;
}

.vf-event__countdown-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 64px);
  flex-wrap: wrap;
  text-align: center;
  padding: 24px;
  font-family: var(--font-sans);
}

.vf-event__countdown-num {
  display: block;
  font-size: clamp(56px, 11vw, 168px);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--vf-countdown-color, #ffffff);
}

.vf-event__countdown-label {
  display: block;
  margin-top: 0.4em;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vf-countdown-color, #ffffff);
}

/* Stile "trasparente con contorno": i numeri diventano solo un contorno
   sottile, così il media sotto resta leggibile anche dietro le cifre. */
.vf-countdown--outline .vf-event__countdown-num {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--vf-countdown-color, #ffffff);
  text-stroke: 1.5px var(--vf-countdown-color, #ffffff);
}

.vf-countdown--outline .vf-event__countdown-label {
  opacity: 0.85;
}

.vf-event__countdown-overlay.vf-countdown--no-labels .vf-event__countdown-label {
  display: none;
}

@media (max-width: 600px) {
  .vf-event__countdown-overlay {
    gap: 12px;
  }
}

.vf-event__row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  max-width: var(--content-max);
  margin: 0 auto;
}

.vf-event__dates {
  flex: 1 1 260px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.25;
}

.vf-event__copy {
  flex: 2 1 420px;
  font-size: var(--text-body);
  line-height: 1.5;
}

.vf-event__copy p {
  margin: 0 0 1em;
}

.vf-event__copy .vf-btn {
  margin-top: 0.5em;
}

/* =========================================================================
   "Chi sei?" — titolo di sezione (le 3 card sotto sono il widget
   "VF – Card Doppia Faccia", vedi blocco ".vf-flip-*" più sotto)
   ========================================================================= */
.vf-whoare {
  padding: var(--band-pad-y) var(--page-margin);
  font-family: var(--font-sans);
}

.vf-whoare__title,
.vf-whoare__title .elementor-heading-title {
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-family: var(--font-sans) !important;
  font-size: var(--text-display) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--vf-ink) !important;
  text-align: center;
}

/* =========================================================================
   "VF – Card Doppia Faccia": card "a ventaglio" (leggermente inclinate e
   sovrapposte), fronte (titolo + foto) e retro (titolo + testo + bottone
   su sfondo colorato) sulla stessa card. Al passaggio del mouse (o al tap/
   Invio da touch e tastiera, gestito da vf-flip-cards.js) la card si
   raddrizza, si ingrandisce, va in primo piano e ruota mostrando il retro.
   La rotazione di riposo e lo z-index di ogni card sono calcolati in PHP
   (vedi VF_Widget_Flip_Cards::render) e arrivano come style inline: le
   regole qui sotto con !important servono a garantire che l'hover vinca
   sempre su quello stile inline (che altrimenti avrebbe la priorità).
   Nata per sostituire le card "Chi sei?" (Espositore / Operatore F&B /
   Wine&Food Lovers).
   ========================================================================= */

/* Bug di Chromium: quando il contenitore Elementor che avvolge il widget è
   display:flex (comportamento di default di ogni "Container" Elementor) e il
   contenuto ha aspect-ratio + transform 3D + una larghezza a rottura (100vw),
   il calcolo dell'altezza automatica del flex-item si blocca a un valore
   piccolissimo (es. 152px invece di ~1700px), mentre visivamente il contenuto
   trabocca (overflow:visible) sulle sezioni successive della pagina invece di
   spingerle in basso. Il contenitore "vf-whoare__grid" avvolge un solo figlio
   (il widget delle card) e non ha bisogno di essere flex: forzandolo a
   display:block si esce dall'algoritmo flex e l'altezza torna corretta. */
.vf-whoare__grid,
.vf-whoare__grid > .e-con-inner {
  display: block !important;
}

.vf-flip-grid {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--band-pad-y) clamp(20px, 6vw, 100px);
}

.vf-flip-card {
  position: relative;
  flex: 0 1 clamp(240px, 26vw, 420px);
  width: clamp(240px, 26vw, 420px);
  margin-left: clamp(-64px, -5vw, -36px);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.3s ease;
}

.vf-flip-card:first-child {
  margin-left: 0;
}

.vf-flip-grid:has(.vf-flip-card:hover) .vf-flip-card:not(:hover):not(.is-active) {
  opacity: 0.9;
}

.vf-flip-card:hover,
.vf-flip-card.is-active {
  transform: rotate(0deg) scale(1.08) !important;
  z-index: 200 !important;
  opacity: 1 !important;
}

.vf-flip-card__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  /* Niente "filter" qui: su un antenato di un elemento con
     "backface-visibility: hidden" rompe il compositing 3D (il retro non si
     nasconde più correttamente) — l'ombra va quindi messa sulle singole
     facce (".vf-flip-card__face"), non su questo contenitore. */
}

.vf-flip-card:hover .vf-flip-card__inner,
.vf-flip-card.is-active .vf-flip-card__inner {
  transform: rotateY(180deg);
}

.vf-flip-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-ticket);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 34px rgba(29, 29, 27, 0.18);
}

.vf-flip-card__face--front {
  background: var(--vf-paper);
}

.vf-flip-card__face--back {
  transform: rotateY(180deg);
  color: var(--text-inverse);
  padding: clamp(24px, 3vw, 40px);
}

.vf-flip-card__title-block {
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px) clamp(10px, 1.4vw, 16px);
}

.vf-flip-card__title-block--back {
  padding: 0 0 0.4em;
}

.vf-flip-card__title {
  font-family: var(--font-sans) !important;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--vf-ink);
  margin: 0;
}

.vf-flip-card__title-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
  color: #9a9a96;
  margin-top: 0.15em;
}

.vf-flip-card__title--back {
  /* !important necessario: senza, le regole ".vf-flip-card--{colore}
     .vf-flip-card__face--back" non c'entrano qui (il colore del titolo non
     dipende dalla variante), ma serve comunque a blindare il bianco anche
     se in futuro si aggiunge una regola più specifica altrove. */
  color: var(--text-inverse) !important;
}

.vf-flip-card__title-sub--back {
  color: rgba(255, 255, 255, 0.72);
}

.vf-flip-card__photo {
  flex: 1 1 auto;
  min-height: 0;
}

.vf-flip-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vf-flip-card__photo lottie-player {
  width: 100%;
  height: 100%;
  display: block;
}

.vf-flip-card__text {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text-inverse);
  margin: 0 0 1.4em;
  flex-grow: 1;
}

.vf-flip-card__cta {
  align-self: flex-start;
  display: inline-block;
  background: var(--vf-paper);
  color: var(--vf-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85em 1.7em;
  border-radius: 10px;
  transition: opacity 0.2s ease;
}

.vf-flip-card__cta:hover {
  opacity: 0.82;
}

.vf-flip-card--red .vf-flip-card__face--back { background: var(--vf-red); }
.vf-flip-card--red .vf-flip-card__photo.vf-photo-placeholder { background-image: repeating-linear-gradient(45deg, #fddbd0 0 14px, #ffe9e2 14px 28px); }

.vf-flip-card--wine .vf-flip-card__face--back { background: var(--vf-wine); }
.vf-flip-card--wine .vf-flip-card__photo.vf-photo-placeholder { background-image: repeating-linear-gradient(45deg, #eccdd1 0 14px, #f3e0e2 14px 28px); }

.vf-flip-card--green .vf-flip-card__face--back { background: var(--vf-green); }
.vf-flip-card--green .vf-flip-card__photo.vf-photo-placeholder { background-image: repeating-linear-gradient(45deg, #cdf1de 0 14px, #e2f8ec 14px 28px); }

.vf-flip-card--purple .vf-flip-card__face--back { background: var(--vf-purple); }
.vf-flip-card--purple .vf-flip-card__photo.vf-photo-placeholder { background-image: repeating-linear-gradient(45deg, #e3daf0 0 14px, #efe9f7 14px 28px); }

.vf-flip-card--ink .vf-flip-card__face--back { background: var(--vf-ink); }
.vf-flip-card--ink .vf-flip-card__photo.vf-photo-placeholder { background-image: repeating-linear-gradient(45deg, #2b2b29 0 14px, #232321 14px 28px); }
.vf-flip-card--ink .vf-flip-card__photo.vf-photo-placeholder::after { color: #9a9a96; }

@media (max-width: 900px) {
  .vf-flip-grid {
    flex-direction: column;
    left: auto;
    width: 100%;
    transform: none;
    padding: var(--band-pad-y) var(--page-margin);
    gap: 28px;
  }
  .vf-flip-card {
    margin-left: 0 !important;
    transform: none !important;
    width: 100%;
    max-width: 420px;
    flex: none;
  }
  .vf-flip-card:hover,
  .vf-flip-card.is-active {
    transform: scale(1.03) !important;
  }
  .vf-flip-grid:hover .vf-flip-card:not(:hover):not(.is-active) {
    opacity: 1;
  }
}

/* =========================================================================
   Blocchi contenuto — stack di card a scroll (ognuna resta "sticky" e la
   successiva sale sopra, sovrapponendola: The Night Dinner, Aziende
   Espositrici, Cucine a Vista, ecc.). Nessun JS: solo position:sticky con
   un "top" che aumenta leggermente da una card alla successiva, così quando
   si scrolla ciascuna si impila sopra la precedente invece di scorrerci
   semplicemente sotto.
   ========================================================================= */
.vf-features {
  padding: 0 0 var(--band-pad-y);
  max-width: none !important;
  margin: 0 !important;
  font-family: var(--font-sans);
}

/* ".vf-features" è annidato dentro un container ".vf-full" (per uscire dal
   cap di boxato di Elementor a livello di pagina): il proprio e-con-inner
   avrebbe comunque il cap di default, quindi va neutralizzato qui perché il
   vero max-width (quello sopra, 1398px) possa valere davvero. */
.vf-features > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  display: block !important;
}

.vf-features__card {
  position: sticky;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* "top" via cresce di card in card (dalla prima all'ultima): è quello che fa
   sì che la card successiva, salendo, si fermi un po' più in basso della
   precedente restando "agganciata" sopra di essa invece di coprirla del
   tutto. z-index cresce in parallelo così l'ordine di sovrapposizione
   rispecchia l'ordine di lettura. */
.vf-features__card:nth-of-type(1)  { top: 88px;  z-index: 1; }
.vf-features__card:nth-of-type(2)  { top: 112px; z-index: 2; }
.vf-features__card:nth-of-type(3)  { top: 136px; z-index: 3; }
.vf-features__card:nth-of-type(4)  { top: 160px; z-index: 4; }
.vf-features__card:nth-of-type(5)  { top: 184px; z-index: 5; }
.vf-features__card:nth-of-type(6)  { top: 208px; z-index: 6; }
.vf-features__card:nth-of-type(7)  { top: 232px; z-index: 7; }
.vf-features__card:nth-of-type(8)  { top: 256px; z-index: 8; }
.vf-features__card:nth-of-type(9)  { top: 280px; z-index: 9; }
.vf-features__card:nth-of-type(10) { top: 304px; z-index: 10; }
/* Margine di sicurezza fino a 10 card: se il Repeater del widget "VF – Card
   Feature" ne ha di più, quelle in eccesso restano comunque leggibili,
   semplicemente senza il progressivo "top" (nessun elemento si rompe). */

.vf-features__card + .vf-features__card {
  margin-top: -32px;
}

/* Solo l'angolo alto arrotondato: l'angolo basso resta squadrato così,
   quando la card successiva si sovrappone, non lascia mai intravedere un
   filo di bianco dietro le due curve che si incontrano (indipendentemente
   da quanto sia l'overlap). L'ultima card della pila recupera l'angolo
   basso arrotondato perché non ha nessuna card sopra che la copra. */
/* ".vf-features__card__box" è l'equivalente di ".e-con-inner" per le card
   generate dal widget "VF – Card Feature" (markup proprio, non un Container
   Elementor): stesse regole, per non duplicare nulla quando si passa da
   card scritte a mano a card via widget. */
.vf-features__card > .e-con-inner,
.vf-features__card > .vf-features__card__box {
  border-radius: 27px !important;
  padding: clamp(14px, 2vw, 24px) clamp(28px, 4vw, 48px) clamp(48px, 7vw, 88px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(24px, 4vw, 56px) !important;
  flex-wrap: wrap !important;
  max-width: none !important;
  width: 100% !important;
  min-height: 300px;
}

.vf-features__card:last-of-type > .e-con-inner,
.vf-features__card:last-of-type > .vf-features__card__box {
  border-radius: 27px !important;
}

.vf-features__card--red > .e-con-inner,    .vf-features__card--red > .vf-features__card__box    { background: var(--vf-red); color: var(--vf-paper); }
.vf-features__card--wine > .e-con-inner,   .vf-features__card--wine > .vf-features__card__box   { background: var(--vf-wine); color: var(--vf-paper); }
.vf-features__card--green > .e-con-inner,  .vf-features__card--green > .vf-features__card__box  { background: var(--vf-green); color: var(--vf-ink); }
.vf-features__card--purple > .e-con-inner, .vf-features__card--purple > .vf-features__card__box { background: var(--vf-purple); color: var(--vf-paper); }
.vf-features__card--ink > .e-con-inner,    .vf-features__card--ink > .vf-features__card__box    { background: var(--vf-ink); color: var(--vf-paper); }

.vf-features__number {
  display: none !important;
}

.vf-features__body {
  flex: 1 1 380px !important;
}

.vf-features__title-group {
  margin: 0 0 0.6em;
}

.vf-features__title-main,
.vf-features__title-main .elementor-heading-title,
.vf-features__title-main h3 {
  font-family: var(--font-sans) !important;
  font-size: clamp(26px, 2.8vw, 40px) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: 1.1;
  color: inherit !important;
}

.vf-features__title-sub,
.vf-features__title-sub .elementor-heading-title,
.vf-features__title-sub span {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: clamp(15px, 1.6vw, 20px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 0.12em;
  color: inherit !important;
  opacity: 0.85;
}

/* Il fix generico per il box del contenitore ".vf-btn" è in cima al file,
   vicino a ".vf-btn--outline" (si applica ovunque, non solo qui). Qui resta
   solo lo spacing specifico di questo contesto. */
.vf-features__card .vf-features__body .vf-features__cta {
  margin-top: 0.6em !important;
  color: inherit !important;
}

.vf-features__card .vf-features__body .vf-features__cta .elementor-heading-title a {
  display: inline-flex !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px currentColor !important;
  padding: 1.1em 2em !important;
}

.vf-features__card .vf-features__body .elementor-widget-text-editor,
.vf-features__card .vf-features__body p {
  font-size: var(--text-body);
  line-height: 1.5;
  color: inherit !important;
  opacity: 0.92;
  margin: 0.8em 0 0;
  max-width: 46ch;
}

.vf-features__photo {
  position: relative;
  flex: 0 0 380px !important;
  width: 380px;
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.vf-features__photo .elementor-widget-image,
.vf-features__photo .elementor-widget-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vf-features__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

@media (max-width: 900px) {
  /* Su mobile teniamo l'effetto sticky-stack (le card si sovrappongono allo
     scroll come su desktop): NON forziamo più position:static. Il contenuto
     va in colonna, ma senza vuoti — testo e foto ravvicinati, niente altezza
     minima forzata né "space-between". Prima il vuotone veniva da
     min-height:300px + justify-content:space-between + padding basso ampio. */
  .vf-features__card + .vf-features__card {
    margin-top: -28px;
  }
  .vf-features__card > .e-con-inner,
  .vf-features__card > .vf-features__card__box {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    gap: clamp(18px, 4vw, 28px) !important;
    padding: clamp(22px, 5vw, 30px) clamp(20px, 5vw, 28px) clamp(26px, 6vw, 38px) !important;
  }
  /* Su mobile le foto non rendono bene: nascoste. */
  .vf-features__photo {
    display: none !important;
  }
}

/* =========================================================================
   Footer — template Elementor Theme Builder (condizione "Intero sito").
   Ispirato al riferimento fornito (4 colonne + logo enorme in basso), nella
   nostra palette: sfondo --vf-ink, wordmark Vinòforum in bianco.
   ========================================================================= */
.vf-footer {
  background: var(--vf-ink);
  color: var(--text-inverse);
  font-family: var(--font-sans);
  padding: clamp(48px, 6vw, 96px) var(--page-margin) 0;
}

/* Riga delle 4 colonne: vive sull'e-con-inner, non sull'.e-con esterno. */
.vf-footer__cols > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: clamp(32px, 4vw, 64px) !important;
  width: 100% !important;
  padding-bottom: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.vf-footer__col {
  flex: 1 1 200px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.vf-footer__col-title,
.vf-footer__col-title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  color: var(--text-inverse) !important;
  margin: 0 0 1.3em !important;
}

.vf-footer__col-link,
.vf-footer__col-link .elementor-heading-title,
.vf-footer__col-link .elementor-heading-title a {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.7em !important;
  transition: color 0.2s ease;
}

.vf-footer__col-link .elementor-heading-title a:hover {
  color: var(--text-inverse) !important;
}

.vf-footer__col-text,
.vf-footer__col-text .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 0.5em !important;
}

.vf-footer__newsletter-cta {
  margin-top: 0.6em;
  min-height: 50px;
}

.vf-footer__social > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px !important;
  width: 100% !important;
  margin-top: 1.8em;
}

.vf-footer__social .elementor-icon {
  color: rgba(255, 255, 255, 0.75) !important;
  background: transparent !important;
  font-size: 20px !important;
  transition: color 0.2s ease;
}

.vf-footer__social .elementor-icon:hover {
  color: var(--text-inverse) !important;
}

/* Le icone social sono renderizzate come SVG inline (non font-icon) da
   Elementor 4.x: il colore va forzato sul fill dell'SVG stesso, "color"
   sul link non basta perché Elementor imposta un fill esplicito. */
.vf-footer__social .elementor-icon svg {
  fill: rgba(255, 255, 255, 0.75) !important;
  transition: fill 0.2s ease;
}

.vf-footer__social .elementor-icon:hover svg {
  fill: var(--text-inverse) !important;
}

.vf-footer__legal,
.vf-footer__legal .elementor-heading-title {
  text-align: center;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: clamp(24px, 3vw, 32px) 0;
  margin: 0 !important;
}

.vf-footer__wordmark {
  position: relative;
  padding-bottom: clamp(16px, 2.4vw, 32px);
}

.vf-footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Adesivo/badge sopra il wordmark: al momento un placeholder tratteggiato,
   in attesa del file reale da sostituire (stesso trattamento onesto usato
   per le "Foto in arrivo" nel resto del sito). */
.vf-footer__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: clamp(96px, 9vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  z-index: 2;
  background: var(--vf-ink);
}

.vf-footer__badge span {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* =========================================================================
   Pagina "The Night Dinner" (e altre pagine interne tipo evento singolo):
   header di pagina, intro testuale, fascia partner/sponsor, calendario
   cene (widget "VF – Cene Calendario") e nota finale.
   ========================================================================= */

.vf-page-hero {
  padding: clamp(64px, 9vw, 128px) var(--page-margin) clamp(32px, 5vw, 56px);
  font-family: var(--font-sans);
}

.vf-page-hero__title,
.vf-page-hero__title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: var(--leading-display) !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}

.vf-page-hero__subtitle,
.vf-page-hero__subtitle .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--vf-wine) !important;
  margin: 0.6em 0 0 !important;
  max-width: var(--content-max);
}

.vf-nd-intro {
  padding: 0 var(--page-margin) var(--band-pad-y);
  font-family: var(--font-sans);
}

.vf-nd-intro .elementor-widget-text-editor {
  max-width: 880px;
}

.vf-nd-intro p {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--vf-ink);
  margin: 0 0 1.1em;
}

.vf-nd-intro p:last-child {
  margin-bottom: 0;
}

/* Fascia loghi partner: griglia flessibile, loghi centrati e mai
   deformati (object-fit: contain), stessa altezza per riga più ordinata. */
.vf-nd-partners {
  padding: 0 var(--page-margin) var(--band-pad-y);
  font-family: var(--font-sans);
  border-top: 1px solid rgba(29, 29, 27, 0.1);
  padding-top: clamp(40px, 5vw, 64px);
}

.vf-nd-partners__title,
.vf-nd-partners__title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  color: var(--vf-ink) !important;
  margin: 0 0 clamp(24px, 3vw, 36px) !important;
}

.vf-nd-partners__title,
.vf-nd-partners__grid {
  padding: 0 !important;
}

.vf-nd-partners__grid > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(28px, 4vw, 48px) !important;
}

.vf-nd-partners__grid .elementor-widget-image {
  flex: 0 1 140px;
}

.vf-nd-partners__grid img {
  display: block;
  width: 100%;
  height: 70px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.vf-nd-partners__grid img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Calendario cene: widget "VF – Cene Calendario" (griglia di card).
   Il container che lo ospita ha solo "vf-full" (nessuna classe di sezione
   propria che azzeri il padding di default di Elementor sul container
   stesso): lo neutralizziamo qui per allinearlo al resto della pagina,
   dato che il padding "vero" arriva già dal div interno ".vf-dinner-cal"
   generato dal widget. */
.vf-full:has(> .e-con-inner > .elementor-widget-vf_dinner_calendar) {
  padding: 0 !important;
}

.elementor-widget-vf_dinner_calendar > .elementor-widget-container {
  padding: 0 !important;
}

.vf-dinner-cal {
  padding: 0 0 var(--band-pad-y);
  font-family: var(--font-sans);
}

.vf-dinner-cal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--page-margin);
  margin-bottom: clamp(28px, 4vw, 48px);
}

.vf-dinner-cal__title {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--vf-ink);
  margin: 0;
}

.vf-dinner-cal__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.vf-dinner-cal__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--vf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.vf-dinner-cal__nav-btn:hover {
  background: var(--vf-wine);
}

.vf-dinner-cal__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--page-margin);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.vf-dinner-cal__timeline::before {
  content: '';
  position: absolute;
  left: var(--page-margin);
  right: var(--page-margin);
  top: 5px;
  height: 1px;
  background: rgba(29, 29, 27, 0.14);
}

.vf-dinner-cal__timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none !important;
  border: none;
  padding: 8px 4px !important;
  margin: -8px -4px;
  cursor: pointer;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}

.vf-dinner-cal__timeline-item:focus-visible {
  outline: 2px solid var(--vf-wine);
  outline-offset: 2px;
  border-radius: 8px;
}

.vf-dinner-cal__timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--vf-paper);
  border: 2px solid rgba(29, 29, 27, 0.3);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vf-dinner-cal__timeline-item:hover .vf-dinner-cal__timeline-dot {
  border-color: var(--vf-wine);
}

.vf-dinner-cal__timeline-item.is-active .vf-dinner-cal__timeline-dot {
  background: var(--vf-wine);
  border-color: var(--vf-wine);
}

.vf-dinner-cal__timeline-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
}

.vf-dinner-cal__timeline-weekday {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: rgba(29, 29, 27, 0.45);
  transition: color 0.2s ease;
}

.vf-dinner-cal__timeline-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-ink);
  transition: color 0.2s ease;
}

.vf-dinner-cal__timeline-item.is-active .vf-dinner-cal__timeline-weekday,
.vf-dinner-cal__timeline-item.is-active .vf-dinner-cal__timeline-date {
  color: var(--vf-wine);
}

@media (max-width: 700px) {
  .vf-dinner-cal__timeline {
    display: none;
  }
}

.vf-dinner-cal__rail {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 8px var(--page-margin) 12px;
  scrollbar-width: none;
}

.vf-dinner-cal__rail::-webkit-scrollbar {
  display: none;
}

.vf-dinner-cal__card {
  scroll-snap-align: start;
  scroll-margin-left: var(--page-margin);
  flex: 0 0 clamp(240px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  background: #f4f0e9;
  border-radius: var(--radius-ticket);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.2s ease;
  padding: clamp(18px, 1.6vw, 24px);
}

.vf-dinner-cal__card.is-selected {
  box-shadow: 0 0 0 3px var(--vf-wine);
}

.vf-dinner-cal__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.vf-dinner-cal__badge {
  background: var(--vf-paper);
  color: var(--vf-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
}

.vf-dinner-cal__icon-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(29, 29, 27, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.vf-dinner-cal__name {
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: inherit;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-dinner-cal__place {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.75;
  margin: 0.5em 0 0;
  line-height: 1.4;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vf-dinner-cal__note {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.55;
  margin: 0.25em 0 0;
  color: inherit;
}

.vf-dinner-cal__photo-wrap {
  position: relative;
  margin-top: auto;
  padding-top: 18px;
}

.vf-dinner-cal__photo {
  aspect-ratio: 3 / 4;
  border-radius: calc(var(--radius-ticket) - 8px) calc(var(--radius-ticket) - 8px) var(--radius-ticket) var(--radius-ticket);
  overflow: hidden;
}

.vf-dinner-cal__cta {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(29, 29, 27, 0.85);
  color: var(--vf-paper);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  text-decoration: none;
}

.vf-dinner-cal__cta-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vf-wine);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Nota finale (es. condizioni biglietto): callout con bordo sottile. */
.vf-nd-note {
  padding: clamp(24px, 3vw, 36px) var(--page-margin);
  margin: 0 var(--page-margin) var(--band-pad-y);
  border: 1px solid rgba(29, 29, 27, 0.15);
  font-family: var(--font-sans);
}

.vf-nd-note p {
  font-size: 15px;
  font-weight: 500;
  font-style: italic;
  color: var(--vf-ink);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .vf-dinner-cal__card {
    flex-basis: 78vw;
  }

  .vf-dinner-cal__head {
    align-items: center;
  }
}

@media (max-width: 900px) {
  .vf-footer__cols > .e-con-inner {
    flex-direction: column !important;
  }
}

/* =========================================================================
   Blocco statistico intro ("The Night Dinner" e altre pagine interne):
   sostituisce il vecchio blocco solo-testo con una griglia a due colonne in
   stile "numero grande + icone" ispirata a riferimenti di case study/stat
   block. Numeri e citazioni sono tutti contenuti reali già presenti altrove
   nella pagina (45 posti, 7 cene, 9 partner, tagline WATCH/SAVOR/EXPERIENCE).
   ========================================================================= */
.vf-nd-stat-intro {
  padding: 0 var(--page-margin) var(--band-pad-y);
  font-family: var(--font-sans);
}

.vf-nd-stat-intro > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.vf-nd-stat-intro__left,
.vf-nd-stat-intro__right,
.vf-nd-stat-intro__number,
.vf-nd-stat-intro__subtitle,
.vf-nd-stat-intro__quote,
.vf-nd-stat-intro__attribution,
.vf-nd-stat-intro__stats,
.vf-nd-stat-intro__stat,
.vf-nd-stat-intro__stat-num,
.vf-nd-stat-intro__stat-label {
  padding: 0 !important;
}

.vf-nd-stat-intro__left {
  border-right: 1px solid rgba(29, 29, 27, 0.12);
  padding-right: clamp(20px, 4vw, 40px) !important;
}

.vf-nd-stat-intro__number .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: var(--vf-ink);
}

.vf-nd-stat-intro__subtitle .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  max-width: 320px;
  margin-top: 8px;
  color: var(--vf-ink);
}

.elementor-widget-vf_icon_row > .elementor-widget-container,
.elementor-widget-vf_pill_nav > .elementor-widget-container {
  padding: 0 !important;
}

.vf-icon-row {
  display: flex;
  align-items: center;
  margin: 28px 0 22px;
}

.vf-icon-row__item {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid var(--vf-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -14px;
}

.vf-icon-row__item:first-child {
  margin-left: 0;
}

.vf-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vf-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(29, 29, 27, 0.25);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--vf-ink);
}

.vf-pill--active {
  background: var(--vf-ink);
  border-color: var(--vf-ink);
  color: var(--vf-paper);
  font-weight: 600;
}

.vf-nd-stat-intro__quote .elementor-widget-text-editor,
.vf-nd-stat-intro__quote p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 380px;
  color: rgba(29, 29, 27, 0.65);
  margin: 0 0 6px;
}

.vf-nd-stat-intro__attribution .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
  color: var(--vf-ink);
}

.vf-nd-stat-intro__stats > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 32px 48px;
  margin-top: 32px;
  flex-wrap: wrap !important;
  align-items: flex-start;
}

.vf-nd-stat-intro__stat {
  width: auto !important;
  flex: 0 0 auto !important;
}

.vf-nd-stat-intro__stat-num .elementor-heading-title {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--vf-ink);
}

.vf-nd-stat-intro__stat-num--wine .elementor-heading-title {
  color: var(--vf-wine);
}

.vf-nd-stat-intro__stat-label p {
  font-size: 13px;
  color: rgba(29, 29, 27, 0.6);
  max-width: 130px;
  margin: 4px 0 0;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .vf-nd-stat-intro > .e-con-inner {
    grid-template-columns: 1fr;
  }

  .vf-nd-stat-intro__left {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(29, 29, 27, 0.12);
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   VF – Mappa Cantine (pagina "Cantine e Aziende Espositrici")
   Mappa d'Italia SVG inline cliccabile per regione + timeline giorni fiera
   per filtrare + pannello elenco cantine reali. Vedi inc/vf-cantine-data.php
   per il dataset e assets/js/vf-cantine-map.js per l'interattività.
   ========================================================================== */

.vf-cantine {
  padding: clamp(40px, 6vw, 88px) var(--page-margin);
  background: var(--vf-paper);
}

.vf-cantine__intro {
  max-width: 760px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}

.vf-cantine__title {
  margin: 0 0 0.3em;
  color: var(--vf-ink);
}

.vf-cantine__subtitle {
  margin: 0 0 0.6em;
  font-weight: 600;
  color: var(--vf-wine);
  font-size: clamp(16px, 1.6vw, 20px);
}

.vf-cantine__copy {
  margin: 0;
  color: rgba(29, 29, 27, 0.75);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
}

/* ---- Timeline giorni ---- */

.vf-cantine__timeline {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}

.vf-cantine__timeline-days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vf-cantine__search-wrap {
  width: 100%;
}

input[type="search"].vf-cantine__search {
  width: 100% !important;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: #faf7ef !important;
  border: 1px solid rgba(29, 29, 27, 0.12) !important;
  border-radius: 18px !important;
  padding: 14px 20px !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.vf-cantine__search::placeholder {
  color: rgba(29, 29, 27, 0.45);
}

input[type="search"].vf-cantine__search:focus {
  outline: none;
  border-color: var(--vf-wine) !important;
  box-shadow: 0 0 0 3px rgba(167, 42, 53, 0.12);
}

.vf-cantine__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 900px) {
  .vf-cantine__timeline {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.vf-cantine__day {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--vf-ink);
  background: transparent;
  border: 1.5px solid rgba(29, 29, 27, 0.25);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.vf-cantine__day:hover {
  border-color: var(--vf-wine);
  color: var(--vf-wine);
}

.vf-cantine__day.is-active {
  background: var(--vf-red);
  border-color: var(--vf-red);
  color: var(--vf-paper);
  transform: translateY(-1px);
}

/* ---- Corpo: mappa + pannello ---- */

.vf-cantine__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.vf-cantine__map-wrap {
  position: sticky;
  top: 24px;
}

.vf-italy-map {
  width: 100%;
  height: auto;
  max-height: 78vh;
  overflow: visible;
}

.vf-region {
  stroke: var(--vf-paper);
  stroke-width: 4;
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease, filter 0.18s ease, fill 0.25s ease;
  outline: none;
}

.vf-region[data-tier="0"] { fill: #efe9da; }
.vf-region[data-tier="1"] { fill: var(--vf-ill-pink); }
.vf-region[data-tier="2"] { fill: #f29a8a; }
.vf-region[data-tier="3"] { fill: #ee6a4c; }
.vf-region[data-tier="4"] { fill: var(--vf-red); }
.vf-region[data-tier="5"] { fill: var(--vf-wine); }

.vf-region:hover,
.vf-region:focus-visible {
  transform: scale(1.035);
  filter: brightness(1.06) drop-shadow(0 4px 10px rgba(29, 29, 27, 0.25));
}

.vf-region.is-active {
  stroke: var(--vf-ink);
  stroke-width: 5.5;
  filter: drop-shadow(0 6px 14px rgba(29, 29, 27, 0.3));
}

.vf-region.is-dimmed {
  opacity: 0.3;
}

.vf-cantine__map-hint {
  margin: 14px 2px 0;
  font-size: 12.5px;
  color: rgba(29, 29, 27, 0.5);
}

/* ---- Pannello cantine ---- */

.vf-cantine__panel {
  background: #faf7ef;
  border: 1px solid rgba(29, 29, 27, 0.12);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  min-height: 420px;
  max-height: 78vh;
  overflow-y: auto;
}

.vf-cantine__panel-empty {
  height: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.vf-cantine__panel-empty[hidden],
.vf-cantine__panel-content[hidden] {
  display: none !important;
}

.vf-cantine__panel-empty p {
  color: rgba(29, 29, 27, 0.55);
  font-size: 15px;
  max-width: 260px;
  margin: 0;
}

.vf-cantine__panel-region {
  margin: 0 0 0.15em;
  color: var(--vf-ink);
  font-size: clamp(22px, 2.2vw, 28px);
}

.vf-cantine__panel-count {
  margin: 0 0 20px;
  color: var(--vf-wine);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vf-cantine__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vf-cantine__wine-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(29, 29, 27, 0.1);
}

.vf-cantine__wine-item:last-child {
  border-bottom: none;
}

.vf-cantine__wine-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--vf-ink);
}

.vf-cantine__wine-stand {
  font-size: 12.5px;
  color: rgba(29, 29, 27, 0.55);
}

.vf-cantine__wine-region {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vf-wine);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.vf-cantine__panel-empty-day {
  color: rgba(29, 29, 27, 0.55);
  font-size: 14px;
  padding: 20px 0;
}

@media (max-width: 900px) {
  .vf-cantine__body {
    grid-template-columns: 1fr;
  }

  .vf-cantine__map-wrap {
    position: static;
  }

  .vf-cantine__panel {
    max-height: none;
  }
}

/* =========================================================================
   Pagina "Contatti": header di pagina, blocco data/luogo fiera, card
   contatti reali (generale / per esporre / per partnership / sede),
   riga social e mappa dell'area evento (embed reale da vinoforum.it).
   ========================================================================= */

.vf-contatti {
  padding: 0 var(--page-margin) clamp(48px, 6vw, 88px);
  font-family: var(--font-sans);
}

.vf-contatti__intro {
  max-width: 760px;
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.vf-contatti__label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vf-wine);
  margin: 0 0 0.6em;
}

.vf-contatti__copy {
  margin: 0;
  color: rgba(29, 29, 27, 0.75);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
}

/* ---- Griglia card contatti ---- */

.vf-contatti__grid {
  margin: 0 0 clamp(40px, 5vw, 64px);
}

.vf-contatti__grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
}

.vf-contatti__card {
  background: #faf7ef;
  border: 1px solid rgba(29, 29, 27, 0.12);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vf-contatti__card-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vf-wine);
}

.vf-contatti__card-name,
.vf-contatti__card-name .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.vf-contatti__card-link,
.vf-contatti__card-link .elementor-heading-title,
.vf-contatti__card-link .elementor-heading-title a {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--vf-ink) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.vf-contatti__card-link .elementor-heading-title a:hover {
  color: var(--vf-wine) !important;
}

.vf-contatti__card-text,
.vf-contatti__card-text .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(29, 29, 27, 0.7) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.4 !important;
}

/* ---- Riga social ---- */

.vf-contatti__social {
  margin: 0 0 clamp(40px, 5vw, 64px);
}

.vf-contatti__social > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
}

.vf-contatti__social .elementor-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--vf-ink) !important;
  color: var(--vf-paper) !important;
  font-size: 17px !important;
  transition: background 0.2s ease;
}

.vf-contatti__social .elementor-icon:hover {
  background: var(--vf-wine) !important;
}

.vf-contatti__social .elementor-icon svg {
  fill: var(--vf-paper) !important;
}

/* ---- Mappa area evento ---- */

.vf-contatti__map-title,
.vf-contatti__map-title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  color: var(--vf-ink) !important;
  margin: 0 0 1em !important;
}

.vf-contatti__map-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(29, 29, 27, 0.12);
}

.vf-contatti__map-wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

@media (max-width: 900px) {
  .vf-contatti__grid > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .vf-contatti__grid > .e-con-inner {
    grid-template-columns: 1fr !important;
  }

  .vf-contatti__map-wrap iframe {
    height: 300px;
  }
}

/* =========================================================================
   Redesign pagina "Contatti" v2: hero mappa con card fluttuante, fascia
   metriche, bento grid. Sostituisce il vecchio blocco ".vf-contatti"
   qui sopra (lasciato per non rompere eventuali riferimenti residui, ma
   non più usato dalla pagina). Nessun dato inventato: mappa reale su
   Piazza di Siena (sede della fiera), metriche e contatti reali già
   raccolti da vinoforum.it.
   ========================================================================= */

/* ---- Hero: mappa + card fluttuante ---- */

.vf-c-hero {
  position: relative;
  padding: 0 var(--page-margin);
}

.vf-c-hero__map-wrap {
  position: relative;
  border-radius: var(--radius-ticket);
  overflow: hidden;
  background: #eceae3;
}

.vf-c-hero__map-wrap iframe {
  display: block !important;
  width: 100% !important;
  height: clamp(360px, 46vw, 560px) !important;
  max-width: none !important;
  border: 0;
  filter: grayscale(0.75) contrast(1.05) brightness(1.04);
}

.vf-c-hero__card {
  position: absolute;
  top: 8%;
  right: 6%;
  width: min(320px, 84vw);
  background: var(--vf-paper);
  border-radius: 20px;
  box-shadow: 0 24px 48px -12px rgba(29, 29, 27, 0.28);
  overflow: hidden;
  font-family: var(--font-sans);
}

.vf-c-hero__card-photo {
  position: relative;
  height: 140px;
  background: #efe9da;
  border: none;
}

.vf-c-hero__card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--vf-paper);
  color: var(--vf-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

.vf-c-hero__card-body {
  padding: 16px 18px 18px;
}

.vf-c-hero__card-title,
.vf-c-hero__card-title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--vf-ink) !important;
  margin: 0 0 4px !important;
  letter-spacing: 0 !important;
}

.vf-c-hero__card-address {
  font-size: 13px;
  color: rgba(29, 29, 27, 0.6);
  margin: 0 0 12px;
}

.vf-c-hero__card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.vf-c-hero__card-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vf-ink);
  background: #f4f1e8;
  border-radius: 999px;
  padding: 5px 10px;
}

.vf-c-hero__card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(29, 29, 27, 0.1);
  padding-top: 14px;
}

.vf-c-hero__card-footer .vf-btn {
  padding: 9px 18px !important;
  font-size: 13px !important;
}

@media (max-width: 760px) {
  .vf-c-hero__card {
    position: static;
    width: auto;
    margin-top: 16px;
  }
}

/* ---- Fascia metriche ---- */

.vf-c-metrics {
  padding: clamp(40px, 5vw, 64px) var(--page-margin);
  border-bottom: 1px solid rgba(29, 29, 27, 0.1);
}

.vf-c-metrics > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.vf-c-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vf-c-metric__value,
.vf-c-metric__value .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: clamp(26px, 3vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--vf-ink) !important;
}

.vf-c-metric__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: rgba(29, 29, 27, 0.55);
}

@media (max-width: 760px) {
  .vf-c-metrics > .e-con-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 32px !important;
  }
}

/* ---- Bento grid contatti ---- */

.vf-c-bento {
  padding: clamp(56px, 7vw, 96px) var(--page-margin);
}

.vf-c-bento > .e-con-inner {
  display: grid !important;
  grid-template-columns: 0.75fr 1fr !important;
  gap: clamp(32px, 5vw, 64px) !important;
  align-items: start;
}

.vf-c-bento__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--vf-wine);
  margin: 0 0 1em;
}

.vf-c-bento__title,
.vf-c-bento__title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: clamp(32px, 3.6vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--vf-ink) !important;
  margin: 0 0 0.4em !important;
}

.vf-c-bento__copy {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(29, 29, 27, 0.7);
  max-width: 420px;
  margin: 0 0 28px;
}

.vf-c-bento__cta,
.vf-c-bento__cta .elementor-heading-title,
.vf-c-bento__cta .elementor-heading-title a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--vf-ink) !important;
  color: var(--vf-paper) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  transition: background 0.2s ease;
}

.vf-c-bento__cta .elementor-heading-title a:hover {
  background: var(--vf-wine) !important;
}

.vf-c-bento__grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.vf-c-card {
  background: var(--vf-paper);
  border: 1px solid rgba(29, 29, 27, 0.1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 28px -18px rgba(29, 29, 27, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vf-c-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -16px rgba(29, 29, 27, 0.4);
}

.vf-c-card--wide {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-image: radial-gradient(rgba(29, 29, 27, 0.14) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: right 24px center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.vf-c-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--vf-ink);
  color: var(--vf-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.vf-c-card__icon .elementor-icon {
  color: var(--vf-paper) !important;
  font-size: 16px !important;
}

.vf-c-card__icon .elementor-icon svg {
  fill: var(--vf-paper) !important;
}

.vf-c-card__title,
.vf-c-card__title .elementor-heading-title {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--vf-ink) !important;
  margin: 0 0 6px !important;
  letter-spacing: 0 !important;
}

.vf-c-card__link,
.vf-c-card__link .elementor-heading-title,
.vf-c-card__link .elementor-heading-title a {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vf-wine) !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 4px !important;
}

.vf-c-card__text {
  font-size: 13px;
  color: rgba(29, 29, 27, 0.6);
  line-height: 1.4;
  margin: 0;
}

.vf-c-card--wide .vf-c-card__social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.vf-c-card--wide .vf-c-card__social .elementor-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--vf-ink) !important;
  color: var(--vf-paper) !important;
  font-size: 15px !important;
}

.vf-c-card--wide .vf-c-card__social .elementor-icon svg {
  fill: var(--vf-paper) !important;
}

.vf-c-card--wide .vf-c-card__social .elementor-icon:hover {
  background: var(--vf-wine) !important;
}

.vf-c-card--wide .vf-c-card__mark {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--vf-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-c-card--wide .vf-c-card__mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .vf-c-bento > .e-con-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .vf-c-bento__grid > .e-con-inner {
    grid-template-columns: 1fr !important;
  }

  .vf-c-card--wide {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* =========================================================================
   Pagina "Partner": intro + sezioni a due colonne (etichetta categoria a
   sinistra, griglia loghi a destra) separate da un filo sottile, loghi in
   scala di grigi che tornano a colore all'hover. Ogni logo è un widget
   immagine nativo Elementor collegato a un attachment reale della media
   library: si può sostituire con un click, senza toccare il codice.
   ========================================================================= */

.vf-partner {
  padding: 0 var(--page-margin) clamp(48px, 6vw, 88px);
  font-family: var(--font-sans);
}

.vf-partner__intro-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.vf-partner__intro {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 640px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.vf-partner__title {
  margin: 0 0 0.3em;
  color: var(--vf-ink);
}

.vf-partner__copy {
  margin: 0;
  color: rgba(29, 29, 27, 0.7);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
}

.vf-partner__section {
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-bottom: 1px solid rgba(29, 29, 27, 0.12);
}

.vf-partner__section:last-child {
  border-bottom: none;
}

.vf-partner__section > .e-con-inner {
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) 1fr !important;
  gap: clamp(20px, 4vw, 56px) !important;
  align-items: start !important;
}

.vf-partner__label-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.vf-partner__label {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  color: var(--vf-ink);
  line-height: 1.3;
}

.vf-partner__grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* La griglia vera e propria vive DENTRO il widget "VF – Griglia Partner"
   (".vf-pg-grid", generata dal widget stesso attorno ai loghi), non più
   sull'".e-con-inner" del Container Elementor che lo ospita: cosi il
   numero di colonne, la scala e il bianco/nero diventano regolabili dalla
   scheda Stile del widget, per istanza, invece di un valore fisso uguale
   per tutte le sezioni partner del sito. */
.vf-pg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 2.5vw, 40px) clamp(4px, 0.6vw, 10px);
}

@media (max-width: 900px) {
  .vf-pg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vf-pg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vf-partner__logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100% !important;
}

.vf-partner__logo .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.vf-partner__logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.vf-partner__logo img {
  display: block;
  max-height: 200px;
  max-width: min(590px, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* Effetto "scala di grigi con hover a colori": disattivato di default (i
   loghi restano sempre a colori). Si attiva per singola sezione dal
   controllo "Effetto scala di grigi" del widget VF – Griglia Partner. */
.vf-partner__logo--grayscale img {
  filter: grayscale(1) contrast(1.05);
  opacity: 0.72;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.vf-partner__logo--grayscale:hover img {
  filter: none;
  opacity: 1;
}

@media (max-width: 700px) {
  .vf-partner__section > .e-con-inner {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* =========================================================================
   Style Guide (uso interno) — classi di sola consultazione per mostrare la
   scala tipografica reale del design system. Non usate su nessuna pagina
   pubblica del sito, solo sulla pagina "Style Guide (uso interno)".
   ========================================================================= */
.sg-row,
.sg-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.sg-swatch,
.sg-swatch > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.sg-swatch {
  width: 170px;
  min-height: 120px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.sg-type-stack,
.sg-type-stack > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.sg-type-hero .elementor-heading-title {
  font-size: var(--text-hero) !important;
  font-weight: var(--weight-display) !important;
  line-height: var(--leading-display) !important;
  letter-spacing: var(--tracking-display) !important;
  margin: 0 !important;
}

.sg-type-display .elementor-heading-title {
  font-size: var(--text-display) !important;
  font-weight: var(--weight-display) !important;
  line-height: var(--leading-display) !important;
  letter-spacing: var(--tracking-display) !important;
  margin: 0 !important;
}

.sg-type-statement .elementor-heading-title {
  font-size: var(--text-statement) !important;
  font-weight: var(--weight-display) !important;
  line-height: var(--leading-statement) !important;
  margin: 0 !important;
}

.sg-type-ticket .elementor-heading-title {
  font-size: var(--text-ticket-title) !important;
  font-weight: var(--weight-display) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.sg-type-body .elementor-heading-title {
  font-size: var(--text-body) !important;
  font-weight: var(--weight-regular) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.sg-type-meta .elementor-heading-title {
  font-size: var(--text-meta) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* =========================================================================
   Pagina Cuoco (template duplicabile) — .vf-chef
   Layout a due colonne: a sinistra info evento + menù, a destra foto + bio.
   Pensata per Container nativi di Elementor con queste classi.
   ========================================================================= */
.vf-chef {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 110px) var(--page-margin);
  font-family: var(--font-sans);
}

.vf-chef__grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: start !important;
}

.vf-chef__info > .e-con-inner,
.vf-chef__media > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(8px, 1vw, 16px) !important;
}

.vf-chef__day,
.vf-chef__day .elementor-heading-title {
  font-size: clamp(20px, 2.4vw, 28px) !important;
  font-weight: var(--weight-medium) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.25em !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}

.vf-chef__time,
.vf-chef__time .elementor-heading-title {
  font-size: clamp(16px, 1.6vw, 20px) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--vf-wine) !important;
  margin: 0 !important;
}

.vf-chef__name,
.vf-chef__name .elementor-heading-title {
  font-size: clamp(48px, 6vw, 92px) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: var(--leading-display) !important;
  color: var(--vf-ink) !important;
  margin: 0.12em 0 0.1em !important;
}

.vf-chef__restaurant,
.vf-chef__restaurant .elementor-heading-title {
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}

.vf-chef__place,
.vf-chef__place .elementor-heading-title {
  font-size: var(--text-body) !important;
  font-weight: var(--weight-regular) !important;
  color: #6b6b6b !important;
  margin: 0 !important;
}

.vf-chef__ticket { margin-top: clamp(14px, 1.6vw, 22px) !important; }
.vf-chef__ticket .elementor-button {
  background: var(--vf-red) !important;
  color: var(--text-inverse) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-meta) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
  border-radius: var(--radius-none) !important;
  padding: 1.1em 2em !important;
  fill: var(--text-inverse) !important;
}

.vf-chef__menu-title,
.vf-chef__menu-title .elementor-heading-title,
.vf-chef__bio-title,
.vf-chef__bio-title .elementor-heading-title {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: var(--weight-display) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  color: var(--vf-ink) !important;
  margin: clamp(22px, 3vw, 40px) 0 0 !important;
}

.vf-chef__menu .elementor-widget-container ol,
.vf-chef__menu ol {
  list-style: none !important;
  counter-reset: vf-portata;
  margin: 0.6em 0 0 !important;
  padding: 0 !important;
}
.vf-chef__menu ol li {
  counter-increment: vf-portata;
  display: flex;
  gap: 0.7em;
  padding: 0.55em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-size: var(--text-body);
  color: var(--vf-ink);
}
.vf-chef__menu ol li::before {
  content: counter(vf-portata);
  font-weight: 700;
  color: var(--vf-wine);
  min-width: 1.4em;
}

.vf-chef__photo img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: var(--radius-ticket) !important;
}

.vf-chef__bio,
.vf-chef__bio p {
  font-size: var(--text-body) !important;
  line-height: 1.6 !important;
  color: var(--vf-ink) !important;
}

@media (max-width: 820px) {
  .vf-chef__grid > .e-con-inner {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   Layout di default automatico per le NUOVE pagine.
   Ogni container di PRIMO livello (.e-con.e-parent) che NON ha già una classe
   di sezione del design system (prefisso "vf-") prende in automatico larghezza
   piena + margini laterali standard (--page-margin): così una pagina nuova
   nasce con lo stesso "respiro" di Homepage/Contatti/ecc. senza dover mettere
   .vf-full a mano ogni volta.
   Le sezioni esistenti hanno tutte una classe vf-* (incluso header/nav/footer/
   marquee), quindi vengono escluse dal :not() e restano identiche a prima.
   Opt-out: per tenere una sezione "boxed" su una pagina nuova basta darle una
   classe con prefisso "vf-" (es. la helper .vf-boxed qui sotto).
   ========================================================================= */
.e-con.e-parent:not([class*="vf-"]),
.e-con.e-parent:not([class*="vf-"]) > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
}
.e-con.e-parent:not([class*="vf-"]) > .e-con-inner {
  padding-left: var(--page-margin) !important;
  padding-right: var(--page-margin) !important;
}

/* Helper opt-out: sezione a larghezza contenuto centrata (boxed) */
.vf-boxed > .e-con-inner {
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
}

/* =========================================================================
   Pagina Biglietti — hero con titolo centrale + griglia biglietti "ticket"
   ========================================================================= */
.vf-tickets-hero {
  position: relative;
  min-height: 42vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 8vw, 120px) var(--page-margin);
}
.vf-tickets-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}
.vf-tickets-hero > .e-con-inner { position: relative; z-index: 1; }
.vf-tickets-hero__title,
.vf-tickets-hero__title .elementor-heading-title {
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: var(--leading-display) !important;
  margin: 0 !important;
}

/* ---- Griglia biglietti ---- */
.vf-bt-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 2vw, 30px);
  padding: clamp(28px, 4vw, 60px) var(--page-margin);
  font-family: var(--font-sans);
}
.vf-bt-grid__break { flex-basis: 100%; height: 0; margin: 0; }

/* Colori (palette del sito + bordeaux=wine, blu e magenta nuovi) */
.vf-bt--rosso    { --tk-bg: #e74426; --tk-fg: #ffffff; }
.vf-bt--viola    { --tk-bg: #654c99; --tk-fg: #ffffff; }
.vf-bt--verde    { --tk-bg: #3fad5a; --tk-fg: #ffffff; }
.vf-bt--rosa     { --tk-bg: #f6bcd2; --tk-fg: #ffffff; }
.vf-bt--bordeaux { --tk-bg: #a72a35; --tk-fg: #ffffff; }
.vf-bt--blu      { --tk-bg: #3b4cc0; --tk-fg: #ffffff; }
.vf-bt--magenta  { --tk-bg: #c451c9; --tk-fg: #ffffff; }
.vf-bt--grigio   { --tk-bg: #e9e6e1; --tk-fg: #1d1d1b; }

.vf-bt {
  --notch-r: 13px;
  position: relative;
  display: flex;
  background: var(--tk-bg);
  color: var(--tk-fg);
  border-radius: var(--radius-ticket);
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
  /* Tacche laterali come veri fori TRASPARENTI: due maschere radiali, una per
     metà (sinistra/destra), che "bucano" il biglietto sul bordo. Sotto il foro
     si vede lo sfondo (non del bianco), e l'ombra segue la sagoma bucata. */
  -webkit-mask:
    radial-gradient(circle var(--notch-r) at left 50%, transparent calc(var(--notch-r) - 1px), #000 var(--notch-r)) left / 50.5% 100% no-repeat,
    radial-gradient(circle var(--notch-r) at right 50%, transparent calc(var(--notch-r) - 1px), #000 var(--notch-r)) right / 50.5% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch-r) at left 50%, transparent calc(var(--notch-r) - 1px), #000 var(--notch-r)) left / 50.5% 100% no-repeat,
    radial-gradient(circle var(--notch-r) at right 50%, transparent calc(var(--notch-r) - 1px), #000 var(--notch-r)) right / 50.5% 100% no-repeat;
}
.vf-bt--giorno { width: clamp(240px, 25vw, 360px); min-height: 200px; }
.vf-bt--pass   { width: clamp(300px, 44vw, 560px); min-height: 210px; }

.vf-bt:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.18));
}
@media (prefers-reduced-motion: reduce) {
  .vf-bt { transition: none; }
  .vf-bt:hover { transform: none; }
}

.vf-bt__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  box-sizing: border-box;
}
.vf-bt__title {
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-size: clamp(28px, 3vw, 50px);
}
.vf-bt--pass .vf-bt__title { font-size: clamp(40px, 4.4vw, 72px); }
.vf-bt--giorno .vf-bt__title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vf-bt__tag {
  align-self: flex-start;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: clamp(14px, 1.4vw, 18px);
  padding: 0.15em 0.5em;
  margin: 0.45em 0;
}
.vf-bt__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6em;
  margin-top: auto;
  font-size: var(--text-meta);
}
.vf-bt--pass .vf-bt__foot { justify-content: flex-start; gap: 0.8em; }
.vf-bt__year { font-weight: 600; opacity: 0.85; }
.vf-bt__meta { font-weight: 600; }

/* Badge d'angolo (es. "Sold out", "Fast sell") */
.vf-bt__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: #1d1d1b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35em 0.7em;
  border-radius: 999px;
}

/* Prezzo */
.vf-bt__price {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1;
  margin-top: 0.25em;
}

/* Elenco "cosa è compreso" */
.vf-bt__incl {
  margin: 0.55em 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.vf-bt__incl p { margin: 0 0 0.4em; }
.vf-bt__incl p:last-child { margin-bottom: 0; }
.vf-bt__incl strong, .vf-bt__incl b { font-weight: 800; }
.vf-bt__incl em, .vf-bt__incl i { font-style: italic; }

/* Biglietto "ricco": contenuto allineato in alto a sinistra, non centrato */
.vf-bt--rich .vf-bt__body { gap: 0.35em; }
.vf-bt--rich.vf-bt--giorno .vf-bt__title {
  flex: 0 0 auto;
  display: block;
  text-align: left;
}

@media (max-width: 720px) {
  .vf-bt-grid__break { display: none; }
  .vf-bt--giorno { width: min(80vw, 300px); }
  .vf-bt--pass   { width: min(90vw, 520px); }
}

/* =========================================================================
   Pagina Cuoco v2 (concept "poster") — hero a due colonne:
   sinistra info+menù, destra poster del cuoco. Menù e poster sono widget
   dedicati (VF – Menù, VF – Poster Cuoco).
   ========================================================================= */
.vf-chefhero {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 96px) var(--page-margin);
  font-family: var(--font-sans);
}
.vf-chefhero__grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(32px, 5vw, 80px) !important;
  align-items: start !important;
}
.vf-chefhero__info > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(10px, 1.4vw, 20px) !important;
}

/* Bottone "Acquista biglietti" (nero) */
.vf-chefhero__buy .elementor-button {
  background: #000 !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  font-size: clamp(14px, 1.4vw, 18px) !important;
  padding: 0.55em 1.1em !important;
  border-radius: 0 !important;
}

.vf-chefhero__day,
.vf-chefhero__day .elementor-heading-title {
  font-size: clamp(44px, 6.2vw, 104px) !important;
  font-weight: var(--weight-display) !important;
  letter-spacing: var(--tracking-display) !important;
  line-height: 0.95 !important;
  color: var(--vf-ink) !important;
  margin: 0.1em 0 0 !important;
}
.vf-chefhero__time,
.vf-chefhero__time .elementor-heading-title {
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}
.vf-chefhero__name,
.vf-chefhero__name .elementor-heading-title {
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: var(--weight-display) !important;
  text-transform: uppercase !important;
  color: var(--vf-ink) !important;
  margin: clamp(18px, 2.4vw, 34px) 0 0 !important;
}
.vf-chefhero__rest-label,
.vf-chefhero__rest-label .elementor-heading-title {
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-caps) !important;
  font-weight: 700 !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}
.vf-chefhero__rest,
.vf-chefhero__rest .elementor-heading-title {
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--vf-ink) !important;
  margin: 0 !important;
}

/* ---- Widget Menù ---- */
.vf-menu {
  display: flex;
  gap: clamp(16px, 2vw, 34px);
  align-items: flex-start;
  font-family: var(--font-sans);
  margin-top: clamp(10px, 1.6vw, 22px);
}
.vf-menu__label {
  flex: 0 0 auto;
  min-width: 54px;
  padding-top: 0.35em;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.vf-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; }
.vf-menu__item {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: var(--weight-display);
  letter-spacing: -0.01em;
  color: inherit;
}
.vf-menu__desc { display: block; font-size: 15px; font-weight: 400; opacity: 0.7; margin-top: 0.1em; }

/* ---- Widget Poster Cuoco ---- */
.vf-poster { --pf: #f6bcd2; width: 100%; font-family: var(--font-sans); }
.vf-poster--rosa  { --pf: #f6bcd2; }
.vf-poster--rosso { --pf: #e74426; }
.vf-poster--viola { --pf: #654c99; }
.vf-poster--verde { --pf: #3fad5a; }
.vf-poster--wine  { --pf: #a72a35; }
.vf-poster__frame {
  position: relative;
  background: var(--pf);
  border-radius: 30px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.vf-poster__photo {
  position: absolute;
  top: clamp(14px, 1.8vw, 28px);
  left: clamp(18px, 2.2vw, 36px);
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  border-radius: 18px 30px 30px 18px;
}
.vf-poster__top {
  position: absolute;
  top: clamp(18px, 2.2vw, 32px);
  left: clamp(30px, 3.6vw, 56px);
  right: clamp(16px, 2vw, 28px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.vf-poster__day,
.vf-poster__rest {
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--vf-ink);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}
.vf-poster__rest { text-align: right; }
.vf-poster__rest-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; }
.vf-poster__name {
  position: absolute;
  left: clamp(26px, 3.2vw, 52px);
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2.2vw, 32px);
  z-index: 2;
  color: var(--pf);
  font-weight: var(--weight-display);
  font-size: clamp(38px, 4.8vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

@media (max-width: 820px) {
  .vf-chefhero__grid > .e-con-inner { grid-template-columns: 1fr !important; }
  .vf-poster__frame { max-width: 460px; }
}

/* Fascia partner nella pagina cuoco (sfondo beige come da concept) */
.vf-chef-partners {
  background: #f2efe9;
  padding: clamp(28px, 4vw, 60px) var(--page-margin) !important;
}

/* Pulsante "Acquista" del biglietto (compare solo se c'è il link) */
.vf-bt__buy {
  align-self: flex-start;
  margin-top: 0.7em;
  background: #fff;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  padding: 0.55em 1em;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.vf-bt__buy:hover { opacity: 0.85; }

/* =========================================================================
   Barra Biglietti flottante (widget VF – Barra Biglietti), fissa in basso.
   ========================================================================= */
.vf-buybar {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 2.4vw, 26px);
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #efece7;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  padding: 10px 10px 10px clamp(18px, 2.2vw, 28px);
  font-family: var(--font-sans);
}
.vf-buybar__date { font-weight: 700; font-size: clamp(14px, 1.6vw, 20px); color: var(--vf-ink); letter-spacing: -0.01em; white-space: nowrap; }
.vf-buybar__arw { font-weight: 500; }
.vf-buybar__sep { width: 1px; height: 22px; background: #e6e2da; flex: 0 0 auto; }
.vf-buybar__loc { display: inline-flex; align-items: center; gap: 6px; color: var(--vf-ink) !important; text-decoration: none; font-weight: 600; font-size: clamp(13px, 1.4vw, 17px); white-space: nowrap; }
.vf-buybar__loc svg { flex: 0 0 auto; }
.vf-buybar__loc span { border-bottom: 1px solid #cfcac1; }
.vf-buybar__loc:hover span { border-bottom-color: var(--vf-ink); }
.vf-buybar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--vf-red);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  white-space: nowrap;
}
.vf-buybar__cta:hover { background: #e0330e; }
.vf-buybar__arw2 { font-size: 15px; }

@media (max-width: 600px) {
  .vf-buybar {
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    gap: 10px;
    padding: 8px 8px 8px 15px;
    justify-content: space-between;
  }
  .vf-buybar__sep { display: none; }
  .vf-buybar__loc { font-size: 12px; }
  .vf-buybar__loc span { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vf-buybar__cta { padding: 0.7em 1.05em; }
}

/* =========================================================================
   Widget "VF – Sottopagine": card verso le pagine figlie (foto boxata dentro
   la card, con leggero arrotondamento).
   ========================================================================= */
.vf-subgrid {
  display: grid;
  grid-template-columns: repeat(var(--sp-cols, 3), minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(24px, 4vw, 48px) var(--page-margin);
  max-width: var(--content-max);
  margin-inline: auto;
  font-family: var(--font-sans);
}
.vf-subcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--vf-ink);
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 18px;
  padding: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vf-subcard:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12); }
.vf-subcard__img {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.vf-subcard__body { padding: 14px 6px 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vf-subcard__title { font-size: clamp(19px, 2vw, 24px); font-weight: var(--weight-display); letter-spacing: -0.02em; }
.vf-subcard__text { font-size: 15px; line-height: 1.45; color: #5f5e5a; flex: 1; }
.vf-subcard__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vf-red); margin-top: 4px; }
@media (max-width: 640px) { .vf-subgrid { grid-template-columns: 1fr; } }

/* =========================================================================
   Widget "VF – Chef & Barman": lista giorni a sinistra, due card poster
   (chef + barman) con descrizione a destra; il giorno attivo si cambia al
   click (JS vf-chef-barman).
   ========================================================================= */
.vf-cb {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 56px) var(--page-margin);
  font-family: var(--font-sans);
}
.vf-cb__days { display: flex; flex-direction: column; gap: clamp(6px, 1vw, 12px); }
.vf-cb__day {
  background: none !important; border: 0; padding: 0; text-align: left; cursor: pointer;
  box-shadow: none !important;
  font-family: inherit;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: var(--weight-display);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #c8c5bd;
  transition: color 0.15s ease;
}
/* Niente sfondo/box sui bottoni giorno in nessuno stato (il tema li stila) */
.vf-cb__day:hover,
.vf-cb__day:focus,
.vf-cb__day:active,
.vf-cb__day:focus-visible {
  background: none !important;
  box-shadow: none !important;
  outline: none;
}
.vf-cb__day.on { color: var(--vf-ink); }
.vf-cb__day:hover { color: #8a8a86; }

.vf-cb__panel { display: none; }
.vf-cb__panel.is-active { display: block; }
.vf-cb__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.vf-cb__card { display: flex; flex-direction: column; }
.vf-cb__role { display: none; }

.vf-cb__poster { --pf: #f6bcd2; position: relative; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #2a2320; }
.vf-cb__poster--rosa  { --pf: #f6bcd2; }
.vf-cb__poster--rosso { --pf: #e74426; }
.vf-cb__poster--viola { --pf: #b9a7e6; }
.vf-cb__poster--verde { --pf: #7fdca2; }
.vf-cb__poster--wine  { --pf: #e6a9b2; }
.vf-cb__poster--blu   { --pf: #9db8ff; }
.vf-cb__photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.vf-cb__poster::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.6) 100%);
}
.vf-cb__top {
  position: absolute; top: 14px; left: 16px; right: 14px; z-index: 2;
  display: flex; justify-content: space-between; gap: 8px;
  color: #fff; font-weight: 700; font-size: clamp(11px, 1.1vw, 14px); line-height: 1.15;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.vf-cb__venue { text-align: right; }
.vf-cb__venue-label { display: block; font-size: 0.72em; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.vf-cb__caption {
  position: absolute; left: 16px; right: 14px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.vf-cb__name {
  color: var(--pf); font-weight: var(--weight-display);
  font-size: clamp(22px, 2.6vw, 40px); line-height: 0.92; letter-spacing: -0.02em;
}
.vf-cb__desc { font-size: 14px; line-height: 1.45; color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); }

/* Overlay menù (compare al click sulla card) */
.vf-cb__poster.has-menu { cursor: pointer; }
.vf-cb__menu {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(20, 17, 15, 0.94); color: #fff;
  padding: clamp(18px, 3vw, 30px);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  overflow: auto;
}
.vf-cb__poster.is-open .vf-cb__menu { opacity: 1; visibility: visible; transform: none; }
.vf-cb__menu-close { align-self: flex-end; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.vf-cb__menu-body { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; margin-top: 6px; }

@media (max-width: 760px) {
  .vf-cb { grid-template-columns: 1fr; gap: 20px; }
  .vf-cb__days { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .vf-cb__day { font-size: 18px; }
  .vf-cb__cards { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Widget "VF – Temporary Restaurant" (prototipo B): barra dei giorni in
   alto (pillole), sotto una griglia a 3 colonne fisse per il giorno
   selezionato — foto, nome, pulsante "Vedi menu" che espande il testo
   sotto la card. Nessuno scroll orizzontale: con un numero fisso di
   colonne il contenuto in più va semplicemente a capo, niente più
   conflitti con grid-item/flex-shrink incontrati nelle versioni
   precedenti (griglia a 2 colonne e striscia scorrevole).
   ========================================================================= */
.vf-cb__panels {
  min-width: 0;
}

.vf-tr2 {
  font-family: var(--font-sans);
  padding: clamp(24px, 4vw, 56px) var(--page-margin);
  max-width: var(--content-max);
  margin-inline: auto;
}

.vf-tr2__days {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.vf-tr2__day {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #ddd9d0;
  background: #fff;
  color: #888780;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vf-tr2__day:hover {
  border-color: var(--vf-wine);
}
.vf-tr2__day.on {
  background: var(--vf-paper);
  border-color: var(--vf-ink);
  color: var(--vf-ink);
}

.vf-tr2__panel {
  display: none;
}
.vf-tr2__panel.is-active {
  display: block;
}

.vf-tr2__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.vf-tr2__card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ececea;
}
.vf-tr2__photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.vf-tr2__body {
  padding: 16px;
}
.vf-tr2__name {
  font-size: 16px;
  font-weight: var(--weight-display);
  color: var(--vf-ink);
  margin-bottom: 10px;
}
.vf-tr2__btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-wine);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.vf-tr2__btn:hover {
  text-decoration: underline;
}
.vf-tr2__menu {
  display: none;
  font-size: 14px;
  line-height: 1.5;
  color: #5f5e5a;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ececea;
}
.vf-tr2__menu.on {
  display: block;
}
.vf-tr2__menu p { margin: 0 0 0.6em; }
.vf-tr2__menu p:last-child { margin-bottom: 0; }
.vf-tr2__menu ul,
.vf-tr2__menu ol {
  margin: 0 0 0.6em;
  padding-left: 1.2em;
}
.vf-tr2__menu li { margin-bottom: 0.2em; }

@media (max-width: 760px) {
  .vf-tr2__cards {
    grid-template-columns: 1fr;
  }
}