/* =========================================================
   BASE + VARIABILI
   ========================================================= */
:root{
  --container-max:1140px;     /* larghezza contenuto desktop */
  --gutter:24px;               /* spazio orizzontale */
  --radius:8px;                /* raggio bordi */
  --shadow:0 4px 14px rgba(0,0,0,.08);
}

/* Box sizing coerente */
*,*::before,*::after{ box-sizing:border-box; }

/* Immagini e media fluidi */
img,svg,video,canvas,iframe,embed,object{ max-width:100%; height:auto; }

/* Blocca scroll orizzontale accidentale */
html,body{ width:100%; overflow-x:hidden; }

/* Link che avvolgono immagini non sforano */
a img{ display:block; }

/* Elementor container */
.elementor-container{
  max-width:var(--container-max) !important;
  padding-left:calc(var(--gutter)/2);
  padding-right:calc(var(--gutter)/2);
}

/* Sezioni e colonne spaziatura base */
.elementor-section{ padding-top:40px; padding-bottom:40px; }
.elementor-column{ margin-bottom:20px; }

/* Immagini responsive con crop opzionale */
.img-cover, .e-object-fit-cover img{ width:100%; height:100%; object-fit:cover; }

/* Tabelle responsive */
.table-responsive{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-responsive table{ width:100%; border-collapse:collapse; }
.table-responsive th,
.table-responsive td{ padding:12px; border-bottom:1px solid #eaeaea; }

/* Embed 16:9 responsive */
.ratio{ position:relative; width:100%; }
.ratio-16x9{ padding-top:56.25%; }
.ratio-4x3{ padding-top:75%; }
.ratio > iframe, .ratio > video, .ratio > embed{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Form full width e tap targets */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="number"],input[type="password"],input[type="search"],
select,textarea{
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:var(--radius);
}
button, .elementor-button{
  padding:12px 18px; border-radius:var(--radius);
}

/* Immagini e gallerie */
.gallery, .wp-block-gallery{ gap:var(--gutter); }
.gallery img{ display:block; border-radius:var(--radius); }

/* Utility di visibilità */
.hide-desktop{ display:none !important; }
.hide-tablet{ display:block !important; }
.hide-mobile{ display:block !important; }

/* =========================================================
   TIPOGRAFIA FLUIDA + TITOLI
   (clamp = fluido; i breakpoint sotto rifiniscono)
   ========================================================= */
html{ font-size:16px; }
body{ font-size:clamp(14px, 1.2vw, 18px); line-height:1.6; }

h1{ font-size:clamp(28px, 4vw, 40px); line-height:1.15; }
h2{ font-size:clamp(24px, 3.2vw, 32px); line-height:1.2; }
h3{ font-size:clamp(20px, 2.6vw, 26px); line-height:1.25; }
h4{ font-size:clamp(18px, 2.2vw, 22px); line-height:1.3; }
h5{ font-size:clamp(16px, 2vw, 18px); line-height:1.35; }
h6{ font-size:clamp(14px, 1.8vw, 16px); line-height:1.4; }

/* Titoli Elementor widget che forzano dimensioni */
.elementor-heading-title{ word-wrap:break-word; }

/* =========================================================
   BREAKPOINTS
   - Desktop: >1140px
   - Tablet: 768–1024px
   - Mobile: <=767px
   ========================================================= */

/* ---------- Tablet (<= 1024px) ---------- */
@media (max-width:1024px){
  :root{ --container-max:95vw; --gutter:20px; }

  body{ font-size:15px; }
  .elementor-section{ padding-top:32px; padding-bottom:32px; }
  .elementor-column{ margin-bottom:18px; }

  /* Titoli */
  h1{ font-size:28px; }
  h2{ font-size:24px; }
  h3{ font-size:20px; }
  h4{ font-size:18px; }
  h5{ font-size:16px; }
  h6{ font-size:14px; }

  /* Griglie Elementor più ariose */
  .elementor-container{ row-gap:20px; }

  /* Tabelle scrollabili se troppo larghe */
  .table-responsive{ overflow-x:auto; }

  /* Pulsanti leggermente compatti */
  button, .elementor-button{ padding:11px 16px; }

  /* Utility visibilità */
  .hide-tablet{ display:none !important; }
}

/* ---------- Mobile (<= 767px) ---------- */
@media (max-width:767px){
  :root{ --container-max:100vw; --gutter:16px; }

  .elementor-container{
    max-width:100% !important;
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }
  .elementor-section{ padding-top:28px; padding-bottom:28px; }
  .elementor-column, .elementor-widget{ margin-bottom:16px; }

  body{ font-size:14px; line-height:1.5; }

  /* Titoli */
  h1{ font-size:24px; }
  h2{ font-size:20px; }
  h3{ font-size:18px; }
  h4{ font-size:17px; }
  h5{ font-size:16px; }
  h6{ font-size:14px; }

  /* Colonne a pila se qualche widget forza larghezze */
  .elementor-column{ width:100% !important; max-width:100% !important; }

  /* Spazi interni per leggibilità */
  .elementor-widget-container{ padding-left:0; padding-right:0; }

  /* Tabelle: font più piccolo e scroll */
  .table-responsive table{ font-size:13px; }

  /* Pulsanti comodi al tocco */
  button, .elementor-button{ padding:12px 16px; font-size:14px; }

  /* Nascondi elementi desktop-only */
  .hide-mobile{ display:none !important; }
}

/* =========================================================
   FIX COMUNI TEMA HELLO / ELEMENTOR
   ========================================================= */

/* Evita max-width fissati da kit o plugin */
:root{ --container-max-width: var(--container-max); }
.elementor-section .elementor-container{
  max-width:var(--container-max-width) !important;
}

/* Immagini Elementor che a volte sforano */
.elementor img{ height:auto; }

/* Gallerie in 1 colonna su mobile se non gestite dal widget */
@media (max-width:767px){
  .gallery-columns-2 .gallery-item,
  .gallery-columns-3 .gallery-item,
  .gallery-columns-4 .gallery-item{ width:100% !important; }
}

/* Header sticky sicuro */
.sticky{ position:sticky; top:0; z-index:999; }

/* Card base riutilizzabile */
.card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px;
}

/* Spaziature utilità */
.mt-0{ margin-top:0 !important; } .mb-0{ margin-bottom:0 !important; }
.mt-1{ margin-top:8px !important; } .mb-1{ margin-bottom:8px !important; }
.mt-2{ margin-top:16px !important; } .mb-2{ margin-bottom:16px !important; }
.mt-3{ margin-top:24px !important; } .mb-3{ margin-bottom:24px !important; }

/* Immagini retina che non devono superare il contenitore */
figure{ max-width:100%; }

/* Pulsanti che non sforano le colonne strette */
.elementor-button{ max-width:100%; white-space:normal; }

/* Modali/Popup: previeni orizzontale */
dialog, .mfp-content{ max-width:100%; }