/* =========================================================
   QuintoQuarto Wine Restaurant — Stylesheet
   Palette: white ground · burgundy #7D283E (primary, from the
   brand's live site) · black · ochre as secondary accents.
   Fonts taken from the brand's live site (Google Fonts):
   Limelight (display) · Josefin Sans (body/UI) · Mrs Saint Delafield (script accent)
   ========================================================= */

:root{
  --ink:      #17130f;
  --ink-60:   rgba(23,19,15,.64);
  --wine:     #7d283e;
  --wine-dark:#59192a;
  --wine-tint:#f4e6ea;
  --ochre:    #b8842e;
  --ochre-dark:#96691f;
  --cream:    #ffffff;
  --cream-2:  #f6f3ec;
  --white:    #ffffff;
  --line:     rgba(23,19,15,.13);
  --line-on-wine: rgba(255,255,255,.28);

  --font-display: 'Limelight', serif;
  --font-script:  'Mrs Saint Delafield', cursive;
  --font-body:    'Josefin Sans', sans-serif;

  --radius: 2px;
  --shadow-soft: 0 18px 40px -20px rgba(31,31,31,.35);
  --shadow-card: 0 10px 30px -14px rgba(31,31,31,.25);

  --container: 1180px;
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }

/* ---------- language toggle logic ---------- */
html[lang="it"] .en{ display:none !important; }
html[lang="en"] .it{ display:none !important; }

/* ---------- headings & kickers ---------- */
.kicker{
  display:block;
  font-family:var(--font-script);
  font-size:2rem;
  color:var(--wine);
  margin-bottom:.15em;
  line-height:1;
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink);
}
.section-lede{
  max-width:640px;
  color:var(--ink-60);
  font-size:1.02rem;
}
.section-head{
  text-align:center;
  margin:0 auto 3rem;
  max-width:720px;
}
.section-head .section-lede{ margin:1rem auto 0; }
.divider{
  width:64px; height:2px; background:var(--ochre);
  margin:1.1rem auto 0;
  border:none;
}
.divider.left{ margin-left:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.95em 2em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--wine); color:var(--cream); border-color:var(--wine); }
.btn-primary:hover{ background:var(--wine-dark); border-color:var(--wine-dark); }
.btn-outline{ background:transparent; color:var(--wine); border-color:var(--wine); }
.btn-outline:hover{ background:var(--wine); color:var(--cream); }
.btn-ghost-light{ background:transparent; color:var(--cream); border-color:rgba(255,255,255,.55); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.14); border-color:var(--cream); }
.btn-block{ width:100%; justify-content:center; }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ================= HEADER ================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--wine);
  border-bottom:1px solid var(--line-on-wine);
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.22); }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:36px; width:auto; }
.main-nav{ display:flex; align-items:center; gap:1.7rem; }
.main-nav a{
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream); position:relative; padding:.3em 0; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--cream); transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a.active{ color:var(--cream); }

.header-actions{ display:flex; align-items:center; gap:1.2rem; }
.lang-switch{ display:flex; align-items:center; gap:.35rem; font-size:.78rem; letter-spacing:.08em; }
.lang-switch button{
  background:none; border:none; color:rgba(255,255,255,.55); cursor:pointer;
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.08em; padding:.2em .3em;
}
.lang-switch button.active{ color:var(--cream); text-decoration:underline; text-underline-offset:4px; }
.lang-switch .sep{ color:rgba(255,255,255,.4); }

.header-actions .btn{ padding:.72em 1.5em; font-size:.74rem; }
.mobile-nav-extra{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:30px; height:30px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ width:100%; height:1.5px; background:var(--cream); }

/* ================= HERO SLIDESHOW ================= */
.hero{
  position:relative; height:100vh; min-height:560px; max-height:980px;
  overflow:hidden; color:var(--white);
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.6s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,14,10,.42) 0%,rgba(20,14,10,.28) 38%,rgba(20,14,10,.62) 100%);
}
.hero-inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 24px;
}
.hero-kicker{
  font-family:var(--font-script); font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--cream); margin-bottom:.2rem;
}
.hero-title{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.2rem); letter-spacing:.05em; line-height:1.05;
  text-shadow:0 4px 30px rgba(0,0,0,.35);
}
.hero-logo{
  width:min(88vw,640px); height:auto;
  filter:brightness(0) invert(1) drop-shadow(0 6px 28px rgba(0,0,0,.4));
}
.hero-sub{
  margin-top:1.1rem; max-width:560px; font-size:1.05rem; color:rgba(255,255,255,.9);
  font-weight:300;
}
.hero-cta{ margin-top:2.4rem; }
.hero-dots{
  position:absolute; z-index:3; bottom:34px; left:0; right:0;
  display:flex; justify-content:center; gap:.5rem;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.8);
  background:transparent; cursor:pointer; padding:0;
}
.hero-dots button.is-active{ background:var(--white); }
.hero-scroll{
  position:absolute; z-index:3; bottom:36px; right:40px;
  writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
  display:flex; align-items:center; gap:.6rem;
}
.hero-scroll::after{ content:""; width:1px; height:46px; background:rgba(255,255,255,.6); }

/* ---- smaller page hero banner (inner pages) ---- */
.page-hero{
  position:relative; height:56vh; min-height:360px; max-height:560px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--white); overflow:hidden;
}
.page-hero .hero-scrim{ background:linear-gradient(180deg,rgba(20,14,10,.5) 0%,rgba(20,14,10,.35) 45%,rgba(20,14,10,.7) 100%); }
.page-hero-inner{ position:relative; z-index:2; padding:0 24px; }
.page-hero .hero-kicker{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.page-hero .hero-title{ font-size:clamp(2.1rem,5.4vw,3.6rem); }
.breadcrumb{
  margin-top:1rem; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.breadcrumb a{ color:rgba(255,255,255,.9); }
.breadcrumb a:hover{ text-decoration:underline; }

/* ================= SECTIONS ================= */
section{ padding:6rem 0; }
.section-tight{ padding:4rem 0; }
.bg-white{ background:var(--white); }
.bg-cream{ background:var(--cream); }
.bg-wine{ background:var(--wine); color:var(--cream); }
.bg-wine .section-title{ color:var(--cream); }
.bg-wine .section-lede{ color:rgba(255,255,255,.78); }
.bg-wine .kicker{ color:var(--cream); }
.bg-ink{ background:var(--ink); color:var(--cream); }

/* ---- intro / split ---- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-card); aspect-ratio:4/5; }
.split-text p{ color:var(--ink-60); }
.split-text .section-title{ margin-bottom:1.1rem; }

/* ---- category / feature cards ---- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column;
}
.card-img{ aspect-ratio:4/3; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-img img{ transform:scale(1.06); }
.card-body{ padding:1.8rem 1.8rem 2.1rem; text-align:center; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; letter-spacing:.05em; }
.card-body p{ color:var(--ink-60); font-size:.92rem; margin-top:.6rem; flex:1; }
.card-body .btn{ margin-top:1.4rem; align-self:center; }

/* ---- gallery grid ---- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.gallery a{
  display:block; overflow:hidden; border-radius:var(--radius); aspect-ratio:1/1;
  box-shadow:var(--shadow-card);
}
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery a:hover img{ transform:scale(1.08); }
.gallery .tall{ grid-row:span 2; aspect-ratio:1/2.06; }

/* ---- lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(15,10,8,.92);
  display:none; align-items:center; justify-content:center; padding:4vh 4vw;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; border-radius:2px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:26px; right:34px; background:none; border:none; color:var(--cream);
  font-size:2rem; line-height:1; cursor:pointer; font-family:var(--font-body); font-weight:300;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:none; border:none;
  color:var(--cream); font-size:2.4rem; cursor:pointer; padding:.4rem 1rem; font-family:var(--font-body);
}
.lightbox-prev{ left:8px; } .lightbox-next{ right:8px; }

/* ---- hours table ---- */
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table tr{ border-bottom:1px solid var(--line); }
.hours-table tr:last-child{ border-bottom:none; }
.hours-table td{ padding:.85rem 0; font-size:.95rem; }
.hours-table td:first-child{ letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:var(--ink-60); }
.hours-table td:last-child{ text-align:right; font-weight:500; }
.hours-table tr.closed td:last-child{ color:var(--ochre-dark); text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; }
.bg-wine .hours-table tr{ border-color:rgba(255,255,255,.22); }
.bg-wine .hours-table td:first-child{ color:rgba(255,255,255,.7); }

/* ---- info cards (contact) ---- */
.info-list{ display:flex; flex-direction:column; gap:1.6rem; }
.info-item{ display:flex; gap:1rem; align-items:flex-start; }
.info-item .icon{
  flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.bg-wine .info-item .icon{ border-color:rgba(255,255,255,.35); }
.info-item h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60); margin-bottom:.25rem; }
.bg-wine .info-item h4{ color:rgba(255,255,255,.65); }
.info-item p a:hover{ color:var(--ochre-dark); }
.bg-wine .info-item p a:hover{ color:var(--ochre); text-decoration:underline; }

.map-frame{ width:100%; aspect-ratio:16/11; border:0; border-radius:var(--radius); box-shadow:var(--shadow-card); }

/* ---- 360 tour ---- */
.tour-frame-wrap{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-soft); background:#111;
}
.tour-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- reservation iframe ---- */
.booking-frame-wrap{
  width:100%; min-height:900px; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft); background:var(--white);
}
.booking-frame-wrap iframe{ width:100%; height:900px; border:0; display:block; }

/* ---- badges / press strip ---- */
.press-strip{
  display:flex; align-items:center; justify-content:center; gap:3rem; flex-wrap:wrap;
}
.press-badge{ display:flex; align-items:center; gap:.7rem; opacity:.85; }
.press-badge .yr{ font-family:var(--font-display); font-size:1.1rem; }
.press-badge small{ display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-60); }

/* ---- coming soon (eventi) ---- */
.coming-soon{
  text-align:center; padding:4.5rem 2rem; background:var(--white); border-radius:var(--radius);
  border:1px solid var(--line); box-shadow:var(--shadow-card);
}
.coming-soon .icon-ring{
  width:78px; height:78px; margin:0 auto 1.6rem; border-radius:50%; border:1px solid var(--ochre);
  display:flex; align-items:center; justify-content:center; color:var(--ochre-dark);
}
.coming-soon h3{ font-family:var(--font-display); font-size:1.6rem; text-transform:uppercase; letter-spacing:.05em; }
.coming-soon p{ color:var(--ink-60); max-width:420px; margin:.9rem auto 0; }
.coming-soon .cta-row{ justify-content:center; margin-top:1.8rem; }

/* ---- pdf menu list ---- */
.pdf-list{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.4rem; }
.pdf-link{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.3rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); font-size:.85rem; letter-spacing:.04em;
}
.bg-wine .pdf-link{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); }
.pdf-link:hover{ border-color:var(--ochre); }
.bg-wine .pdf-link:hover{ border-color:var(--ochre); }
.pdf-link .dl{ font-size:1.1rem; }

/* ================= FOOTER ================= */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.85); padding:4.5rem 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-grid h4{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); margin-bottom:1.2rem; }
.footer-grid p, .footer-grid a{ font-size:.88rem; color:rgba(255,255,255,.68); line-height:2; }
.footer-grid a:hover{ color:var(--cream); }
.footer-logo{ height:32px; margin-bottom:1.2rem; filter:brightness(1.15); }
.footer-social{ display:flex; gap:.9rem; margin-top:1rem; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ border-color:var(--cream); background:rgba(255,255,255,.08); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem;
  padding:1.6rem 0; font-size:.76rem; color:rgba(255,255,255,.5); letter-spacing:.02em;
}
.footer-bottom a:hover{ color:var(--cream); }

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; gap:2.5rem; }
  .split-media{ order:-1 !important; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:840px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
    background:var(--wine); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:2rem 28px; gap:1.6rem; transform:translateX(100%); transition:transform .35s ease;
    overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ font-size:1rem; }
  .nav-toggle{ display:flex; flex:none; }
  .header-actions{ gap:.8rem; }
  .header-actions .lang-switch,
  .header-actions > a.btn-primary{ display:none; }
  .mobile-nav-extra{ display:flex; flex-direction:column; align-items:flex-start; gap:1.2rem; margin-top:.6rem; width:100%; }
  .mobile-nav-extra .lang-switch{ font-size:.95rem; }
  .mobile-nav-extra .lang-switch button{ font-size:.95rem; color:rgba(255,255,255,.7); }
  .mobile-nav-extra .lang-switch button.active{ color:var(--cream); }
  .mobile-nav-extra .btn-primary{ background:var(--cream); color:var(--wine); border-color:var(--cream); }
  section{ padding:4rem 0; }
}
@media (max-width:480px){
  :root{ --header-h:66px; }
  .container{ padding:0 18px; }
  .brand img{ height:26px; }
  .header-actions{ gap:.6rem; }
  .nav-toggle{ width:24px; height:24px; gap:4px; }
}
@media (max-width:680px){
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery .tall{ grid-row:span 1; aspect-ratio:1/1; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .press-strip{ gap:1.6rem; }
  .booking-frame-wrap, .booking-frame-wrap iframe{ min-height:760px; height:760px; }
}