/* ============================================================
   Override minimi post-migrazione da Squarespace.
   Tutto lo stile del tema resta in site.css + custom.css.
   ============================================================ */

/* Le immagini vengono caricate nativamente (niente loader Squarespace):
   evita lo stato "invisibile" in attesa del loader JS. */
img[data-loader] { opacity: 1; }

/* Elementi commerce rimossi: se qualche residuo sfugge, nascondilo. */
.sqs-cart-dropzone,
.floating-cart,
.sqs-pill-shaped-icon-button,
#sqs-cart-container { display: none !important; }

/* Il banner "created with Squarespace" / badge non esiste piu'. */
.sqs-site-credit { display: none !important; }

/* Accordion: calibrazione sulle misure del sito live (58px per riga) */
.accordion-item__click-target { padding: 14px 0; }
.accordion-item__description { padding-bottom: 13px; }

/* ============================================================
   Welcome page: layout affiancato su desktop e in orizzontale.
   Sinistra 50% = slideshow; destra 50% = logo + bottone.
   Si attiva in orizzontale (da 640px) e su schermi larghi (da 1024px);
   in verticale su telefono e tablet resta impilato, slideshow sopra.
   ============================================================ */
@media screen and (orientation: landscape) and (min-width: 640px), screen and (min-width: 1024px) {
  .region.split-hero {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
  }
  /* slideshow a sinistra */
  .region.split-hero > .wm-section-slider {
    order: 1;
    width: 50%;
    flex: 0 0 50%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }
  .region.split-hero > .wm-section-slider .swiper-wrapper,
  .region.split-hero > .wm-section-slider .swiper-slide,
  .region.split-hero > .wm-section-slider .swiper-slide > section {
    height: 100vh !important;
    min-height: 100vh !important;
  }
  /* logo + bottoni a destra */
  .region.split-hero > section:not(.wm-section-slider) {
    order: 2;
    width: 50%;
    flex: 0 0 50%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .region.split-hero > section:not(.wm-section-slider) > .content-wrapper {
    width: 100%;
  }
  /* niente scroll verticale: la welcome occupa esattamente una schermata */
  body.split-hero-page #sections { overflow: hidden; }
}

/* ------------------------------------------------------------
   Welcome page: logo a dimensione fissa (223px di larghezza),
   non scala con la finestra. Su schermi molto stretti si adatta
   (max 62% della larghezza) per non uscire dallo schermo.
   ------------------------------------------------------------ */
/* il blocco del logo occupa una cella di griglia non simmetrica:
   lo si estende a tutta la larghezza della sezione e si centra il logo */
.region.split-hero .fe-block:has(> .sqs-block .fluid-image-component-root),
.region.split-hero .fe-block:has(.fluid-image-component-root) {
  grid-column: 1 / -1 !important;
  justify-self: center;
  width: 100%;
}
.region.split-hero .fe-block:has(.fluid-image-component-root) .sqs-block,
.region.split-hero .fe-block:has(.fluid-image-component-root) .sqs-block-alignment-wrapper,
.region.split-hero .fe-block:has(.fluid-image-component-root) .sqs-block-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.region.split-hero .fluid-image-component-root {
  width: min(223px, 62vw) !important;
  max-width: none !important;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;
  /* box aderente al logo (2000x300): niente spazio vuoto variabile sopra/sotto */
  aspect-ratio: 2000 / 300;
  height: auto !important;
}
.region.split-hero .fluid-image-component-root .fluid-image-container,
.region.split-hero .fluid-image-component-root .fluid-image-animation-wrapper,
.region.split-hero .fluid-image-component-root .js-content-mode-element-wrapper,
.region.split-hero .fluid-image-component-root img {
  height: 100% !important;
}

/* Welcome page: composizione verticale ancorata al bottone.
   Vale SOLO nel layout affiancato: in verticale su telefono
   il flusso resta quello normale (blocchi impilati).
   Il bottone EXPLORE sta al centro esatto della colonna;
   logo e sottotitolo sopra, icona social sotto.
   Le tre variabili regolano le distanze. */
@media screen and (orientation: landscape) and (min-width: 640px), screen and (min-width: 1024px) {
  .region.split-hero > section:not(.wm-section-slider) {
  --wl-gap-logo-sub: 10px;   /* logo -> sottotitolo */
  --wl-gap-sub-btn: 44px;    /* sottotitolo -> bottone */
  --wl-gap-btn-social: 60px; /* bottone -> icona social */
  --wl-btn-half: 29px;       /* meta' altezza bottone (58/2) */
}
  .region.split-hero > section:not(.wm-section-slider) .fluid-engine {
  display: block !important;
  position: relative;
  height: 100%;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
}
  .region.split-hero > section:not(.wm-section-slider) .fe-block {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  grid-area: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
  .region.split-hero > section:not(.wm-section-slider) .fe-block .sqs-block {
  padding: 0 !important;
  width: 100%;
}
/* bottone: centro esatto della colonna */
  .region.split-hero .fe-block:has(a.sqs-block-button-element) {
  top: 50%;
  transform: translateY(-50%);
}
/* sottotitolo: sopra il bottone */
  .region.split-hero .fe-block:has(.sqs-html-content) {
  bottom: calc(50% + var(--wl-btn-half) + var(--wl-gap-sub-btn));
}
/* logo: sopra il sottotitolo (20px = altezza riga sottotitolo) */
  .region.split-hero .fe-block:has(.fluid-image-component-root) {
  bottom: calc(50% + var(--wl-btn-half) + var(--wl-gap-sub-btn) + 20px + var(--wl-gap-logo-sub));
}
/* icona social: sotto il bottone */
  .region.split-hero .fe-block:has(.sqs-block-socialaccountlinks-v2, [class*="social-icons"]) {
  top: calc(50% + var(--wl-btn-half) + var(--wl-gap-btn-social));
}
}

/* Bottone EXPLORE: stessa dimensione a ogni larghezza di finestra
   (di serie sotto i ~900px rimpiccioliva a 16px / 86x51). */
.region.split-hero a.sqs-block-button-element {
  font-size: 18px !important;
  padding: 18px 23.4px !important;
}

/* ============================================================
   Header (logo + menu): dimensioni fisse, non scalano con la
   finestra. Riferimento: finestra da 1456px.
   - altezza header 85px (padding 22px)
   - distanza fra le voci di menu 22px
   - corpo del menu 18px, logo 32px
   ============================================================ */
@media screen and (min-width: 768px) {
  .header .header-announcement-bar-wrapper {
    padding: 22px !important;
  }
  .header.shrink .header-announcement-bar-wrapper {
    padding: 20px 22px !important;
  }
  .header-nav-item + .header-nav-item {
    margin-left: 22px !important;
    margin-right: 0 !important;
  }
  .header-nav-item:first-child {
    margin-left: 0 !important;
  }
  .header-nav-item a {
    font-size: 18px !important;
  }
  .header-title-text a {
    font-size: 32px !important;
  }
}

/* ------------------------------------------------------------
   Font Adobe: nel Web Project la famiglia condensata si chiama
   "alternate-gothic-condensed-a" (nel kit Squarespace era
   "alternate-gothic-condensed-atf"). Si allineano i nomi qui,
   tenendo il vecchio come fallback.
   ------------------------------------------------------------ */
:root, body {
  --heading-font-font-family: "alternate-gothic-condensed-a", "alternate-gothic-condensed-atf", sans-serif;
  --form-block-description-text-font-font-family: "alternate-gothic-condensed-a", "alternate-gothic-condensed-atf", sans-serif;
}

/* ------------------------------------------------------------
   Lightbox: dimensionamento dell'immagine ingrandita.
   Su Squarespace lo faceva il JS "content-fit"; qui lo fa il CSS.
   ------------------------------------------------------------ */
.gallery-lightbox-item-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.gallery-lightbox-item-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================
   Welcome page: slideshow in formato quadrato (1:1).
   - in verticale: larghezza piena, altezza uguale alla larghezza
   - affiancato: quadrato centrato nella meta' di sinistra,
     dimensionato sul lato piu' corto fra meta' larghezza e altezza
   ============================================================ */
.region.split-hero > .wm-section-slider {
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
.region.split-hero > .wm-section-slider .swiper,
.region.split-hero > .wm-section-slider .swiper-wrapper,
.region.split-hero > .wm-section-slider .swiper-slide,
.region.split-hero > .wm-section-slider .swiper-slide > section {
  height: 100% !important;
  min-height: 0 !important;
}

@media screen and (orientation: landscape) and (min-width: 640px), screen and (min-width: 1024px) {
  /* la colonna sinistra resta al 50% ma il quadrato ci sta dentro, centrato */
  .region.split-hero > .wm-section-slider {
    align-self: center;
    width: min(50vw, 100vh);
    flex: 0 0 50%;
    max-width: 50vw;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
  }
  .region.split-hero > .wm-section-slider .swiper-wrapper,
  .region.split-hero > .wm-section-slider .swiper-slide,
  .region.split-hero > .wm-section-slider .swiper-slide > section {
    height: 100% !important;
    min-height: 0 !important;
  }
}