/* ============================================
   Guest Book — Casa Angelica
   Stili specifici della pagina guestbook.html
   (riusano le variabili definite in css/style.css)
   ============================================ */

/* ---------- Mini hero ---------- */
.gb-hero{
  padding: 2.5rem 0 3rem;
  text-align:center;
  background: var(--cream);
}
.gb-hero .eyebrow{
  text-transform:uppercase; letter-spacing:.32em; font-size:.72rem;
  color: var(--gold); margin-bottom:.8em;
}
.gb-hero h1{ font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom:.2em; }
.gb-hero p{
  font-family: var(--serif-2); font-style:italic; font-size: 1.15rem;
  color: var(--ink-soft); max-width: 560px; margin: 0 auto;
}

/* ---------- Tab nav ---------- */
/* margin-top clears the fixed header on load; top matches the header's
   scrolled (compact) height so the bar sticks right below it, never behind it */
.gb-tabs{
  position: sticky; top: 62px; z-index: 90;
  margin-top: 90px;
  background: rgba(247,242,231,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.gb-tabs .container{
  display:flex;
  gap: 1.8rem;
  overflow-x: auto;
  padding: 14px 24px;
  scrollbar-width: none;
}
.gb-tabs .container::-webkit-scrollbar{ display:none; }
.gb-tabs a{
  white-space: nowrap;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.gb-tabs a:hover, .gb-tabs a.active{
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ---------- Sections ---------- */
.gb-section{ padding: 4.5rem 0; scroll-margin-top: 110px; }
.gb-section:nth-child(even){ background: var(--cream-2); }
.gb-section .num{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--gold-soft);
  margin-bottom: .6em;
  text-align:center;
  display:block;
}
.gb-section .divider{ margin-top: 0; }
.gb-inner{ max-width: 760px; margin: 0 auto; }

.gb-lede{ text-align:center; color: var(--ink-soft); max-width: 620px; margin: 0 auto 2rem; }

/* ---------- Lists ---------- */
.gb-list{ list-style:none; margin: 0; padding: 0; }
.gb-list li{
  position:relative;
  padding-left: 1.4em;
  margin-bottom: .9em;
  color: var(--ink-soft);
}
.gb-list li::before{
  content:'';
  position:absolute; left:0; top: .55em;
  width: 6px; height:6px; border-radius:50%;
  background: var(--gold);
}
.gb-list li strong{ color: var(--ink); }

.gb-note{
  background: var(--white);
  border-left: 3px solid var(--gold);
  padding: 1rem 1.3rem;
  border-radius: 4px;
  color: var(--ink-soft);
  font-size: .95rem;
  margin-top: 1.5rem;
}

/* ---------- Info table (wifi/contatti) ---------- */
table.gb-info{ width:100%; border-collapse:collapse; margin-top: .5rem; }
table.gb-info td{
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: .98rem;
}
table.gb-info td.label{
  width: 38%;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding-right: 1rem;
}
table.gb-info td a{ text-decoration: underline; text-decoration-color: var(--gold-soft); }

/* ---------- Card grid (emergenze / ristoranti) ---------- */
.gb-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}
.gb-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.gb-card h4{
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .3em;
}
.gb-card p{ margin:0; font-size: .88rem; color: var(--ink-soft); }

/* ---------- Images (parcheggio / calendario rifiuti) ---------- */
.gb-figure{ margin: 1.5rem 0 0; text-align:center; }
.gb-figure img{
  max-width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 auto;
}
.gb-figure figcaption{
  margin-top: .8rem;
  font-size: .78rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Footer QR ---------- */
.gb-footer{
  background: var(--ink);
  color: #D8D8C6;
  text-align:center;
  padding: 3rem 0 2rem;
}
.gb-footer img{ width: 84px; margin: 0 auto 1rem; border-radius: 4px; }
.gb-footer p{ margin: 0 0 .4em; font-size: .85rem; }
.gb-footer .credit{ font-size: .76rem; color: #A9A996; margin-top: 1rem; }
.gb-footer a{ color: var(--gold-soft); }

@media (max-width: 640px){
  .gb-hero{ padding-top: 1.8rem; }
  table.gb-info td.label{ width: 44%; }
}