/* Masseria Trafone — foglio di stile unico */

:root{
  --terra:      #9C4A26;
  --terra-soft: #C2764C;
  --pietra:     #FBF7F1;
  --pietra-2:   #F1E9DE;
  --inchiostro: #2E2721;
  --grigio:     #6E6257;
  --bordo:      #E3D8C9;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--pietra);
  color:var(--inchiostro);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--terra); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- intestazione ---------- */

.site-header{
  border-bottom:1px solid var(--bordo);
  background:var(--pietra);
  position:sticky; top:0; z-index:20;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-top:16px; padding-bottom:16px; flex-wrap:wrap;
}

.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; }
.brand img{ width:96px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{
  font-family:var(--serif); font-size:1.32rem; font-weight:600;
  letter-spacing:.045em; color:var(--terra);
}
.brand-sub{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grigio);
  margin-top:3px;
}

.site-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.site-nav a{
  text-decoration:none; color:var(--grigio); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{ color:var(--terra); border-bottom-color:var(--terra-soft); }

/* ---------- menu a panino (solo mobile) ---------- */

.menu-toggle{
  display:none;             /* da desktop il menu e sempre in chiaro */
  width:46px; height:46px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--bordo); border-radius:6px;
  color:var(--terra); cursor:pointer;
}
.menu-toggle:hover{ border-color:var(--terra-soft); }
.menu-toggle svg{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;
}
.menu-toggle .icona-chiudi{ display:none; }
.menu-toggle.aperto .icona-menu{ display:none; }
.menu-toggle.aperto .icona-chiudi{ display:block; }

/* Soglia misurata, non stimata: logo 366px + menu 404px + divario 24px
   = 794px di contenuto, cioe 842px di finestra. Sotto gli 841px la barra
   va a capo, percio si passa al panino a 860px con un po' di margine. */
@media (max-width:860px){
  .menu-toggle{ display:flex; }
  .site-nav{
    display:none;
    order:3; width:100%;
    flex-direction:column; gap:0;
    margin-top:14px; padding-top:2px;
    border-top:1px solid var(--bordo);
  }
  .site-nav.aperto{ display:flex; }
  .site-nav a{
    padding:14px 2px;
    border-bottom:1px solid var(--bordo);
  }
  .site-nav a:last-child{ border-bottom:0; }
}

/* Su schermi stretti il marchio va rimpicciolito, altrimenti il pulsante
   del menu non ci sta accanto e va a capo lui. La riga "Alta Murgia ·
   Santeramo in Colle" e la parte piu ingombrante: sparisce per prima,
   tanto il dato compare comunque nella pagina. */
@media (max-width:560px){
  .brand img{ width:74px; }
  .brand-name{ font-size:1.12rem; }
  .brand-sub{ display:none; }
}
@media (max-width:380px){
  .wrap{ padding:0 16px; }
  .site-header .wrap{ gap:12px; }
  .brand img{ width:64px; }
  .brand-name{ font-size:1rem; }
}

/* ---------- hero ---------- */

.hero{ position:relative; }
.hero img{ width:100%; height:min(64vh,560px); object-fit:cover; object-position:center 42%; }
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(30,24,18,.10) 0%,rgba(30,24,18,.55) 100%);
  display:flex; align-items:flex-end;
}
.hero-overlay .wrap{ padding-bottom:44px; }
.hero h1{
  font-family:var(--serif); color:#fff; margin:0;
  font-size:clamp(2rem,5.4vw,3.4rem); font-weight:600; letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.hero p{
  color:#F3E9DC; margin:10px 0 0; max-width:46ch;
  font-size:1.02rem; text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* ---------- sezioni ---------- */

section{ padding:72px 0; }
section + section{ border-top:1px solid var(--bordo); }
.alt{ background:var(--pietra-2); }

.eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--terra-soft); margin:0 0 10px;
}
h2{
  font-family:var(--serif); font-weight:600; letter-spacing:.01em;
  font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0 0 18px;
}
.lead{ max-width:64ch; color:var(--grigio); margin:0 0 8px; }
.lead + .lead{ margin-top:14px; }
.lead strong{ color:var(--inchiostro); font-weight:600; }

/* ---------- gallerie ---------- */

.griglia{
  display:grid; gap:18px; margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.griglia.due{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

figure{ margin:0; }
figure img{
  width:100%; height:250px; object-fit:cover;
  border:1px solid var(--bordo); background:#fff; cursor:zoom-in;
  transition:transform .35s ease, box-shadow .35s ease;
}
.griglia.due figure img{ height:320px; }
figure img:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(46,39,33,.16); }

/* Il disegno tecnico sta nella griglia come le foto, stessa altezza, ma
   con "contain" invece di "cover": ritagliato si vedrebbe solo una fetta
   centrale del disegno. Per leggerne le quote si apre nella galleria. */
.griglia .disegno img{ object-fit:contain; background:#fff; padding:8px; }
figcaption{ font-size:.82rem; color:var(--grigio); margin-top:8px; }

/* ---------- loghi istituzionali ---------- */

/* I PNG hanno tutti la stessa altezza di tela (280px) con il marchio
   centrato dentro e normalizzato per media geometrica: basta quindi
   una sola altezza in CSS perche risultino allineati e otticamente pari.
   Lo sfondo bianco serve ai due marchi che arrivano da originali JPEG. */
/* Colonne fisse 4 / 2 / 1: sono tutti divisori esatti di 4, cosi l'ultima
   riga non resta mai spaiata come farebbe un auto-fit (che a meta strada
   dispone 3+1 e lascia un vuoto a destra). */
.loghi{
  margin-top:40px;
  display:grid; gap:16px;
  grid-template-columns:repeat(4,1fr);
}
.logo{
  width:100%; max-width:290px; justify-self:center;
  background:#fff;
  border:1px solid var(--bordo);
  padding:20px 18px;
  display:flex; align-items:center; justify-content:center;
}
.logo img{ height:66px; width:auto; }

@media (max-width:760px){ .loghi{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:380px){ .loghi{ grid-template-columns:1fr; } }

/* ---------- contatti ---------- */

/* Colonna di testo (occhiello + titolo + recapiti) a sinistra e mappa a
   destra, allineate in cima. Sotto i 760px vanno in colonna e la mappa
   passa sotto, occupando tutta la larghezza. */
.contatti-riga{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:30px 52px;
}
.contatti-testo{ flex:1 1 260px; }
.contatti{ margin-top:6px; }
.mappa{
  flex:1.5 1 400px;
  /* Allineamento ottico: il bordo della mappa combacia con la sommita
     delle maiuscole di "CONTATTI", non con il bordo del suo box. Compensa
     la mezza interlinea piu lo stacco della cassa alta dell'occhiello. */
  margin-top:6px;
}
.mappa iframe{
  display:block; width:100%; height:300px;
  border:1px solid var(--bordo);
}

.contatti p{ margin:0 0 4px; color:var(--grigio); }
.contatti p strong{ color:var(--inchiostro); font-weight:600; }
.contatti .mail{
  margin-top:16px; display:flex; align-items:center; gap:9px;
}
.contatti .mail svg{
  width:18px; height:18px; flex:none;
  fill:none; stroke:var(--terra-soft);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- piede ---------- */

.site-footer{
  background:var(--inchiostro); color:#C9BEB1; padding:38px 0; font-size:.85rem;
}
.site-footer .wrap{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; }
.site-footer a{ color:#E4C7B2; }

/* ---------- lightbox ---------- */

#lightbox{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(24,19,14,.94); align-items:center; justify-content:center;
  padding:56px 78px; cursor:zoom-out;
}
#lightbox.aperto{ display:flex; }

.lb-corpo{
  margin:0; cursor:default;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%; max-height:100%;
}
/* Annulla la regola globale "figure img" (altezza fissa 250px, sfondo
   bianco, bordo): qui l'immagine deve occupare tutto lo spazio libero.
   I limiti sono in unita di viewport per non dipendere dal flex. */
.lb-corpo img{
  width:auto; height:auto;
  max-width:calc(100vw - 150px);
  max-height:calc(100vh - 150px);
  object-fit:contain;
  border:0; background:none; cursor:default;
  transition:none;
}
.lb-corpo img:hover{ transform:none; box-shadow:none; }
.lb-corpo figcaption{
  color:#D9CCBD; font-size:.9rem; text-align:center; max-width:60ch;
}

/* Pulsanti circolari con chevron vettoriali: i glifi di testo << >>
   risultavano sottili e cambiavano forma da un font all'altro. */
#lightbox button{
  position:absolute; padding:0;
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%;
  background:rgba(247,241,232,.14);
  border:1px solid rgba(240,228,213,.42);
  color:#F7F1E8; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
#lightbox button:hover{
  background:rgba(247,241,232,.28);
  border-color:rgba(247,241,232,.8);
}
#lightbox button:active{ transform:scale(.93); }
#lightbox button svg{
  width:32px; height:32px;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}

/* centratura con margine, non con transform: altrimenti lo scale
   dello stato :active annullerebbe il posizionamento verticale */
.lb-prec,.lb-succ{ top:50%; margin-top:-31px; }
.lb-prec{ left:20px; }
.lb-succ{ right:20px; }

/* prefissati con #lightbox: altrimenti perdono contro #lightbox button */
#lightbox .lb-chiudi{ top:18px; right:20px; width:50px; height:50px; }
#lightbox .lb-chiudi svg{ width:24px; height:24px; }

.lb-conta{
  position:absolute; bottom:20px; left:0; right:0; margin:0;
  text-align:center; color:#CBBCA9;
  font-size:.8rem; letter-spacing:.18em;
}

@media (max-width:640px){
  section{ padding:52px 0; }
  figure img,.griglia.due figure img{ height:210px; }
  .loghi{ gap:12px; }
  .logo{ padding:16px 12px; }
  .logo img{ height:54px; }
  #lightbox{ padding:52px 12px; }
  #lightbox button{ width:50px; height:50px; }
  #lightbox button svg{ width:26px; height:26px; }
  .lb-prec,.lb-succ{ margin-top:-25px; }
  .lb-prec{ left:8px; }
  .lb-succ{ right:8px; }
  #lightbox .lb-chiudi{ width:44px; height:44px; top:12px; right:12px; }
  #lightbox .lb-chiudi svg{ width:22px; height:22px; }
  .contatti-riga{ gap:26px; }
  .mappa{ margin-top:4px; } /* impilate: quasi nessuna compensazione serve */
  .mappa iframe{ height:240px; }
  .lb-corpo img{
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 140px);
  }
}