/* ============================================================
   ALI GAADOUDI — PAGINA CONTATTI
   Carica DOPO styles.css, sections.css e pages.css
============================================================ */

/* ============================================================
   COSA ASPETTARSI — 3 step in palette
============================================================ */
.expect-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  list-style: none;
}
.expect-3 li {
  padding: 2.25rem 1.875rem;
  border-radius: var(--r-lg);
  color: var(--white);
  box-shadow: 0 24px 50px -22px rgba(11, 31, 64, .35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.expect-3 li:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -22px rgba(11, 31, 64, .45); }

.expect-3 li:nth-child(1) { background: linear-gradient(160deg, #14305C 0%, #0B1F40 100%); }
.expect-3 li:nth-child(2) { background: linear-gradient(160deg, #FF9A5A 0%, #F0762B 100%); color: var(--navy-900); }
.expect-3 li:nth-child(3) { background: linear-gradient(160deg, #BE898E 0%, #8A5459 100%); }

.expect-3 .ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.375rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .24);
  color: currentColor;
}
.expect-3 li:nth-child(2) .ico { background: rgba(6, 20, 40, .12); border-color: rgba(6, 20, 40, .18); }
.expect-3 .ico svg { width: 22px; height: 22px; }

.expect-3 h3 { font-size: var(--fs-h3); color: inherit; letter-spacing: -0.025em; }
.expect-3 p  { margin-top: .625rem; font-size: var(--fs-sm); line-height: 1.7; color: rgba(255, 255, 255, .82); }
.expect-3 li:nth-child(2) p { color: rgba(6, 20, 40, .78); }

/* ============================================================
   BOOKING — calendario + form
============================================================ */
.booking-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: clamp(2rem, 4vw, 3rem);
}

.panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-md);
}
.panel-head { margin-bottom: 1.75rem; }
.panel-head h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
.panel-head p  { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--text-body); }

/* Calendly embed */
.calendly-inline-widget {
  min-width: 320px;
  height: 680px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* fallback se il widget non carica */
.calendly-fallback {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 2rem;
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1px dashed var(--cream-line);
  text-align: center;
}
.calendly-fallback p { margin-bottom: 1.25rem; font-size: var(--fs-sm); color: var(--text-body); }

/* ============================================================
   FORM
============================================================ */
.form-grid { display: grid; gap: 1.125rem; }

.field { display: flex; flex-direction: column; gap: .5rem; }
.field label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field .req { color: var(--orange-deep); }

.field input,
.field textarea {
  width: 100%;
  padding: .875rem 1.125rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--white);
  font-family: var(--font);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: #B6BCC5; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 145, 77, .14);
}

/* Nota di aiuto sotto un singolo campo (es. il prefisso telefonico).
   Il margine negativo recupera parte del gap di .field, così la riga
   resta visivamente agganciata al campo a cui si riferisce. */
.field-hint {
  margin-top: -.125rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.form-note {
  margin-top: .25rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-muted);
}
.form-note a { color: var(--navy); font-weight: 600; }

.form-submit { margin-top: .5rem; }
.form-submit .btn { width: 100%; }

/* messaggio di stato */
.form-status {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.form-status.ok {
  display: block;
  background: rgba(52, 168, 83, .10);
  border: 1px solid rgba(52, 168, 83, .30);
  color: #1E7B38;
}
.form-status.error {
  display: block;
  background: rgba(234, 67, 53, .08);
  border: 1px solid rgba(234, 67, 53, .28);
  color: #B3261E;
}

/* ============================================================
   CONTATTI RAPIDI
============================================================ */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(3rem, 5vw, 4rem);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.5rem 1.625rem;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--hairline);
  box-shadow: var(--sh-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 145, 77, .45);
  box-shadow: var(--sh-md);
}

.contact-card .ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(11, 31, 64, .06);
  color: var(--navy);
}
.contact-card:nth-child(2) .ico { background: rgba(255, 145, 77, .16);  color: var(--orange-deep); }
.contact-card:nth-child(3) .ico { background: rgba(175, 119, 124, .16); color: var(--rose-deep); }
.contact-card .ico svg { width: 21px; height: 21px; }

.contact-card .txt { min-width: 0; }
.contact-card .kicker {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-card .val {
  display: block;
  margin-top: .1875rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

/* ============================================================
   LOCATION — mappa
============================================================ */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.location-copy h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
.location-copy p  { margin-top: 1.25rem; font-size: var(--fs-body); line-height: 1.8; color: var(--text-body); }

.location-facts { margin-top: 2rem; }
.location-facts li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .875rem;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-body);
}
.location-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: .55rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.location-facts .font-semibold { color: var(--text); }

.map {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--hairline);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(20%) contrast(1.02);
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 1080px) {
  .booking-grid  { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .expect-3      { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}

/* tablet: due colonne invece di una */
@media (min-width: 721px) and (max-width: 1080px) {
  .contact-cards,
  .expect-3 { grid-template-columns: repeat(2, 1fr); max-width: none; margin-inline: 0; }
}

@media (max-width: 900px) {
  .location-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .map { order: 1; aspect-ratio: 16 / 10; }
  .location-copy { order: 2; }
}

@media (max-width: 640px) {
  .calendly-inline-widget { height: 620px; }
}

/* Trappola antispam del form: deve esistere nel documento ma non essere
   né visibile né raggiungibile. Niente display:none, che alcuni bot
   riconoscono: la spostiamo fuori dallo schermo. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}