/* ==========================================================================
   Giardino Alto — grafica portata dal sito precedente.
   Tutti i valori sono quelli misurati sugli stili calcolati di giardinoalto.it,
   non stimati a occhio.
   ========================================================================== */

:root {
  --ga-primario: #68B4C4;   /* titoli, link nei contenuti, CTA fissa */
  --ga-barra: rgba(123, 189, 204, 0.9);  /* barra del menu */
  --ga-bottone: #7ABCCB;    /* sfondo .art-button */
  --ga-attivo: #666868;     /* voce di menu attiva, e fondo del footer */
  --ga-tabella: #cae3e8;    /* intestazioni e bordi della tabella prezzi */
  --ga-chiaro: #F8FBFC;
}

/* --- Larghezza del contenuto: nel sito precedente .art-sheet era 1200px fissi,
       mentre Bootstrap arriva a 1320. --- */
.art-sheet .container,
.art-footer .container,
.header .art-nav-container.container,
.kw-module .section-container.container {
  max-width: 1200px;
}

/* --- Tipografia: paragrafi 15px / 26.25px in Archivo Narrow --- */
.article-main-content,
.article-main-content p,
.article-main-content li,
.kw-module-content p,
.kw-module-content li,
.art-footer p {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 15px;
  line-height: 26.25px;
}
/* Nell'originale ogni paragrafo dei contenuti ha 13px sopra e sotto (Artisteer),
   non lo 0/16px di Bootstrap: senza questo ogni sezione si allunga di qualche
   pixel e gli scarti si sommano lungo la pagina. */
.article-main-content p,
.kw-module-content p {
  margin: 13px 0;
}

/* --- template.css di kwtemplate dà .art-article { margin: 50px 0 }: nell'originale
       l'articolo è a filo, lo stacco lo danno solo i margini del titolo. Quei 50px
       si vedevano come fascia bianca fra la call to action e la gallery in home e
       sopra la fascia contatti. --- */
article.art-article {
  margin: 0;
}

/* --- Titoli: 34px, #68B4C4, centrati, maiuscoli, peso normale --- */
.article-title,
.page-title .article-title {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--ga-primario);
  text-align: center;
  text-transform: uppercase;
  margin: 5px 0;
  padding: 0;
}
.article-main-content h1,
.article-main-content h2,
.article-main-content h3,
.article-main-content h4,
.article-main-content h5,
.article-main-content h6,
.article-main-content a {
  color: var(--ga-primario);
  font-family: 'Archivo Narrow', sans-serif;
}
/* Nell'originale (.art-postcontent) i titoli dentro al testo erano tutti maiuscoli,
   con 5px di margine e una scala fissa 34/24/20/18/16/15. */
.article-main-content h1,
.article-main-content h2,
.article-main-content h3,
.article-main-content h4,
.article-main-content h5,
.article-main-content h6 {
  text-transform: uppercase;
  margin: 5px 0;
}
.article-main-content h1 { font-size: 34px; }
.article-main-content h2 { font-size: 24px; }
.article-main-content h3 { font-size: 20px; }
.article-main-content h4 { font-size: 18px; }
.article-main-content h5 { font-size: 16px; }
.article-main-content h6 { font-size: 15px; }

/* --- Header: barra semitrasparente alta 47px in position:absolute sopra lo slider.
       Non è sticky: scorre via con la pagina, come nell'originale. --- */
body .header.container-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ga-barra);
}
/* Il boilerplate dà un fondo bianco ai wrapper interni, che coprirebbe lo slider. */
body .header.container-header .art-nav,
body .header.container-header .container-nav,
body .header.container-header .navbar {
  background: transparent;
}
body .header.container-header .art-nav,
body .header.container-header .navbar {
  border: 0;
  min-height: 47px;
  padding-top: 0;
  padding-bottom: 0;
}
/* template.css impone height:74px/line-height:74px su .nav-link: nell'originale
   la barra è alta 47px. */
.header.container-header .nav-link,
.header.container-header .nav-link:hover,
.header.container-header .nav-link:focus {
  color: #fff !important;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 25px;
  height: 47px;
  line-height: 47px;
}
.header.container-header .navbar-nav,
.header.container-header .mod-menu {
  min-height: 47px;
}
/* template.css aggiunge 1.55em (31px) fra una voce e l'altra: nell'originale lo
   stacco lo davano solo i 25px di padding, e quei 186px in più facevano sbordare
   il menu sopra il logo e sotto le bandierine. */
.header.container-header .mod-menu > li + li {
  margin-left: 0;
}
/* Nell'originale la voce attiva è grigia, non bianca. */
.header.container-header .nav-item.current > .nav-link,
.header.container-header .nav-item.active > .nav-link,
.header.container-header .nav-link.active {
  color: var(--ga-attivo) !important;
}
/* Il logo è 250x28. Serve max-width:none e un'ancora larga altrettanto, altrimenti
   il max-width:100% di Bootstrap lo comprime alla larghezza del contenitore flex. */
.header.container-header .art-logo {
  flex: 0 0 250px;
  width: 250px;
  display: block;
  line-height: 0;
}
.header.container-header .art-logo img {
  width: 250px;
  height: 28px;
  max-width: none;
  max-height: 28px;
}
/* Nell'originale la voce con sottomenu non mostra la freccetta. */
.header.container-header .dropdown-toggle::after {
  display: none;
}
/* Sottomenu leggibili: fondo bianco, testo scuro. */
.header.container-header .dropdown-menu {
  background: #fff;
  border: 0;
  border-radius: 0;
}
.header.container-header .dropdown-item {
  color: var(--ga-attivo);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}
.header.container-header .dropdown-item:hover {
  background: var(--ga-primario);
  color: #fff;
}
/* Selettore lingua: nell'originale le due bandierine sono impilate in fondo a destra
   della barra, non su una seconda riga. La posizione "lang-menu" del layout
   menu_bootstrap5 le rende dentro la barra; qui le si allinea a destra. */
.header .container-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header .container-nav > .navbar {
  flex: 1 1 auto;
}
.header .container-lang-menu {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
}
.header .mod-languages,
.header .mod-languages ul {
  height: auto;
  min-height: 0;
}
.header .mod-languages ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
/* mod_languages dà 8px di padding a ogni <a>: due bandierine diventerebbero 110px
   di altezza e gonfierebbero la barra. */
.header .mod-languages ul li,
.header .mod-languages ul li a {
  padding: 0;
  margin: 0;
  line-height: 0;
  display: block;
}
/* mod_languages colora di #f0f0f0 la lingua attiva: nell'originale il riquadro
   coincideva con la bandierina e non si vedeva, qui con i padding del mobile
   diventava un quadrato grigio dietro all'italiano. */
.header .mod-languages .lang-active {
  background: none;
}
.header .mod-languages img {
  display: block;
  width: 18px;
  height: auto;
}
/* menu_bootstrap5/style.css mette width:100% sulla <ul>: dentro un flex la lista
   si allarga quanto tutta la navbar, che con il logo davanti sfonda il contenitore
   e spinge le bandierine fuori dalla barra. La lista deve stare sul contenuto. */
.header.container-header .navbar-nav {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.header .container-nav {
  flex-wrap: nowrap;
}
.header .container-nav > .navbar,
.header .container-nav .offcanvas,
.header .container-nav .offcanvas-body {
  min-width: 0;
}

/* Hamburger: hamburgers.min.css colora le tre barrette di nero (anche nello stato
   is-active, con specificita' 0-2-0), sulla barra turchese non si vedono. Servono
   tutti e tre i selettori - barra, ::before e ::after - e la variante is-active,
   altrimenti la X del menu aperto resta nera. */
.header .hamburger .hamburger-inner,
.header .hamburger .hamburger-inner::before,
.header .hamburger .hamburger-inner::after,
.header .hamburger.is-active .hamburger-inner,
.header .hamburger.is-active .hamburger-inner::before,
.header .hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}

/* Apertura del menu mobile: lo scorrimento dell'altezza lo fa gia' il collapse di
   Bootstrap, qui le voci entrano a cascata mentre la tendina si apre. Sopra il
   breakpoint la navbar non ha ne' .collapsing ne' .show, quindi non scatta. */
@keyframes ga-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.header .navbar-collapse.collapsing .mod-menu > li,
.header .navbar-collapse.show .mod-menu > li {
  animation: ga-menu-in 0.3s ease both;
}
.header .navbar-collapse .mod-menu > li:nth-child(2) { animation-delay: 0.05s; }
.header .navbar-collapse .mod-menu > li:nth-child(3) { animation-delay: 0.10s; }
.header .navbar-collapse .mod-menu > li:nth-child(4) { animation-delay: 0.15s; }
.header .navbar-collapse .mod-menu > li:nth-child(5) { animation-delay: 0.20s; }
.header .navbar-collapse .mod-menu > li:nth-child(6) { animation-delay: 0.25s; }
.header .navbar-collapse .mod-menu > li:nth-child(7) { animation-delay: 0.30s; }
.header .navbar-collapse .mod-menu > li:nth-child(8) { animation-delay: 0.35s; }
.header .navbar-collapse .mod-menu > li:nth-child(9) { animation-delay: 0.40s; }
.header .navbar-collapse .mod-menu > li:nth-child(10) { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .header .navbar-collapse .mod-menu > li {
    animation: none;
  }
}

/* --- Slider: nell'originale l'altezza era width*800/1600, imposta via JS.
       Qui la fa il CSS. Il modulo è reso senza chrome, quindi moduleclass_sfx non
       viene emesso: si punta sulle classi che il modulo stesso genera. --- */
.kw-slider.swiper {
  aspect-ratio: 2 / 1;
  height: auto !important;
  overflow: hidden;
  position: relative;
}
.kw-slider.swiper .swiper-slide {
  background-size: cover;
  background-position: center center;
  height: auto;
}
/* Il cuneo bianco in basso: era .flexslider:after con maschera.png. */
.kw-slider.swiper::after {
  content: '';
  position: absolute;
  /* 1px sotto il bordo: altrimenti l'arrotondamento lascia una riga di immagine
     visibile sotto il cuneo bianco. */
  inset: 0 0 -1px 0;
  pointer-events: none;
  background-image: url('../images/giardinoalto/maschera.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  z-index: 10;
}

/* --- Intro homepage: colonna da 600px centrata, 50px di stacco in alto --- */
.kw-intro .kw-module-content {
  max-width: 600px;
  margin: 0 auto;
  padding-top: 50px;
}

/* --- Call to action: rgba(104,180,196,.9), 73px di padding verticale,
       testo bianco, galloni bianchi sopra e sotto --- */
.kw-cta {
  background-color: rgba(104, 180, 196, 0.9);
  background-image: url('../images/giardinoalto/maschera.png'),
                    url('../images/giardinoalto/maschera-top.png');
  background-position: bottom center, top center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% auto;
  /* script.js dell'originale ricalcolava il padding a ogni resize come
     81 * larghezza / 1400, cioè l'altezza dei due galloni: così il testo non ci
     finisce mai sopra. In percentuale è la stessa cosa senza JS.
     min-height era 365 * larghezza / 2000 al netto dei due galloni: con
     box-sizing border-box i padding sono già dentro, quindi 18.25vw. */
  padding: 5.7857% 0;
  min-height: 18.25vw;
}
.kw-cta,
.kw-cta p,
.kw-cta strong,
.kw-cta span,
.kw-cta a {
  color: #fff;
}
/* Il bottone ha fondo pieno #7ABCCB, senza bordo né angoli arrotondati, testo
   in maiuscolo. Il prefisso body serve perché style.min.css usa
   "body a.art-button:link" (0-2-2) per imporre padding 10px 30px. */
body .kw-cta a.art-button,
body .kw-cta a.art-button:link,
body .kw-cta a.art-button:visited {
  background: var(--ga-bottone);
  border: 0;
  border-radius: 0;
  color: #fff !important;
  font-size: 20px;
  padding: 0 25px;
  display: inline-block;
  height: 33px;
  line-height: 33px;
  text-transform: uppercase;
}

/* --- Gallery: NON è una griglia. media/com_di/css/gallery.css mette .pictures in
       CSS grid auto-fit, che spalma le immagini su 4 colonne stirandole.
       Nell'originale sono anteprime 300x250 inline-block con 15px di margine
       (riquadro 330x280), centrate in un contenitore da 1200px: 3 per riga. --- */
.kw-gallery .di-gallery.gallery .pictures,
.kw-gallery .di-gallery.gallery .di-gallery__items {
  display: block;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  gap: 0;
}
.kw-gallery .di-gallery.gallery .di-gallery__item {
  display: inline-block;
  margin: 0;
  padding: 0;
  float: none;
  vertical-align: top;
  background: none;
}
/* Il margine sta sull'immagine, non sull'ancora: così il riquadro è 330x280
   esattamente come nell'originale. */
.kw-gallery .di-gallery.gallery .di-gallery__item img {
  width: 300px;
  max-width: none;
  height: 250px;
  object-fit: cover;
  margin: 15px;
  display: block;
}

/* --- Sezione contatti: fascia a tutta larghezza con sfondo-contatti.png
       (turchese sulla metà sinistra, bianco sulla destra) ripetuto in verticale,
       contenuto centrato a 1200px. Nell'originale è esattamente così che nasce
       la divisione a metà. --- */
.kw-contatti {
  background-image: url('../images/giardinoalto/sfondo-contatti.png');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}
.kw-contatti .kw-contatti-row {
  align-items: stretch;
}
.kw-contatti .art-contatti-testo {
  color: #fff;
  font-size: 16px;
  /* Nell'originale la colonna del testo non ha padding: il titolo parte a filo
     della fascia, lo stacco lo danno i suoi 5px di margine. */
  padding: 0;
}
.kw-contatti .art-contatti-testo p,
.kw-contatti .art-contatti-testo a,
.kw-contatti .art-contatti-testo strong {
  color: #fff !important;
}
/* Nell'originale i paragrafi della colonna contatti sono 16px, non 15px. */
.kw-contatti .art-contatti-testo p {
  font-size: 16px;
}
.kw-contatti h2.icona-contatti {
  color: #fff;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 42px;
  margin: 5px 0;
  text-align: center;
}
.kw-contatti h2.icona-contatti::before {
  content: '';
  display: inline-block;
  width: 50px;
  height: 42px;
  vertical-align: middle;
  background-image: url('../images/giardinoalto/icone/telefono.png');
  background-position: left center;
  background-repeat: no-repeat;
}
.kw-contatti .kw-col-form {
  /* Nell'originale il padding sta sul form ed è 30px per lato. */
  padding: 30px;
}
/* I 12px di gutter di Bootstrap stringerebbero i campi a 516px: nell'originale
   sono larghi quanto il form meno i suoi 30px di padding, cioè 540px. */
.kw-contatti .kw-col-form .row {
  --bs-gutter-x: 0;
}
/* Campi con la sola linea inferiore, come nell'originale. */
.kw-col-form input[type="text"],
.kw-col-form input[type="email"],
.kw-col-form input[type="tel"],
.kw-col-form textarea {
  background: #fff;
  border: none;
  border-bottom: 2px solid var(--ga-bottone);
  border-radius: 0;
  width: 100%;
  max-width: 650px;
  padding: 6px 0;
  color: #2E6876;
  font-size: 13px;
  margin-bottom: 1rem;
}
.kw-col-form textarea {
  border: 2px solid var(--ga-bottone);
  padding: 6px;
  height: 180px;
}
.kw-col-form button.art-button,
.kw-col-form input.art-button,
.kw-col-form a.art-button {
  background: var(--ga-bottone);
  border: 0;
  border-radius: 0;
  color: #fff;
  padding: 0 25px;
  line-height: 33px;
}

/* --- Mappa: iframe a tutta larghezza, alto 500px. Il wrapper azzerava il
       font-size per eliminare lo spazio sotto l'iframe. --- */
.kw-mappa .modulo-mappa,
.kw-mappa .kw-module-content,
.kw-mappa p {
  font-size: 0;
  line-height: 0;
  margin: 0;
}
.kw-mappa iframe {
  width: 100%;
  height: 500px;
  border: 0;
  display: block;
}
/* Il cuneo turchese sopra la mappa: nell'originale era .art-maps-interno, un div
   assoluto con back-contatti-obliquo.png in cima e l'altezza calcolata dal JS
   (larghezza x 81/1400). Qui la stessa proporzione la tiene aspect-ratio.
   Sotto i 992px l'originale lo nascondeva. */
.kw-mappa {
  position: relative;
}
.kw-mappa::before {
  content: '';
  position: absolute;
  /* Il bordo fra fascia e mappa cade su una frazione di pixel: partendo da 0 la
     prima riga del cuneo si disegna a copertura parziale e resta una linea chiara.
     1px di sovrapposizione, come sul cuneo dello slider. */
  top: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 1400 / 81;
  background-image: url('../images/giardinoalto/back-contatti-obliquo.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 991.98px) {
  .kw-mappa::before {
    display: none;
  }
}

/* --- Footer: fascia #666868, contenuto 1200px con 25px di padding,
       testo bianco 15px centrato --- */
.art-footer {
  background: var(--ga-attivo);
  color: #fff;
}
.art-footer .kw-module-content {
  padding: 0;
}
.art-footer .section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px;
}
.art-footer p,
.art-footer .copyright p,
.art-footer a {
  color: #fff;
  font-size: 15px;
  text-align: center;
  /* 13px sopra e sotto come nei contenuti: la fascia grigia dell'originale è
     alta 103px, non 76. */
  margin: 13px 0;
}

/* --- Tabella prezzi: nell'originale la regolava .art-article (bordi collassati,
       th centrati con 7px di padding, td 2px allineati in alto). Il template nuovo
       non stila le tabelle dei contenuti, quindi le regole vanno ripetute qui. --- */
.article-main-content .art-prezzi {
  border-collapse: collapse;
  margin: 1px;
  width: 100%;
}
.article-main-content .art-prezzi th,
.article-main-content .art-prezzi td {
  border: solid 1px var(--ga-tabella);
  padding: 2px;
  vertical-align: top;
  text-align: left;
}
.article-main-content .art-prezzi th {
  background-color: var(--ga-tabella);
  padding: 7px;
  text-align: center;
  vertical-align: middle;
}
.article-main-content .art-prezzi th.border-right-white {
  border-right: 1px solid #fff;
}

/* --- Contatti: nell'originale .items-row era una tabella a due celle (testo a
       sinistra, street view a destra, table-layout fisso quindi 50/50). Il template
       nuovo non stila le classi del layout blog, cosi' le due colonne si impilavano.
       Sotto i 992px tornano una sotto l'altra, come faceva template.responsive.css. --- */
.article-main-content .items-row {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
.article-main-content .items-row > .item {
  display: table-cell;
  vertical-align: top;
}
@media (max-width: 991.98px) {
  .article-main-content .items-row,
  .article-main-content .items-row > .item {
    display: block;
    width: auto;
  }
}

/* --- Griglia teaser degli chalet: le foto hanno proporzioni diverse (chalet-1 è
       panoramica 2:1, le altre 4:3), quindi si impone il 4:3 e si ritaglia. Senza
       questo i tre riquadri hanno altezze diverse e i titoli non si allineano. --- */
.art-chalet img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- CTA fissa "Prenota adesso": nell'originale era mod_kw_fixed_button,
       fixed a 40px dai bordi, fondo #68B4C4. --- */
.kw-fixed-cta {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 1030;
}
/* style.scss usa "a.art-button:link" (elemento + classe): serve la stessa forma,
   altrimenti padding e sfondo del boilerplate vincono. */
.kw-fixed-cta a.art-button,
.kw-fixed-cta a.art-button:link,
.kw-fixed-cta a.art-button:visited {
  background: var(--ga-primario);
  border: 0;
  border-radius: 50px;
  color: #fff !important;
  font-size: 18px;
  line-height: 36px;
  padding: 10px 20px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.navbar-toggler {
  border: 0;
}
@media (min-width: 991.98px) {

  .navbar-expand-lg .navbar-collapse {
    justify-content: end !important;
  }
}

/* Extra extra large devices (<1400px) */
@media (max-width: 1399.98px) {

}

/* Extra large devices (max-width 1199.98px) */
@media (max-width: 1199.98px) {
  /* Fra 992 e 1200px logo + voci + bandierine non entrano nei 25px di padding
     originali: si stringono le voci, così le bandierine restano nella barra.
     Sotto i 992px il menu diventa hamburger e il problema non si pone. */
  .header.container-header .nav-link {
    padding: 0 16px;
  }
}


/* Large devices (max-width 991.98px): Desktops */
@media (max-width: 991.98px) {
  /* Sotto il breakpoint la barra diventa una colonna: logo, bandierine e pulsante
     del menu uno sotto l'altro, come nell'originale. display:contents scioglie il box
     della navbar, cosi' i suoi figli si ordinano insieme alle bandierine. */
  .header .container-nav {
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
  }
  .header .container-nav > .navbar {
    display: contents;
  }
  .header.container-header .art-logo {
    order: 1;
    flex: 0 0 auto;
    height: 28px;
    margin-bottom: 10px;
  }
  .header .container-lang-menu {
    order: 2;
    margin: 0 0 10px;
  }
  .header .container-nav .navbar-toggler {
    order: 3;
  }
  /* In colonna il flex-basis:100% di Bootstrap diventa un'altezza: vince sull'height
     inline che il collapse anima, cosi' la tendina si apriva di scatto invece di
     scorrere. Con flex:0 0 auto l'altezza torna in mano al collapse. */
  .header .container-nav .navbar-collapse {
    order: 4;
    width: 100%;
    flex: 0 0 auto;
  }
  /* Menu aperto a tutta larghezza: cosi' l'area cliccabile di ogni voce e' l'intera
     riga e non solo il testo. Le voci sono centrate, come
     .responsive .art-nav ul.art-hmenu a nell'originale. */
  .header.container-header .navbar-nav {
    width: 100%;
  }
  .header.container-header .navbar-collapse .nav-link {
    text-align: center;
  }
  /* Bandierine affiancate e con un'area di tocco decente: a 16px senza padding
     erano quasi impossibili da centrare col dito. */
  .header .mod-languages ul {
    flex-direction: row;
    gap: 0;
  }
  /* 24x16 di bandierina dentro 44x44 di area di tocco: la distanza fra le due la
     danno i padding, senza gap. */
  .header .mod-languages ul li a {
    padding: 14px 10px;
  }
  .header .mod-languages img {
    width: 24px;
  }

  /* Nell'originale sotto il breakpoint .art-intro-inner e .art-call-to-action-inner
     passano a width:auto senza padding: il testo va da bordo a bordo e va a capo
     nello stesso punto. */
  .kw-module .section-container.container {
    padding-left: 0;
    padding-right: 0;
  }
  /* Stessa cosa per il footer: .responsive .art-footer-inner passa da 25px a 2%,
     altrimenti la riga dei dati aziendali va a capo una volta in più. */
  .art-footer .section-container {
    padding: 2%;
  }

  /* Sotto il breakpoint le due colonne si impilano: lo sfondo a metà non ha più
     senso. Come nell'originale (.responsive .art-contatti) l'intera sezione,
     modulo di contatto compreso, diventa una fascia #85cfde piena. */
  .kw-contatti {
    background-image: none;
    background-color: #85cfde;
  }

}

/* Medium devices (max-width 767.98px): Tablets */
@media (max-width: 767.98px) {
  /* L'originale non rimpicciolisce le anteprime sotto il breakpoint: restano
     300x250 e passa da 15px a 1% il margine (.responsive-phone .art-content-layout
     img). max-width evita che sborda sotto i 320px. */
  .kw-gallery .di-gallery.gallery .di-gallery__item img {
    max-width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    margin: 1%;
  }

  .container-header .container-nav .container-search, .container-header .container-nav nav {
    margin-bottom: 1rem;
  }
}


/* Small devices (max-width 575.98px): Mobile portrait */
@media (max-width: 575.98px) {
  .kw-fixed-cta {
    right: 12px;
    bottom: 12px;
  }
  .article-title {
    font-size: 26px;
  }
}