/* ==========================================================================
   Sito Appartamenti — stile elegante/luxury
   Palette: blu notte profondo, sabbia/crema, oro tenue come accento
   ========================================================================== */

:root {
  --color-navy: #12233a;
  --color-navy-deep: #0b1626;
  --color-sand: #f4efe6;
  --color-sand-soft: #faf7f1;
  --color-gold: #b58a4a;
  --color-gold-soft: #d9bd8e;
  --color-text: #23302f;
  --color-text-soft: #5a655f;
  --color-white: #ffffff;
  --shadow-soft: 0 10px 30px rgba(11, 22, 38, 0.12);
  --shadow-strong: 0 20px 50px rgba(11, 22, 38, 0.25);
  --radius: 4px;
  --max-width: 1180px;
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-sand-soft);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.5em;
  color: var(--color-navy);
}

p { margin: 0 0 1em; color: var(--color-text-soft); }

.eyebrow {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 0.9em;
  display: inline-block;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 0;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(11, 22, 38, 0.92);
  -webkit-backdrop-filter: blur(6px); /* prefisso necessario per Safari/iOS */
  backdrop-filter: blur(6px);
  padding: 14px 0;
  box-shadow: var(--shadow-soft);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-white);
  letter-spacing: 0.06em;
  font-weight: 600;
}
.brand span { color: var(--color-gold-soft); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.main-nav a {
  color: var(--color-white);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.main-nav a:hover { opacity: 1; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  overflow: hidden;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--color-white);
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 700;
  opacity: 0.6;
  transition: all 0.2s ease;
}
.lang-toggle button.active {
  background: var(--color-gold);
  opacity: 1;
  color: var(--color-navy-deep);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,22,38,0.35) 0%, rgba(11,22,38,0.15) 45%, rgba(11,22,38,0.85) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 90px;
  max-width: 720px;
}
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: 0.3em;
}
.hero .subtitle {
  color: rgba(255,255,255,0.88);
  font-size: 1.15rem;
  font-weight: 300;
  max-width: 560px;
}
.hero-location {
  margin-top: 22px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 34px;
  border: 1px solid var(--color-gold);
  color: var(--color-navy);
  background: transparent;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.btn:hover { background: var(--color-gold); color: var(--color-navy-deep); }
.btn-light {
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn-light:hover { background: var(--color-white); color: var(--color-navy); }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.section-sand { background: var(--color-sand); }
.section-navy { background: var(--color-navy); color: var(--color-white); }
.section-navy h2, .section-navy h3 { color: var(--color-white); }
.section-navy p { color: rgba(255,255,255,0.72); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

/* ---------- Property cards (home) ---------- */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.property-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-strong); }
.property-card .img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.property-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.property-card:hover .img-wrap img { transform: scale(1.06); }
.property-card .badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(11,22,38,0.85);
  color: var(--color-gold-soft);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.property-card .card-body { padding: 26px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.property-card h3 { margin-bottom: 0.15em; font-size: 1.4rem; }
.property-card .location {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 14px;
}
.property-card p { flex: 1; font-size: 0.92rem; }
.property-card .card-cta { margin-top: 16px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-navy); font-weight: 700; }
.property-card.is-placeholder { opacity: 0.55; }
.property-card.is-placeholder .card-cta { color: var(--color-text-soft); }

/* ---------- Property page ---------- */
.property-hero {
  position: relative;
  height: 78vh;
  min-height: 520px;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.property-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,38,0.25) 0%, rgba(11,22,38,0.75) 100%);
}
.property-hero .container { position: relative; z-index: 2; padding-bottom: 60px; }
.property-hero h1 { color: var(--color-white); font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 0.2em; }
.property-hero .location { color: var(--color-gold-soft); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem; }

.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid #e3dccd;
  border-bottom: 1px solid #e3dccd;
  background: var(--color-sand);
}
.stats-strip .stat {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 28px 12px;
  border-right: 1px solid #e3dccd;
}
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .stat .num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-navy);
  display: block;
}
.stats-strip .stat .label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: start;
}
.two-col .subtitle-lead {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-navy);
  font-style: italic;
  margin-bottom: 1em;
}
.description p { color: var(--color-text-soft); font-size: 1.02rem; }

.info-box {
  background: var(--color-white);
  border: 1px solid #e6e0d3;
  border-radius: var(--radius);
  padding: 30px;
}
.info-box h4 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1em;
}
.info-box ul { list-style: none; margin: 0; padding: 0; }
.info-box li {
  padding: 10px 0;
  border-bottom: 1px solid #efe9dc;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.info-box li:last-child { border-bottom: none; }
.info-box li strong { color: var(--color-text); }

/* Amenities grid */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 30px;
  margin-top: 20px;
}
.amenity {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.94rem;
  color: var(--color-text);
  padding: 6px 0;
}
.amenity::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}
/* Su sfondo navy il testo scuro è illeggibile: forziamo un colore chiaro */
.section-navy .amenity {
  color: rgba(255, 255, 255, 0.92);
}

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 210px;
  gap: 12px;
}
.gallery-grid a {
  overflow: hidden;
  border-radius: var(--radius);
  display: block;
}
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid .span-2 { grid-column: span 2; }
.gallery-grid .row-2 { grid-row: span 2; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(6,12,22,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 86vh; border-radius: 4px; box-shadow: var(--shadow-strong); }
.lightbox-close {
  position: absolute; top: 26px; right: 34px;
  color: var(--color-white); font-size: 2rem;
  background: none; border: none; cursor: pointer;
  line-height: 1;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--color-white);
  font-size: 2.4rem; cursor: pointer; padding: 10px 18px; opacity: 0.75;
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* Pricing & availability */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 20px;
}
.price-card, .calendar-card {
  background: var(--color-white);
  border: 1px solid #e6e0d3;
  border-radius: var(--radius);
  padding: 40px 36px;
  text-align: center;
}
.price-card .price {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  color: var(--color-navy);
  line-height: 1;
}
.price-card .price-period {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 700;
  margin-top: 8px;
  display: block;
}
.price-card .price-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--color-text-soft);
  text-align: left;
}
.price-card .price-note strong { color: var(--color-text); }
.calendar-card {
  border-style: dashed;
  border-color: var(--color-gold-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.calendar-card h4 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6em;
}
.calendar-card p {
  font-size: 0.9rem;
  max-width: 320px;
}
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* CTA / contact */
.contact-cta {
  text-align: center;
}
.contact-cta h2 { color: var(--color-white); }
.contact-cta p { max-width: 520px; margin: 0 auto 30px; }
/* Selettore .contact-cta .contact-phone (invece del solo .contact-phone):
   ".contact-cta p" ha specificità più alta di ".contact-phone" da solo
   (classe + tipo elemento vs sola classe), quindi il margin-top veniva
   azzerato. Con questo selettore più specifico vinciamo sempre noi. */
.contact-cta .contact-phone {
  display: block;
  margin-top: 28px;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.75);
}
.contact-cta .contact-phone a { color: var(--color-gold-soft); font-weight: 700; }
.contact-cta .contact-phone a:hover { text-decoration: underline; }

/* Footer */
.site-footer {
  background: var(--color-navy-deep);
  color: rgba(255,255,255,0.55);
  padding: 46px 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.site-footer .brand { color: rgba(255,255,255,0.85); margin-bottom: 8px; display: block; }

/* ---------- Language visibility ----------
   L'italiano è la lingua di default e si vede SENZA bisogno di
   JavaScript: agli elementi [data-lang="it"] non applichiamo nessuna
   regola qui, quindi restano visibili con il loro display naturale
   (quello dato dal tag o dalla classe, es. ".num", ".amenity"). Solo
   l'inglese viene nascosto di default, con !important per essere
   sicuri di vincere anche contro regole più specifiche come
   ".stats-strip .stat .num" (altrimenti quella vincerebbe lei e il
   testo IT ed EN apparirebbero insieme). Se JavaScript non parte per
   qualunque motivo (webview limitata, anteprima, ecc.) il sito resta
   comunque leggibile in italiano, invece di restare pieno di vuoti.
   js/main.js (funzione setLang) usa style.setProperty(..., "important")
   per poter vincere anche questa regola quando l'utente passa a EN. */
[data-lang="en"] { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .properties-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .main-nav { gap: 16px; }
  /* !important necessario qui: i link hanno anche data-lang="it"/"en" per il
     cambio lingua, e quella regola (html[lang] [data-lang]) ha una specificità
     più alta di un normale ".main-nav a", quindi vincerebbe lei e i link
     tornerebbero visibili anche su mobile nonostante il display:none qui sotto. */
  .main-nav a { display: none !important; }
  .stats-strip .stat { min-width: 45%; border-right: none; border-bottom: 1px solid #e3dccd; }
}