/* ==========================================================================
   Home page (/)
   Valori ripresi da post-2010.css (pagina Elementor della home).
   Breakpoint: 1024px (tablet) e 767px (mobile), come nell'originale.
   ========================================================================== */

/* --- Elementi comuni della pagina ----------------------------------------- */
.home-hero h1,
.home-feature h2,
.home-posts__title,
.home-contact__title {
  margin: 0;
  font-size: 51px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  overflow-wrap: break-word;
}

.home-feature strong { font-weight: 400; }

/* Bottoni pillola delle sezioni: più alti, senza ombra, hover blu notte */
.home-btn {
  padding: 25px 50px;
  border-radius: 45px;
  box-shadow: none;
  font-size: 15px;
  align-self: flex-start;
}
.home-btn:hover,
.home-btn:focus-visible { background: var(--c-text); color: var(--c-accent); }

/* --- 1. Hero ---------------------------------------------------------------- */
.home-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  /* l'header (sticky) si sovrappone: il padding verticale lo compensa */
  padding: var(--header-h) 5%;
  background: var(--c-primary);
}
.home-hero__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.home-hero__photo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.home-hero__photo img {
  width: 72%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 15px 10px 0 rgba(0, 0, 0, .5);
}
.home-hero__text {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-hero h1 { color: var(--c-accent); }
/* Nell'originale il paragrafo ha uno stile inline "font-family: Rooney" (font non caricato),
   quindi viene mostrato col serif di sistema: lo riproduciamo. */
.home-hero__lead {
  margin: 50px 0;
  font-family: "Rooney", "Times New Roman", Times, serif;
  font-size: 21.2px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.15;
  color: #221c4a;
}
/* titolo e introduzione brevi dell'hero mobile dell'originale: nascosti su tablet e desktop */
.home-hero__m-title,
.home-hero__lead--m { display: none; }
.home-hero__m-title {
  margin: 0 0 24px;
  font-size: 35px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  color: var(--c-accent);
}

/* --- 2-4. Sezioni "di cosa mi occupo" --------------------------------------- */
.home-feature {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 5%;
}
.home-feature--adulti { background: var(--c-secondary); }
.home-feature--infanzia { background: var(--c-peach); }
.home-feature--neuro { background: var(--c-indigo); }

.home-feature__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.home-feature__text {
  flex: 0 0 50%;
  min-width: 0;
  padding-right: 5%;
  display: flex;
  flex-direction: column;
}
.home-feature__media {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.home-feature__media img { width: 100%; }
.home-feature--neuro .home-feature__media img { width: 63%; }

.home-feature--adulti h2 { color: var(--c-violet); }
.home-feature--infanzia h2 { color: var(--c-brown); }
.home-feature--neuro h2 { color: var(--c-navy); }

.home-feature__body {
  margin: 50px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-text);
}
.home-feature__body p { margin: 0 0 .9em; }
.home-feature__body p:last-child { margin-bottom: 0; }
.home-feature--neuro .home-feature__body {
  color: var(--c-secondary);
  /* nell'originale due paragrafi vuoti allungano lo spazio prima del bottone */
  margin-bottom: 127px;
}
.home-feature__body a {
  color: var(--c-accent);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}
.home-feature__body a:hover,
.home-feature__body a:focus-visible { text-decoration: underline; }

/* --- 5. Ultimi articoli -------------------------------------------------------- */
/* nell'originale i padding % si riferiscono alla larghezza interna (92%):
   3% e 10% di 92% = 2.76% e 9.2% */
.home-posts {
  background: var(--c-primary);
  padding: 2.76% 4% 9.2%;
}
.home-posts__inner {
  max-width: 1024px;
  margin-inline: auto;
}
.home-posts__title {
  margin: 33px 0 30px;
  color: var(--c-accent);
}
.home-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 25px;
}
.post-card { display: flex; flex-direction: column; }
.post-card__thumb {
  display: block;
  margin-bottom: 20px;
  aspect-ratio: 1 / .65;
  overflow: hidden;
}
.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.post-card__thumb:hover img { transform: scale(1.04); }
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; }
.post-card__title {
  margin: 0 0 5px;
  font-size: 23px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
}
.post-card__title a {
  color: var(--c-accent);
  text-decoration: none;
  text-transform: uppercase;
}
.post-card__title a:hover,
.post-card__title a:focus-visible { text-decoration: underline; }
.post-card__meta {
  margin: 0 0 11px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-accent);
}
.post-card__excerpt {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
}
.post-card__more {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-accent);
  text-transform: uppercase;
  text-decoration: none;
}
.post-card__more:hover,
.post-card__more:focus-visible { text-decoration: underline; }

/* --- 6. Contatti ------------------------------------------------------------------ */
.home-contact {
  background: #61679d;
  padding: 5% 0;
  scroll-margin-top: var(--header-h);
}
.home-contact__inner {
  width: 50%;
  max-width: 570px;
  margin-inline: auto;
  padding: 10px;
  text-align: center;
}
.home-contact__title {
  color: var(--c-accent);
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
  /* come nell'originale (e in contatti.css): dove la colonna è stretta (tablet 768px, mobile)
     "appuntamento" sborda di qualche px nel padding invece di andare a capo dentro la parola */
  overflow-wrap: normal;
}
.home-contact__intro {
  margin: 20px 0 34px;
  padding-inline: 15%;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-secondary);
}
/* Il form condiviso: misure dell'originale (campi 59px, testo 18px, bottone con ombra) */
.home-contact .contact-form {
  max-width: 550px;
  text-align: left;
}
.home-contact .contact-form .field input,
.home-contact .contact-form .field textarea {
  background: #61679d;
  border-radius: 37px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  padding: 7px 20px;
  min-height: 59px;
}
.home-contact .contact-form .field textarea { min-height: 117px; }
.home-contact .contact-form .acceptance {
  display: block;
  font-size: 16px;
  line-height: 1.5;
}
.home-contact .contact-form .acceptance input { display: inline; margin: 0; vertical-align: 0; }
.home-contact .contact-form .acceptance label { display: inline; }
.home-contact .contact-form .btn {
  padding: 20px 40px;
  font-size: 18px;
  border-radius: 42px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

/* --- Tablet (<= 1024px) ----------------------------------------------------- */
@media (max-width: 1024px) {
  /* nell'originale (container "boxed") il padding verticale del 15% si riferisce alla
     larghezza interna (90%): 15% di 90% = 13.5% */
  .home-hero {
    padding: 13.5% 5%;
  }
  .home-hero__inner,
  .home-feature__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 62px;
  }
  /* come i widget immagine di Elementor: la % si applica alla larghezza intrinseca
     dell'immagine (attributo width 800, 637 per il barattolo), non a tutta la colonna */
  .home-hero__photo img { width: calc(.72 * min(100%, 800px)); }
  .home-hero__text,
  .home-feature__text { flex: none; padding-right: 0; }

  .home-feature { padding: 13.5% 5%; }
  .home-feature__media img { width: min(100%, 800px); }
  .home-feature--neuro .home-feature__media img { width: calc(.63 * min(100%, 637px)); }

  /* card una sotto l'altra a tutta larghezza (immagine sopra, testo sotto), come l'originale.
     Nell'originale (container 35622e0) su tablet la sezione ha anche margin 15% 0:
     sopra e sotto resta visibile lo sfondo bianco della pagina. */
  .home .site-main { background: #fff; }
  .home-posts { margin-block: 15%; }
  .home-posts__grid { grid-template-columns: 1fr; }
}

/* --- Mobile (<= 767px) ------------------------------------------------------- */
@media (max-width: 767px) {
  .home-hero {
    align-items: flex-start;
    padding: calc(var(--header-h) + 37px) 5% 15%;
  }
  .home-hero__inner { gap: 10px; }
  .home-hero__photo img { width: 77%; box-shadow: none; }
  /* l'hero mobile dell'originale ha un titolo e un'introduzione propri:
     l'h1 resta solo per lettori di schermo, il paragrafo lungo si nasconde */
  .home-hero h1 {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .home-hero__lead--d { display: none; }
  .home-hero__m-title,
  .home-hero__lead--m { display: block; }
  .home-hero__lead { margin: 0 0 22px; }
  .home-btn {
    align-self: stretch;
    text-align: center;
  }

  /* 51px come l'originale; si riduce solo dove la parola più lunga uscirebbe dalla colonna
     ("Psicoterapia" sotto i ~350px). "neurosviluppo" a 51px è più largo della colonna già
     a 390px (nell'originale esce dallo schermo), quindi quel titolo si riduce prima. */
  .home-feature h2 { font-size: min(51px, 14.5vw); }
  .home-feature--neuro h2 { font-size: min(51px, 12vw); }
  /* come in contatti.css: si riduce sotto i ~390px perché "appuntamento" non esca dallo schermo */
  .home-contact__title {
    font-size: min(51px, 13.6vw - 2px);
    text-wrap: balance;
  }

  .home-feature { padding: 13.5% 5%; align-items: flex-end; }
  .home-feature__inner { flex-direction: column-reverse; gap: 24px; }
  .home-feature__media img { width: 100%; }
  .home-feature--neuro .home-feature__media img { width: 50%; }

  .home .site-main { background: none; }
  .home-posts { margin-block: 0; padding: 14% 8%; }
  .home-posts__title { margin-bottom: 30px; }
  .post-card__thumb { aspect-ratio: 2 / 1; }

  .home-contact { padding: 5% 0; }
  .home-contact__inner { width: 100%; }
}