/* Vibrocementi Core: stili legati al comportamento (JS e stati). L'aspetto dei componenti sta nelle classi globali di Elementor.
   Le variabili (--c-*, --gutter...) sono le variabili globali del kit Elementor. */

/* Reveal allo scroll (JS: .vb-reveal -> .is-pending -> .is-in). Senza JS i contenuti restano visibili. */
.vb-reveal.is-pending { opacity: 0; transform: translateY(24px); }
.vb-reveal.is-pending.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease, ease), transform .9s var(--ease, ease); }

/* Header: stati aggiunti dal JS. */
.elementor .vb-header.vb-header--solid,
.elementor .vb-header.is-scrolled,
.elementor .vb-header.is-mega-open { background: var(--c-paper); color: var(--c-ink); border-bottom-color: var(--c-line); }
.elementor .vb-header .vb-brand__logo--color { display: none; }
.elementor .vb-header.vb-header--solid .vb-brand__logo--white,
.elementor .vb-header.is-scrolled .vb-brand__logo--white,
.elementor .vb-header.is-mega-open .vb-brand__logo--white { display: none; }
.elementor .vb-header.vb-header--solid .vb-brand__logo--color,
.elementor .vb-header.is-scrolled .vb-brand__logo--color,
.elementor .vb-header.is-mega-open .vb-brand__logo--color { display: block; }
.elementor .vb-header.is-menu-open { color: var(--c-white); background: transparent; border-bottom-color: transparent; }
.elementor .vb-header.is-menu-open .vb-brand__logo--white { display: block; }
.elementor .vb-header.is-menu-open .vb-brand__logo--color { display: none; }

/* Mega menu desktop: apre in hover o con .is-open (tastiera/touch). */
.elementor .vb-nav__item--mega:hover > .vb-mega,
.elementor .vb-nav__item--mega.is-open > .vb-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.elementor .vb-nav__item--mega.is-open > .vb-nav__chevron::before { transform: rotate(225deg) translate(-2px, -2px); }
.elementor .vb-nav__link:hover::after,
.elementor .vb-nav__link[aria-current="page"]::after,
.elementor .vb-nav__item.is-open > .vb-nav__link::after { transform: scaleX(1); }

/* Menu mobile (<= 1024): .vb-nav diventa overlay a tutto schermo; i mega diventano accordion. */
.elementor .vb-nav-toggle__bar { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .4s var(--ease, ease), top .4s var(--ease, ease); }
.elementor .vb-nav-toggle__bar:first-child { top: 16px; }
.elementor .vb-nav-toggle__bar:last-child { top: 26px; }
.elementor .vb-header.is-menu-open .vb-nav-toggle__bar:first-child { top: 21px; transform: rotate(45deg); }
.elementor .vb-header.is-menu-open .vb-nav-toggle__bar:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1024px) {
  .elementor .vb-nav { visibility: hidden; }
  .elementor .vb-header.is-menu-open .vb-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .elementor .vb-nav__item--mega:hover > .vb-mega { display: none; }
  .elementor .vb-nav__item--mega.is-open > .vb-mega { display: block; }
}

/* Filtri (progetti, catalogo): elementi nascosti dal JS. */
.vb-filters[hidden], .vb-card-project[hidden], .vb-card-product[hidden], [data-filter-empty][hidden] { display: none !important; }

/* Carosello: nessuna barra di scorrimento nativa. */
.vb-carousel__track { scrollbar-width: none; }
.vb-carousel__track::-webkit-scrollbar { display: none; }
.vb-carousel__btn:disabled { opacity: .3; cursor: default; }

/* Lightbox (creato dal JS). */
.vb-lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(17, 19, 18, .95); }
.vb-lightbox.is-open { display: flex; }
.vb-lightbox__img { max-width: min(92vw, 1600px); max-height: 82vh; object-fit: contain; }
.vb-lightbox__cap { position: absolute; left: var(--gutter, 24px); bottom: 22px; margin: 0; color: rgba(255, 255, 255, .72); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vb-lightbox__btn { position: absolute; width: 52px; height: 52px; padding: 0; background: none; color: var(--c-white, #fff); font-size: 22px; line-height: 1; border: 1px solid var(--c-line-inv); border-radius: var(--radius, 4px); cursor: pointer; transition: background .2s, color .2s; }
.vb-lightbox__btn:hover { background: var(--c-white, #fff); color: var(--c-ink, #111); }
.vb-lightbox__close { top: 20px; right: var(--gutter, 24px); }
.vb-lightbox__prev { left: var(--gutter, 24px); top: 50%; margin-top: -26px; }
.vb-lightbox__next { right: var(--gutter, 24px); top: 50%; margin-top: -26px; }
@media (max-width: 767px) {
  .vb-lightbox__prev, .vb-lightbox__next { top: auto; bottom: 16px; margin: 0; }
  .vb-lightbox__prev { left: auto; right: calc(var(--gutter, 24px) + 64px); }
  .vb-lightbox__cap { bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .vb-reveal.is-pending, .vb-reveal.is-pending.is-in { opacity: 1; transform: none; transition: none; }
}