:root {
  --col-rosa-cipria: #E8B8B5;
  --col-bordeaux: #7C2B36;
  --col-oro-antico: #C6A25B;
  --col-crema: #F4E6D2;
  --col-text-dark: #3B2F2A;
}

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


body {
  font-family: 'Bodoni Moda', serif;
  background-color: var(--col-crema);
  color: var(--col-crema);
}

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: fixed;   /* FISSO */
  top: 0;
  left: 0;
  width: 100%;
  height: 300px;     /* altezza = diametro quarti */
  z-index: 100;      /* sopra il carosello */
  background: transparent; /* mantiene trasparente il centro */
}

/* Quarti di cerchio */
.header-left,
.header-right {
  width: 300px;
  height: 300px;
  background-color: var(--col-bordeaux);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-left {
  border-bottom-right-radius: 300px;
  border-right: 4px solid var(--col-oro-antico);
  border-bottom: 4px solid var(--col-oro-antico);
}
.header-right {
  border-bottom-left-radius: 300px;
  border-left: 4px solid var(--col-oro-antico);
  border-bottom: 4px solid var(--col-oro-antico);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px; /* spazio tra bandierine e bottone */
}

/* Rettangolo centrale */
.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 150px;
  background-color: var(--col-bordeaux);
  border-bottom: 4px solid var(--col-oro-antico);
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.header-left .email {
  display: block;
  margin-left: -50px;
  margin-top: -50px;
  color: var(--col-crema);
  transition: color 0.3s ease;
}

.header-left .email:hover {
  color: var(--col-oro-antico);
  text-decoration: underline;
}

.social-icons {
  display: flex;
  flex-direction: column;   /* verticale */
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-left: -160px;
}

.social-icons a {
  color: var(--col-crema);
  font-size: 1.8rem;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--col-oro-antico);
}


.btn-primary {
  background-color: var(--col-bordeaux);
  color: var(--col-crema);
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  border: 1px solid var(--col-oro-antico);
  transition: background-color 0.3s ease;
  transform: translate(25px, -25px);
}
.btn-primary:hover {
  background-color: var(--col-oro-antico);
  color: var(--col-text-dark);
}

.logo {
  max-height: 200px;
}

/* Motivo greco */
.greek-wave {
  margin-top: 150px; /* per farlo aderire all'header */
  margin-bottom: -10px;
  text-align: center;
}

.greek-wave img {
  max-width: 100%;
  height: auto;
}






.carousel {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  z-index: 0;   /* carosello dietro l’header */
}

.carousel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.carousel-slide.active {
  opacity: 1;
  z-index: 0;  /* la slide resta sotto l’header */
}

.carousel .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

.carousel-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--col-crema);
  text-align: center;
  z-index: 2;
  padding: 20px;
}



.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.3);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  z-index: 3;   /* sopra overlay e slide */
}
.carousel-btn.prev { left: 20px; }
.carousel-btn.next { right: 20px; }

.carousel-btn:hover {
  background: rgba(255,255,255,0.6);
}






.apartment-card {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0;
  border: 1px solid var(--col-oro-antico);
  background: var(--col-crema);
}

/* Sezione foto */
.apartment-photos {
  flex: 1 1 60%;
  padding: 10px;
}

/* Foto principali */
.main-photo {
  width: 100%;
  height: 300px; /* altezza fissa */
  overflow: hidden;
  margin-bottom: 10px;
}
.main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* riempie senza deformarsi */
  display: block;
}


.small-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

/* Foto piccole normali */
.small-photos img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Foto con overlay */
.photo-overlay {
  position: relative;
  width: 100%;          /* prende lo spazio della colonna */
  height: 200px;        /* stessa altezza */
  overflow: hidden;
}

.photo-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.photo-overlay .overlay-text {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 1rem;
  opacity: 1;
  transition: background-color 0.5s ease;
  cursor: pointer;
}

.photo-overlay:hover .overlay-text {
  background: var(--col-oro-antico);
  opacity: 1;
}


/* Foto con overlay 2 */
.photo-overlay-2 {
  position: relative;
  width: 100%;          /* prende lo spazio della colonna */
  height: 200px;        /* stessa altezza */
  overflow: hidden;
}

.photo-overlay-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.photo-overlay-2 .overlay-text {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 1rem;
  opacity: 1;
  transition: background-color 0.5s ease;
  cursor: pointer;
}

.photo-overlay-2:hover .overlay-text {
  background: var(--col-oro-antico);
  opacity: 1;
}



/* Sezione descrizione */
.apartment-desc {
  flex: 1 1 40%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.apartment-desc h2 {
  color: var(--col-bordeaux);
  margin-bottom: 15px;
}
.apartment-desc p {
  margin-bottom: 15px;
  color: var(--col-text-dark)
}
.services {
  list-style: none;
  margin-bottom: 20px;
  padding: 0;
  color: var(--col-text-dark)
}
.services li {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* Modal */
.modal {
  display: none; /* nascosto */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
}
.modal-content {
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: 80%;
  text-align: center;
}
.modal-slide {
  display: flex;
  align-items: center;

  justify-content: center;
  height: 100%;
}

.modal-slide img {
  max-width: 100%;
  max-height: 90vh;   /* limita in altezza per non uscire dallo schermo */
  object-fit: contain; /* mantieni proporzioni */
}


.modal-slide-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.modal-slide-2 img {
  max-width: 100%;
  max-height: 90vh;   /* limita in altezza per non uscire dallo schermo */
  object-fit: contain; /* mantieni proporzioni */
}

.modal .close {
  position: absolute;
  top: 20px; right: 40px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
}
.modal-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.3);
  border: none;
  color: white;
  font-size: 2rem;
  padding: 10px;
  cursor: pointer;
}
.modal-btn.prev { left: 20px; }
.modal-btn.next { right: 20px; }



.call-container{
  width: 200px;
}



.taxi-section {
  background-color: var(--col-bordeaux);
  color: var(--col-crema);
  text-align: center;
  padding: 60px 20px;
}

.taxi-section h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: 'Bodoni Moda', serif;
}

.taxi-section p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.btn-taxi {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--col-oro-antico);
  color: var(--col-crema);
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-taxi:hover {
  background-color: #a67c00; /* oro più scuro */
}



.site-footer {
  background-color: var(--col-crema); /* stesso bordeaux dell’header */
  color: var(--col-text-dark);               /* testo chiaro */
  padding: 40px 20px;
  font-family: 'Bodoni Moda', serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.footer-map {
  flex: 1 1 50%;
  min-width: 300px;
}

.footer-info {
  flex: 1 1 40%;
  min-width: 250px;
  margin: auto;
}

.footer-info h3 {
  margin-bottom: 15px;
  font-size: 1.4rem;
  color: var(--col-oro-antico);
}

.footer-info p {
  margin: 5px 0;
  font-size: 1rem;
  line-height: 1.5;
}

.footer-info a {
  color: var(--col-crema);
  text-decoration: none;
}

.footer-info a:hover {
  text-decoration: underline;
}





.lang-switch {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: -40px;
  margin-bottom: 40px;
  transform: translate(25px, -25px);
}

.lang-switch .flag img {
  width: 28px;
  height: 20px;
  display: block;
  border: 1px solid var(--col-oro-antico);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.lang-switch .flag:hover img {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}




/* Base reveal */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-offset, 50px));
  will-change: opacity, transform;
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}

/* In viewport */
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Direzione: giù = entra da sotto, su = entra da sopra */
.reveal.dir-down { --reveal-offset: 50px; }  /* scorrendo verso il basso */
.reveal.dir-up   { --reveal-offset: -50px; } /* scorrendo verso l’alto */

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}




/* ========== Responsive Header & Greek Wave ========== */

/* Variabili dimensioni (desktop) */
:root{
  --hdr-circle: 300px; /* diametro quarti */
  --hdr-center: 150px; /* altezza barra centrale bordeaux */
  --hdr-z: 100;
}

/* Collega le dimensioni esistenti alle variabili */
.site-header{
  height: var(--hdr-circle);
  z-index: var(--hdr-z);
}
.header-left,
.header-right{
  width: var(--hdr-circle);
  height: var(--hdr-circle);
}
.header-center{
  height: var(--hdr-center);
}
.greek-wave{
  margin-top: var(--hdr-center); /* incolla l’onda sotto la barra */
}

/* --------- Tablet (iPad) --------- */
@media (max-width: 1024px){
  :root{
    --hdr-circle: 220px;
    --hdr-center: 120px;
  }

  /* ridimensiona logo e testi */
  .logo{ max-height: 140px; }
  .header-left .email{ margin-left: 0; margin-top: -30px; font-size: 0.9rem; }
  .social-icons{ margin-left: -85px; gap: 10px; }
  .social-icons a{ font-size: 1.6rem; }

  /* sposta il bottone un po' meno aggressivo */
  .btn-primary{ transform: translate(10px,-15px); }
  .lang-switch{ margin-top:-20px; margin-bottom:20px; transform: translate(10px,-15px); }
  /* l’onda resta attaccata alla barra centrale, non serve altro */
}

/* --------- Smartphone --------- */
/* ===== Smartphone (iPhone & co.) ===== */
@media (max-width: 550px){
  :root{
    --hdr-circle: 150px;  /* scala i quarti ma restano visibili */
    --hdr-center: 100px;  /* banda centrale più bassa */
  }

  .header-left, .header-right{
    width: var(--hdr-circle);
    height: var(--hdr-circle);
    border-width: 3px;     /* bordi leggermente più sottili */
  }

  /* logo più compatto */
  .logo{ max-height: 120px; }

  /* se email/social o pulsante toccano i bordi, riduci padding/margini qui */
  .btn-primary{ padding: 8px 14px; font-size: .95rem; }
  .header-left .email{ font-size: .8rem; }
  .social-icons{margin-left: -80px;}
  .social-icons a{ font-size: 1.25rem; }
}

/* Micro-fix per schermi molto stretti (es. 360px) */
@media (max-width: 380px){
  :root{
    --hdr-circle: 150px;
    --hdr-center: 100px;
  }
  .logo{ max-height: 100px; }

  /* se email/social o pulsante toccano i bordi, riduci padding/margini qui */
  .btn-primary{ padding: 8px 14px; font-size: .8rem; }
  .header-left .email{ font-size: .7rem; }
  .social-icons{margin-left: -80px;}
  .social-icons a{ font-size: 1.0rem; }
}





/* Responsive: leggermente più piccole su smartphone */
@media (max-width: 640px){
  .lang-switch{ margin-top:-10px; margin-bottom:10px;}
  .lang-switch .flag img {
    width: 24px;
    height: 17px;
  }
}



.flag-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 20px;
  font-size: 18px; line-height: 1;
  border: 1px solid var(--col-oro-antico);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.flag-emoji:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.25); }

@media (max-width: 640px){
  .flag-emoji { width: 24px; height: 17px; font-size: 16px; }
}