/* Cosa progettiamo: griglia uniforme di fotografie, tre famiglie. */
.famiglie{display:flex;flex-direction:column;gap:4rem}
.famiglia__testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;padding-bottom:.875rem;margin-bottom:1.5rem;border-bottom:1px solid var(--wp--preset--color--pietra-scura)}
.famiglia__titolo{font-family:var(--wp--preset--font-family--cormorant);font-size:clamp(1.75rem,2.6vw,2.5rem);font-weight:400;line-height:1.06;margin:.25rem 0 0;text-wrap:balance}
.famiglia__quante{margin:0;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wp--preset--color--muto);white-space:nowrap}
.famiglia__aree{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.875rem}

.area{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;text-decoration:none;color:#fff;background:var(--wp--preset--color--pietra-scura);touch-action:manipulation}
.area__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.area__velo{position:absolute;inset:0;background:linear-gradient(0deg,rgba(21,32,26,.88) 0%,rgba(21,32,26,.55) 34%,rgba(21,32,26,.12) 66%,rgba(21,32,26,.04) 100%)}
.area__testo{position:absolute;left:1rem;right:1rem;bottom:.9375rem;display:flex;flex-direction:column;gap:.1875rem}
.area__nome{font-family:var(--wp--preset--font-family--cormorant);font-size:1.5rem;line-height:1.1;text-wrap:balance;text-shadow:0 1px 14px rgba(21,32,26,.55)}
.area__n{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}
.area:hover .area__foto,.area:focus-visible .area__foto{transform:scale(1.05)}
.area:focus-visible{outline:2px solid var(--wp--preset--color--verde);outline-offset:3px}

/* Sezioni ancora senza fotografie e tessera di chiusura riga. */
.area--senza-foto{background:linear-gradient(150deg,#283b30 0%,#1a2721 100%)}
.area--tutti{background:linear-gradient(150deg,#283b30 0%,#1a2721 100%);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center}
.area--tutti .area__nome{text-shadow:none;font-size:1.5rem;color:#fff}
.area--tutti .area__n{color:rgba(255,255,255,.7)}
.area--tutti:hover .area__nome{color:var(--wp--preset--color--verde-chiaro,#9fc7a8)}

/* testo della testata leggibile anche dove la foto e' chiara */
.hero-casa .wp-block-cover__inner-container{text-shadow:0 1px 22px rgba(21,32,26,.6)}

@media (max-width:1100px){.famiglia__aree{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
  .famiglie{gap:3rem}
  .famiglia__testa{flex-direction:column;align-items:flex-start;gap:.25rem}
  .famiglia__aree{grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem}
  .area__nome{font-size:1.125rem}
  .area__testo{left:.75rem;right:.75rem;bottom:.75rem}
  /* a 390px la spaziatura piena manda l'occhiello a filo del margine */
  .hero-casa .eyebrow{letter-spacing:.12em}
  /* sul telefono il testo della testata e' alto quanto mezza foto:
     senza una velatura piu' forte le righe chiare spariscono sul verde */
  .hero-casa .wp-block-cover__gradient-background{
    background:linear-gradient(0deg,rgba(21,32,26,.95) 0%,rgba(21,32,26,.88) 40%,rgba(21,32,26,.72) 72%,rgba(21,32,26,.45) 100%)!important
  }
}
@media (prefers-reduced-motion:reduce){.area__foto{transition:none}}