/* GiustoGusto Celico — v2 design system
   Shared by: chi-siamo.html, eventi-feste.html, festivita.html, dove-siamo.html */

:root{
  --bg:#0e0d0b; --bg-alt:#171819; --bg-card:#121111;
  --gold:#e4c590; --white:#ffffff; --gray:#a7a7a7;
  --border:rgba(228,197,144,0.25);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--white);font-family:'DM Sans',sans-serif;}
h1,h2,h3,h4{font-family:'Forum',serif;font-weight:400;margin:0;color:var(--white);}
p{margin:0;line-height:1.75em;color:var(--gray);}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--white);}
.container{max-width:1180px;margin:0 auto;padding:0 30px;}
.subtitle{text-transform:uppercase;font-weight:700;color:var(--gold);font-size:13px;letter-spacing:0.2em;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 34px;border:1px solid var(--gold);color:var(--gold);font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;letter-spacing:0.05em;text-transform:uppercase;border-radius:2px;transition:all .25s ease;white-space:nowrap;}
.btn:hover{background:var(--gold);color:var(--bg);}
.btn-solid{background:var(--gold);color:var(--bg);}
.btn-solid:hover{background:transparent;color:var(--gold);}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--border);border-radius:30px;font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--white);}
.pill:hover{border-color:var(--gold);color:var(--gold);}

/* Layout helpers */
.row{display:flex;flex-wrap:wrap;gap:50px;align-items:center;}
.row-top{display:flex;flex-wrap:wrap;gap:40px;align-items:stretch;}
.col{flex:1 1 340px;}
.icon-wrap{width:56px;height:56px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:30px;}
.feat{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.feat svg{flex-shrink:0;margin-top:3px;}
.info-line{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.info-line svg{flex-shrink:0;margin-top:3px;}
.grain-line{width:60px;height:2px;background:var(--gold);margin:18px 0 22px;}
table{width:100%;border-collapse:collapse;}
td{padding:10px 0;font-size:15px;border-bottom:1px solid var(--border);}

/* Grids */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
.grid3-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.grid4-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.grid2-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;}

@media (max-width: 900px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid3-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid4-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 780px){
  .row{flex-direction:column;}
  .row-top{flex-direction:column;}
  h1{font-size:38px !important;}
  h2{font-size:28px !important;}
  .grid4{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  .grid3-gallery{grid-template-columns:1fr;}
  .grid4-gallery{grid-template-columns:1fr;}
  .grid2-gallery{grid-template-columns:1fr;}
}

/* Rotating slideshow tiles (Eventi & Feste / Chi Siamo galleries) */
.area-slide{position:relative;height:260px;border-radius:4px;overflow:hidden;}
.area-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:addobbiSlide 16s ease-in-out infinite;animation-fill-mode:both;}
.area-slide .area-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px 12px;background:linear-gradient(0deg, rgba(14,13,11,0.85) 0%, rgba(14,13,11,0) 100%);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);}
.tile-slide{position:relative;border-radius:4px;overflow:hidden;}
.tile-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:addobbiSlide 16s ease-in-out infinite;animation-fill-mode:both;}
.tile-slide .tile-caption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(0deg, rgba(14,13,11,0.85), rgba(14,13,11,0));font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--gold);}

/* Allestimenti gallery (Eventi & Feste) — masonry-style grid built from flex
   columns (not CSS multi-column, which leaves uneven gaps with few items).
   Every image keeps its native aspect ratio: nothing is cropped, so the
   decor ("allestimento") always reads in full. */
.allestimenti-grid{display:flex;gap:14px;}
.allestimenti-grid .allestimenti-col{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.allestimenti-grid img{width:100%;display:block;border-radius:4px;}
@media (max-width: 900px){
  .allestimenti-grid{gap:10px;}
  .allestimenti-grid .allestimenti-col{gap:10px;}
}
@media (max-width: 700px){
  .allestimenti-grid{flex-wrap:wrap;}
  .allestimenti-grid .allestimenti-col{flex:1 1 calc(50% - 5px);}
}
@media (max-width: 560px){
  .allestimenti-grid{gap:8px;}
  .allestimenti-grid .allestimenti-col{gap:8px;flex:1 1 calc(50% - 4px);}
}

/* Photo heroes (Eventi & Feste, Festivita, Dove Siamo) — height is driven
   by padding + content, never a fixed pixel height. This is what stops the
   hero from clipping text/buttons on narrow phones: on a fixed-height +
   overflow:hidden box, a paragraph that wraps into more lines on mobile
   grows taller than the box and gets cut off top/bottom. With padding
   instead of height, the section always grows to fit whatever content (and
   however many lines) it holds, on every screen size. */
.hero-photo{position:relative;overflow:hidden;}
.hero-photo>.container{position:relative;z-index:1;}
/* Dove Siamo's hero only has a subtitle + h1 (no paragraph/buttons like
   eventi-feste/festivita), so with identical padding it ends up visibly
   shorter and inconsistent next to the others — on phones AND on tablets
   (iPad Pro). A min-height floor at every screen size brings it in line
   without changing eventi/festivita, whose own content already exceeds it. */
.hero-photo-dove{min-height:460px;display:flex;align-items:center;}

/* Same top padding on every photo hero, on every screen size — this was
   the inconsistency flagged on mobile (735px vs 694px vs 237px tall heroes
   with a big empty gap up top on some pages). Bottom padding still varies a
   little since some heroes carry a button row and some don't. */
.hero-photo-eventi{padding:70px 0 60px;}
.hero-photo-festivita{padding:70px 0 50px;}
.hero-photo-dove{padding:70px 0 50px;}

@keyframes addobbiSlide{0%{opacity:0;}2%{opacity:1;}23%{opacity:1;}25%{opacity:0;}100%{opacity:0;}}
@keyframes heroSlideEventi{0%{opacity:0;}4%{opacity:1;}46%{opacity:1;}50%{opacity:0;}100%{opacity:0;}}
@keyframes heroSlideFestivita{0%{opacity:0;}2%{opacity:1;}30%{opacity:1;}33%{opacity:0;}100%{opacity:0;}}

/* ===== Header (shared across all pages) ===== */
.site-header{background:var(--bg-alt);border-bottom:1px solid var(--border);}
.site-header .top-bar{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:6px;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--gray);}
.site-header .top-bar .top-links{display:flex;gap:22px;flex-wrap:wrap;}
.site-header .top-bar a{color:var(--gray);}
.site-header .nav-row{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:22px;flex-wrap:wrap;gap:18px;}
.site-header .nav-row img{height:42px;width:auto;}
.site-nav{display:flex;gap:28px;align-items:center;flex-wrap:wrap;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;}
.site-nav a{color:var(--white);}
.site-nav a.active{color:var(--gold);}

/* ===== Mobile hamburger menu (shared across all pages) =====
   On phones we only want the logo and the top info bar (email/phone/hours)
   visible by default; the full link row hides behind a 3-line icon that
   reveals it on tap. Desktop is untouched (.nav-toggle stays display:none
   until the same 780px breakpoint used everywhere else on the site). */
.nav-toggle{display:none;}
@media (max-width: 780px){
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;padding:0;background:none;border:1px solid var(--border);
    border-radius:2px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:20px;height:2px;background:var(--gold);transition:transform .25s ease, opacity .25s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .site-nav{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;order:3;
    background:var(--bg-alt);border-top:1px solid var(--border);}
  .site-nav.is-open{display:flex;}
  .site-nav a{width:100%;padding:14px 4px;border-bottom:1px solid var(--border);}
}

/* ===== Mobile contact bar + WhatsApp FAB (shared across all pages) ===== */
.mobile-contact-bar{display:none;}
.mobile-contact-fab{display:none;}
@media (max-width: 780px){
  body{padding-bottom:64px;}
  .mobile-contact-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;
    height:60px;background:var(--bg-alt);
    border-top:1px solid var(--border);
    box-shadow:0 -2px 10px rgba(0,0,0,0.35);
  }
  .mobile-contact-bar a{flex:1;display:flex;align-items:center;justify-content:center;}
  .mobile-contact-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:76px;z-index:999;
    width:54px;height:54px;border-radius:50%;background:#25D366;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
}

/* ===== Scroll-to-top button (shared across all pages) ===== */
.scroll-top-btn{
  position:fixed;right:24px;bottom:24px;z-index:998;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);border:1px solid var(--gold);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
.scroll-top-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--gold);}
.scroll-top-btn:hover svg path{stroke:var(--bg);}
@media (max-width: 780px){
  .scroll-top-btn{
    right:auto;left:16px;bottom:76px;
    width:44px;height:44px;
  }
}

/* ===== Footer (shared across all pages) ===== */
.site-footer{padding:64px 0 30px;}
.site-footer .footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:38px;border-bottom:1px solid var(--border);}
.site-footer .footer-col-brand img{height:36px;}
.site-footer .footer-tagline{font-family:'Forum',serif;font-style:italic;color:var(--gold);font-size:15px;margin-top:12px;}
.site-footer .footer-divider{width:40px;height:1px;background:var(--border);margin:16px 0;}
.site-footer .footer-col-title{color:var(--gold);margin-bottom:16px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.15em;}
.site-footer .footer-links{display:flex;flex-direction:column;gap:10px;}
.site-footer .footer-links a{color:var(--white);}
.site-footer .footer-links a:hover{color:var(--gold);}
.site-footer .footer-contact-line{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:14px;}
.site-footer .footer-contact-line svg{flex-shrink:0;margin-top:2px;}
.site-footer .footer-social{display:flex;gap:10px;}
.site-footer .footer-social-icon{width:38px;height:38px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .2s ease, background .2s ease;}
.site-footer .footer-social-icon:hover{border-color:var(--gold);background:rgba(228,197,144,0.08);}
.site-footer .footer-bottom{padding-top:26px;font-size:13px;color:var(--gray);text-align:center;letter-spacing:0.02em;}
@media (max-width: 900px){
  .site-footer .footer-cols{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .site-footer .footer-cols{grid-template-columns:1fr;}
}