/* ==========================================================================
   ESTRIA — Contatti (frame Contatti-1: intro + form di contatto)
   Colori locali dal Figma non presenti nei token: #737373 placeholder
   ========================================================================== */

body {
  background: var(--black);
}

/* CTA navbar: su questa pagina Figma la mostra arancione con testo nero
   (variante Default-White-1). Override locale come su manifesto.css:
   components.css non prevede una CTA arancio per la navbar on-dark.
   Debug 0812c: il riempimento dell'hover era nero, ora è #595959 (grigio-1)
   come chiesto in lista debug — cioè quello di .btn::before, per cui qui
   l'override non serve più ed è stato tolto. */
.navbar--on-dark .navbar__cta {
  background: var(--arancio-1);
  color: var(--black);
}

@media (hover: hover) {
  .navbar--on-dark .navbar__cta:hover {
    color: var(--grigio-3);
  }
}

.navbar--on-dark .navbar__cta:active {
  color: var(--grigio-3);
}

/* Layout ------------------------------------------------------------------ */

.contact {
  background: var(--black);
  color: var(--grigio-3);
  padding-top: 190px;  /* 70 navbar + 120 */
  padding-bottom: 120px;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 464fr) minmax(0, 958fr);
  gap: 30px;
  align-items: start;
}

/* Colonna sinistra: intro --------------------------------------------------- */

.contact__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

/* il titolo scala con la colonna alle larghezze intermedie (come prenota.css);
   il ramo mobile lo riporta a 40/44 più sotto */
.contact__intro h1 {
  font-size: clamp(32px, 4.2vw, 66px);
  line-height: 1.1;
}

.contact__desc {
  color: var(--grigio-2);
}

.contact__connect {
  display: flex;
  align-items: center;
  gap: 30px;
}

.contact__social {
  display: flex;
  align-items: center;
  gap: 30px;
}

.contact__social a {
  display: flex;
  color: var(--grigio-3);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .contact__social a:hover {
    color: var(--arancio-1);
  }
}

.contact__social a:active {
  color: var(--arancio-1);
}

/* gli SVG social sono neri: colorati via mask come le icone */
.icon--social-in {
  --icon: url("../../assets/logos/social-2.svg");
  -webkit-mask-image: url("../../assets/logos/social-2.svg");
  mask-image: url("../../assets/logos/social-2.svg");
}

/* Colonna destra: form (componente Form-1) ---------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-form[hidden] {
  display: none;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

/* campo: solo bordo inferiore 1px grigio-1, testo mono come il placeholder.
   Stati dal componente Form-1: Default trasparente/testo #737373;
   hover (1-H) fill grigio-5; click/focus (1-CLICK) fill grigio-5 e
   testo #F3F3F3; deselezionato torna al default. Il bordo resta grigio-1. */
.contact-form__input {
  width: 100%;
  min-height: 50px;
  padding: 15px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grigio-1);
  border-radius: 0;
  color: #737373;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.contact-form__input::placeholder {
  color: #737373;
  text-transform: uppercase;
  opacity: 1;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .contact-form__input:hover {
    background: var(--grigio-5);
  }
}

.contact-form__input:focus {
  outline: none;
  background: var(--grigio-5);
  color: var(--grigio-3);
}

.contact-form__input:focus::placeholder {
  color: var(--grigio-3);
}

.contact-form__message {
  grid-column: 1 / -1;
  height: 120px;
  resize: vertical;
}

/* honeypot anti-spam: invisibile agli umani, non usare display:none
   (alcuni bot lo saltano) */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__error {
  color: var(--white);
  border-left: 3px solid var(--arancio-1);
  padding-left: 10px;
}

.contact-form__error[hidden] {
  display: none;
}

/* riga finale: checkbox privacy a sinistra, CTA Invia a destra */

.contact-form__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
}

.contact-form__privacy {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grigio-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.3px;
  cursor: pointer;
}

/* Casella-1: default solo bordo; hover (Casella-1-H) fill grigio-5;
   spuntata (Casella-1-Click) fill grigio-5 + Icona-1 Check-1 in grigio-3 */
.contact-form__check {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--grigio-1);
  border-radius: 1px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .contact-form__privacy:hover .contact-form__check {
    background: var(--grigio-5);
  }
}

.contact-form__check:checked {
  background: var(--grigio-5);
}

.contact-form__check:checked::after {
  content: "";
  position: absolute;
  inset: -1px; /* copre anche il bordo: il box torna ai 15px del design */
  background: var(--grigio-3);
  -webkit-mask: url("../../assets/icons/icon-check.svg") no-repeat center / contain;
  mask: url("../../assets/icons/icon-check.svg") no-repeat center / contain;
}

.contact-form__check:focus-visible {
  outline: 1px solid var(--arancio-1);
  outline-offset: 2px;
}

.contact-form__submit {
  width: 100%;
}

/* Conferma invio ------------------------------------------------------------ */

.contact-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-success[hidden] {
  display: none;
}

.contact-success h2 {
  color: var(--white);
}

.contact-success p {
  color: var(--grigio-2);
}

/* Mobile --------------------------------------------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .contact {
    padding-top: 130px;  /* 70 navbar + 60 */
    padding-bottom: 60px;
  }

  .contact__grid {
    display: flex;
    flex-direction: column;
    /* annulla l'align-items:start desktop: i figli (pannello form) devono
       riempire lo schermo in orizzontale, come le caselle nel Figma mobile */
    align-items: stretch;
    gap: 60px;
  }

  /* ripristina il t-2 mobile sopra il clamp desktop (stessa specificità) */
  .contact__intro h1 {
    font-size: 40px;
    line-height: 44px;
  }

  .contact-form__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .contact-form__footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .contact-form__privacy {
    align-self: flex-start;
  }

  /* la CTA di invio su mobile è una L-1 */
  .contact-form__submit {
    min-height: 60px;
    padding: 20px 30px;
  }
}