/* ==========================================================================
   TORRE DEL CUPO — Schiavonea
   Design system: Blu Notte / Oro Caldo / Avorio
   ========================================================================== */

:root{
  /* Palette */
  --notte:        #0E1A2B;
  --notte-deep:   #081222;
  --notte-soft:   #1C2C44;
  --oro:          #C9A24B;
  --oro-chiaro:   #E2C880;
  --oro-scuro:    #9C7A33;
  --avorio:       #F7F2E8;
  --avorio-2:     #EFE7D6;
  --bordeaux:     #5C1F1F;
  --inchiostro:   #1A1A1A;
  --bianco-caldo: #FBF8F2;

  /* Type */
  --f-display: 'Cormorant', serif;
  --f-script:  'Pinyon Script', cursive;
  --f-sans:    'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Rhythm */
  --container: 1240px;
  --gap-section: clamp(5rem, 10vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--f-sans);
  background: var(--avorio);
  color: var(--inchiostro);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

::selection{ background: var(--oro); color: var(--notte); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

/* ---------- Typographic primitives ---------- */
.eyebrow{
  font-family: var(--f-sans);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  font-weight: 600;
  display:flex;
  align-items:center;
  gap: .9rem;
}
.eyebrow::before{
  content:'';
  width: 28px;
  height: 1px;
  background: var(--oro-scuro);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--notte);
}

.section-title{
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1.12;
  margin: .5rem 0 1.4rem;
  font-weight: 500;
}

.lede{
  font-size: 1.08rem;
  color: #3a3a3a;
  max-width: 46ch;
}

.divider-rule{
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--oro), transparent);
  margin: 1.6rem 0;
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 1.4rem 0;
  background: linear-gradient(to bottom, rgba(8,18,34,.55), transparent);
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
/* Il blur va su uno pseudo-elemento e NON sull'header stesso:
   backdrop-filter su .site-header renderebbe l'header un "containing block"
   per i figli position:fixed (come il menu mobile .main-nav), rompendone
   il posizionamento a tutto schermo su Chrome/Android durante lo scroll. */
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index: -1;
  pointer-events:none;
  background: transparent;
  backdrop-filter: blur(0px);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled{
  padding: .9rem 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.site-header.is-scrolled::before{
  background: rgba(10,20,36,.92);
  backdrop-filter: blur(10px);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  text-decoration: none;
}
.brand-logo{
  height: 40px;
  width: auto;
  display: block;
  transition: opacity .25s;
}
.brand:hover .brand-logo{ opacity: .85; }

@media (max-width: 480px){
  .brand-logo{ height: 30px; }
}

.main-nav{
  display:flex;
  align-items:center;
  gap: 1.5rem;
}
.main-nav a{
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bianco-caldo);
  position:relative;
  padding-bottom: 6px;
  opacity: .88;
  transition: opacity .25s;
  white-space: nowrap;
}
.main-nav a:hover{ opacity: 1; }
.main-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--oro);
  transition: width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }

.nav-cta{
  border: 1px solid var(--oro);
  padding: .55rem 1.1rem !important;
  border-radius: 1px;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{
  background: var(--oro);
  color: var(--notte) !important;
}

/* ---------- Dropdown "Menù" (Food / Beverage) ---------- */
.nav-dropdown{
  position: relative;
}
/* Il trigger è un <button> ma deve sembrare identico agli altri <a> della nav */
.nav-dropdown-trigger{
  display:flex;
  align-items:center;
  gap: .4rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--f-sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bianco-caldo);
  opacity: .88;
  transition: opacity .25s;
  position: relative;
  padding-bottom: 6px;
  white-space: nowrap;
}
.nav-dropdown-trigger:hover{ opacity: 1; }
/* Stessa sottolineatura animata degli altri link nav */
.nav-dropdown-trigger::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background: var(--oro);
  transition: width .3s var(--ease);
}
.nav-dropdown-trigger:hover::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after{ width: calc(100% - 13px); }

.nav-dropdown-trigger .caret{
  width: 9px;
  height: 9px;
  flex-shrink:0;
  transition: transform .3s var(--ease);
  margin-bottom: 5px;
}
.nav-dropdown.is-open .nav-dropdown-trigger .caret{
  transform: rotate(180deg);
}

/* Il pannello si apre SOLO con classe .is-open (click), mai con :hover */
.nav-dropdown-panel{
  position: absolute;
  top: calc(100% + 1.1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 240px;
  background: var(--notte-deep);
  border: 1px solid rgba(201,162,75,.3);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.45);
  padding: .6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 1010;
}
.nav-dropdown.is-open .nav-dropdown-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{
  display:flex;
  flex-direction:column;
  gap: .2rem;
  padding: .85rem 1rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: .85rem;
  border-radius: 1px;
  transition: background .2s;
}
.nav-dropdown-panel a::after{ display:none; }
.nav-dropdown-panel a:hover{ background: rgba(201,162,75,.12); }
.nav-dropdown-panel a .item-title{
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--bianco-caldo);
}
.nav-dropdown-panel a .item-sub{
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  opacity: .75;
}
.nav-dropdown-panel a + a{
  margin-top: .15rem;
  border-top: 1px solid rgba(201,162,75,.15);
}

.nav-toggle{
  display:none;
  width: 26px; height: 20px;
  position: relative;
  background:none; border:none; cursor:pointer;
  z-index: 1100;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px;
  background: var(--bianco-caldo);
  transition: transform .3s var(--ease), opacity .3s;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:9px; }
.nav-toggle span:nth-child(3){ top:18px; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
.hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--notte-deep);
}
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.6s var(--ease);
}
.hero-slide.is-active{ opacity:1; z-index: 2; }
.hero-slide img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 9s linear;
}
.hero-slide.is-active img{ transform: scale(1); }

.hero-slide::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(8,14,26,.88) 0%, rgba(8,14,26,.25) 48%, rgba(8,14,26,.55) 100%),
    linear-gradient(120deg, rgba(14,26,43,.42), rgba(14,26,43,.08));
}

.hero-content{
  position: relative;
  z-index: 5;
  height: 100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 0 1.5rem;
  color: var(--bianco-caldo);
}
.hero-kicker{
  font-size: .76rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: 1.6rem;
  opacity:0;
  animation: riseIn .9s var(--ease) .3s forwards;
}
.hero-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  line-height: 1.04;
  color: var(--bianco-caldo);
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
  opacity:0;
  animation: riseIn 1s var(--ease) .5s forwards;
}
.hero-title em{
  font-style: italic;
  color: var(--oro-chiaro);
}
.hero-sub{
  margin-top: 1.6rem;
  font-size: 1.05rem;
  max-width: 38ch;
  color: rgba(247,242,232,.86);
  opacity:0;
  animation: riseIn 1s var(--ease) .75s forwards;
}
.hero-scroll{
  position:absolute;
  bottom: 2.2rem; left:50%;
  transform: translateX(-50%);
  z-index:6;
  display:flex; flex-direction:column; align-items:center;
  gap:.6rem;
  color: rgba(247,242,232,.75);
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:0;
  animation: riseIn 1s var(--ease) 1.2s forwards;
}
.hero-scroll .line{
  width:1px; height: 34px;
  background: linear-gradient(to bottom, var(--oro-chiaro), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ transform: scaleY(0); transform-origin:top; }
  50%{ transform: scaleY(1); transform-origin:top; }
  50.01%{ transform-origin:bottom; }
  100%{ transform: scaleY(0); transform-origin:bottom; }
}
@keyframes riseIn{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

.hero-dots{
  position:absolute;
  bottom: 2.4rem; right: clamp(1.5rem,5vw,3.5rem);
  z-index: 6;
  display:flex;
  flex-direction: column;
  gap: .9rem;
}
.hero-dots button{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,232,.7);
  background: transparent;
  cursor:pointer;
  padding:0;
  transition: background .3s, transform .3s;
}
.hero-dots button.is-active{
  background: var(--oro-chiaro);
  transform: scale(1.25);
  border-color: var(--oro-chiaro);
}

.hero-caption{
  position:absolute;
  bottom: 2.4rem; left: clamp(1.5rem,5vw,3.5rem);
  z-index:6;
  color: rgba(247,242,232,.65);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-caption span{ color: var(--oro-chiaro); }

@media (max-width: 720px){
  .hero-caption{ display:none; }
}

/* ==========================================================================
   SECTION SCAFFOLD — alternating image / text rows
   ========================================================================== */
.section{
  padding: var(--gap-section) 0;
  position: relative;
}
.section--avorio{ background: var(--avorio); }
.section--notte{
  background: var(--notte);
  color: var(--bianco-caldo);
}
.section--notte h2, .section--notte h3{ color: var(--bianco-caldo); }
.section--bianco{ background: var(--bianco-caldo); }

.section-head{
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.section-head.is-centered{
  margin-left:auto; margin-right:auto;
  text-align:center;
}
.section-head.is-centered .eyebrow{ justify-content:center; }
.section-head.is-centered .eyebrow::before{ display:none; }
.section--notte .lede{ color: rgba(247,242,232,.78); }

.feature-row{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
}
.feature-row.is-reverse .row-media{ order:2; }
.feature-row.is-reverse .row-text{ order:1; }

.row-media{
  position:relative;
}
.media-frame{
  position:relative;
  overflow:hidden;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(20,26,38,.10),
    0 16px 32px -16px rgba(20,26,38,.40),
    0 30px 60px -30px rgba(20,26,38,.30);
}
.media-frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 1.4s var(--ease);
}
.media-frame:hover img{ transform: scale(1.045); }
.media-frame::before{
  content:'';
  position:absolute; inset:0;
  border: 1px solid rgba(201,162,75,.0);
  z-index:2;
  pointer-events:none;
}

.media-stack{
  display:grid;
  grid-template-columns: 1.2fr .85fr;
  gap: 1.1rem;
  align-items:end;
}
.media-stack .media-frame:nth-child(1){ aspect-ratio: 3/4; }
.media-stack .media-frame:nth-child(2){ aspect-ratio: 3/4; margin-top: 2.4rem; }

.row-media .frame-tag{
  position:absolute;
  bottom: -1px; left: -1px;
  background: var(--notte);
  color: var(--oro-chiaro);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  z-index: 4;
}

.row-text .num{
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--oro-scuro);
  letter-spacing: .1em;
  margin-bottom: .8rem;
  display:block;
}

.row-text p + p{ margin-top: 1rem; }
.row-text .lede{ color: #3a3a3a; max-width: 50ch; }
.section--notte .row-text p{ color: rgba(247,242,232,.82); }

.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.tag-list span{
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem 1rem;
  border: 1px solid rgba(201,162,75,.45);
  color: var(--oro-scuro);
  border-radius: 1px;
}
.section--notte .tag-list span{
  color: var(--oro-chiaro);
  border-color: rgba(226,200,128,.4);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap: .7rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid var(--notte);
  color: var(--notte);
  transition: all .35s var(--ease);
  cursor:pointer;
  background:transparent;
}
.btn:hover{ background: var(--notte); color: var(--bianco-caldo); }
.btn--gold{
  border-color: var(--oro);
  background: var(--oro);
  color: var(--notte);
}
.btn--gold:hover{
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  color: var(--notte);
}
.btn--ghost-light{
  border-color: rgba(247,242,232,.5);
  color: var(--bianco-caldo);
}
.btn--ghost-light:hover{
  background: var(--bianco-caldo);
  color: var(--notte);
}
.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}
.btn svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   STORIA — timeline style
   ========================================================================== */
.timeline{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
.timeline-item{
  border-top: 1px solid rgba(201,162,75,.4);
  padding-top: 1.6rem;
  position:relative;
}
.timeline-item .year{
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--oro);
}
.timeline-item h4{
  font-size: 1.05rem;
  margin: .5rem 0 .6rem;
  color: var(--bianco-caldo);
}
.timeline-item p{
  font-size: .92rem;
  color: rgba(247,242,232,.72);
}

/* ==========================================================================
   EVENTI / MOSTRE — gallery cards
   ========================================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.gallery-card{
  position:relative;
  overflow:hidden;
  aspect-ratio: 4/5;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(20,26,38,.10),
    0 16px 32px -16px rgba(20,26,38,.40),
    0 30px 60px -30px rgba(20,26,38,.30);
}
.gallery-card img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform 1.2s var(--ease);
}
.gallery-card:hover img{ transform: scale(1.07); }
.gallery-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,14,26,.92) 0%, rgba(8,14,26,.05) 55%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 1.6rem;
}
.gallery-card .cat{
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: .5rem;
}
.gallery-card h4{
  color: var(--bianco-caldo);
  font-size: 1.25rem;
  font-weight:500;
}
.gallery-card .when{
  margin-top:.4rem;
  font-size: .8rem;
  color: rgba(247,242,232,.7);
}

/* ==========================================================================
   RISTORAZIONE
   ========================================================================== */
.dining-intro{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items:center;
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.dining-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.dining-card{
  background: var(--bianco-caldo);
  border: 1px solid rgba(201,162,75,.25);
  padding: 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(20,26,38,.10),
    0 16px 32px -16px rgba(20,26,38,.35),
    0 30px 60px -30px rgba(20,26,38,.25);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.dining-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(20,26,38,.12),
    0 30px 60px -20px rgba(14,26,43,.40);
}
.dining-card .dc-media{
  aspect-ratio: 16/11;
  overflow:hidden;
}
.dining-card .dc-media img{ width:100%; height:100%; object-fit:cover; }
.dining-card .dc-body{
  padding: 1.8rem 1.7rem 2rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.dining-card .dc-kicker{
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  margin-bottom: .6rem;
}
.dining-card h3{
  font-size: 1.5rem;
  margin-bottom: .7rem;
}
.dining-card p{
  font-size: .92rem;
  color: #4a4a4a;
  flex:1;
}
.dining-card .dc-link{
  margin-top: 1.3rem;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--notte);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-bottom: 1px solid var(--oro);
  padding-bottom: 4px;
  align-self:flex-start;
}

.dining-cta-band{
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--notte);
  padding: clamp(2.6rem, 5vw, 4rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2rem;
  flex-wrap:wrap;
}
.dining-cta-band .cta-text h3{
  color: var(--bianco-caldo);
  font-size: 1.7rem;
  margin-bottom: .5rem;
}
.dining-cta-band .cta-text p{
  color: rgba(247,242,232,.72);
  max-width: 46ch;
}
.dining-cta-band .cta-buttons{
  display:flex;
  gap: 1rem;
  flex-wrap:wrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background: var(--notte-deep);
  color: rgba(247,242,232,.75);
  padding: 5rem 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(201,162,75,.18);
}
.footer-brand .brand{ color: var(--bianco-caldo); margin-bottom: 1.2rem; }
.footer-brand p{
  font-size: .9rem;
  color: rgba(247,242,232,.6);
  max-width: 34ch;
}
.footer-col h5{
  font-family: var(--f-sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  margin-bottom: 1.3rem;
  font-weight:600;
}
.footer-col a, .footer-col li{
  display:block;
  font-size: .9rem;
  color: rgba(247,242,232,.7);
  margin-bottom: .75rem;
  transition: color .25s;
}
.footer-col a:hover{ color: var(--oro-chiaro); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top: 2rem;
  font-size: .78rem;
  color: rgba(247,242,232,.45);
  flex-wrap:wrap;
  gap: 1rem;
}
.footer-bottom .socials{ display:flex; align-items:center; gap:.9rem; }
.footer-bottom .socials a.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  color: var(--bianco-caldo);
  transition: color .25s var(--ease);
}
.footer-bottom .socials a.social-icon svg{
  width: 18px;
  height: 18px;
  display:block;
}
.footer-bottom .socials a.social-icon:hover{ color: var(--oro-chiaro); }

.footer-credits{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(201,162,75,.1);
  margin-top: 1.4rem;
  font-size: .76rem;
  letter-spacing: .04em;
  color: rgba(247,242,232,.5);
}
.footer-credits-text{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.5;
}
.footer-credits-text span{ display: block; }
.footer-credits a{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.footer-credits img{
  height: 34px;
  width: auto;
}

@media (max-width: 480px){
  .footer-credits{
    gap: .8rem;
    font-size: .7rem;
  }
  .footer-credits img{ height: 28px; }
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* ==========================================================================
   PAGE HEADER (subpages)
   ========================================================================== */
.page-hero{
  position:relative;
  height: 64vh;
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: var(--notte-deep);
  overflow:hidden;
}
.page-hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.page-hero::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,14,26,.92), rgba(8,14,26,.4) 60%, rgba(8,14,26,.55));
}
.page-hero-content{
  position:relative; z-index:3;
  color: var(--bianco-caldo);
  padding: 0 1.5rem;
}
.page-hero .eyebrow{ color: var(--oro-chiaro); justify-content:center; }
.page-hero .eyebrow::before{ display:none; }
.page-hero h1{
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--bianco-caldo);
  margin-top: 1rem;
}
.breadcrumb{
  margin-top: 1.4rem;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247,242,232,.65);
}
.breadcrumb a{ color: var(--oro-chiaro); }
.breadcrumb a:hover{ text-decoration: underline; }

/* ==========================================================================
   MENÙ DIGITALE
   ========================================================================== */
.menu-hero{
  background: var(--notte);
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 4rem);
  text-align:center;
  color: var(--bianco-caldo);
  position:relative;
  overflow:hidden;
}
.menu-hero::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(201,162,75,.25), transparent);
}
.menu-hero .eyebrow{ justify-content:center; color: var(--oro-chiaro); }
.menu-hero .eyebrow::before{ display:none; }
.menu-hero h1{
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(3.6rem, 9vw, 6.5rem);
  color: var(--bianco-caldo);
  margin: .6rem 0 .8rem;
  line-height: 1;
}
.menu-hero p{
  color: rgba(247,242,232,.7);
  max-width: 46ch;
  margin: 0 auto;
  font-size: .98rem;
}

.menu-nav{
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(10,20,36,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,75,.2);
}
.menu-nav-inner{
  display:flex;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  overflow-x:auto;
  padding: 1.1rem clamp(1.5rem,5vw,3rem);
  scrollbar-width: none;
}
.menu-nav-inner::-webkit-scrollbar{ display:none; }
.menu-nav-inner a{
  white-space:nowrap;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,242,232,.65);
  transition: color .25s;
  flex-shrink:0;
}
.menu-nav-inner a:hover, .menu-nav-inner a.is-active{ color: var(--oro-chiaro); }

.menu-body{
  background: var(--avorio);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}

.menu-course{
  max-width: 880px;
  margin: 0 auto clamp(4rem, 8vw, 6rem);
  scroll-margin-top: 90px;
}
.menu-course:last-child{ margin-bottom: 0; }

.menu-course-head{
  text-align:center;
  margin-bottom: clamp(2.4rem, 5vw, 3.2rem);
}
.menu-course-head h2{
  font-family: var(--f-script);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  color: var(--notte);
  margin-bottom: .4rem;
}
.menu-course-head .sub{
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro-scuro);
}
.menu-course-head .divider-rule{
  margin: 1.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
}

.menu-item{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(201,162,75,.22);
}
.menu-item:last-child{ border-bottom:none; }

.menu-item-info{ flex:1; }
.menu-item-name{
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--notte);
  display:flex;
  align-items:baseline;
  gap: .6rem;
  flex-wrap:wrap;
}
.menu-item-name .badge{
  font-family: var(--f-sans);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  border: 1px solid var(--bordeaux);
  padding: .15rem .5rem;
  border-radius: 1px;
  font-weight:600;
}
.menu-item-desc{
  font-size: .92rem;
  color: #555;
  margin-top: .4rem;
  max-width: 52ch;
  font-style: italic;
}
.menu-item-price{
  font-family: var(--f-display);
  font-size: 1.46rem;
  color: #8A6420;
  white-space:nowrap;
  font-weight:700;
  letter-spacing: .01em;
  text-shadow: 0 0 .4px currentColor;
}

.menu-footnote{
  max-width: 880px;
  margin: clamp(2rem,4vw,3rem) auto 0;
  text-align:center;
  font-size: .82rem;
  color: #6a6a6a;
  font-style: italic;
}

/* Etichette di sottosezione dentro una portata (es. "Antipasti", "Primi") */
.menu-section-label{
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--notte);
  letter-spacing: .04em;
  margin: 2.4rem 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(201,162,75,.3);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.menu-section-label:first-of-type{ margin-top: 1rem; }

/* Nota descrittiva sotto il label di sottosezione */
.menu-section-note{
  max-width: 880px;
  margin: .3rem auto 1rem;
  font-size: .88rem;
  color: #6a6a6a;
  font-style: italic;
}

/* Coperto */
.menu-coperto{
  max-width: 880px;
  margin: 2rem auto 0;
  text-align: right;
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--oro-scuro);
  font-weight: 600;
  letter-spacing: .04em;
  padding-top: 1rem;
  border-top: 1px solid rgba(201,162,75,.2);
}

/* ---------- Pulsante flottante: torna alle sezioni del menù ---------- */
.menu-back-top{
  position: fixed;
  right: clamp(1.2rem, 4vw, 2.2rem);
  bottom: clamp(1.2rem, 4vw, 2.2rem);
  z-index: 950;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--notte);
  border: 1px solid var(--oro);
  color: var(--oro-chiaro);
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(8,14,26,.5);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(14px) translateZ(0);
  transform: translateY(14px) translateZ(0);
  will-change: opacity, transform;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s, border-color .3s;
}
.menu-back-top.is-visible{
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
}
.menu-back-top:hover{
  background: var(--oro);
  border-color: var(--oro);
  color: var(--notte);
}
.menu-back-top svg{
  width: 18px;
  height: 18px;
  transition: transform .3s var(--ease);
}
.menu-back-top:hover svg{ transform: translateY(-2px); }
.menu-back-top .mbt-label{
  position: absolute;
  right: calc(100% + .8rem);
  top: 50%;
  transform: translateY(-50%);
  background: var(--notte);
  color: var(--bianco-caldo);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  border-radius: 1px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  pointer-events: none;
}
.menu-back-top:hover .mbt-label{
  opacity: 1;
  visibility: visible;
}

@media (max-width: 720px){
  .menu-back-top{
    width: 46px;
    height: 46px;
  }
  .menu-back-top .mbt-label{ display: none; }
}

.menu-cta-band{
  background: var(--notte);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  text-align:center;
  color: var(--bianco-caldo);
}
.menu-cta-band h3{
  font-family: var(--f-script);
  font-weight:400;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--bianco-caldo);
  margin-bottom: 1rem;
}
.menu-cta-band p{
  color: rgba(247,242,232,.7);
  max-width: 46ch;
  margin: 0 auto 1.8rem;
}

@media (max-width: 600px){
  .menu-item{ flex-direction:column; gap:.3rem; }
  .menu-item-price{ font-size: 1.32rem; }
}

/* ==========================================================================
   PAGINA CONTATTI
   ========================================================================== */
.contact-strip{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(201,162,75,.3);
  background: var(--bianco-caldo);
}
.contact-cell{
  padding: clamp(2.2rem, 4vw, 2.8rem) clamp(1.6rem, 3vw, 2.4rem);
  border-right: 1px solid rgba(201,162,75,.3);
  display:flex;
  flex-direction:column;
  gap: .9rem;
}
.contact-cell:last-child{ border-right:none; }
.contact-cell .icon{
  width: 30px;
  height: 30px;
  color: var(--oro);
}
.contact-cell .icon svg{ width:100%; height:100%; }
.contact-cell h3{
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.contact-cell p, .contact-cell a{
  font-size: .94rem;
  color: #4a4a4a;
  line-height: 1.6;
}
.contact-cell a{
  color: var(--notte);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
  width: fit-content;
}
.contact-cell a:hover{
  color: var(--oro-scuro);
  border-color: var(--oro-scuro);
}

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap: 1.4rem;
}
.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap: .55rem;
}
.field label{
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  font-weight: 600;
}
.field input, .field textarea{
  font-family: var(--f-sans);
  font-size: .95rem;
  color: var(--inchiostro);
  background: var(--bianco-caldo);
  border: 1px solid rgba(14,26,43,.18);
  padding: .85rem 1rem;
  border-radius: 1px;
  transition: border-color .25s, box-shadow .25s;
  resize: vertical;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(201,162,75,.15);
}
.field textarea{ min-height: 140px; }

.form-submit{
  margin-top: .4rem;
  align-self: flex-start;
}

.form-note{
  font-size: .8rem;
  color: #767676;
  margin-top: -.4rem;
}

.form-success{
  display:none;
  background: var(--avorio-2);
  border: 1px solid rgba(201,162,75,.4);
  padding: 1.4rem 1.6rem;
  font-size: .92rem;
  color: var(--notte);
}
.form-success.is-visible{ display:block; }

.form-error{
  display:none;
  background: #FBEAEA;
  border: 1px solid rgba(180,60,60,.4);
  padding: 1.4rem 1.6rem;
  font-size: .92rem;
  color: #7A2626;
}
.form-error.is-visible{ display:block; }
.form-error a{ color: inherit; text-decoration: underline; }

/* Campo anti-spam: invisibile per le persone, resta compilabile dai bot */
.hp-field{
  display: none !important;
}

.map-frame{
  width: 100%;
  aspect-ratio: 4/5;
  border: 1px solid rgba(201,162,75,.3);
  overflow: hidden;
  background: var(--avorio-2);
}
.map-frame iframe{
  width:100%; height:100%;
  border:0;
  filter: grayscale(.15) contrast(1.02);
}

@media (max-width: 920px){
  .contact-strip{ grid-template-columns: 1fr; }
  .contact-cell{ border-right:none; border-bottom: 1px solid rgba(201,162,75,.3); }
  .contact-cell:last-child{ border-bottom:none; }
  .contact-grid{ grid-template-columns: 1fr; }
  .map-frame{ aspect-ratio: 16/10; }
}

@media (max-width: 600px){
  .form-row{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px){
  .timeline{ grid-template-columns: repeat(2, 1fr); }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .dining-cards{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px){
  .main-nav{
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--notte-deep);
    flex-direction: column;
    justify-content:center;
    align-items:center;
    gap: 2.2rem;
    transform: translateX(100%);
    transition: transform .45s var(--ease);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.1rem; }
  .nav-toggle{ display:block; }
  .nav-cta{ margin-top:1rem; }

  /* Dropdown Menù → diventa un accordion verticale in versione mobile */
  .nav-dropdown{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .nav-dropdown-trigger{
    font-size: 1.1rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bianco-caldo);
    opacity: .88;
    padding-bottom: 6px;
  }
  .nav-dropdown-panel{
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
    width: 100%;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease), margin .35s var(--ease);
    margin-top: 0;
  }
  .nav-dropdown.is-open .nav-dropdown-panel{
    max-height: 220px;
    margin-top: 1.2rem;
  }
  .nav-dropdown-panel a{
    align-items:center;
    text-align:center;
    padding: .9rem .5rem;
    overflow: hidden;
  }
  .nav-dropdown-panel a + a{ border-top: 1px solid rgba(201,162,75,.18); }
  .nav-dropdown-panel a .item-title{ font-size: 1rem; }
  .nav-dropdown-panel a .item-sub{
    white-space: normal;
    text-align: center;
    display: block;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    letter-spacing: .04em;
  }

  .feature-row{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-row.is-reverse .row-media{ order:1; }
  .feature-row.is-reverse .row-text{ order:2; }

  .dining-intro{ grid-template-columns: 1fr; }
  .dining-cta-band{ flex-direction:column; align-items:flex-start; text-align:left; }
}

@media (max-width: 720px){
  :root{ --gap-section: 4.4rem; }
  .timeline{ grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .gallery-grid{ grid-template-columns: 1fr; }
  .dining-cards{ grid-template-columns: 1fr; }
  .media-stack{ grid-template-columns: 1fr; }
  .media-stack .media-frame:nth-child(2){ margin-top: 0; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .footer-brand{ grid-column: 1 / -1; }
  .hero-title{ font-size: clamp(2.4rem, 11vw, 3.6rem); }
}

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

/* ==========================================================================
   GALLERIA FOTOGRAFICA
   ========================================================================== */

.gallery-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* Grid galleria */
.gallery-grid-main{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1240px;
  margin: 0 auto;
}

.gallery-thumb{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  cursor: pointer;
  border-radius: 2px;
  background: var(--notte);
}
.gallery-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.2s var(--ease), opacity .4s;
  display: block;
}
.gallery-thumb:hover img{
  transform: scale(1.06);
  opacity: .88;
}
.gallery-thumb .thumb-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,14,26,.7) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s;
  display: flex;
  align-items: flex-end;
  padding: 1rem 1.1rem;
}
.gallery-thumb:hover .thumb-overlay{ opacity: 1; }
.gallery-thumb .thumb-overlay span{
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
}
.gallery-thumb .zoom-icon{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0;
  transition: opacity .4s, transform .4s var(--ease);
  background: rgba(8,14,26,.55);
  border: 1px solid rgba(201,162,75,.6);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--oro-chiaro);
}
.gallery-thumb:hover .zoom-icon{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Lightbox ---- */
.lightbox{
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(6,12,24,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
  backdrop-filter: blur(8px);
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
}
.lightbox-inner{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 5rem;
}
.lightbox-img-wrap{
  position: relative;
  max-width: 1100px;
  max-height: 85vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-img-wrap img{
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.7);
  transition: opacity .35s var(--ease);
}
.lightbox-img-wrap img.is-fading{ opacity: 0; }

.lightbox-caption{
  position: absolute;
  bottom: -2.4rem;
  left: 0; right: 0;
  text-align: center;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,242,232,.55);
}

.lightbox-counter{
  position: absolute;
  top: 1.4rem; left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247,242,232,.5);
}

/* Pulsanti freccia */
.lightbox-btn{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(8,14,26,.5);
  border: 1px solid rgba(201,162,75,.4);
  color: var(--oro-chiaro);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s, border-color .3s, transform .3s var(--ease);
  z-index: 10;
  flex-shrink: 0;
}
.lightbox-btn:hover{
  background: var(--oro);
  border-color: var(--oro);
  color: var(--notte);
}
.lightbox-btn.prev{ left: 1.2rem; }
.lightbox-btn.prev:hover{ transform: translateY(-50%) translateX(-2px); }
.lightbox-btn.next{ right: 1.2rem; }
.lightbox-btn.next:hover{ transform: translateY(-50%) translateX(2px); }
.lightbox-btn svg{ width: 20px; height: 20px; }

/* Pulsante chiudi */
.lightbox-close{
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  background: rgba(8,14,26,.5);
  border: 1px solid rgba(201,162,75,.3);
  color: rgba(247,242,232,.8);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s, color .3s;
  z-index: 10;
}
.lightbox-close:hover{
  background: rgba(247,242,232,.15);
  color: var(--bianco-caldo);
}
.lightbox-close svg{ width: 18px; height: 18px; }

/* Dots indicatori */
.lightbox-dots{
  position: absolute;
  bottom: 1.6rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: .7rem;
  z-index: 10;
}
.lightbox-dots button{
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(247,242,232,.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
}
.lightbox-dots button.is-active{
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  transform: scale(1.3);
}

@media (max-width: 1080px){
  .gallery-grid-main{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .gallery-grid-main{ grid-template-columns: 1fr; }
  .lightbox-inner{ padding: 3.5rem 1rem; }
  .lightbox-btn{ width: 42px; height: 42px; }
  .lightbox-btn.prev{ left: .4rem; }
  .lightbox-btn.next{ right: .4rem; }
}

/* ==========================================================================
   PAGINA MOSTRE & EVENTI
   ========================================================================== */

/* Blocco evento: locandina | descrizione */
.evento-block{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(3.5rem, 7vw, 5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5rem);
  border-bottom: 1px solid rgba(201,162,75,.2);
}
.evento-block:last-of-type{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.evento-block.is-reverse{
  grid-template-columns: 1fr 340px;
}
.evento-block.is-reverse .evento-locandina{ order: 2; }
.evento-block.is-reverse .evento-desc{ order: 1; }

.evento-locandina{
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 20px 50px -15px rgba(8,14,26,.35);
}
.evento-locandina img{
  width: 100%;
  display: block;
  border-radius: 2px;
}

.evento-desc{
  padding-top: .4rem;
}
.evento-desc .eyebrow{ margin-bottom: .8rem; }
.evento-desc h3{
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--notte);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.evento-desc p{
  font-size: .97rem;
  color: #3a3a3a;
  line-height: 1.7;
}
.evento-desc p + p{ margin-top: .9rem; }

/* Tabella elenco eventi */
.eventi-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.8rem;
}
.eventi-table th{
  font-family: var(--f-sans);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  padding: .7rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(201,162,75,.4);
  font-weight: 600;
}
.eventi-table td{
  padding: .9rem 1rem;
  font-size: .93rem;
  color: #3a3a3a;
  border-bottom: 1px solid rgba(201,162,75,.12);
  vertical-align: top;
}
.eventi-table tr:last-child td{ border-bottom: none; }
.eventi-table tr:hover td{ background: rgba(201,162,75,.05); }
.eventi-table .data{
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--notte);
  white-space: nowrap;
}
.eventi-table .tipo{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  display: block;
  margin-bottom: .2rem;
}
.eventi-table .titolo-evento{
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--notte);
  display: block;
}
.eventi-table .autore{
  font-size: .86rem;
  color: #666;
  display: block;
  margin-top: .2rem;
}

@media (max-width: 860px){
  .evento-block,
  .evento-block.is-reverse{
    grid-template-columns: 1fr;
  }
  .evento-block.is-reverse .evento-locandina{ order: 1; }
  .evento-block.is-reverse .evento-desc{ order: 2; }
  .evento-locandina{ max-width: 380px; margin: 0 auto; }
  .eventi-table th:last-child,
  .eventi-table td:last-child{ display: none; }
}

@media (max-width: 560px){
  .eventi-table .data{ font-size: .95rem; }
}

/* ==========================================================================
   SLIDESHOW FOTO (es. sezione Pizzeria in ristorante.html)
   ========================================================================== */
.media-slideshow{
  position: relative;
  width: 100%;
  height: 100%;
}
.slideshow-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}
.slideshow-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.slideshow-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slideshow-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(10,20,36,.45);
  color: var(--bianco-caldo);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: .85;
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.slideshow-arrow:hover,
.slideshow-arrow:focus-visible{
  opacity: 1;
  background: var(--oro);
  color: var(--notte-deep);
}
.slideshow-arrow svg{ width: 18px; height: 18px; }
.slideshow-prev{ left: 14px; }
.slideshow-next{ right: 14px; }
.slideshow-dots{
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
  z-index: 5;
}
.slideshow-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(251,248,242,.85);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.slideshow-dot.is-active{
  background: var(--oro-chiaro);
  border-color: var(--oro-chiaro);
  transform: scale(1.15);
}
@media (max-width: 640px){
  .slideshow-arrow{ width: 34px; height: 34px; }
  .slideshow-arrow svg{ width: 15px; height: 15px; }
}