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

.page-title {
  font-family: serif ;
  color:#fff;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase; 
  text-decoration: rgb(255, 255, 255);
}

.layout {
  display: flex;
  align-items: flex-start;        
  min-height: calc(100vh - 56px); 
}


.sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 56px;                      
  height: calc(100vh - 56px);
  padding: 2rem 1.5rem;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #f8f7f4;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.sidebar-titolo {
  font-family: var(--font-titolo);
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
}

.sidebar-desc {
  font-family: var(--font-testo);
  font-size: 13px;
  font-weight: 300;
  color: #555;
  line-height: 1.7;
}

.sidebar-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-lista li {
  font-family: var(--font-testo);
  font-size: 13px;
  font-weight: 400;
  color: #333;
  padding-left: 16px;
  position: relative;
}

.sidebar-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a07840;
}

.sidebar-btn {
  display: inline-block;
  margin-top: auto;               
  padding: 10px 18px;
  font-family: var(--font-testo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: #a07840;
  border-radius: 6px;
  text-align: center;
  transition: background 0.2s ease;
}

.sidebar-btn:hover {
  background-color: #7a5a2c;
  color: #fff;
}


.card-wrapper {
  flex: 1;
  overflow-y: auto;
}


@media (max-width: 720px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}

:root {
  --font-titolo: 'Playfair Display', serif;
  --font-testo: 'Lato', sans-serif;
  --gap-griglia: 16px;
  --raggio-card: 14px;
  --altezza-card: 220px;
  --opacita-overlay: 0.38;
  --opacita-pannello: 0.12;
  --blur-pannello: 6px;
  --bordo-pannello: rgba(255, 255, 255, 0.2);
}


.navbar-brand {
  font-family: serif;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}


.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-griglia);
  padding: 0rem;
  max-width: 1200px;
  min-height: 1600px;
  margin: 2rem auto;
}

@media (max-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}


.card {
  position: relative;
  border-radius: var(--raggio-card);
  overflow: hidden;                         
  min-height: var(--altezza-card);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;               
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}


.card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: none;
}

.card:hover .card-bg {
  transform: scale(1.04);
}

/* OVERLAY SCURO, appena ci sono le imagini toglilo */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--opacita-overlay));
  transition: background 0.25s ease;
}

.card:hover .card-overlay {
  background: rgba(0, 0, 0, 0.48);
}

/* qui cambi il testo*/
.card-body {
  position: relative;
  width: 100%;
  padding: 50px 44px;                      
  border-top: 0.5px solid var(--bordo-pannello);
}

/* TAG */
.card-tag {
  display: inline-block;
  font-family: var(--font-testo);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

/* TITOLO */
.card-title {
  font-family: var(--font-titolo) ;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 4px;
  line-height: 1.3;
}

/* DESCRIZIONE */
.card-desc {
  font-family: serif var(--font-testo);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.5;
}

/*card alzanti-scorrevoli*/
   
.card-1 .card-bg { background-image: url(../immagini/immagini_falegnameria/infissi/Infissi_per_immg_sfondo/infisso_1.jpg); }
.card-2 .card-bg { background-image: url(../immagini/immagini_falegnameria/infissi/alzante_scorrevole/20141211_163055.jpg); }
.card-3 .card-bg { background-image: url(../immagini/immagini_falegnameria/infissi/Infissi_per_immg_sfondo/infisso_2.jpg); }
.card-4 .card-bg { background-image: url(../immagini/immagini_falegnameria/infissi/alzante_scorrevole/20230610_150058.jpg); }
.card-5 .card-bg { background-image: url(../immagini/immagini_falegnameria/infissi/alzante_scorrevole/a133c963-2ead-4e77-a422-1cf15174eac1.jpg); }
.card-6 .card-bg { background-image: url(); }
.card-7 .card-bg { background-image: url(); }
.card-8 .card-bg { background-image: url(); }
.card-9 .card-bg { background-image: url(); }
.card-10 .card-bg { background-image: url(); }
.card-11 .card-bg { background-image: url(); }
.card-12 .card-bg { background-image: url(); }
.card-13 .card-bg { background-image: url(); }

/*card finestre*/
.card-bg.card-finestre-1 { background-image: url();}
.card-bg.card-finestre-2 { background-image: url('');}
.card-bg.card-finestre-3 { background-image: url('');}
.card-bg.card-finestre-4 { background-image: url('');}
.card-bg.card-finestre-5 { background-image: url('');}
.card-bg.card-finestre-6 { background-image: url('');}
.card-bg.card-finestre-7 { background-image: url('');}
.card-bg.card-finestre-8 { background-image: url('');}
.card-bg.card-finestre-9 { background-image: url('');}
.card-bg.card-finestre-10 { background-image: url('');}


/* card portoni*/
.card-bg.card-portone-1 { background-image: url();}
.card-bg.card-portone-2 { background-image: url('');}
.card-bg.card-portone-3 { background-image: url('');}
.card-bg.card-portone-4 { background-image: url('');}
.card-bg.card-portone-5 { background-image: url('');}
.card-bg.card-portone-6 { background-image: url('');}
.card-bg.card-portone-7 { background-image: url('');}
.card-bg.card-portone-8 { background-image: url('');}
.card-bg.card-portone-9 { background-image: url('');}
.card-bg.card-portone-10 { background-image: url('');}

/* card porte esterne*/
.card-bg.card-porte_esterne-1 { background-image: url('');}
.card-bg.card-porte_esterne-2 { background-image: url('');}
.card-bg.card-porte_esterne-3 { background-image: url('');}
.card-bg.card-porte_esterne-4 { background-image: url('');}
.card-bg.card-porte_esterne-5 { background-image: url('');}
.card-bg.card-porte_esterne-6 { background-image: url('');}
.card-bg.card-porte_esterne-7 { background-image: url('');}
.card-bg.card-porte_esterne-8 { background-image: url('');}
.card-bg.card-porte_esterne-9 { background-image: url('');}
.card-bg.card-porte_esterne-10 { background-image: url('');}

/* CURSORE PERSONALIZZATO */
a, button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='8' fill='rgb(200,150,80)'/%3E%3C/svg%3E") 9 9, pointer;
}