/* ============================================================

   gallery.css � Photogallery | Hotel Luxury Style

   Font: Cormorant Garamond (display) + Jost (body)

   ============================================================ */



/* -- Tokens -- */

:root {

  --cream:       #f7f4ef;

  --cream-dark:  #ede9e0;

  --gold:        #b89a6a;

  --gold-light:  #d4b98a;

  --gold-pale:   #f0e8d8;

  --charcoal:    #2a2520;

  --charcoal-mid:#4a4440;

  --stone:       #8a8078;

  --white:       #ffffff;



  --font-display: 'Cormorant Garamond', Georgia, serif;

  --font-body:    'Jost', sans-serif;



  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-base: 0.35s var(--ease-out-expo);

}



/* -- Reset base -- */



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



/*

html { scroll-behavior: smooth; }



body {

  background-color: var(--cream);

  color: var(--charcoal);

  font-family: var(--font-body);

  font-weight: 300;

  line-height: 1.7;

  -webkit-font-smoothing: antialiased;

}

*/



body {

  background-color: var(--cream);

  color: var(--charcoal);



  font-weight: 300;

  line-height: 1.7;

  -webkit-font-smoothing: antialiased;

}





/* -- Header -- */



/* -- parte da non utilizzare



.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(247, 244, 239, 0.94);

  backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--cream-dark);

}



.header-inner {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 2rem;

  height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.logo { text-decoration: none; line-height: 1.2; }



.logo-name {

  display: block;

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 500;

  letter-spacing: 0.04em;

  color: var(--charcoal);

}



.logo-tagline {

  display: block;

  font-family: var(--font-body);

  font-size: 0.62rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--gold);

}



.main-nav {

  display: flex;

  gap: 2.4rem;

  list-style: none;

}



.main-nav a {

  font-family: var(--font-body);

  font-size: 0.78rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--charcoal-mid);

  text-decoration: none;

  position: relative;

  padding-bottom: 2px;

  transition: color 0.25s;

}



.main-nav a::after {

  content: '';

  position: absolute;

  bottom: 0; left: 0;

  width: 0; height: 1px;

  background: var(--gold);

  transition: width var(--transition-base);

}



.main-nav a:hover,

.main-nav a.active { color: var(--charcoal); }



.main-nav a:hover::after,

.main-nav a.active::after { width: 100%; }



 -- */



/* -- Hero -- */

.gallery-hero {

  max-width: 1200px;

  margin: 0 auto;

  padding: 5rem 2rem 3.5rem;

  text-align: center;

}



.hero-eyebrow {

  font-family: var(--font-body);

  font-size: 0.7rem;

  letter-spacing: 0.26em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.8rem;

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.6rem, 5vw, 4rem);

  font-weight: 300;

  color: var(--charcoal);

  line-height: 1.1;

  margin-bottom: 1rem;

}



.hero-title em {

  font-style: italic;

  color: var(--gold);

}



.hero-subtitle {

  font-family: var(--font-body);

  font-size: 0.92rem;

  color: var(--stone);

  letter-spacing: 0.04em;

  max-width: 440px;

  margin: 0 auto;

}



.hero-divider {

  width: 48px;

  height: 1px;

  background: var(--gold);

  margin: 2.5rem auto 0;

  opacity: 0.6;

}



/* -- Gallery Main -- */

.gallery-main {

  max-width: 1260px;

  margin: 0 auto;

  padding: 0 1.5rem 6rem;

}



/* -- Sezioni (Esterni / Interni / Tramonti) -- */

.gallery-section {

  margin-bottom: 5rem;

}



.section-header {

  text-align: center;

  padding: 3.5rem 0 2.5rem;

  position: relative;

}



.section-eyebrow {

  font-family: var(--font-body);

  font-size: 0.65rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.5rem;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(1.8rem, 3.5vw, 2.8rem);

  font-weight: 300;

  color: var(--charcoal);

  line-height: 1.1;

  margin-bottom: 1.2rem;

}



.section-title em {

  font-style: italic;

  color: var(--charcoal);

}



.section-divider {

  width: 36px;

  height: 1px;

  background: var(--gold);

  margin: 0 auto;

  opacity: 0.5;

}



/* Separatore visivo tra sezioni (tranne la prima) */

.gallery-section + .gallery-section {

  border-top: 1px solid var(--cream-dark);

}



/* -- Gallery Grid (masonry CSS columns) -- */

.gallery-grid {

  columns: 4 220px;

  column-gap: 14px;

}



.gallery-item {

  break-inside: avoid;

  margin-bottom: 14px;

  position: relative;

  overflow: hidden;

  border-radius: 2px;

  cursor: pointer;

   border-radius: 5px;

}



/* Ritmo visivo: ogni 3� item � verticale, ogni 5� � quadrato */

.gallery-item:nth-child(3n) img { aspect-ratio: 3 / 4; }

.gallery-item:nth-child(5n) img { aspect-ratio: 1 / 1; }



.gallery-item img {

  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  /* Hover: transizione lenta su transform E filter seppia */

  transition: transform 0.8s var(--ease-out-expo),

              filter 0.8s ease;

  filter: sepia(0);

}



/* Overlay hover � gradiente morbido */

.gallery-item::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    160deg,

    transparent 40%,

    rgba(42, 37, 32, 0.38) 100%

  );

  opacity: 0;

  transition: opacity 0.3s ease;

}



.gallery-item:hover::after       { opacity: 1; }

.gallery-item:hover img {

  transform: scale(1.50);        /* ingrandimento ridotto a 1.05 */

  filter: sepia(0.38);           /* seppia moderata, non totale */

  transition: 0.9s;

}



/* Icona zoom al hover */

.gallery-item .zoom-icon {

  position: absolute;

  bottom: 14px;

  right: 14px;

  z-index: 2;

  width: 34px; height: 34px;

  border: 1px solid rgba(240, 232, 216, 0.7);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: scale(0.7);

  transition: opacity 0.9s ease, transform 0.9s var(--ease-out-expo);

}



.gallery-item .zoom-icon svg {

  width: 14px; height: 14px;

  stroke: var(--gold-pale);

}



.gallery-item:hover .zoom-icon {

  opacity: 1;

  transform: scale(1);

}



/* -- Lightbox -- */

#lightbox {

  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s ease;

}



#lightbox.open {

  opacity: 1;

  pointer-events: all;

}



.lb-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(30, 26, 22, 0.94);

  backdrop-filter: blur(6px);

}



.lb-stage {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  max-width: 88vw;

  max-height: 82vh;

}



.lb-stage img {

  max-width: 88vw;

  max-height: 82vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: 2px;

  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);

  opacity: 0;

  transform: scale(0.96);

  transition: opacity 0.4s ease, transform 0.4s var(--ease-out-expo);

}



#lightbox.open .lb-stage img {

  opacity: 1;

  transform: scale(1);

}



/* Close button */

.lb-close {

  position: absolute;

  top: 24px; right: 28px;

  z-index: 10;

  width: 40px; height: 40px;

  background: transparent;

  border: 1px solid rgba(184, 154, 106, 0.35);

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 5px;

  transition: border-color 0.25s, background 0.25s;

}



.lb-close:hover {

  border-color: var(--gold);

  background: rgba(184, 154, 106, 0.1);

}



.lb-close-line {

  display: block;

  width: 14px; height: 1px;

  background: var(--gold-pale);

  transform-origin: center;

}



.lb-close-line:first-child  { transform: translateY(3px) rotate(45deg); }

.lb-close-line:last-child   { transform: translateY(-3px) rotate(-45deg); }



/* Nav buttons */

.lb-nav {

  position: absolute;

  z-index: 10;

  top: 50%;

  transform: translateY(-50%);

  width: 48px; height: 48px;

  background: transparent;

  border: 1px solid rgba(184, 154, 106, 0.3);

  border-radius: 50%;

  color: var(--gold-pale);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: border-color 0.25s, background 0.25s, transform 0.25s;

}



.lb-prev { left: 24px; }

.lb-next { right: 24px; }



.lb-nav:hover {

  border-color: var(--gold);

  background: rgba(184, 154, 106, 0.1);

  transform: translateY(-50%) scale(1.08);

}



/* Footer info � solo contatore, nessun nome file */

.lb-footer {

  position: absolute;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10;

}



.lb-counter {

  font-family: var(--font-body);

  font-size: 0.7rem;

  letter-spacing: 0.2em;

  color: var(--gold);

  text-transform: uppercase;

}



/* -- Responsive -- */

@media (max-width: 900px) {

  .gallery-grid { columns: 3 180px; }

  .main-nav { gap: 1.6rem; }

  .gallery-section { margin-bottom: 3.5rem; }

}



@media (max-width: 640px) {

  .gallery-grid { columns: 2 140px; column-gap: 8px; }

  .gallery-item { margin-bottom: 8px; }



  .hero-title { font-size: 2.2rem; }

  .hero-subtitle { font-size: 0.85rem; }

  .section-header { padding: 2.5rem 0 1.8rem; }

  .gallery-section { margin-bottom: 2.5rem; }



  .lb-prev { left: 10px; }

  .lb-next { right: 10px; }

  .lb-nav { width: 38px; height: 38px; }

  .lb-stage img { max-width: 94vw; max-height: 75vh; }



/*

  .main-nav { display: none; }  su mobile gestire con hamburger */

  

}