/* === VARIABILI === */

:root {

--primaryColor: #25778c;
--primarydarkColor: #027854;
--lightGrey: #F8F8F8;
--lightmediumGrey: #EEE;
--regularGrey: #999;
--textColor: #4b4f55;

--primaryColor100: #e9f1f4;
--primaryColor200: #c8dde2;
--primaryColor300: #9dc2cb;
--primaryColor400: #25778c; /* Colore principale */
--primaryColor400_celete-tevere: #319494;
--primaryColor400_new: #689868;
--primaryColor500: #1f6577;
--primaryColor600: #1a5362;
--primaryColor700: #14414d;
--primaryColor800: #0f3038;
--primaryColor900: #091e23; 

--colorGrey100: #f9fafb;
--colorGrey200: #f1f3f5;
--colorGrey300: #e2e6ea;
--colorGrey400: #cbd0d6;
--colorGrey500: #9aa0a6;
--colorGrey600: #6b7076;
--colorGrey700: #4b4f55;
--colorGrey800: #2e3135;
--colorGrey900: #1c1e20;

--colorChi: #C00;
--colorQuando: #FC0;
--colorDove: #0C0;
--colorCosa: #360;
--colorCome: #0CC;
--colorQuale: #C0C;

--text-font-size: 1em;
}



/* === RESET === */

*::before,
*::after {
    box-sizing:border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin:0;
    padding:0;
}



* {
    box-sizing:border-box;
    margin:0;
    padding:0;
}


img,
picture,
video,
canvas {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}



/* Leaflet fix: non ereditare max-width/height dalle immagini globali */
.leaflet-container img,
.leaflet-container .leaflet-pane img,
.leaflet-tile {
  max-width: none !important;
  max-height: none !important;
}





/* === ELEMENTI  === */

figure {
    margin: 0;
    width:100%;
}

figure img {
    width: 100%;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/******
 *<img src="img-small.jpg" 
     srcset="img-med.jpg 600w, img-large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="">
*****/



ul,ol {
    margin-left:2em;
}

p {
    margin-bottom: .5em;
    text-align:justify;
    hyphens: auto;
    -webkit-hyphens: auto;    
}

a {
    color: var(--primaryColor);
    font-weight: 600;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b {
    font-weight: 600;
}

strong {
    font-weight: 700;
}


table {
    border-collapse:collapse
}

button {
    font-size: .7em;
    padding: 0 1.5em;
    line-height: 2.5em;
    border-radius: 1.25em;
    color: #FFF;
    text-align:center;
    text-transform: uppercase;
    background-color: var(--primaryColor400);
    border: none;
    cursor:pointer;
}

button:hover {
    background-color: var(--primaryColor300);
}
            

input,
input:hover,
input:focus,
input:active {
  border: 1px solid var(--primaryColor400);
  outline: none;
  box-shadow: none;
  background: #fff;
}

input[type=search],
input[type=text],
input[type=date] {
    padding: .3em .5em;
    border:1px solid var(--primaryColor400);
    border-radius:5px;
    outline: none !important;
    box-shadow: none !important;
}

input[type=search],
input[type=text] {
    width:100%;
}

input.anno {
    width: 100px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primaryColor);
}



  
/* === TOOLS  === */
  
.mt-2 {margin-top: .5em;}
.mt-3 {margin-top: 1em;}
.mt-4 {margin-top: 2em;}
.mt-5 {margin-top: 3em;}

.mr-2 {margin-right: .5em;}
.mr-3 {margin-right: 1em;}
.mr-4 {margin-right: 2em;}
.mr-5 {margin-right: 3em;}

.ml-2 {margin-left: .5em;}
.ml-3 {margin-left: 1em;}
.ml-4 {margin-left: 2em;}
.ml-5 {margin-left: 3em;}

.mb-2 {margin-bottom: .5em;}
.mb-3 {margin-bottom: 1em;}
.mb-4 {margin-bottom: 2em;}
.mb-5 {margin-bottom: 3em;}

.center {
    text-align:center;
}

.right {
    text-align:right;
}

span.hlsearch {
    background-color:#FC0;
}

.flex-break {
    flex-basis: 100%;
    height: 0;   
}

.grid-break {
    grid-column: 1 / -1;
}

.list * {
    transition: opacity 0.5s ease-in-out;
}

.new-item {
    opacity:0.2;
}



  

html {
  font-size: calc(60% + 0.8vmin);
}


body {
    /*font-family: 'Open Sans', sans-serif;*/
    font-family: "Lato",sans-serif;
    font-size: 1rem;
    line-height:150%;
    margin:0;
    color: var(--textColor);
    font-weight:300;
    font-optical-sizing: auto;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
}

body.loading::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}

body.loading::after {
  content: "⏳"; /* oppure un'animazione con @keyframes */
  font-size: 3em;
  color: white;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}


.container {
    width:100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 50px;
}


.container_prova {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item_prova {
  flex: 1 1 200px;
}




/* === HEADER === */

header {
    position:fixed;
    top:0;
    height:100vh;
    left:0;
    /*width: clamp(100px, 25vw, 250px);*/
    width: 250px;
    display:flex;
    flex-direction:column;
    padding: 25px;
    background-color:#FFF;
    box-shadow: 5px 0px 15px rgba(0,0,0,.5);
    transition: ALL .5s ease;
    z-index:10000;
}


header .logo {
    width:150px;
    margin: auto
}

.beta {
    text-align: center;
    font-size: 10px;
    line-height: 10px;
    font-weight: 900;
    color: var(--colorGrey500);
}




/* === NAV === */

nav {
    flex:1;
    display:flex;
    flex-direction:column;    
    margin-top: 50px;    
}

ul.menu {
    list-style:none;
    margin: 0 auto;
    width: 150px;
}

ul.menu li {
    margin-top: 5px;
}

ul.menu li a {
    display:block;
    padding: .3em 1em;
    text-decoration: none;
    font-weight: 500;
    font-size: .8em;
    border-radius:3em;
    text-align:center;
    text-transform:uppercase;
    transition: ALL .3s ease;
}

ul.menu-archivio a {
    background-color: var(--colorGrey200);
     color: var(--colorGrey700);
}

ul.menu-archivio a:hover {
    text-decoration: none;
    background-color: var(--colorGrey300);
}



#nav-questions {
    display:flex;
    justify-content:space-between;
    margin-bottom: 20px;
}

#nav-questions a {
    font-size: .9em;
    color: var(--colorGrey500);
    text-decoration:none;
    border-radius: 1.3em;
    border:1px solid var(--colorGrey300);
    padding: .2em .5em;
    transition: ALL .3s ease;
}

#nav-questions a:hover {
    background-color: var(--primaryColor400);
    border:1px solid var(--primaryColor400);
    color: #FFF;    
}


#nav-indexquestions {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonne */
  gap: 1px; /* spaziatura orizzontale e verticale */
  width: 100%; /* opzionale, per controllare la larghezza */
    max-width:150px;
  margin: 0 auto 50px auto;
}

#nav-indexquestions a {
  aspect-ratio: 1 / 1.25;   /* mantiene forma quadrata */
  display: flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  background-color: var(--colorGrey400);
  color: #FFF;
  font-size: .6em;
  line-height: 1.5em;
  padding: .5em 0 .2em 0;
  font-weight: 900 !important;
  text-transform: uppercase;
}

#nav-indexquestions a img {
    width:75%;
}

#nav-indexquestions a:hover {
    text-decoration: none;
    color: #FFF;
    transition: .3s ease;
}




#nav-indexquestions a.chi:hover {
    background-color: var(--colorChi);
}

#nav-indexquestions a.quando:hover {
    background-color: var(--colorQuando);
}


#nav-indexquestions a.dove:hover {
    background-color: var(--colorDove);
}


#nav-indexquestions a.cosa:hover {
    background-color: var(--colorCosa);
}


#nav-indexquestions a.come:hover {
    background-color: var(--colorCome);
}


#nav-indexquestions .quale:hover {
    background-color: var(--colorQuale);
}



















/* === FOOTER === */

footer {
    margin-left: -25px;
    margin-right: -25px;
    margin-bottom: -25px;
    padding: 15px 25px;
    background-color: var(--colorGrey700);
    color:#FFF;
}

ul.menu-progetto a {  
    background-color: var(--colorGrey600);
    /*color:var(--colorGrey700);*/
    color:#FFF;
}

ul.menu-progetto a:hover {
    background-color: var(--colorGrey500);
}









/* === GENERALE === */


h1 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem);
}


main {
    width:auto;
    margin-top:0;
    /*margin-left: clamp(100px, 25vw, 250px);*/
    margin-left:250px;
    margin-bottom:0;
    margin-right:0;
    transition: ALL .5s ease;
}

.main-container {
    position: relative;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    gap:50px;
}

.main-content {
    flex:1;
    padding: 25px 50px;
    height: calc(100vh - 80px);
    /*max-width: 700px;*/
    /*min-width: 600px;*/
}

.noempty:empty {
    display:none;
}


.limit-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
}

.limit-text.limit-1row {
  -webkit-line-clamp: 2;
}

.limit-text.limit-2row {
  -webkit-line-clamp: 2;
}

.limit-text.limit-3row {
  -webkit-line-clamp: 3;
}

.aside-content {
    padding: 25px 50px;
    min-width: 300px;
}




/* === PAGINE === */

.main-container {
    gap:0	
}


.page-header {
    display:flex;
    align-items:center;
    background-color: var(--primaryColor400);
    color:#FFF;
    padding: 1em 50px;
    /*transition: ALL .5s ease;*/
}

.page-header h1 {
    line-height:100%;
    letter-spacing:-.02em;
}

.page-header a {
    color:#FFF;
}

.page-header .page-url a {
    opacity: .6;
    font-weight: 400;   
}

.page-header a:hover {
    opacity: 1;
}

.page-logo img {
    height: 6em;
    width: auto;
    margin-right: 1em;
}

img.pngombra {
    /*filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); */
    filter: drop-shadow(2px -2px 2px  rgba(0, 0, 0, 0.5))
}

.bannerpage {
        flex: 1;
        height: 300px;
        /*width: calc(100% - 200px);*/
        /*margin-left:200px;*/
        width:100%;
        /*background-image:url('/images/banners/<?php echo $page["banner"]?>');*/
        /*background-position: right 38%;*/
        background-size: cover;
}



.main-content {
        padding:0;
        height: auto;
}

.page-intro {
    width:100%;
    max-width: 800px;
}

.text-container {
        display:flex;
        flex-wrap:wrap;
        padding: 50px;
        gap: 25px 50px
}

.text-aside {
        width: 300px;
}

.text-aside.bg {
    background-color: var(--colorGrey200);
}
        

.text-aside:empty,
aside:empty,
.noempty:empty {
        display:none
}			



aside {
    width: 300px;
    background-color: var(--primaryColor600);
    color: #FFF;
    padding: 25px;
}

.leaflet-top, .leaflet-bottom {
    z-index: 900;
}


.doc-container {
    width:100%;
    padding:50px;
}
			








/* INDICI */

.index-header {
    background-color:var(--primaryColor600);
    color:#FFF;
    height: 80px;
    padding: 40px 50px 0 50px;
    transition: ALL .5s ease;   
}

.index-header h1 {
    font-size: 4.5em;
    font-weight: 900 !important;
    padding:0;
    line-height: .5em;
    letter-spacing: -.05em;
    text-transform: uppercase;
    position:relative;
    top: -.03em;
}

#index-chi .index-header {
    background-color:var(--colorChi);
}

#index-dove .index-header {
    background-color:var(--colorDove);
}

#index-quando .index-header {
    background-color:var(--colorQuando);
}

#index-come .index-header {
    background-color:var(--colorCome);
}

#index-cosa .index-header {
    background-color:var(--colorCosa);
}

#index-quale .index-header {
    background-color:var(--colorQuale);
}




.text {
    flex:1;
    text-align:justify;
    font-weight: 300;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;		
    font-size: var(--text-font-size);
    line-height: 170%;
    transition: ALL .3s ease;
}

.text h2 {
    font-size: 1.7em;
    border-bottom: 1px solid var(--colorGrey500);
    margin: 1.5em 0 .5em;
    letter-spacing: -.008em; 
}

.text h3 {
    font-size: 1.4em;
    margin: 1.5em 0 .5em;
    letter-spacing: -.008em;     
}




/*=== MAPPA IN PAGINA ===*/
#map {
  height: 400px;
  width: 100%;
  font-size: 10px;
}





/*=== SLIDER ===*/


.wrapper-slider {
    margin-left: 110px;
    position: relative;
}

/* contenitore .heading deve essere position:relative o avere stacking context utile */
.heading { position: relative; }

.heading .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    opacity: 0;
    overflow: hidden;
	will-change: transform, opacity;
    z-index: 1;
    transition: opacity 3s ease, transform 10s linear; /* Il fade rimane con le transizioni */
    transform: scale(1); /* Aggiunto per evitare scatti */
}

.heading .slide.active {
    opacity: 1;
    z-index: 3; /* L'immagine attiva è sopra */
    animation-duration: 10s; /* Durata predefinita */
    animation-fill-mode: backwards;
}

.heading .slide.previous {
    z-index: 2; /* L'immagine precedente è coperta */
    opacity: 0;
}

.slide {
    background-color: var(--primaryColor600);
    color: #FFF;
    display:flex;
}

.slide a {
    color:#FFF;
}

.slide-header {
    padding: 25px 25px 25px 135px;
    width: 600px;
    align-self: end;
}
.slide-image {
    flex: 1;
    background-position: center center;
    background-size: cover;
}


/* frecce */
.sl-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; background: rgba(0,0,0,.35); color:#fff;
  border: none; width: 44px; height: 44px; border-radius: 999px;line-height: 35px; font-size: 20px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
}
.sl-prev { left: 12px; }
.sl-next { right: 12px; }
.sl-arrow:hover { background: rgba(0,0,0,.5); }

/* dots */
.sl-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -25px; display: flex; gap: 10px; z-index: 5;
}
.sl-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--colorGrey400); border: 0; cursor: pointer; padding: 0;
}
.sl-dot.is-active { background: var(--primaryColor400); box-shadow: 0 0 0 2px rgba(0,0,0,.2) inset; }










/*=== GO TOP ===*/

#gotop {
    display: none;
    background-color: rgba(0, 0, 0, .3);
    color: #FFF;
    position: fixed;
    right: 50px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

#gotop::before {
    content: "";
    width: 20px;
    height: 20px;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -35%) rotate(135deg);
    transition: background 1s ease;
}




/*=== SUB INDEX ===*/

/* Pannello di sottoindice: sotto header (z 1000), sopra pagina */
.subindex-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /*left: var(--sidebar-w);*/
  left: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset, 0 10px 30px rgba(0,0,0,.15);
  transform: translateX(calc(-100% - 250px)); /* nascosto a sinistra */
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  z-index: 900;
  overflow: hidden;
}

.subindex-panel.is-open { transform: translateX(0); }

.subindex-panel header {
    visibility:hidden;
}

.subindex-content { }

/* Pulsante chiusura */
#subindex-close {
    display:none;
  position: absolute;
  top: 10px; right: 12px;
  z-index: 2;
  font-size: 28px;
  width: 36px; height: 36px; line-height: 1;
  border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(0,0,0,.06);
}
/*#subindex-close:hover { background: rgba(0,0,0,.12); }*/

/* (opzionale) evita scroll della pagina sotto quando il pannello è aperto */
html.has-subindex-open { overflow: hidden; }

/* Quando la transizione è finita abilitiamo lo scrolling (e la scrollbar) */
.subindex-panel.scroll-ready {
  overflow: auto;
}





/* === TABELLA (sostituto responsive) === */

.table {
    /*width: 100%;*/
    /*max-width: 700px;*/
}

.table .tr {
    display: grid;
    grid-template-columns: 6em auto 6.5em;
    grid-template-areas: "a b c";
    gap: 16px;
    margin-top: 16px;
}

.table .tr > :nth-child(1) { grid-area: a; }
.table .tr > :nth-child(2) { grid-area: b; }
.table .tr > :nth-child(3) { grid-area: c; }

.table .tr.options {
    grid-template-columns: 10em auto auto 6.5em;
}

.td {
    align-content: start;
}

.tr label {
    display:block;
    text-align:right;
    font-size: 1.2em;
    padding: .3em 0
}


.tr.options label {
    display:block;
    text-align:left;
    font-size: 1em;
}

.table .hlsearch {
    background-color:#FC0;
}

.table .tools {
    display:flex;
    font-size: .9em;
    background-color: var(--colorGrey300);
    color: var(--colorGrey700);
    padding: 0 25px;
    height:50px;
    align-items:center;
    gap: 16px;
    overflow:hidden;
}
            
.table .tools input {
    font-size: .9em;
    padding: 0 .5em;
    max-width: 10em;
    border: 1ps solid var(--colorGrey500);
    border-radius: .5em;
}




table.intro {
    margin-bottom: 2em;
    
}


table.intro td {
    padding: .5em;
    border:1px solid var(--colorGrey200);
    vertical-align:top;
    line-height:140%;
}


table.intro th {
    font-size: .7em;
    padding: .6em .5em 0 .5em;
    text-transform: uppercase;
    border: 1px solid var(--colorGrey200);
    background-color: var(--colorGrey100);
    vertical-align: top;
}




/*=== LIST e ITEM ===*/


.wrapper-list {
    position:relative;
    margin-top: 50px;
    min-height: 80vh;
}




/* list  */

[data-totale="0"],
[data-totale=""]{
  display: none;
}


ul.button-tab {
    margin: 0;
    padding:0;
    display:flex;
}

.button-tab li {
   list-style-type: none;
     position: relative;  
   padding: .5em 1em;
   background-color: var(--colorGrey200);
   border: 1px solid var(--colorGrey400);
   margin-right:-1px;
   text-transform:uppercase;
   font-weight:700;
   font-size: 1em;
  cursor: pointer;
  user-select: none;
  transition: all .3s ease;
}


.button-tab li.active{
    background-color: var(--colorGrey600);
    color: #fff;
}

.button-tab li.active::after {
  --arrow-size: .8em;             /* dimensione triangolo */
  --arrow-color: var(--colorGrey600);        /* stesso colore del tab attivo */

  content: "";
  position: absolute;
  left: 50%;
  top: 100%; /* mette la punta sotto il tab */
  transform: translateX(-50%);

  /* triangolo ↓: due lati trasparenti, quello superiore colorato */
  width: 0;
  height: 0;
  border-left:  var(--arrow-size) solid transparent;
  border-right: var(--arrow-size) solid transparent;
  border-top:   var(--arrow-size) solid var(--arrow-color);
}

.button-tab li:not(.active):hover {
    background-color: var(--colorGrey300);
}

.tab-list {
    display:none;
    opacity:0;
    transition: opacity .3s ease;
}
.tab-list.active {
    opacity:1;
    display:block;
}



.list .list-image {
    width: 100%;
    position: relative;
}

.list .list-image img {		
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: var(--colorGrey200);
}

.list .item-image {
    aspect-ratio: 16 / 5;
    margin-bottom: .5em;
}

.list .itempage-image {
    aspect-ratio: 3 / 1;
    margin-bottom: 0;
    max-width: 200px;
}

.list itempage-image-flickr {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    max-width: 200px;  
}

.list .itempage-header {
    font-size: 1.1em;
    line-height: 110%;
    /*background-color: var(--primaryColor400);*/
    /*padding: .2em .5em;*/
    margin-top:.2em;
}

.list .itemcategoria {
    font-size: 1.3em;
}

.list .itempage-header a,
.list .itemcategoria a {
    color: #FFF;
    display:block;
    text-decoration:none;
}








.list .list-meta {
    display:flex;
    flex-wrap: wrap;
    column-gap: 25px;
    justify-content: space-between;
}

/*****
.wrapper-list[data-view^='grid'] .list {
    display:flex;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
}

.wrapper-list[data-view='grid'] .list .item {
    text-align: left;   
    flex: 0 1 calc((100% - 75px) / 6); 
}
****/


.wrapper-list[data-view^='grid'] .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2em 2em;
}

.wrapper-list[data-view^='grid'] .list.list-foto {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.wrapper-list[data-view='grid'] .list .item {
    max-width:300px;
    font-size: 1.2em;    
}

.wrapper-list[data-view='grid'] .list h2 {
  grid-column: 1 / -1;      /* occupa tutte le colonne */
  margin: 2em 0 1em;
  font-size: 2em;
  padding: 4px 8px;
  text-transform:uppercase;
  border-bottom: 1px solid;
}


.wrapper-list[data-view='table'] .list {
    gap:0;
    transition: all .3s ease;
}

.wrapper-list[data-view='table'] .list .item {
    flex: 1 1 100%;
    display:flex;
    gap:20px;
    padding:20px;
    border-top: 1px solid var(--colorGrey400);
    transition: all .5s ease-in;
}

.wrapper-list[data-view='table'] .list .item:first-of-type {
    margin-top: 20px;
}

.wrapper-list[data-view='table'] .list .item .item-image {
    min-width: 20%;
    max-width: 200px;
    margin-bottom: 0;
}

.wrapper-list[data-view='table'] .list .item a.voce {
    left: calc(100% + 20px);
    top: 0;
    bottom: auto;
}

.wrapper-list[data-view='table'] .list .item-header {
    margin-top: 2.5em;
}

.wrapper-list .results {
    text-align:center;
    margin: 50px auto;
}

.wrapper-list .results.no-found {
    text-align:center;
    padding: 50px;
    max-width: 300px;
    border: 1px solid var(--colorGrey400);
    background-color: var(--colorGrey200);
}

[data-view='table'] .change-view button.gridview,
[data-view='grid'] .change-view button.tableview {
    background-color: var(--colorGrey300);
    color: var(--colorGrey600);
    transition: all .3s ease;
}


.list-web {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2em;
}

.item-web {
    max-width:250px;
}


.item-web_old {
  flex: 1 1 150px;          /* grow:1, shrink:1, basis:150px */
  min-width: 150px;
  max-width: 200px;
}

.item-box {
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.item-webimage,
.item-webvideo {
    background-color:  var(--primaryColor300);
    position:relative;
}

.item-webimage img,
.item-webvideo img {
    aspect-ratio: 16/9;
}

.item-foto {
    aspect-ratio: 6/5;
    background-color: var(--colorGrey200);
    background-position: center bottom;
    background-size:cover;
}



.webvideo-icon {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .6;
    background-size:25%;
    background-repeat:no-repeat;
    background-position:center;
    background-image: url(/images/icons/play-white.png);
    z-index: 10000;
}

.item-source a {
    display: block;
    background-color: var(--primaryColor900);
    color: #FFF;
    height: 2em;
    overflow: hidden;
    padding: 0 .8em;
    line-height: 200%;
    font-size: .8em;
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item-source a:hover {
    background-color: var(--primaryColor600);
    text-decoration: none;
}

.item-source .item-source-icon {
    width: 2em;
    aspect-ratio: 1 / 1;
    float: left;
    margin-right: .5em;
    margin-left: -.8em;
}

.item-header {
    font-size:.9em;
    margin-top: .5em;
    line-height: 130%;
}


.change-view button {
    display: flex;
    gap:7px;
    border-radius: 5px;
    padding: 5px;
    width: auto;
    height: 30px;
    font-weight:600;
    font-size: 10px;
    line-height:105px;
    align-items:center;
}

.change-view button img {
    filter: invert(1) grayscale(1) brightness(2);
    width: 20px;
}

.change-view button:hover {
    background-color: var(--primaryColor600) !important;
    color:#FFF !important;
}


#filtersColumn {
    display:none;
    opacity: 0;
    position: absolute;
    top: 0;
    left:100%;
    width: 250px;
    background-color: var(--colorGrey300);
	will-change: transform, opacity;
    transition: opacity .5s ease, transform 1s linear; /* Il fade rimane con le transizioni */
    transform: scale(1); /* Aggiunto per evitare scatti */
    z-index: 1000;
}

#filtersColumn .column-header {
    display:flex;
    gap: 16px;
    background-color: var(--colorGrey500);
    line-height: 60px;
    font-size: 1.2em;
    color: #FFF;
    height: 60px;
    font-weight: 700;
    text-align:center;
    overflow: hidden;
;
}

#filtersColumn .column-content {
    padding: 25px;
}

#filtersColumn .close-column {
    background-color: var(--colorGrey600);
    color:#FFF;
    font-size: 25px;
    width:60px;
    cursor:pointer;
}

#filtersColumn input {
    border-color: var(--colorGrey500);
    margin-bottom: 10px;
}

.wrapper-list.withFilters #filtersColumn {
    display: block;
    opacity: 1;
    left: 0;
    bottom: 0;
}

.wrapper-list.withFilters .results-list {
    margin-left:300px
}

.wrapper-list.withFilters .openfilters {
    display:none;
}





/*=== suggestions ===*/

.suggestions {
  margin: 0;
  padding: 0;
	font-size: .8em;
	line-height: 1.4em;
  list-style: none;
  border: 1px solid 1px solid var(--colorGrey500);;
  overflow-y: auto;
  max-height:200px;
  position: absolute;
  background: #fff;
  z-index: 999;
  width: calc(100% - 50px);
}

.suggestions:empty {
	display:none;
}
.suggestions li {
  padding: .4em .6em;
  border-bottom: 1px solid var(--colorGrey400);
  cursor: pointer;
}
.suggestions li:hover {
  /*background: var(--colorGrey200);*/
  background: var(--primaryColor400);
  color:#FFF;
  transition: ALL .2s ease;
}








/*=== CARD LIST ===*/


.cards-list {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    position: relative;
}

.cards-list	.card {
    border:none;
    background-color: transparent; 
}

.cards-list .full-row {
  grid-column: 1 / -1;   /* prende tutta la larghezza */
}

.card-image {
    border:none;
    aspect-ratio: 1 / 1;
    position: relative;
    background-color: var(--colorGrey200);
}

.card-image img {		
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    background-color: var(--colorGrey200);
}

.card-header {
    font-size: 1em;
    line-height: 1.4em;
    border:none;
    background-color: var(--primaryColor400);
    color:#FFF;
    text-align:left;
}

a.card-header:hover {
    color:#FFF;
    background-color: var(--primaryColor600);
    text-decoration: none;
    transition: ALL .3s ease;
}

.card-footer {
    border:none;
}

.card > *:empty {
    display:none;
}






/* === SELECTION POPUP === */

/* Limiti configurabili */
#selection-popup {
  --popup-min-w: 360px;
  --popup-min-h: 300px;
  --popup-max-w: 96vw;
  --popup-max-h: 96vh;
}


/* Overlay fermo */
#selection-popup {
  position: fixed;
  /*inset: 0; */
  left: 300px;
  top:0;
  bottom:0;
  right:0;
  display: none;
  z-index: 9990;
  /* se vuoi un velo scuro: background: rgba(0,0,0,.25); */
}
#selection-popup.active { display: block; }

/* Box draggabile + resizable (solo lui si muove) */
#selection-popup .popup-content{
  position: absolute;                /* <- relativo all'overlay */
  left: 2vw; top: 6vh;
  width: min(800px, var(--popup-max-w, 96vw));
  height:min(560px, var(--popup-max-h, 96vh));
  min-width: var(--popup-min-w, 360px);
  min-height: var(--popup-min-h, 300px);
  max-width: var(--popup-max-w, 96vw);
  max-height: var(--popup-max-h, 96vh);
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15); overflow:hidden;
  color: var(--textColor);
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  overflow:hidden;  
}



/* handle in basso a destra per il resize */
#selection-popup .popup-resize-handle {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: se-resize;
  background: transparent;
}

#selection-popup .popup-resize-handle::after {
  content: '';
  position: absolute; right: 3px; bottom: 3px;
  width: 10px; height: 10px;
  border-right: 2px solid #999; border-bottom: 2px solid #999;
}


#selection-popup .popup-header {
    display:flex;
    padding: 0 25px;
    height:50px;
    color:#FFF;
    align-items: center;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    background-color: var(--primaryColor700);
    overflow:hidden;
}


#selection-popup .popup-title {
    flex:1;
    font-size: 1.5em;
    font-weight:bold;
}

/* Titlebar “draggabile” */
#selection-popup .popup-titlebar,
#popup-title {
    cursor: move;
    user-select:none;
    color:#FFF;
    font-size: 1.5em;
}

#selection-popup .popup-actions {
    width:auto;
    text-align:right;
}

#selection-popup .popup-actions button {
    background-color: var(--primaryColor600);
}

#selection-popup .tools {
    display:flex;
    font-size: .9em;
    background-color: var(--colorGrey300);
    color: var(--colorGrey700);
    padding: 0 25px;
    height:50px;
    align-items:center;
    gap: 16px;
    overflow:hidden;
}
            
#selection-popup .tools input {
    font-size: .9em;
    padding: 0 .5em;
    max-width: 10em;
    border-color: var(--colorGrey500);
}




/* Handle per resize (JS lo inserisce) */
#selection-popup .popup-resize-handle{
  position:absolute; right:0; bottom:0;
  width:16px; height:16px; cursor:se-resize;
}
#selection-popup .popup-resize-handle::after{
  content:''; position:absolute; right:3px; bottom:3px;
  width:10px; height:10px; border-right:2px solid #999; border-bottom:2px solid #999;
}



/* Maniglie di resize (angoli e bordi inferiori/laterali) */
#selection-popup .resize-se,
#selection-popup .resize-sw,
#selection-popup .resize-e,
#selection-popup .resize-w,
#selection-popup .resize-s{
  position:absolute; background:transparent; z-index: 1;
}

/* aree “agganciabili” comode */
#selection-popup .resize-e{ right:0; top:12px; bottom:18px; width:10px; cursor:e-resize; }
#selection-popup .resize-w{ left:0;  top:12px; bottom:18px; width:10px; cursor:w-resize; }
#selection-popup .resize-s{ left:12px; right:18px; bottom:0; height:10px; cursor:s-resize; }
#selection-popup .resize-se{ right:0; bottom:0; width:16px; height:16px; cursor:se-resize; }
#selection-popup .resize-sw{ left:0;  bottom:0; width:16px; height:16px; cursor:sw-resize; }

/* decorazione opzionale sugli angoli */
#selection-popup .resize-se::after,
#selection-popup .resize-sw::after{
  content:''; position:absolute; width:10px; height:10px; bottom:3px;
  border-bottom:2px solid #999;
}
#selection-popup .resize-se::after{ right:3px; border-right:2px solid #999; }
#selection-popup .resize-sw::after{ left:3px;  border-left: 2px solid #999; }







/* ===========================
   Toolbar tabs
   =========================== */
.zone-toolbar{
  padding: .5rem .75rem; border-bottom:1px solid #e5e7eb;
  background:#fafafa;
}
.zone-toolbar .tabs{ display:flex; gap:.5rem; }
.zone-toolbar .tab{
  appearance:none; border:1px solid #d1d5db; background:#fff;
  padding:.35rem .7rem; border-radius:6px; font:inherit; cursor:pointer;
}
.zone-toolbar .tab.active{
  background:#eef2ff; border-color:#a5b4fc; color:#3730a3;
}

/* ===========================
   Vista ELENCO
   =========================== */
.table.lista-zone{ width:100%; }
.table.lista-zone .tr{
  display:grid; grid-template-columns: 1fr auto;
  gap:.5rem; align-items:center; padding:.45rem .6rem;
  border-bottom:1px dashed #eee;
}
.table.lista-zone .tr:hover{ background:var(--primaryColor500); }
.table.lista-zone .tr.zona.selected {
  background:var(--primaryColor600);
}
.table.lista-zone .td.label{ font-weight:500; }
.table.lista-zone .td.coords{ font-size:.9em; color:#6b7280; }

.list-tools{ padding:.5rem .6rem .25rem; }
.list-tools .zone-filter{
  width:100%; padding:.45rem .6rem; border:1px solid #d1d5db; border-radius:6px;
}

/* ===========================
   Messaggistica (toast)
   =========================== */
.zone-warn{
  margin:.5rem .6rem; padding:.45rem .6rem;
  border:1px solid #f59e0b; background:#fffbeb; color:#92400e;
  border-radius:6px; font-size:.95em;
}

/* ===========================
   Vista GRAFICA
   =========================== */
.graphic-note{
  padding:.5rem .6rem; font-size:.95em; color:#6b7280;
}
.graphic-board{
  position:relative; height:340px; background:#f8fafc; border:1px dashed #e5e7eb; border-radius:8px;
}
.graphic-board .hot{
  position:absolute; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  border:2px solid #111827; background:#111827; color:#fff;
  line-height:14px; font-weight:700; cursor:pointer;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.graphic-board .hot:hover{ transform:translate(-50%,-50%) scale(1.05); }
.graphic-board .hot.selected{
  outline:2px solid #2563eb; outline-offset:2px; background:#2563eb; border-color:#1e40af;
}

/* ===========================
   Vista MAPPA
   =========================== */
.map-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; padding:.5rem .6rem; border-bottom:1px solid #e5e7eb; background:#fafafa;
}
.map-toolbar .left, .map-toolbar .right{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.map-toolbar label{ display:inline-flex; gap:.35rem; align-items:center; font-size:.95em; color:#374151; }
.map-toolbar .btn{
  appearance:none; border:1px solid #d1d5db; background:#fff; color:#111827;
  padding:.35rem .6rem; border-radius:6px; cursor:pointer;
}
.map-toolbar .btn:hover{ background:#f3f4f6; }

/* Altezza canvas già inline, ma diamo fallback */
.map-canvas{ height:420px; }

/* Popup Leaflet: bottone Elimina */
.leaflet-popup-content .btn-del{
  display:inline-block; margin-top:.5rem; padding:.35rem .6rem;
  border:1px solid #ef4444; color:#991b1b; background:#fff; border-radius:6px; cursor:pointer;
}
.leaflet-popup-content .btn-del:hover{ background:#fee2e2; }

/* Leaflet container: migliora antialias linee */
.leaflet-container{
  font: inherit;
  image-rendering: -webkit-optimize-contrast;
}


/* ===========================
   ANIMAZIONE
   =========================== */


@keyframes fromLeftSlow {
    0% {
        transform: scale(1.5) translate(50px,100px);	
    }
    100% {
        transform: scale(1);
    }
}

@keyframes zoomInSlow {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Zoom veloce verso l'interno */
@keyframes zoomInFast {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.3);
    }
}

/* Zoom lento verso l'esterno */
@keyframes zoomOutSlow {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Zoom veloce verso l'esterno */
@keyframes zoomOutFast {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}


@keyframes fromUp {
    0% {
        background-position: 0 60%; 
        transform: scale(1.2); 
    }
    90% {
        background-position: 0 50%; 
        transform: scale(1.2); 
    }
}

@keyframes fromDown {
    0% {
        background-position: 0 50%; /* Inizio da sinistra */
        transform: scale(1.2); /* Ingrandisce il background */
    }
    70% {
        background-position: 0 60%; /* Scorre a destra del 10% */
        transform: scale(1.2); /* Mantiene l'ingrandimento */
    }
    100% {
        background-position: 0 65%; /* Scorre a destra del 10% */
        transform: scale(1.2); /* Mantiene l'ingrandimento */
    }
}







/* ===========================
   Responsive
   =========================== */



@media (max-width:1500px) {
    
    aside {
        display:none;
        width: 100%;
    }
}


@media (max-width:1200px) {

    .text-aside {
        width: 100%;
    }

}




@media (max-width:992px) {
	header {
		height:80px;
		width: 100%;
		/*width:250px;*/
		/*padding: 50px 50px;*/
		padding:10px 50px;
		flex-direction: row;
		align-items:end;
	}
	
	.logo {
		width:150px;
	}
	
	nav {
		display:block;
		margin-top:0;
		text-align: right;
	}
	
	.menu {
		display:flex;
		justify-content: end;
	}
	
	.menu li {
		margin-left: 5px;
	}
	
	footer {
		margin:0;
		padding:0;
		text-align: right;
		background:#FFF;
	}
	
	main {
        margin-top: 80px;
		margin-left:0;
	}
	
	.page-header {
		min-height: 80px;
		/*padding-top: 120px;*/
	}
	
	
	.table .tr {
		grid-template-columns: 1fr 6.5em; /* due colonne */
		grid-template-rows: auto auto;    /* due righe */
		gap: 0 8px;
	}
	
	.table .tr {
		grid-template-columns: 1fr 6.5em;
		grid-template-areas:
		  "a a"
		  "b c";
	}
	
	.tr label {
		text-align:left;
	}
	

  .text-container,
  .doc-container {
    padding: 20px;
  }
 
 
  .wrapper-list[data-view^='grid'] .list,
  .list-web {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 3em 2em;
    }

  .item-header {
    font-size: 1em;
  }
  
  ul.menu {
    margin-right: 10px;
  }
  
}


@media (max-width: 560px){
  #selection-popup{
    width: 96vw; height: 90vh; left:2vw !important; top:5vh !important;
    min-width: 280px; min-height: 260px;
  }
  .table.lista-zone .tr{ grid-template-columns: 1fr; }
  .table.lista-zone .td.coords{ font-size:.85em; }
  
  .wrapper-list[data-view^='grid'] .list .item,
  .item-web {
    max-width: none; 
  }
  
  .item-header {
    font-size: 1.1em;
  }
  
  footer {
    display:none;
  }
  
  header {
    padding: 10px 25px;
  }
  
  .index-header {
    padding-left: 25px;
  }
  
  .page-header {
    padding-left: 25px;
    padding-right: 10px;
  }
  
  ul.menu {
    display:block;
    width: 100px;
    margin-right: 0;
  }
}









    a.linkpagina {
	display;inline-block;
	color: var(--colorGrey600);
	white-space: nowrap;
	padding: .3em .6em;
	margin-right: .3em;
	font-size: .6em;
	border: 1px solid var(--colorGrey300);
	border-radius: .8em;
    }

    a.linkpagina:hover {
	background-color: var(--colorGrey300);
    }






.firma-tiberia {
    text-align:right;
    font-size:.9em;
    font-weight:700;
    opacity: .8;
    margin-top:.5em;
}

.firma-tiberia::before {
    content: ' ';
    width: 1.4em;
    height: 1.4em;
    display: inline-block;
    background-image: url('/images/icons/openai_20px.png');
    background-size:cover;
    margin-right: .3em;
    vertical-align:top;
    opacity: .7;
}