/*
Theme Name:   Blocksy Child – Vibrisse Studio
Theme URI:    https://vibrissestudio.com
Description:  Child theme di Blocksy per Vibrisse Studio. Implementa il sistema di identità visiva brand: palette Art Deco, colori per sezione tematica, navbar/footer dark, e tokens CSS globali.
Author:       Vibrisse Studio
Author URI:   https://vibrissestudio.com
Template:     blocksy
Version:      1.2.0
Text Domain:  blocksy-child
*/

/*
  =========================================================
  VIBRISSE STUDIO — SISTEMA COLORI BRAND + ART DECO
  =========================================================

  BRAND COLORS (primari, regola 60-30-10)
  ─────────────────────────────────────────
  Avorio  #F5F2EB  →  --vbs-ivory       60% (background, respiro)
  Nero    #000000  →  --vbs-black       30% (struttura, navbar, footer)
  Oro     #D4AF37  →  --vbs-gold        10% (accenti, CTA, hover)

  ART DECO ACCENT (colori sezione tematica)
  ──────────────────────────────────────────
  Verde Smeraldo  #0F3D2E  →  --vbs-emerald    Sound & Music
  Blu Petrolio    #0B1C2D  →  --vbs-petroleum  Technology & XR
  Rosso Vino      #5A1E24  →  --vbs-wine       Visual Art / People

  NEUTRO
  ──────
  Grigio  #2F2F2F  →  --vbs-grey       Education & Culture / body text

  MAPPA PALETTE BLOCKSY (CSS vars automatiche)
  ─────────────────────────────────────────────
  color1  #D4AF37  →  --theme-palette-color-1  (oro)
  color2  #000000  →  --theme-palette-color-2  (nero)
  color3  #F5F2EB  →  --theme-palette-color-3  (avorio)
  color4  #0F3D2E  →  --theme-palette-color-4  (smeraldo)
  color5  #0B1C2D  →  --theme-palette-color-5  (petrolio)
  color6  #5A1E24  →  --theme-palette-color-6  (vino)
  color7  #2F2F2F  →  --theme-palette-color-7  (grigio)
  color8  #E8E3D9  →  --theme-palette-color-8  (avorio scuro)

  COLORI DINAMICI — Customizer (Aspetto → Vibrisse — Colori)
  ───────────────────────────────────────────────────────────
  Le variabili --vbs-dyn-* vengono iniettate via wp_add_inline_style()
  subito dopo questo foglio. Tutti i selettori le usano con fallback
  ai valori statici del brand.
  =========================================================
*/


/* ─────────────────────────────────────────────────────────
   0. OVERRIDE PALETTE BLOCKSY
   (global.css è cached con la palette di default — questo
    blocco, caricato DOPO global.css, sovrascrive le vars
    --theme-palette-color-* con i colori Vibrisse)
   ───────────────────────────────────────────────────────── */

:root {
  --theme-palette-color-1: #D4AF37;  /* Oro      */
  --theme-palette-color-2: #000000;  /* Nero     */
  --theme-palette-color-3: #F5F2EB;  /* Avorio   */
  --theme-palette-color-4: #0F3D2E;  /* Smeraldo */
  --theme-palette-color-5: #0B1C2D;  /* Petrolio */
  --theme-palette-color-6: #5A1E24;  /* Vino     */
  --theme-palette-color-7: #2F2F2F;  /* Grigio   */
  --theme-palette-color-8: #E8E3D9;  /* Avorio scuro */

  /* Override variabili semantiche Blocksy */
  --theme-text-color:         #2F2F2F;
  --theme-headings-color:     #000000;
  --theme-link-initial-color: #D4AF37;
  --theme-link-hover-color:   #EDD97A;
  --theme-border-color:       #E8E3D9;
}

/* ─────────────────────────────────────────────────────────
   0b. OVERRIDE HEADER — selettori esatti di Blocksy
   (global.css usa [data-row*="middle"] con background-color
    var(--theme-palette-color-8). Qui forziamo i colori
    dinamici dal Customizer con !important)
   ───────────────────────────────────────────────────────── */

/* Sfondo header completo */
[data-header*="type-1"] .ct-header,
[data-header*="type-1"] .ct-header [data-row] {
  background-color: var(--vbs-dyn-navbar-bg, #000000) !important;
  background-image: none !important;
}

/* Top row (language switch) */
[data-header*="type-1"] .ct-header [data-row*="top"] {
  background-color: var(--vbs-dyn-navbar-topbar, #2F2F2F) !important;
  border-bottom: 1px solid var(--vbs-dyn-navbar-border-top, rgba(212, 175, 55, 0.15)) !important;
}

/* Middle row (logo + menu) */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
  background-color: var(--vbs-dyn-navbar-bg, #000000) !important;
  border-bottom: 1px solid var(--vbs-dyn-navbar-border-mid, rgba(212, 175, 55, 0.25)) !important;
}

/* Colore testo logo */
[data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
  --theme-link-initial-color: var(--vbs-dyn-navbar-text, #F5F2EB);
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-title a {
  color: var(--vbs-dyn-navbar-text, #F5F2EB) !important;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-title a:hover {
  color: var(--vbs-dyn-navbar-hover, #D4AF37) !important;
}

/* Voci menu */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a .ct-menu-link {
  --theme-link-initial-color: var(--vbs-dyn-navbar-text, #F5F2EB);
  color: var(--vbs-dyn-navbar-text, #F5F2EB) !important;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a:hover,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-item > a,
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a {
  --theme-link-initial-color: var(--vbs-dyn-navbar-hover, #D4AF37);
  color: var(--vbs-dyn-navbar-hover, #D4AF37) !important;
}

/* Submenu dropdown */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
  background-color: var(--vbs-dyn-navbar-bg, #000000) !important;
  border-top: 2px solid var(--vbs-dyn-navbar-hover, #D4AF37) !important;
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
  --theme-link-initial-color: var(--vbs-dyn-navbar-text, #F5F2EB);
  color: var(--vbs-dyn-navbar-text, #F5F2EB) !important;
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover {
  color: var(--vbs-dyn-navbar-hover, #D4AF37) !important;
}

/* Icone search e trigger */
[data-header*="type-1"] .ct-header [data-id="search"],
[data-header*="type-1"] .ct-header [data-id="trigger"] {
  --theme-icon-color: var(--vbs-dyn-navbar-text, #F5F2EB);
  color: var(--vbs-dyn-navbar-text, #F5F2EB) !important;
}

[data-header*="type-1"] .ct-header [data-id="search"] svg,
[data-header*="type-1"] .ct-header [data-id="trigger"] svg {
  fill: var(--vbs-dyn-navbar-text, #F5F2EB) !important;
}

[data-header*="type-1"] .ct-header [data-id="search"]:hover svg,
[data-header*="type-1"] .ct-header [data-id="trigger"]:hover svg {
  fill: var(--vbs-dyn-navbar-hover, #D4AF37) !important;
}

/* Language switch nel top-row — usa vars riga superiore */
[data-header*="type-1"] .ct-header .vbs-lang-switch-unit,
[data-header*="type-1"] .ct-header .vbs-lang-switch-unit a {
  color: var(--vbs-dyn-topbar-text, #F5F2EB) !important;
  --theme-text-color: var(--vbs-dyn-topbar-text, #F5F2EB);
}

[data-header*="type-1"] .ct-header .vbs-lang-switch-unit a:hover,
[data-header*="type-1"] .ct-header .vbs-lang-switch-unit a.is-active {
  color: var(--vbs-dyn-topbar-hover, #D4AF37) !important;
  opacity: 1 !important;
}

/* Override footer → fisso nero brand */
[data-footer*="type-1"] .ct-footer,
[data-footer*="type-1"] .ct-footer [data-row] {
  background-color: #000000 !important;
  color: #F5F2EB !important;
}

[data-footer*="type-1"] .ct-footer a {
  color: rgba(245, 242, 235, 0.75) !important;
}

[data-footer*="type-1"] .ct-footer a:hover {
  color: #D4AF37 !important;
}


/* ─────────────────────────────────────────────────────────
   1. CSS TOKEN SYSTEM — VARIABILI GLOBALI
   ───────────────────────────────────────────────────────── */

:root {

  /* Brand */
  --vbs-ivory:       #F5F2EB;
  --vbs-ivory-dark:  #E8E3D9;
  --vbs-black:       #000000;
  --vbs-gold:        #D4AF37;
  --vbs-gold-light:  #EDD97A;
  --vbs-gold-alpha:  rgba(212, 175, 55, 0.18);

  /* Art Deco accents */
  --vbs-emerald:     #0F3D2E;
  --vbs-petroleum:   #0B1C2D;
  --vbs-wine:        #5A1E24;

  /* Neutrali */
  --vbs-grey:        #2F2F2F;
  --vbs-grey-mid:    #666666;
  --vbs-grey-light:  #999999;

  /* Mappa semantica sezioni (alias statici — override da --vbs-dyn-* via Customizer) */
  --vbs-color-sound:  var(--vbs-emerald);
  --vbs-color-tech:   var(--vbs-petroleum);
  --vbs-color-visual: var(--vbs-wine);
  --vbs-color-edu:    var(--vbs-grey);
  --vbs-color-studio: var(--vbs-black);
  --vbs-color-collab: var(--vbs-gold);

  /* Tipografia (override da Customizer → --vbs-font-*) */
  --vbs-font-display: 'Cormorant Garamond', Georgia, serif;        /* hero, grandissimo */
  --vbs-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; /* h1–h4  */
  --vbs-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;       /* corpo   */
  --vbs-font-label:   'Josefin Sans', system-ui, sans-serif;                 /* menu/UI */
  --vbs-font-mono:    'Courier New', Courier, monospace;

  /* UI */
  --vbs-radius:      2px;
  --vbs-transition:  0.22s ease;
  --vbs-shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.12);

  /* Navbar controls (override da Customizer con --vbs-dyn-*) */
  --vbs-navbar-gap-home:      0px;
  --vbs-logo-height-desktop: 52px;
  --vbs-logo-height-mobile:  40px;
  --vbs-menu-size-desktop:   12px;
  --vbs-menu-size-mobile:    18px;
  --vbs-navbar-height-desktop: 120px;
  --vbs-navbar-height-mobile:   70px;
  --vbs-navbar-bottom-space-desktop: 0px;
  --vbs-navbar-bottom-space-mobile:  0px;
  --vbs-tiles-min-height: 220px;
  --vbs-tiles-image-opacity: 0.36;
  --vbs-tiles-image-fit: cover;
  --vbs-tiles-image-blend: overlay;
  --vbs-tiles-image-scale: 1;
  --vbs-tiles-image-offset-x: 0px;
  --vbs-tiles-image-offset-y: 0px;
  --vbs-tiles-image-rotation: 0deg;
  --vbs-tiles-deco-opacity: 1;

  /* Card system — globali, sovrascrivibili per-card via .vbs-card--* o inline */
  --card-radius:      8px;    /* 0 = squadrate, 8px = stondato */
  --card-shadow-blur: 32px;   /* intensità ombra */
  --card-min-height:  220px;  /* altezza minima desktop */
}


/* ─────────────────────────────────────────────────────────
   2. BODY / GLOBAL
   ───────────────────────────────────────────────────────── */

/* Background solo su body — #main e ct-page-content-inner restano trasparenti
   così le bande decorative (z-index:0) sono visibili dove il contenuto non ha
   uno sfondo opaco proprio. Il body ivory fa da canvas di base. */
body {
  background-color: var(--vbs-dyn-page-bg, var(--vbs-ivory)) !important;
}

#main,
.ct-page-content-inner {
  background-color: transparent !important;
}

/* Reset: .ct-container dentro l'header non deve prendere il colore pagina */
.ct-header .ct-container,
[data-header*="type-1"] .ct-container {
  background-color: transparent !important;
}

body {
  color: var(--vbs-grey);
  font-family: var(--vbs-font-body);
  font-size: 1rem;
  line-height: 1.72;
  font-weight: 400;
}

h1, h2, h3, h4 {
  color: var(--vbs-black);
  font-family: var(--vbs-font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem,   5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.625rem); }
h4 { font-size: 1.2rem; }

/* h5/h6 → label style (Josefin Sans uppercase) */
h5, h6 {
  color: var(--vbs-black);
  font-family: var(--vbs-font-label);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

a {
  color: var(--vbs-black);
  transition: color var(--vbs-transition);
}

a:hover {
  color: var(--vbs-gold);
}

::selection {
  background-color: var(--vbs-gold);
  color: var(--vbs-black);
}


/* ─────────────────────────────────────────────────────────
   3. HEADER / NAVBAR
   ───────────────────────────────────────────────────────── */

/* Wrapper principale header */
.ct-header,
.ct-header-top-row,
.ct-header-middle-row,
.ct-header-bottom-row {
  background-color: var(--vbs-dyn-navbar-bg, var(--vbs-black)) !important;
}

/* Top-row (language switch) */
.ct-header [data-row="top-row"],
.ct-header-top-row {
  background-color: var(--vbs-dyn-navbar-topbar, var(--vbs-grey)) !important;
  border-bottom: 1px solid var(--vbs-dyn-navbar-border-top, rgba(212, 175, 55, 0.12)) !important;
}

/* Middle-row (logo + menu) */
.ct-header [data-row="middle-row"],
.ct-header-middle-row {
  border-bottom: 1px solid var(--vbs-dyn-navbar-border-mid, rgba(212, 175, 55, 0.28)) !important;
}

/* Testo globale header */
.ct-header,
.ct-header *:not(img):not(svg) {
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory));
}

/* Logo / site title */
.site-title a,
.site-title,
.ct-header .site-title a,
.ct-header .ct-logo .site-title {
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
  font-family: var(--vbs-dyn-logo-title-font-family, var(--vbs-font-heading));
  font-weight: var(--vbs-dyn-logo-title-font-weight, 400);
  font-style: var(--vbs-dyn-logo-title-font-style, normal);
  font-size: var(--vbs-dyn-logo-title-font-desktop, 25px) !important;
  line-height: var(--vbs-dyn-logo-title-line-height, 1);
  letter-spacing: var(--vbs-dyn-logo-title-letter-spacing, 0.1em);
  text-transform: uppercase;
  text-decoration: var(--vbs-dyn-logo-title-text-decoration, none) !important;
}

.site-title a,
.ct-header .site-title a {
  transform: scaleX(var(--vbs-dyn-logo-title-scale-x, 1)) scaleY(var(--vbs-dyn-logo-title-scale-y, 1));
  transform-origin: center center;
}

.site-title a:hover,
.ct-header .site-title a:hover {
  color: var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
}

/* Menu items */
.ct-header .ct-menu > li > a,
.ct-header .menu-item > a,
#ct-header .ct-menu a {
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
  font-family: var(--vbs-font-label) !important;
  font-size: var(--vbs-dyn-menu-font-size-desktop, var(--vbs-menu-size-desktop));
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Logo size indipendente dal menu */
.ct-header [data-id="logo"] img,
.ct-header [data-id="logo"] .custom-logo {
  max-height: var(--vbs-dyn-logo-height-desktop, var(--vbs-logo-height-desktop)) !important;
  width: auto !important;
}

/* Allineamento verticale logo/menu anche con logo ridotto */
.ct-header [data-row="middle-row"] [data-id="logo"],
.ct-header [data-row="middle-row"] [data-id="menu"],
.ct-header [data-row="middle-row"] [data-id="search"],
.ct-header [data-row="middle-row"] [data-id="trigger"] {
  align-self: center;
}

.ct-header [data-id="logo"] a,
.ct-header [data-id="logo"] .site-title a {
  display: inline-flex;
  align-items: center;
}

/* Spessore riga principale navbar */
[data-header*="type-1"] .ct-header [data-row*="middle"] {
  min-height: var(--vbs-dyn-navbar-height-desktop, var(--vbs-navbar-height-desktop));
  padding-bottom: var(--vbs-dyn-navbar-bottom-space-desktop, var(--vbs-navbar-bottom-space-desktop)) !important;
}

/* Centra verticalmente contenuto middle row su viewport grandi */
[data-header*="type-1"] .ct-header [data-row*="middle"] > .ct-container {
  display: flex;
  align-items: center;
}

[data-header*="type-1"] .ct-header [data-row*="middle"] > .ct-container [data-column] {
  display: flex;
  align-items: center;
}

/* Menu hover + active */
.ct-header .ct-menu > li > a:hover,
.ct-header .ct-menu > li.current-menu-item > a,
.ct-header .ct-menu > li.current-menu-ancestor > a,
.ct-header .ct-menu > li.current-page-ancestor > a {
  color: var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
}

/* Dropdown submenu */
.ct-header .ct-menu .sub-menu {
  background-color: var(--vbs-dyn-navbar-bg, var(--vbs-black)) !important;
  border-top: 2px solid var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.ct-header .ct-menu .sub-menu .menu-item a {
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
}

.ct-header .ct-menu .sub-menu .menu-item a:hover,
.ct-header .ct-menu .sub-menu .current-menu-item a {
  color: var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
  background-color: rgba(212, 175, 55, 0.07) !important;
}

/* Icona search */
.ct-header [data-id="search"] .ct-icon,
.ct-header [data-id="search"] svg path,
.ct-header [data-id="search"] svg {
  fill: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
}

.ct-header [data-id="search"]:hover .ct-icon,
.ct-header [data-id="search"]:hover svg {
  fill: var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
  color: var(--vbs-dyn-navbar-hover, var(--vbs-gold)) !important;
}

/* Hamburger / mobile trigger */
.ct-header [data-id="trigger"] .ct-icon,
.ct-header .menu-toggle .ct-icon,
.ct-header [data-id="trigger"] svg {
  fill: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
  color: var(--vbs-dyn-navbar-text, var(--vbs-ivory)) !important;
}

/* Language switch — top-row header (riga superiore) */
.ct-header .vbs-lang-switch-unit,
.ct-header .vbs-lang-switch-unit a,
.ct-header-top-row .vbs-lang-switch-unit,
.ct-header-top-row .vbs-lang-switch-unit a {
  color: var(--vbs-dyn-topbar-text, var(--vbs-ivory)) !important;
}

.ct-header .vbs-lang-switch-unit a:hover,
.ct-header .vbs-lang-switch-unit a.is-active {
  color: var(--vbs-dyn-topbar-hover, var(--vbs-gold)) !important;
  opacity: 1;
}

.ct-header .vbs-lang-switch-unit a.is-active {
  text-decoration-color: var(--vbs-dyn-topbar-hover, var(--vbs-gold));
}

.ct-header .vbs-lang-switch-unit span[aria-hidden] {
  color: rgba(245, 242, 235, 0.35) !important;
}

/* Sticky header */
.ct-header.is-sticky,
.ct-header[data-sticky="yes"] {
  background-color: var(--vbs-dyn-navbar-bg, rgba(0, 0, 0, 0.97)) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}


/* ─────────────────────────────────────────────────────────
   4. OFF-CANVAS / MOBILE MENU (drawer)
   ───────────────────────────────────────────────────────── */

.ct-drawer,
.ct-panel {
  background-color: var(--vbs-dyn-page-bg, var(--vbs-ivory)) !important;
}

.ct-drawer a,
.ct-panel a,
.ct-drawer .ct-menu a {
  color: var(--vbs-black) !important;
}

.ct-drawer .ct-menu a:hover,
.ct-drawer .ct-menu .current-menu-item > a,
.ct-panel .ct-menu a:hover {
  color: var(--vbs-gold) !important;
}

/* Bordo separatore lang-switch nel drawer */
.vbs-offcanvas-lang-wrap {
  border-top-color: var(--vbs-dyn-navbar-border-mid, rgba(212, 175, 55, 0.22)) !important;
}

.ct-drawer .vbs-lang-switch-unit,
.ct-drawer .vbs-lang-switch-unit a {
  color: var(--vbs-black) !important;
}

.ct-drawer .vbs-lang-switch-unit a:hover,
.ct-drawer .vbs-lang-switch-unit a.is-active {
  color: var(--vbs-gold) !important;
}

/* Icona close del drawer */
.ct-drawer .ct-toggle-close,
.ct-panel .ct-toggle-close {
  color: var(--vbs-black) !important;
}

.ct-drawer .ct-toggle-close:hover {
  color: var(--vbs-gold) !important;
}


/* ─────────────────────────────────────────────────────────
   5. FOOTER
   ───────────────────────────────────────────────────────── */

.ct-footer,
.footer-top-row,
.footer-middle-row,
.footer-bottom-row,
.ct-footer-top-row,
.ct-footer-middle-row,
.ct-footer-bottom-row {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-ivory) !important;
}

.ct-footer p,
.ct-footer span,
.ct-footer li,
.ct-footer address {
  color: rgba(245, 242, 235, 0.7) !important;
}

.ct-footer a {
  color: rgba(245, 242, 235, 0.75) !important;
  text-decoration: none;
  transition: color var(--vbs-transition);
}

.ct-footer a:hover {
  color: var(--vbs-gold) !important;
}

.ct-footer .widget-title,
.ct-footer h3,
.ct-footer h4,
.ct-footer h5 {
  color: var(--vbs-gold) !important;
  font-family: var(--vbs-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Divider footer */
.ct-footer hr,
.ct-footer .footer-divider,
.footer-bottom-row-container {
  border-color: rgba(212, 175, 55, 0.18) !important;
}

/* Copyright */
.ct-footer .footer-bottom-row-container {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  color: rgba(245, 242, 235, 0.45) !important;
}


/* ─────────────────────────────────────────────────────────
   6. PULSANTI / CTA
   ───────────────────────────────────────────────────────── */

/* Primary — gold bg, black text (default globale) */
.wp-block-button .wp-block-button__link,
.ct-button,
.entry-content .button,
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
  background-color: var(--vbs-gold) !important;
  color: var(--vbs-black) !important;
  border: 2px solid var(--vbs-gold) !important;
  border-radius: var(--vbs-radius) !important;
  font-family: var(--vbs-font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    background-color var(--vbs-transition),
    color var(--vbs-transition),
    box-shadow var(--vbs-transition);
}

.wp-block-button .wp-block-button__link:hover,
.ct-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-gold) !important;
  border-color: var(--vbs-gold) !important;
  box-shadow: var(--vbs-shadow-gold);
}

/* Outline / ghost */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  background-color: transparent !important;
  border: 2px solid var(--vbs-gold) !important;
  color: var(--vbs-gold) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--vbs-gold) !important;
  color: var(--vbs-black) !important;
}


/* ─────────────────────────────────────────────────────────
   7. SEZIONI TEMATICHE ART DECO
   ─────────────────────────────────────────────────────────

   Classi da applicare ai blocchi Gutenberg (Group, Cover, ecc.)
   tramite "Additional CSS class" nell'editor.

   SEZIONI SCURE (sfondo pieno, testo avorio):
     .vbs-section-sound      → Sound & Music       (Verde Smeraldo)
     .vbs-section-tech       → Technology & XR     (Blu Petrolio)
     .vbs-section-visual     → Visual Art / People (Rosso Vino)
     .vbs-section-edu        → Education & Culture (Grigio scuro)
     .vbs-section-studio     → Studio Hub          (Nero)

   SEZIONI CHIARE:
     .vbs-section-brand      → Neutro brand        (Avorio)

   PAGINE — classi body (in Impostazioni Pagina → Classe CSS):
     .vbs-page-homepage      → Homepage / brand
     .vbs-page-projects      → Progetti
     .vbs-page-people        → Persone
     .vbs-page-sound         → Studio — Sound
     .vbs-page-tech          → Studio — Tech
     .vbs-page-visual        → Studio — Visual
     .vbs-page-edu           → Studio — Education
     .vbs-page-collab        → Collabora

   ───────────────────────────────────────────────────────── */

/* ── Sezioni scure ───────────────────────────────────────── */

.vbs-section-sound  { background-color: var(--vbs-dyn-sound,  var(--vbs-emerald));   color: var(--vbs-ivory); }
.vbs-section-tech   { background-color: var(--vbs-dyn-tech,   var(--vbs-petroleum)); color: var(--vbs-ivory); }
.vbs-section-visual { background-color: var(--vbs-dyn-visual, var(--vbs-wine));      color: var(--vbs-ivory); }
.vbs-section-edu    { background-color: var(--vbs-dyn-edu,    var(--vbs-grey));      color: var(--vbs-ivory); }
.vbs-section-studio { background-color: var(--vbs-black);                             color: var(--vbs-ivory); }
.vbs-section-brand  { background-color: var(--vbs-dyn-page-bg, var(--vbs-ivory));    color: var(--vbs-grey);  }

/* Headings nelle sezioni scure.
   Fallback avorio solo quando il blocco NON ha colore impostato da CMS. */
.vbs-section-sound :is(h1,h2,h3,h4,h5,h6):not(.has-text-color):not([style*="color"]),
.vbs-section-tech :is(h1,h2,h3,h4,h5,h6):not(.has-text-color):not([style*="color"]),
.vbs-section-visual :is(h1,h2,h3,h4,h5,h6):not(.has-text-color):not([style*="color"]),
.vbs-section-edu :is(h1,h2,h3,h4,h5,h6):not(.has-text-color):not([style*="color"]),
.vbs-section-studio :is(h1,h2,h3,h4,h5,h6):not(.has-text-color):not([style*="color"]) {
  color: var(--vbs-ivory);
}

/* Linea oro sopra gli h2 nelle sezioni scure (dettaglio Art Deco) */
.vbs-section-sound h2::before,
.vbs-section-tech h2::before,
.vbs-section-visual h2::before,
.vbs-section-edu h2::before,
.vbs-section-studio h2::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--vbs-gold);
  margin-bottom: 14px;
}

/* Link nelle sezioni scure */
.vbs-section-sound a,
.vbs-section-tech a,
.vbs-section-visual a,
.vbs-section-edu a,
.vbs-section-studio a {
  color: var(--vbs-gold);
}

.vbs-section-sound a:hover,
.vbs-section-tech a:hover,
.vbs-section-visual a:hover,
.vbs-section-edu a:hover,
.vbs-section-studio a:hover {
  color: var(--vbs-gold-light);
}

/* Paragrafi / testo secondario nelle sezioni scure */
.vbs-section-sound p,
.vbs-section-tech p,
.vbs-section-visual p,
.vbs-section-edu p,
.vbs-section-studio p {
  color: rgba(245, 242, 235, 0.85);
}

/* ── Pulsanti CTA nelle sezioni scure — outline gold ─────── */

.vbs-section-sound .wp-block-button .wp-block-button__link,
.vbs-section-tech .wp-block-button .wp-block-button__link,
.vbs-section-visual .wp-block-button .wp-block-button__link,
.vbs-section-edu .wp-block-button .wp-block-button__link,
.vbs-section-studio .wp-block-button .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid var(--vbs-gold) !important;
  color: var(--vbs-gold) !important;
}

.vbs-section-sound .wp-block-button .wp-block-button__link:hover,
.vbs-section-tech .wp-block-button .wp-block-button__link:hover,
.vbs-section-visual .wp-block-button .wp-block-button__link:hover,
.vbs-section-edu .wp-block-button .wp-block-button__link:hover,
.vbs-section-studio .wp-block-button .wp-block-button__link:hover {
  background-color: var(--vbs-gold) !important;
  color: var(--vbs-black) !important;
}

/* ── Accento per pagina — body class system ──────────────── */
/*
   Imposta la classe CSS in: Modifica Pagina → Impostazioni → Classe CSS
   Es: vbs-page-sound
   Il colore accento del Customizer viene applicato a link hover e pulsanti.
*/

/* Homepage */
.vbs-page-homepage a:hover {
  color: var(--vbs-dyn-homepage, var(--vbs-gold));
}
.vbs-page-homepage .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-homepage, var(--vbs-gold)) !important;
  border-color: var(--vbs-dyn-homepage, var(--vbs-gold)) !important;
}

/* Progetti */
.vbs-page-projects a:hover {
  color: var(--vbs-dyn-projects, var(--vbs-gold));
}
.vbs-page-projects .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-projects, var(--vbs-gold)) !important;
  border-color: var(--vbs-dyn-projects, var(--vbs-gold)) !important;
}

/* Persone */
.vbs-page-people a:hover {
  color: var(--vbs-dyn-people, var(--vbs-wine));
}
.vbs-page-people .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-people, var(--vbs-wine)) !important;
  border-color: var(--vbs-dyn-people, var(--vbs-wine)) !important;
  color: var(--vbs-ivory) !important;
}
.vbs-page-people .wp-block-button .wp-block-button__link:hover {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-dyn-people, var(--vbs-wine)) !important;
  border-color: var(--vbs-dyn-people, var(--vbs-wine)) !important;
}

/* Studio — Sound */
.vbs-page-sound a:hover {
  color: var(--vbs-dyn-sound, var(--vbs-emerald));
}
.vbs-page-sound .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-sound, var(--vbs-emerald)) !important;
  border-color: var(--vbs-dyn-sound, var(--vbs-emerald)) !important;
  color: var(--vbs-ivory) !important;
}
.vbs-page-sound .wp-block-button .wp-block-button__link:hover {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-dyn-sound, var(--vbs-emerald)) !important;
  border-color: var(--vbs-dyn-sound, var(--vbs-emerald)) !important;
}

/* Studio — Tech */
.vbs-page-tech a:hover {
  color: var(--vbs-dyn-tech, var(--vbs-petroleum));
}
.vbs-page-tech .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-tech, var(--vbs-petroleum)) !important;
  border-color: var(--vbs-dyn-tech, var(--vbs-petroleum)) !important;
  color: var(--vbs-ivory) !important;
}
.vbs-page-tech .wp-block-button .wp-block-button__link:hover {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-dyn-tech, var(--vbs-petroleum)) !important;
  border-color: var(--vbs-dyn-tech, var(--vbs-petroleum)) !important;
}

/* Studio — Visual */
.vbs-page-visual a:hover {
  color: var(--vbs-dyn-visual, var(--vbs-wine));
}
.vbs-page-visual .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-visual, var(--vbs-wine)) !important;
  border-color: var(--vbs-dyn-visual, var(--vbs-wine)) !important;
  color: var(--vbs-ivory) !important;
}
.vbs-page-visual .wp-block-button .wp-block-button__link:hover {
  background-color: var(--vbs-black) !important;
  color: var(--vbs-dyn-visual, var(--vbs-wine)) !important;
  border-color: var(--vbs-dyn-visual, var(--vbs-wine)) !important;
}

/* Studio — Education */
.vbs-page-edu a:hover {
  color: var(--vbs-dyn-edu, var(--vbs-grey));
}

/* Collabora */
.vbs-page-collab a:hover {
  color: var(--vbs-dyn-collab, var(--vbs-gold));
}
.vbs-page-collab .wp-block-button .wp-block-button__link {
  background-color: var(--vbs-dyn-collab, var(--vbs-gold)) !important;
  border-color: var(--vbs-dyn-collab, var(--vbs-gold)) !important;
}


/* ─────────────────────────────────────────────────────────
   8. PROJECT CARDS & TAG SYSTEM
   ───────────────────────────────────────────────────────── */

/* Card base */
.vbs-card {
  background-color: var(--vbs-ivory);
  border: 1px solid var(--vbs-ivory-dark);
  border-bottom: 3px solid var(--vbs-gold);
  color: var(--vbs-grey);
  transition:
    transform var(--vbs-transition),
    box-shadow var(--vbs-transition);
}

.vbs-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(212, 175, 55, 0.18);
}

.vbs-card__title {
  color: var(--vbs-black);
  font-family: var(--vbs-font-heading);
}

/* Tag pill — definiti ma nascosti nelle card tile (troppo pesanti visivamente).
   Abilitabili su singole pagine progetto con: .vbs-show-tags .vbs-tag { display:inline-block } */
.vbs-card-tags {
  display: none;
}

.vbs-tag {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--vbs-font-label);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--vbs-radius);
  line-height: 1.6;
}

/* Varianti tag — usano i colori dinamici dal Customizer */
.vbs-tag--sound    { color: var(--vbs-dyn-sound,  var(--vbs-emerald));   border-color: var(--vbs-dyn-sound,  var(--vbs-emerald));   }
.vbs-tag--tech     { color: var(--vbs-dyn-tech,   var(--vbs-petroleum)); border-color: var(--vbs-dyn-tech,   var(--vbs-petroleum)); }
.vbs-tag--visual   { color: var(--vbs-dyn-visual, var(--vbs-wine));      border-color: var(--vbs-dyn-visual, var(--vbs-wine));      }
.vbs-tag--edu      { color: var(--vbs-dyn-edu,    var(--vbs-grey));      border-color: var(--vbs-dyn-edu,    var(--vbs-grey));      }
.vbs-tag--gold     { color: var(--vbs-gold);       border-color: var(--vbs-gold);       }
.vbs-tag--neutral  { color: var(--vbs-grey-mid);   border-color: var(--vbs-grey-mid);   }


/* ─────────────────────────────────────────────────────────
   9. DISPLAY FONT — Cormorant Garamond per hero text
   ─────────────────────────────────────────────────────────
   Classe da applicare ai blocchi Heading/Paragraph Gutenberg
   tramite "Additional CSS class": vbs-display
   ───────────────────────────────────────────────────────── */

.vbs-display,
.vbs-display h1,
.vbs-display h2,
.vbs-display h3,
.vbs-display p {
  font-family: var(--vbs-font-display);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.vbs-display--italic,
.vbs-display--italic h1,
.vbs-display--italic h2 {
  font-style: italic;
}

/* Display size — usato in hero fullscreen */
.vbs-display--xl { font-size: clamp(3rem, 8vw, 7rem); }
.vbs-display--lg { font-size: clamp(2.5rem, 6vw, 5rem); }


/* ─────────────────────────────────────────────────────────
   10. ELEMENTI TIPOGRAFICI / DECORATIVI
   ───────────────────────────────────────────────────────── */

/* Separatori */
.wp-block-separator.is-style-wide,
.wp-block-separator:not(.is-style-dots) {
  border-color: var(--vbs-gold) !important;
  opacity: 0.35;
}

/* Blockquote — Playfair Display italic */
blockquote,
.wp-block-quote {
  border-left: 3px solid var(--vbs-gold);
  padding-left: 1.2em;
  color: var(--vbs-grey-mid);
  font-family: var(--vbs-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Codice */
code, pre {
  background-color: var(--vbs-grey);
  color: var(--vbs-ivory);
  font-family: var(--vbs-font-mono);
  border-radius: var(--vbs-radius);
}

/* Linea decorativa Art Deco — utility class */
.vbs-gold-rule {
  display: block;
  width: 48px;
  height: 1px;
  background-color: var(--vbs-gold);
  margin: 0 auto 1.5em;
}

.vbs-gold-rule--left {
  margin-left: 0;
}


/* ─────────────────────────────────────────────────────────
   11. EDITOR GUTENBERG (wp-admin)
   ───────────────────────────────────────────────────────── */

.editor-styles-wrapper {
  background-color: var(--vbs-ivory) !important;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  color: var(--vbs-black);
  font-family: var(--vbs-font-heading);
}


/* ─────────────────────────────────────────────────────────
   13. ACCENT COLOR PER PAGINA
   ─────────────────────────────────────────────────────────
   --vbs-page-accent iniettato via wp_head (Sezione 10 di
   functions.php) solo se la pagina ha un accent impostato
   nel meta box "Colore accento pagina".
   Fallback → colori brand statici.
   ───────────────────────────────────────────────────────── */

/* h1 usa accent color se disponibile */
h1 {
  color: var(--vbs-page-accent, var(--vbs-black));
}

/* Link hover nel contenuto (non navbar) usa accent */
.ct-page-content-inner a:hover,
.entry-content a:hover,
.wp-block-post-content a:hover {
  color: var(--vbs-page-accent, var(--vbs-gold));
}


/* ─────────────────────────────────────────────────────────
   14. BANDE DECORATIVE DIAGONALI
   ─────────────────────────────────────────────────────────
   Tre bande diagonali (skewX -30°), ancorate al fondo del
   viewport con position:fixed. Visibili solo sulle pagine
   con _vbs_accent_color impostato (HTML iniettato via PHP,
   Sezione 11 di functions.php).

   Strati:
   .vbs-stripe--1  → 100% opacità  (banda principale)
   .vbs-stripe--2  →  42% opacità
   .vbs-stripe--3  →  18% opacità

   Entrano dal basso con animazione CSS su page load.
   z-index: -1 → sempre dietro al contenuto.
   ───────────────────────────────────────────────────────── */

/* Stacking fix: il body ha background-color che copre z-index:-1.
   Le bande sono a z-index:0; il contenuto principale è portato a z-index:1
   tramite le regole qui sotto. */
#main,
.ct-footer,
[data-footer] {
  position: relative;
  z-index: 1;
}

.vbs-bg-stripes {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vbs-stripe {
  position: absolute;
  bottom: -20%;
  height: 140%;
  transform-origin: bottom center;
  will-change: transform;
}

.vbs-stripe--1 {
  width: 72px;
  right: 64px;
  background-color: var(--vbs-page-accent);
  opacity: 1;
  transform: skewX(-30deg);
  animation: vbs-stripe-in 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.vbs-stripe--2 {
  width: 40px;
  right: 175px;
  background-color: var(--vbs-page-accent);
  opacity: 0.42;
  transform: skewX(-30deg);
  animation: vbs-stripe-in 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.vbs-stripe--3 {
  width: 22px;
  right: 258px;
  background-color: var(--vbs-page-accent);
  opacity: 0.18;
  transform: skewX(-30deg);
  animation: vbs-stripe-in 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes vbs-stripe-in {
  from { transform: skewX(-30deg) translateY(110%); }
  to   { transform: skewX(-30deg) translateY(0);    }
}

/* ── Responsive bande ──────────────────────────────────── */
@media (max-width: 999px) {
  .vbs-bg-stripes  { height: 35vh; }
  .vbs-stripe--1   { width: 48px; right: 32px; }
  .vbs-stripe--2   { width: 26px; right: 100px; }
  .vbs-stripe--3   { display: none; }
}

@media (max-width: 599px) {
  .vbs-bg-stripes  { height: 28vh; }
  .vbs-stripe--1   { width: 36px; right: 18px; }
  .vbs-stripe--2   { width: 18px; right: 68px; opacity: 0.30; }
}

/* Riduce il movimento se l'utente lo preferisce */
@media (prefers-reduced-motion: reduce) {
  .vbs-stripe {
    animation: none;
    transform: skewX(-30deg) translateY(0);
  }
}


/* ─────────────────────────────────────────────────────────
   12. RESPONSIVE — aggiustamenti mobile
   ───────────────────────────────────────────────────────── */

@media (max-width: 999px) {

  .ct-header [data-row="top-row"],
  .ct-header-top-row {
    background-color: var(--vbs-dyn-navbar-topbar, var(--vbs-grey)) !important;
  }

  .ct-header [data-row="middle-row"],
  .ct-header-middle-row {
    border-bottom: 1px solid var(--vbs-dyn-navbar-border-mid, rgba(212, 175, 55, 0.22)) !important;
  }

  [data-header*="type-1"] .ct-header [data-row*="middle"] {
    min-height: var(--vbs-dyn-navbar-height-mobile, var(--vbs-navbar-height-mobile));
    padding-bottom: var(--vbs-dyn-navbar-bottom-space-mobile, var(--vbs-navbar-bottom-space-mobile)) !important;
  }

  .site-title a,
  .site-title,
  .ct-header .site-title a,
  .ct-header .ct-logo .site-title {
    font-size: var(--vbs-dyn-logo-title-font-tablet, 22px) !important;
  }

  .ct-header [data-id="logo"] img,
  .ct-header [data-id="logo"] .custom-logo {
    max-height: var(--vbs-dyn-logo-height-mobile, var(--vbs-logo-height-mobile)) !important;
  }

  [data-header*="type-1"] [data-id="mobile-menu"] {
    --theme-font-size: var(--vbs-dyn-menu-font-size-mobile, var(--vbs-menu-size-mobile));
  }
}

@media (max-width: 689px) {
  .site-title a,
  .site-title,
  .ct-header .site-title a,
  .ct-header .ct-logo .site-title {
    font-size: var(--vbs-dyn-logo-title-font-mobile, 20px) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   15. HOMEPAGE LANDING — sezioni specifiche
   ─────────────────────────────────────────────────────────
   Blocchi Gutenberg strutturati per la landing page.
   Classi da applicare tramite "Additional CSS class" o
   già incluse nel contenuto della pagina Home (ID 31).

   Struttura sezioni:
     .vbs-hero            → Cover block hero 90vh
     .vbs-mondi-section   → 4 ambienti di lavoro (colonne colorate)
     .vbs-mondo--*        → singola colonna tematica
     .vbs-progetti-section → griglia card progetto
     .vbs-progetto-card   → singola card (wp:column wrapper)
     .vbs-cols-centered   → riga 2-card centrata
     .vbs-partners-section → loghi/nomi partner
     .vbs-cta-section     → call-to-action finale
   ───────────────────────────────────────────────────────── */

/* ── Hero Cover ─────────────────────────────────────────── */

.vbs-hero .wp-block-cover__inner-container {
  max-width: 820px;
  padding: 0 2rem;
  position: relative;
  z-index: 3;
}

.vbs-hero h1 {
  font-family: var(--vbs-font-display) !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.vbs-hero > .wp-block-cover__inner-container > p {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
}

.vbs-hero .wp-block-cover__background,
.vbs-hero .wp-block-cover__gradient-background,
.vbs-hero .wp-block-cover__image-background {
  z-index: 1;
}

/* Hero text color override (IT/EN): enforce black for title and copy */
body.home .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p,em,strong),
body.page-id-31 .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p,em,strong),
body.page-id-8 .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p,em,strong) {
  color: var(--vbs-black) !important;
}

/* Hero overlay: outlined CTA (2nd button) in black */
.vbs-hero .wp-block-button.is-style-outline .wp-block-button__link,
.vbs-hero .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
  border-color: var(--vbs-black) !important;
  color: var(--vbs-black) !important;
}

.vbs-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--vbs-black) !important;
  border-color: var(--vbs-black) !important;
  color: var(--vbs-gold) !important;
}

/* Home IT/EN hero: fallback allineamento testuale.
   Se un blocco ha classi has-text-align-* (Gutenberg), prevale quella scelta. */
body.home .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p):not(.has-text-align-left):not(.has-text-align-center):not(.has-text-align-right):not(.has-text-align-justify),
body.page-id-31 .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p):not(.has-text-align-left):not(.has-text-align-center):not(.has-text-align-right):not(.has-text-align-justify),
body.page-id-8 .vbs-hero .wp-block-cover__inner-container :is(h1,h2,h3,h4,h5,h6,p):not(.has-text-align-left):not(.has-text-align-center):not(.has-text-align-right):not(.has-text-align-justify) {
  text-align: left;
}

/* Home: rimuove spazio tra navbar e primo blocco banner/carousel */
body.home .ct-page-content,
body.home .ct-page-content-inner,
body.page-id-31 .ct-page-content,
body.page-id-31 .ct-page-content-inner,
body.page-id-8 .ct-page-content,
body.page-id-8 .ct-page-content-inner {
  padding-top: 0 !important;
}

body.home .entry-content > .alignfull:first-child,
body.home .entry-content > .wp-block-cover:first-child,
body.home .entry-content > .wp-block-image:first-child,
body.page-id-31 .entry-content > .alignfull:first-child,
body.page-id-31 .entry-content > .wp-block-cover:first-child,
body.page-id-31 .entry-content > .wp-block-image:first-child,
body.page-id-8 .entry-content > .alignfull:first-child,
body.page-id-8 .entry-content > .wp-block-cover:first-child,
body.page-id-8 .entry-content > .wp-block-image:first-child {
  margin-top: var(--vbs-dyn-navbar-gap-home, var(--vbs-navbar-gap-home)) !important;
}

@media (min-width: 600px) {
  body.home .vbs-hero,
  body.page-id-31 .vbs-hero,
  body.page-id-8 .vbs-hero {
    background-image: url('/wp-content/uploads/2026/03/Hero_Desktop.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  body.home .vbs-hero .wp-block-cover__image-background,
  body.page-id-31 .vbs-hero .wp-block-cover__image-background,
  body.page-id-8 .vbs-hero .wp-block-cover__image-background {
    display: none;
  }
}


/* ── 4 Mondi ────────────────────────────────────────────── */

.vbs-mondi-section {
  overflow: hidden;
}

.vbs-mondi-section .wp-block-columns {
  gap: 0 !important;
  margin-bottom: 0 !important;
  align-items: stretch;
}

.vbs-mondi-section .wp-block-columns.vbs-lbt-separator-ready {
  --vbs-lbt-sep-color: #A8B9C5;
  --vbs-lbt-sep-width: 6px;
  --vbs-lbt-sep-height: 120px;
}

.vbs-mondi-section > .wp-block-group__inner-container > h6 {
  padding-bottom: 2rem;
  margin-bottom: 0;
}

/* core/column border mode styles (block editor style variants)
   - Inner: usa il bordo nativo.
   - Outer: disegna il bordo fuori dal box preservando per-side settings. */
.wp-block-column.is-style-vbs-border-inner {
  position: relative;
}

.wp-block-column.is-style-vbs-border-outer {
  position: relative;
}

.wp-block-column.is-style-vbs-border-outer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 4;
  top: calc(-1 * var(--vbs-bo-top-w, 0px));
  right: calc(-1 * var(--vbs-bo-right-w, 0px));
  bottom: calc(-1 * var(--vbs-bo-bottom-w, 0px));
  left: calc(-1 * var(--vbs-bo-left-w, 0px));
  border-top-width: var(--vbs-bo-top-w, 0px);
  border-right-width: var(--vbs-bo-right-w, 0px);
  border-bottom-width: var(--vbs-bo-bottom-w, 0px);
  border-left-width: var(--vbs-bo-left-w, 0px);
  border-top-style: var(--vbs-bo-top-style, solid);
  border-right-style: var(--vbs-bo-right-style, solid);
  border-bottom-style: var(--vbs-bo-bottom-style, solid);
  border-left-style: var(--vbs-bo-left-style, solid);
  border-top-color: var(--vbs-bo-top-color, transparent);
  border-right-color: var(--vbs-bo-right-color, transparent);
  border-bottom-color: var(--vbs-bo-bottom-color, transparent);
  border-left-color: var(--vbs-bo-left-color, transparent);
  border-radius: inherit;
}

.vbs-mondo {
  padding: 2.75rem 1.75rem;
  border-top: 3px solid transparent;
  transition: border-top-color 0.22s ease, filter 0.22s ease;
  min-height: 155px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--wp--style--block-gap, 0.9rem);
}

.vbs-mondo:hover {
  border-top-color: var(--vbs-gold);
  filter: brightness(1.14);
}

.vbs-mondo h3 {
  font-family: var(--vbs-font-label) !important;
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.4;
}

.vbs-mondo h3:not(.has-text-color):not([style*="color"]) {
  color: var(--vbs-black);
}

.vbs-mondo p:not(.has-text-color):not([style*="color"]) {
  color: var(--vbs-black);
  line-height: 1.55;
  margin: 0;
}

.vbs-mondo p:not(.has-small-font-size):not(.has-normal-font-size):not(.has-medium-font-size):not(.has-large-font-size):not(.has-x-large-font-size):not(.has-display-font-size):not([style*="font-size"]) {
  font-size: 0.84rem;
}

.vbs-mondo p:not(.has-vbs-body-font-family):not(.has-vbs-label-font-family):not(.has-vbs-display-font-family):not(.has-vbs-serif-font-family):not(.has-vbs-system-font-family):not([style*="font-family"]) {
  font-family: var(--vbs-font-body);
}

.vbs-mondo:not(.has-background) {
  background: var(--vbs-mondo-bg, transparent);
}

.vbs-mondo--sound { --vbs-mondo-bg: linear-gradient(180deg, rgba(229, 235, 228, 0) 1%, rgb(230, 235, 229) 100%); }
.vbs-mondo--visual {
  --vbs-mondo-bg: linear-gradient(180deg, rgba(250, 220, 187, 0) 0%, rgb(249, 219, 186) 100%);
  border-top-width: 2px;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
.vbs-mondo--tech   { --vbs-mondo-bg: linear-gradient(180deg, rgba(50, 102, 153, 0) 0%, rgb(51, 102, 153) 100%); }
.vbs-mondo--edu    { --vbs-mondo-bg: linear-gradient(180deg, rgba(7, 146, 227, 0) 0%, rgb(74, 74, 74) 100%); }

/* Separator specifico tra little-banner-tile 2 (visual) e 3 (tech):
   rimuove i bordi adiacenti e inserisce barra overlap al centro. */
.vbs-mondi-section .wp-block-columns.vbs-lbt-separator-ready .vbs-mondo--visual {
  border-right: none !important;
}

.vbs-mondi-section .wp-block-columns.vbs-lbt-separator-ready .vbs-mondo--tech {
  border-left: none !important;
}

.vbs-mondi-section .wp-block-columns.vbs-lbt-separator-ready .vbs-mondo--visual::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--vbs-lbt-sep-width) / -2);
  width: var(--vbs-lbt-sep-width);
  height: var(--vbs-lbt-sep-height);
  transform: translateY(-50%);
  background: var(--vbs-lbt-sep-color);
  pointer-events: none;
  z-index: 6;
}

/* Little-banner-tile (.vbs-mondo) — overlay filigrana + bordo inferiore
   Gli override arrivano da Customizer (sezione dedicata). */
.vbs-mondo.vbs-little-banner-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 3px solid var(--vbs-lbt-border-accent, var(--card-border-accent, var(--vbs-gold)));
}

.vbs-mondo.vbs-little-banner-tile::before {
  position: absolute;
  content: "";
  inset: 0;
  background-image: var(--vbs-lbt-watermark-image, none);
  background-repeat: no-repeat;
  background-position:
    calc(50% + var(--vbs-lbt-image-offset-x, 0px))
    calc(50% + var(--vbs-lbt-image-offset-y, 0px));
  background-size: contain;
  opacity: var(--vbs-lbt-image-opacity, var(--vbs-dyn-tiles-image-opacity, var(--vbs-tiles-image-opacity)));
  mix-blend-mode: var(--vbs-lbt-image-blend, var(--vbs-dyn-tiles-image-blend, var(--vbs-tiles-image-blend)));
  transform: scaleX(var(--vbs-lbt-mirror-x, 1))
     scaleY(var(--vbs-lbt-mirror-y, 1))
     rotate(var(--vbs-lbt-image-rotation, 0deg))
     scale(var(--vbs-lbt-image-scale, 1));
  transform-origin: center center;
  pointer-events: none;
  z-index: 1;
}

.vbs-mondo.vbs-little-banner-tile > * {
  position: relative;
  z-index: 2;
}

/* Uniforma spacing verticale testo su tutte le little-banner-tile (1/2/3/4)
   e neutralizza i margini automatici di Gutenberg is-layout-flow. */
body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile {
  gap: 0.9rem !important;
}

body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > *,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > *,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > * + *,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > * + *,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile.is-layout-flow > * + * {
  margin-block-start: 0 !important;
}

/* Home: uniforma testo little-banner-tile 2/3/4 alla 1 */
body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 {
  font-family: var(--vbs-font-label) !important;
  font-weight: 600 !important;
  font-size: 0.96rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--vbs-black) !important;
  margin: 0 !important;
}

body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a {
  color: var(--vbs-black) !important;
  transition: color var(--vbs-transition);
}

body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3:hover,
body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a:hover,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3:hover,
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a:hover,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3:hover,
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile h3 a:hover {
  color: var(--vbs-gold) !important;
}

body.home .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile p:not(.has-text-color):not([style*="color"]),
body.page-id-31 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile p:not(.has-text-color):not([style*="color"]),
body.page-id-8 .vbs-mondi-section .vbs-mondo.vbs-little-banner-tile p:not(.has-text-color):not([style*="color"]) {
  font-family: var(--vbs-font-body) !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
  color: var(--vbs-black) !important;
  margin: 0 !important;
}

body.home .vbs-mondo > :first-child,
body.page-id-31 .vbs-mondo > :first-child,
body.page-id-8 .vbs-mondo > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 782px) {
  .vbs-mondi-section .wp-block-columns.vbs-lbt-separator-ready .vbs-mondo--visual::after {
    display: var(--vbs-lbt-sep-mobile-display, none);
  }

  .vbs-lbt-mobile-no-side-borders .vbs-mondo.vbs-little-banner-tile {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-left-style: none !important;
    border-right-style: none !important;
  }

  .vbs-mondo.vbs-little-banner-tile {
    padding: 1.15rem 1rem;
    min-height: 132px;
    gap: 0.55rem;
  }

  .vbs-mondo.vbs-little-banner-tile h3 {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  .vbs-mondo.vbs-little-banner-tile p {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  .vbs-mondo.vbs-little-banner-tile::before {
    background-size: contain;
    opacity: min(var(--vbs-lbt-image-opacity, var(--vbs-dyn-tiles-image-opacity, var(--vbs-tiles-image-opacity))), 0.32);
  }
}


/* ── Sezione Progetti ───────────────────────────────────── */

.vbs-progetti-section {
  padding: 5rem 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Test centratura home: annulla il padding-right del container tiles
   su desktop e mobile, ma solo per pagine home/home-like. */
body.home .vbs-progetti-section,
body.page-id-31 .vbs-progetti-section,
body.page-id-8 .vbs-progetti-section,
body.page-template-page-vbs-home-like .vbs-progetti-section {
  padding-right: 0 !important;
}

.vbs-progetti-section > .wp-block-group__inner-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Home tiles: centra sempre il blocco anche se la colonna parent
   ha larghezze custom >100% impostate dal blocco Gutenberg. */
body.home .entry-content .wp-block-column > .vbs-progetti-section,
body.page-id-31 .entry-content .wp-block-column > .vbs-progetti-section,
body.page-id-8 .entry-content .wp-block-column > .vbs-progetti-section,
body.page-template-page-vbs-home-like .entry-content .wp-block-column > .vbs-progetti-section {
  width: 100%;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Desktop: centra la riga tiles anche quando width CMS > 100%.
   Formula: left 50% del parent + translateX(-50% della propria width). */
@media (min-width: 1000px) {
  body.home .vbs-progetti-section .wp-block-columns,
  body.page-id-31 .vbs-progetti-section .wp-block-columns,
  body.page-id-8 .vbs-progetti-section .wp-block-columns,
  body.page-template-page-vbs-home-like .vbs-progetti-section .wp-block-columns {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

body.home .vbs-progetti-section .wp-block-columns,
body.page-id-31 .vbs-progetti-section .wp-block-columns,
body.page-id-8 .vbs-progetti-section .wp-block-columns,
body.page-template-page-vbs-home-like .vbs-progetti-section .wp-block-columns {
  margin-left: auto !important;
  margin-right: auto !important;
}

.vbs-progetti-section > .wp-block-group__inner-container > h6,
.vbs-progetti-section > .wp-block-group__inner-container > h2 {
  text-align: center;
}

.vbs-progetti-section > .wp-block-group__inner-container > h2 {
  margin-bottom: 2.75rem;
}

/* Riga con classe .vbs-cols-centered:
   allinea larghezza e margini alla riga standard (.wp-block-columns).
   Le differenze restano solo quelle impostate sulle singole card. */
.vbs-cols-centered {
  max-width: none;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Card progetto — sistema CSS custom properties
   ──────────────────────────────────────────────
   Per-card (sovrascrivibili via .vbs-card--* o inline style):
     --card-bg              → background pastel
     --card-shadow-color    → rgba del colore ombra
     --card-border-accent   → colore bordo inferiore
   Globali in :root:
     --card-radius          → stondato (8px) / squadrato (0)
     --card-shadow-blur     → dimensione ombra (32px)
     --card-min-height      → altezza min desktop (220px) */
.vbs-progetto-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 3px solid var(--card-border-accent, var(--vbs-gold));
  border-radius: var(--card-radius);
  min-height: var(--vbs-block-card-min-height, var(--vbs-dyn-tiles-min-height, var(--vbs-tiles-min-height, var(--card-min-height))));
  padding: 1.75rem 1.5rem 1.4rem !important;
  display: flex !important;
  flex-direction: var(--vbs-block-content-flow, column);
  box-shadow: 0 4px calc(var(--card-shadow-blur) * var(--vbs-block-card-shadow-mult, 1)) var(--card-shadow-color, rgba(0, 0, 0, 0.07));
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vbs-progetto-card:not(.has-background) {
  background: var(--card-bg, #FFFFFF);
}

.vbs-progetto-card.vbs-tile-clickable {
  cursor: pointer;
}

.vbs-prodotto-card:not(.vbs-prodotto-card--wide) {
  justify-content: var(--vbs-block-content-align-y, flex-start);
}

/* Diapositive: angoli netti + bordo inferiore più marcato */
.vbs-prodotto-card {
  border-radius: 0 !important;
  border-bottom-width: 10px !important;
}

.vbs-progetto-card::before {
  position: absolute;
  content: "";
  inset: -8%;
  background-image: var(--vbs-tile-watermark-image, var(--vbs-dyn-tiles-global-watermark-image, none));
  background-repeat: no-repeat;
  background-position:
    calc(50% + var(--vbs-tile-image-offset-x, var(--vbs-dyn-tiles-image-offset-x, var(--vbs-tiles-image-offset-x))))
    calc(50% + var(--vbs-tile-image-offset-y, var(--vbs-dyn-tiles-image-offset-y, var(--vbs-tiles-image-offset-y))));
  background-size: var(--vbs-dyn-tiles-image-fit, var(--vbs-tiles-image-fit));
  opacity: var(--vbs-dyn-tiles-image-opacity, var(--vbs-tiles-image-opacity));
  mix-blend-mode: var(--vbs-tile-image-blend, var(--vbs-dyn-tiles-image-blend, var(--vbs-tiles-image-blend)));
  transform: rotate(var(--vbs-tile-image-rotation, var(--vbs-dyn-tiles-image-rotation, var(--vbs-tiles-image-rotation))))
     scale(var(--vbs-tile-image-scale, var(--vbs-dyn-tiles-image-scale, var(--vbs-tiles-image-scale))));
  transform-origin: center center;
  pointer-events: none;
  z-index: 2;
}

/* SVG Art Deco iniettato da JS (Section 17) */
.vbs-card-deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  pointer-events: none;
  display: block;
  overflow: hidden;
  z-index: 1;
  opacity: var(--vbs-tile-deco-opacity, var(--vbs-dyn-tiles-deco-opacity, var(--vbs-tiles-deco-opacity)));
}

/* Contenuto card: z-index > svg deco */
.vbs-progetto-card > *:not(.vbs-card-deco) {
  position: relative;
  z-index: 3;
}

/* Uniforma l'allineamento verticale delle tile in home IT/EN:
   tutte partono come la prima tile (in alto). */
body.home .vbs-progetto-card,
body.page-id-31 .vbs-progetto-card,
body.page-id-8 .vbs-progetto-card {
  justify-content: flex-start !important;
}
body.home .vbs-progetto-card > :first-child,
body.page-id-31 .vbs-progetto-card > :first-child,
body.page-id-8 .vbs-progetto-card > :first-child {
  margin-top: 0 !important;
}

.vbs-progetto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px calc(var(--card-shadow-blur) * 1.5 * var(--vbs-block-card-shadow-mult, 1)) var(--card-shadow-color, rgba(0, 0, 0, 0.10));
}

/* ── Varianti colore card — pastel palette brand ──────────
   Ogni colore: pigmento brand a ~12-18% opacità su bianco.
   Modificabili via CSS o aggiungendo una classe a .wp-block-column */
.vbs-card--sound  {
  --card-bg: linear-gradient(180deg, rgba(229, 235, 115, 0) 0%, rgba(192, 214, 67, 0.53) 100%);
  --card-shadow-color: rgba(15, 61, 46, 0.15);
  --card-border-accent: #d2d95f;
  border-bottom-width: 5px;
}
.vbs-card--visual {
  --card-bg: rgba(106, 186, 185, 0.11);
  --card-shadow-color: rgba(90, 30, 36, 0.15);
  --card-border-accent: #69bab9;
  border-bottom-width: 5px;
}
.vbs-card--gold {
  --card-bg: rgba(51, 102, 152, 0.11);
  --card-shadow-color: rgba(212, 175, 55, 0.22);
  --card-border-accent: #336699;
  border-bottom-width: 4px;
  border-radius: 9px;
}
.vbs-card--edu {
  --card-bg: linear-gradient(180deg, rgba(250, 220, 187, 0) 0%, rgba(250, 220, 187, 0.71) 100%);
  --card-shadow-color: rgba(47, 47, 47, 0.12);
  --card-border-accent: #fbc992;
  border-bottom-width: 4px;
}
.vbs-card--tech {
  --card-bg: linear-gradient(180deg, rgba(7, 146, 227, 0) 0%, rgba(181, 81, 224, 0.45) 100%);
  --card-shadow-color: rgba(11, 28, 45, 0.15);
  --card-border-accent: #d572ff;
  border-bottom-width: 4px;
}

.vbs-cols-centered .vbs-card--tech:last-child {
  --card-bg: linear-gradient(180deg, rgba(7, 146, 227, 0) 0%, rgb(179, 179, 177) 100%);
  --card-border-accent: var(--wp--preset--color--vbs-black);
}

.vbs-progetto-card h3 {
  font-size: 1.05rem !important;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.vbs-progetto-card h3 a {
  color: var(--vbs-black) !important;
  text-decoration: none;
}

.vbs-progetto-card h3 a:hover {
  color: var(--vbs-gold) !important;
}

.vbs-progetto-card > p:not(.has-text-color) {
  color: var(--vbs-grey-mid) !important;
  line-height: 1.5;
  flex-grow: 1;
  margin: 0 0 0 0;
}

.vbs-progetto-card > p:not(.has-small-font-size):not(.has-normal-font-size):not(.has-medium-font-size):not(.has-large-font-size):not(.has-x-large-font-size):not(.has-display-font-size):not([style*="font-size"]) {
  font-size: 0.88rem;
}

.vbs-progetto-card > p:not(.has-vbs-body-font-family):not(.has-vbs-label-font-family):not(.has-vbs-display-font-family):not(.has-vbs-serif-font-family):not(.has-vbs-system-font-family):not([style*="font-family"]) {
  font-family: var(--vbs-font-body);
}

.vbs-progetto-card > .vbs-tile-shape-buttons {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  bottom: var(--vbs-shape-wrap-bottom, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0;
  z-index: 4;
}

.vbs-tile-shape-buttons--left {
  justify-content: flex-start;
}

.vbs-tile-shape-buttons--center {
  justify-content: center;
}

.vbs-tile-shape-buttons--right {
  justify-content: flex-end;
}

.vbs-shape-btn {
  --vbs-shape-size: 56px;
  --vbs-shape-height: 56px;
  --vbs-shape-rotate: 0deg;
  --vbs-shape-offset-x: 0px;
  --vbs-shape-offset-y: 0px;
  --vbs-shape-bg: var(--card-border-accent, var(--vbs-gold));
  --vbs-shape-border: var(--vbs-shape-bg);
  width: var(--vbs-shape-size);
  min-width: var(--vbs-shape-size);
  height: var(--vbs-shape-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.25rem;
  background: var(--vbs-shape-bg);
  border: 1px solid var(--vbs-shape-border);
  color: #fff !important;
  text-decoration: none !important;
  font-family: var(--vbs-font-label);
  font-size: 0.57rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translate(var(--vbs-shape-offset-x), var(--vbs-shape-offset-y)) rotate(var(--vbs-shape-rotate));
  transform-origin: center center;
  transition: filter .16s ease, transform .16s ease;
}

.vbs-shape-btn:hover {
  filter: brightness(1.07);
  mix-blend-mode: difference;
}

.vbs-shape-btn:focus-visible {
  outline: 2px solid var(--vbs-black);
  outline-offset: 2px;
}

.vbs-shape-btn--square {
  border-radius: 0;
}

.vbs-shape-btn--triangle {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.vbs-shape-btn--pentagon {
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}

.vbs-shape-btn--hexagon {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.vbs-shape-btn--semicircle {
  border-radius: 999px 999px 0 0;
  clip-path: inset(0 0 0 0 round 999px 999px 0 0);
}

.vbs-shape-btn--circle {
  border-radius: 50%;
}

.vbs-shape-btn--no-text {
  font-size: 0;
  letter-spacing: 0;
}

.vbs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 1rem;
}


/* ── Sezione Partner ────────────────────────────────────── */

.vbs-partners-section {
  --vbs-bottom-box-pad-x: clamp(1rem, 2.4vw, 2.25rem);
}

.vbs-partners-section > .wp-block-group__inner-container {
  padding-left: var(--vbs-bottom-box-pad-x);
  padding-right: var(--vbs-bottom-box-pad-x);
}

.vbs-partners-section:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
  text-align: center;
}

.entry-content .vbs-partners-section :is(h1,h2,h3,h4,h5,h6,p) {
  text-align: inherit;
}

.vbs-partners-section p {
  color: #D9D9D9 !important;
}

/* Quando il blocco è salvato da CMS con textColor=vbs-black,
   forza il colore testo richiesto per questa sezione. */
.vbs-partners-section.has-vbs-black-color {
  color: #D9D9D9 !important;
}

.vbs-partners-section.has-vbs-black-color a {
  color: #D9D9D9 !important;
}

/* Partners section: allow CMS color controls to work despite section-level
   .vbs-section-studio heading/paragraph !important color rules. */
.vbs-partners-section.has-text-color :is(h1,h2,h3,h4,h5,h6,p):not(.has-text-color) {
  color: inherit !important;
}

/* Partners title default: black */
.vbs-partners-section > .wp-block-group__inner-container > h6:not(.has-text-color) {
  color: var(--vbs-black) !important;
  letter-spacing: 0.18em;
  margin-bottom: 2.5rem;
}

.vbs-partners-section > .wp-block-group__inner-container > h6.has-vbs-black-color,
.vbs-partners-section > .wp-block-group__inner-container > h6.has-text-color {
  color: var(--vbs-black) !important;
}

.vbs-partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 3.5rem;
}

.vbs-partner-name {
  display: inline-block;
  font-family: var(--vbs-font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit !important;
  cursor: default;
}


/* ── Sezione CTA ────────────────────────────────────────── */

.vbs-cta-section {
  background-color: var(--vbs-ivory-dark);
  padding: 5rem 2rem;
  padding-right: 0 !important;
  --vbs-bottom-box-pad-x: clamp(1rem, 2.4vw, 2.25rem);
}

.vbs-cta-section > .wp-block-group__inner-container {
  padding-left: var(--vbs-bottom-box-pad-x);
  padding-right: var(--vbs-bottom-box-pad-x);
}

.vbs-cta-section:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
  text-align: center;
}

.entry-content .vbs-cta-section :is(h1,h2,h3,h4,h5,h6,p) {
  text-align: inherit;
}

.vbs-cta-section h2 {
  margin-bottom: 0.6rem;
}

.vbs-cta-section > .wp-block-group__inner-container > p {
  color: var(--vbs-grey-mid) !important;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

/* Sezione scura in fondo pagina: rispetta align CMS e evita testo a contatto bordi */
.vbs-section-studio.alignfull > .wp-block-group__inner-container {
  padding-left: clamp(1rem, 2.4vw, 2.25rem);
  padding-right: clamp(1rem, 2.4vw, 2.25rem);
}

.vbs-section-studio.alignfull :is(h1,h2,h3,h4,h5,h6,p) {
  text-align: inherit;
}

.vbs-section-studio.has-text-align-center h2::before {
  margin-left: auto;
  margin-right: auto;
}

.vbs-section-studio.has-text-align-right h2::before {
  margin-left: auto;
  margin-right: 0;
}


/* ── Banda titolo pagina (Blocksy hero section) ─────────── */

/* Nascosta: .hero-section rimossa via PHP */
body.vbs-title-hidden .hero-section {
  display: none !important;
}

/* Sotto il banner: collassa l'altezza prima che JS la sposti
   (opacity:0 da sola preservava il layout gap — height:0 lo elimina) */
body.vbs-title-below .hero-section:not(.vbs-band-placed) {
  opacity:        0;
  height:         0 !important;
  min-height:     0 !important;
  overflow:       hidden !important;
  margin-top:     0 !important;
  margin-bottom:  0 !important;
  padding-top:    0 !important;
  padding-bottom: 0 !important;
}

/* Dopo il posizionamento JS: ripristina altezza naturale e fades in */
body.vbs-title-below .hero-section.vbs-band-placed {
  height:     auto;
  overflow:   visible;
  opacity:    0;
  animation:  vbsBandFadeIn 0.28s ease 0.06s forwards;
}

@keyframes vbsBandFadeIn {
  to { opacity: 1; }
}


/* ── Responsive sezione 15 ──────────────────────────────── */

/* Tablet (600–999px): 2 card per riga invece di 3 */
@media (min-width: 600px) and (max-width: 999px) {
  .vbs-progetti-section .wp-block-columns {
    flex-wrap: wrap;
  }
  .vbs-progetto-card {
    flex: 0 0 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
    min-height: auto;
  }
  .vbs-cols-centered {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 782px) {
  .vbs-partners-section > .wp-block-group__inner-container,
  .vbs-cta-section > .wp-block-group__inner-container,
  .vbs-section-studio.alignfull > .wp-block-group__inner-container {
    padding-left: clamp(0.95rem, 5vw, 1.35rem);
    padding-right: clamp(0.95rem, 5vw, 1.35rem);
  }
}

@media (max-width: 999px) {
  .vbs-mondi-section .wp-block-columns {
    flex-wrap: wrap;
  }
  .vbs-mondo {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .vbs-cols-centered {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 599px) {
  .vbs-mondo {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .vbs-progetto-card {
    min-height: var(--vbs-mobile-card-min-height, auto);
    box-shadow: 0 2px 12px var(--card-shadow-color, rgba(0, 0, 0, 0.08));
  }
  .vbs-hero {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 3.5rem;
    background-image: url('/wp-content/uploads/2026/03/Hero_Home_Mobile.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  body.home .vbs-hero .wp-block-cover__image-background,
  body.page-id-31 .vbs-hero .wp-block-cover__image-background,
  body.page-id-8 .vbs-hero .wp-block-cover__image-background {
    display: none;
  }
  .vbs-hero .wp-block-cover__inner-container {
    padding: 0 1.25rem;
    position: static;
  }
  .vbs-hero .wp-block-button.is-style-outline .wp-block-button__link,
  .vbs-hero .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
    background-color: var(--vbs-gold) !important;
    border-color: var(--vbs-gold) !important;
    color: var(--vbs-black) !important;
  }
}

/* Mobile safety net: evita layout off-screen su feedback device specifici */
@media (max-width: 768px) {
  body.home,
  body.page-id-31,
  body.page-id-8 {
    overflow-x: hidden;
  }

  .vbs-progetti-section .wp-block-columns,
  .entry-content .wp-block-columns {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .entry-content .wp-block-column {
    min-width: 0;
  }
}


/* ─────────────────────────────────────────────────────────
   16. FLUSH HERO — nessun gap tra navbar e banner
   ─────────────────────────────────────────────────────────
   Attiva tramite checkbox "Rimuovi spazio navbar→banner"
   nel widget "Banda titolo pagina" (meta box editor pagina).
   Il PHP aggiunge la classe body.vbs-flush-hero.

   Cosa rimuove:
   • Il padding-top di Blocksy sul wrapper contenuto (.ct-page-content-inner)
   • Il margin-top di #main
   • Il margin-top del primo blocco alignfull (il Cover block hero)
   ───────────────────────────────────────────────────────── */

body.vbs-flush-hero .ct-page-content-inner,
body.vbs-flush-hero .ct-container-full,
body.vbs-flush-hero #main {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* Primo blocco full-width: nessun margine sopra */
body.vbs-flush-hero .entry-content > .alignfull:first-child,
body.vbs-flush-hero .wp-block-post-content > .alignfull:first-child {
  margin-top: 0 !important;
}


/* ─────────────────────────────────────────────────────────
   17. PATTERN DECORATIVI ART DECO
   ─────────────────────────────────────────────────────────
   A. PATTERN TESSERE (card tile)
      SVG inline iniettati da JS (Section 14 functions.php).
      Il JS legge body.vbs-card-pattern-{nome} e genera
      il SVG corrispondente per ogni .vbs-progetto-card.
      Il colore viene da --card-border-accent di ciascuna card.

   B. PATTERN SFONDO (page background)
      Sostituisce/affianca le bande diagonali (Section 14 CSS).
      HTML iniettato in wp_footer da PHP.
      Seleziona via .vbs-bg-stripes[data-pattern="{nome}"].

   Pattern tessere disponibili:
     scalinata  — colonne a gradini (staircase), 5 step
     eventail   — ventaglio dal corner (radiating lines)
     zigzag     — chevron paralleli
     losanghe   — griglia di losanghe diagonali
     incastro   — rettangoli incastrati con cornice

   Pattern sfondo disponibili:
     strisce    — bande diagonali (default esistente)
     raggi      — raggi dal corner bottom-left
     reticolo   — griglia diamanti piena pagina
     meandro    — elementi geometrici Art Deco multipli
   ───────────────────────────────────────────────────────── */

/* ── A. Pattern tessere — contenitore comune ──────────── */

/* Il SVG viene inserito come primo figlio della card via JS;
   la classe .vbs-card-deco è già definita in Section 15 */

/* Nasconde i SVG se il pattern è "none" (default) */
body.vbs-card-pattern-none .vbs-card-deco {
  display: none;
}


/* ── B. Pattern sfondo: raggi ──────────────────────────── */

.vbs-bg-stripes[data-pattern="raggi"] .vbs-stripe {
  display: none;
}

.vbs-bg-stripes[data-pattern="raggi"] .vbs-bg-svg {
  display: block;
}

/* ── B. Pattern sfondo: reticolo ───────────────────────── */

.vbs-bg-stripes[data-pattern="reticolo"] .vbs-stripe {
  display: none;
}

.vbs-bg-stripes[data-pattern="reticolo"] .vbs-bg-svg {
  display: block;
}

/* ── B. Pattern sfondo: meandro ────────────────────────── */

.vbs-bg-stripes[data-pattern="meandro"] .vbs-stripe {
  display: none;
}

.vbs-bg-stripes[data-pattern="meandro"] .vbs-bg-svg {
  display: block;
}

/* SVG sfondo — comune a raggi/reticolo/meandro */
.vbs-bg-svg {
  display: none; /* visibile solo quando data-pattern != strisce */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── B. Pattern sfondo: SVG personalizzato ─────────────── */

.vbs-bg-stripes[data-pattern="custom_svg"] .vbs-stripe {
  display: none;
}

.vbs-bg-stripes[data-pattern="custom_svg"] .vbs-bg-svg {
  display: block;
}

/* SVG custom sfondo — ancorato bottom-right come le strisce originali */
.vbs-bg-svg.vbs-bg-svg--custom {
  inset: auto; /* reset */
  bottom: 0;
  right: 0;
  left: auto;
  top: auto;
  width: 60%;
  height: 80%;
  max-width: 800px;
  overflow: visible;
}

/* ── SVG personalizzato nelle card ─────────────────────── */

/* Il colore è impostato via JS (style.color = card accent);
   currentColor propaga l'accento agli elementi fill/stroke. */
.vbs-card-deco.vbs-svg-tinted {
  /* Stesse proporzioni di .vbs-card-deco ma il contenuto
     è gestito dall'SVG caricato dall'utente */
  width: 55%;
  height: 100%;
}

/* Garantisce che SVG tintato erediti color dal wrapper */
.vbs-card-deco.vbs-svg-tinted svg,
.vbs-card-deco.vbs-svg-tinted > * {
  color: inherit;
  width: 100%;
  height: 100%;
}

/* ── Shortcode [vbs_prodotti]: griglia diapositive / prodotti ── */

.vbs-prodotti-grid {
  display: grid;
  grid-template-columns: repeat(var(--vbs-prodotti-cols, 3), 1fr);
  gap: 2rem;
  padding: 2rem 0;
}

.vbs-prodotti-grid--col-1 { --vbs-prodotti-cols: 1; }
.vbs-prodotti-grid--col-2 { --vbs-prodotti-cols: 2; }
.vbs-prodotti-grid--col-3 { --vbs-prodotti-cols: 3; }
.vbs-prodotti-grid--col-4 { --vbs-prodotti-cols: 4; }

@media (max-width: 600px) {
  .vbs-prodotti-grid { --vbs-prodotti-cols: 1; }
}

@media (min-width: 601px) and (max-width: 960px) {
  .vbs-prodotti-grid--col-3,
  .vbs-prodotti-grid--col-4 { --vbs-prodotti-cols: 2; }
}

/* ── Tile larga: layout orizzontale (immagine sx, corpo dx) ── */

.vbs-prodotto-card--wide {
  grid-column: 1 / -1;
  flex-direction: var(--vbs-block-wide-dir, row) !important;
  padding: 0 !important;
  min-height: var(--vbs-block-card-min-height, var(--vbs-wide-card-min-height, var(--vbs-dyn-tiles-wide-min-height, 340px)));
  max-height: var(--vbs-wide-card-max-height, var(--vbs-dyn-tiles-wide-max-height, none));
  --vbs-wide-wm-full-alpha: 1;
  --vbs-wide-wm-media-alpha: 0;
}

/* Pannello immagine (sinistra) */
.vbs-prodotto-card--wide .vbs-prodotto-card__media {
  width: var(--vbs-wide-media-width, var(--vbs-dyn-tiles-wide-media-width, 42%));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}

/* Filigrana anche in modalità wide: sopra immagine principale, sotto contenuto */
.vbs-prodotto-card--wide .vbs-prodotto-card__media::after {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: var(--vbs-tile-watermark-image, var(--vbs-dyn-tiles-global-watermark-image, none));
  background-repeat: no-repeat;
  background-position:
    calc(50% + var(--vbs-tile-image-offset-x, var(--vbs-dyn-tiles-image-offset-x, var(--vbs-tiles-image-offset-x))))
    calc(50% + var(--vbs-tile-image-offset-y, var(--vbs-dyn-tiles-image-offset-y, var(--vbs-tiles-image-offset-y))));
  background-size: var(--vbs-dyn-tiles-image-fit, var(--vbs-tiles-image-fit));
  opacity: calc(var(--vbs-dyn-tiles-image-opacity, var(--vbs-tiles-image-opacity)) * var(--vbs-wide-wm-media-alpha, 0));
  mix-blend-mode: var(--vbs-tile-image-blend, normal);
  transform: rotate(var(--vbs-tile-image-rotation, var(--vbs-dyn-tiles-image-rotation, var(--vbs-tiles-image-rotation))))
     scale(var(--vbs-tile-image-scale, var(--vbs-dyn-tiles-image-scale, var(--vbs-tiles-image-scale))));
  transform-origin: center center;
  pointer-events: none;
  z-index: 2;
}

/* Wide: filigrana distribuita su tutta la card (immagine + testo) */
.vbs-prodotto-card--wide::before {
  opacity: calc(var(--vbs-dyn-tiles-image-opacity, var(--vbs-tiles-image-opacity)) * var(--vbs-wide-wm-full-alpha, 1));
  mix-blend-mode: var(--vbs-tile-image-blend, normal);
}

.vbs-prodotto-card--wide.vbs-wm-scope-media {
  --vbs-wide-wm-full-alpha: 0;
  --vbs-wide-wm-media-alpha: 1;
}

.vbs-prodotto-card--wide.vbs-wm-scope-full {
  --vbs-wide-wm-full-alpha: 1;
  --vbs-wide-wm-media-alpha: 0;
}

.vbs-prodotto-card--wide .vbs-prodotto-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vbs-block-wide-img-pos-x, 50%) var(--vbs-block-wide-img-pos-y, 50%);
  opacity: 1; /* piena opacità: non è overlay background */
  z-index: 1;
}

/* Pannello corpo (destra) */
.vbs-prodotto-card--wide .vbs-prodotto-card__body {
  --vbs-wide-body-pad-x: 3rem;
  flex: 1;
  padding-block: 2.5rem !important;
  padding-inline: var(--vbs-wide-body-pad-x) !important;
  padding-left: var(--vbs-wide-body-pad-x) !important;
  padding-right: var(--vbs-wide-body-pad-x) !important;
  display: flex;
  flex-direction: var(--vbs-block-content-flow, column);
  justify-content: var(--vbs-block-content-align-y, center);
  position: relative;
  z-index: 3;
  box-sizing: border-box;
}

.vbs-prodotto-card--wide .vbs-prodotto-card__body > * {
  max-width: 100%;
}

.vbs-prodotto-card--wide .vbs-prodotto-card__body h3 {
  font-size: 1.5rem !important;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.vbs-prodotto-card--wide .vbs-prodotto-card__body > p {
  font-size: 0.95rem !important;
  color: var(--vbs-grey-mid) !important;
  line-height: 1.65;
  flex-grow: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── Bottone CTA (tile larga) ─────────────────────────────── */

.vbs-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;       /* default; sovrascrivibile via inline style */
  margin-top: 1.5rem;
  padding: 0.55em 1.3em;
  /* --vbs-cta-color: override colore per questa diapositiva */
  border: 1px solid var(--vbs-cta-color, var(--card-border-accent, var(--vbs-gold)));
  color: var(--vbs-cta-color, var(--card-border-accent, var(--vbs-gold))) !important;
  font-family: var(--vbs-font-label, 'Josefin Sans', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  transition: background var(--vbs-transition), color var(--vbs-transition),
              border-color var(--vbs-transition);
}

.vbs-card-cta:hover {
  background: var(--vbs-cta-color, var(--card-border-accent, var(--vbs-gold)));
  border-color: var(--vbs-cta-color, var(--card-border-accent, var(--vbs-gold)));
  color: #fff !important;
}

/* ── Mobile: wide → stacked ──────────────────────────────── */

@media (max-width: 640px) {
  .vbs-prodotto-card--wide {
    flex-direction: column !important;
    min-height: auto;
  }

  .vbs-prodotto-card--wide .vbs-prodotto-card__media {
    width: 100%;
    height: 200px;
    flex-shrink: 0;
  }

  .vbs-prodotto-card--wide .vbs-prodotto-card__body {
    --vbs-wide-body-pad-x: 1.5rem;
    padding: 1.5rem;
    padding-left: var(--vbs-wide-body-pad-x) !important;
    padding-right: var(--vbs-wide-body-pad-x) !important;
  }

  /* CTA mobile: touch-target adeguato, allineamento centrato */
  .vbs-card-cta {
    align-self: center !important;
    font-size: 0.8rem;
    padding: 0.65em 1.5em;
    min-height: 44px;           /* touch target WCAG 2.5.5 */
  }
}

/* ── About pages (IT/EN): reading chunks with light Art Deco backgrounds ─ */
.vbs-chunk-bg-page .entry-content .vbs-about-chunk {
  display: block;
  position: relative;
  padding: clamp(1rem, 1.2vw + 0.8rem, 1.5rem) clamp(1rem, 1.8vw + 0.6rem, 2rem);
  margin: clamp(1rem, 1.1vw + 0.6rem, 1.6rem) 0;
  border-radius: var(--vbs-about-radius, 10px);
  overflow: hidden;
  border-top-width: var(--vbs-about-border-top, var(--vbs-about-border-width, 0px));
  border-right-width: var(--vbs-about-border-right, var(--vbs-about-border-width, 0px));
  border-bottom-width: var(--vbs-about-border-bottom, var(--vbs-about-border-width, 0px));
  border-left-width: var(--vbs-about-border-left, var(--vbs-about-border-width, 0px));
  border-style: var(--vbs-about-border-style, solid);
  border-color: var(--vbs-about-border-color, transparent);
  box-shadow: none;
  background: transparent !important;
  --vbs-about-fill: #f0e6d6;
  --vbs-about-bg-opacity: 1;
  --vbs-about-wm-image: none;
  --vbs-about-wm-opacity: 0;
  --vbs-about-wm-blend: multiply;
  --vbs-about-wm-repeat: no-repeat;
  --vbs-about-wm-scale: 1;
  --vbs-about-wm-offset-x: 0px;
  --vbs-about-wm-offset-y: 0px;
  --vbs-about-wm-rotation: 0deg;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk > * {
  position: relative;
  z-index: 3;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--vbs-about-bg-opacity);
  pointer-events: none;
  background: var(--vbs-about-fill);
  border-radius: inherit;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--vbs-about-wm-image);
  background-repeat: var(--vbs-about-wm-repeat);
  background-position: calc(50% + var(--vbs-about-wm-offset-x)) calc(50% + var(--vbs-about-wm-offset-y));
  background-size: calc(100% * var(--vbs-about-wm-scale)) auto;
  mix-blend-mode: var(--vbs-about-wm-blend);
  opacity: var(--vbs-about-wm-opacity);
  transform: rotate(var(--vbs-about-wm-rotation));
  transform-origin: center;
  border-radius: inherit;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk--b {
  --vbs-about-fill: #dfeeec;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk--c {
  --vbs-about-fill: #eee4e8;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk--d {
  --vbs-about-fill: #e3e8ed;
}

.vbs-chunk-bg-page .entry-content .vbs-about-chunk--a {
  --vbs-about-fill: #f0e6d6;
}

@media (max-width: 768px) {
  .vbs-chunk-bg-page .entry-content .vbs-about-chunk {
    padding: 0.85rem 0.9rem;
    margin: 0.85rem 0;
  }

  .vbs-chunk-bg-page .entry-content .vbs-about-chunk::before,
  .vbs-chunk-bg-page .entry-content .vbs-about-chunk::after {
    opacity: calc(var(--vbs-about-wm-opacity) * 0.85);
  }
}

/* Progetti IT/EN compact cards override (page 36 + 13) */
.page-id-36,
.page-id-13 {
  --vbs-wide-card-min-height: var(--vbs-dyn-progetti-it-wide-min-height, 220px);
  --vbs-wide-card-max-height: var(--vbs-dyn-progetti-it-wide-max-height, none);
  --vbs-wide-media-width: var(--vbs-dyn-progetti-it-wide-media-width, 46%);
}

.page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body {
  --vbs-wide-body-pad-x: 1.5rem;
  padding-block: 1rem !important;
}

.page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body h3 {
  font-size: 1.2rem !important;
  margin-bottom: 0.45rem;
}

.page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body > p {
  font-size: 0.9rem !important;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-id-36 .vbs-prodotto-card--wide .vbs-card-cta {
  margin-top: 0.8rem;
}

@media (max-width: 900px) {
  :root {
    --vbs-wide-card-min-height: var(--vbs-dyn-tiles-wide-min-height-mobile, var(--vbs-dyn-tiles-wide-min-height, 340px));
  }

  .page-id-36,
  .page-id-13 {
    --vbs-wide-card-min-height: var(--vbs-dyn-progetti-it-wide-min-height-mobile, 180px);
  }

  .page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body {
    --vbs-wide-body-pad-x: 1rem;
    padding-block: 0.75rem !important;
  }

  .page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body h3 {
    font-size: 1.05rem !important;
  }

  .page-id-36 .vbs-prodotto-card--wide .vbs-prodotto-card__body > p {
    -webkit-line-clamp: 3;
  }
}