/* ==========================================================================
   Pagina "Contatti" (/contatti/)
   Valori ripresi da post-2588.css (Elementor) del sito originale.
   ========================================================================== */

/* --- Sezione 1: foto + titolo + recapiti --------------------------------- */
.ct-hero {
  background: var(--c-primary);
  padding-inline: 5%;
}
.ct-hero__inner {
  max-width: 1440px;
  margin-inline: auto;
  /* le % del padding si riferiscono alla larghezza utile della sezione (come in Elementor);
     -5px compensa lo scarto dell'header originale; mai meno dell'altezza dell'header */
  padding-top: max(calc(9% - 5px), calc(var(--header-h) + 12px));
  padding-bottom: 5%;
  display: flex;
  align-items: stretch;
  gap: 26px;
}

.ct-hero__media {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
}
.ct-hero__media img {
  width: min(100%, var(--portrait));
  aspect-ratio: 1;
  object-fit: cover;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0 15px 10px 0 rgba(0, 0, 0, .5);
}

.ct-hero__text {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-right: 20%;
}
.ct-hero__text h1 {
  margin: 0;
  line-height: 1;
}
/* nell'originale il paragrafo ha font-family "Rooney" (non caricato) → serif di sistema */
.ct-hero__intro {
  margin: 40px 0;
  font-family: Times, "Times New Roman", serif;
  font-size: 21.2px;
  font-weight: 400;
  line-height: 1.13; /* = "normal" di Times nell'originale (24px) */
  color: #221c4a;
}

.ct-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-style: italic;
  font-weight: 700;
  color: var(--c-text);
}
.ct-details a {
  color: var(--c-accent);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.ct-details a .sr-only { text-transform: none; }
.ct-details a:hover,
.ct-details a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* --- Sezione 2: dove si trova lo studio (mappa: studio-map.css) ---------- */
.ct-studio { background: var(--c-secondary); padding: 80px 5%; }
.ct-studio__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: 28px 60px;
}
.ct-studio h2 { margin: 0 0 24px; color: var(--c-text); font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; }
.ct-studio__address { margin: 0 0 10px; font-size: 22px; font-weight: 700; line-height: 1.35; }
.ct-studio__text p { margin: 0 0 30px; font-size: 18px; }
@media (min-width: 768px) {
  .ct-studio .studio-map__frame { min-height: clamp(360px, 40vw, 440px); }
}

/* --- Sezione 3: form ----------------------------------------------------- */
.ct-form {
  background: #61679d;
  padding: 5% 0;
}
.ct-form__inner {
  width: min(50%, 570px);
  margin-inline: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ct-form h2 {
  margin: 0;
  /* 51px come l'originale; sotto i ~390px si riduce perché "appuntamento" non esca dallo schermo */
  font-size: min(51px, 13.6vw - 2px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.ct-form__lead {
  margin: 0 0 .9em;
  padding-inline: 15%;
  text-align: center;
  color: var(--c-secondary);
}

/* form condiviso (partials/contact-form.njk) adattato alle misure di questa pagina */
.ct-form .contact-form { max-width: none; width: 100%; margin: 0; }
.ct-form .contact-form .field input,
.ct-form .contact-form .field textarea {
  min-height: 59px;
  padding: 7px 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  background: #61679d;
  border-radius: 37px;
}
/* display:block evita lo spazio della baseline sotto la textarea (inline-block) */
.ct-form .contact-form .field textarea { display: block; min-height: 0; }
.ct-form .contact-form ::placeholder { color: rgba(255, 255, 255, .6); }
.ct-form .contact-form .acceptance {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
.ct-form .contact-form .acceptance input {
  width: 13px;
  height: 13px;
  margin: 0;
  vertical-align: 0;
}
.ct-form .contact-form .btn {
  font-size: 18px;
  padding: 20px 40px;
  border-radius: 42px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ct-studio__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; }
  .ct-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 5px);
  }
  .ct-hero__inner {
    flex: 1 0 auto;
    width: 100%;
    flex-direction: column;
    gap: 62px;
    padding-top: max(calc(15% - 5px), calc(var(--header-h) + 12px));
    padding-bottom: 15%;
  }
  .ct-hero__media { flex: 0 0 auto; width: 100%; }
  /* ritratto: stessa misura delle altre pagine, entro la larghezza disponibile */
  .ct-hero__media img { width: min(100%, var(--portrait)); }
  .ct-hero__text { flex: 1 0 auto; padding-right: 0; }
}

/* --- Mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
  .ct-hero__inner {
    flex-direction: column-reverse;
    gap: 24px;
    padding-top: max(calc(40% - 5px), calc(var(--header-h) + 12px));
  }
  .ct-studio { padding: 50px 5% 56px; }
  .ct-studio__inner { grid-template-columns: 1fr; }
  .ct-studio__text { text-align: center; }
  .ct-form { padding: 8% 0 12%; }
  .ct-form__inner { width: 100%; }
}