/* =========================================================
   Azienda Agricola Scopeto — foglio di stile
   Ordine: 1 base · 2 menu · 3 pannelli e titoli · 4 sezioni · 5 galleria · 6 cookie · 7 schermi piccoli
   ========================================================= */

/* ---------- 1. BASE ---------- */
:root{
  --bg:#EDE3CD; --paper:#FBF6EA; --photo-bg:#F3EAD6;
  --gold:#B8862B;      /* decorazioni e titoli grandi */
  --gold-line:#D6A94A; /* cornici e filetti */
  --gold-text:#8A6419; /* testi piccoli in oro: contrasto leggibile */
  --ink:#3A2915; --sepia:#6B5334; --olive:#5F7424;
  --display:'Cinzel',Georgia,serif; --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Great Vibes',cursive;   --sans:'Josefin Sans',Arial,sans-serif;
  --nav-h:64px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#2B2013; } }
:root[data-theme="dark"]{ --bg:#2B2013; }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px)); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.7; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
h1,h2,h3,h4{ overflow-wrap:break-word; }
p{ color:var(--sepia); max-width:66ch; }
p+p{ margin-top:14px; }
.mult{ mix-blend-mode:multiply; }   /* fonde le illustrazioni su fondo bianco con la carta */

/* ---------- 2. MENU ---------- */
.nav{ position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--paper); border-bottom:1px solid var(--gold-line); }
.nav-in{ max-width:1180px; height:var(--nav-h); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.08em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.navlogo{ width:42px; height:42px; flex:none; }
.links{ flex:1; min-width:0; display:flex; justify-content:flex-end; gap:26px; overflow-x:auto; scrollbar-width:none; }
.links::-webkit-scrollbar{ display:none; }
.links a{ font-family:var(--sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--sepia); text-decoration:none; white-space:nowrap; padding:8px 0; border-bottom:1px solid transparent; }
.links a:hover{ color:var(--gold); border-color:var(--gold); }
.lang{ flex:none; display:flex; gap:4px; margin-left:6px; }
.lang a{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; color:var(--sepia); text-decoration:none; min-height:36px; padding:8px 10px; display:inline-flex; align-items:center; border:1px solid transparent; border-radius:999px; }
.lang a[aria-current]{ border-color:var(--gold-line); color:var(--ink); }
.menu-btn{ display:none; }

/* ---------- 3. PANNELLI (come le etichette) E TITOLI ---------- */
main{ max-width:1180px; margin:0 auto; padding:28px 18px 40px; display:grid; gap:28px; }
main>*{ min-width:0; }
.panel{ position:relative; background:var(--paper); border:2px solid var(--gold-line); border-radius:26px; padding:64px clamp(22px,5vw,72px); }
.panel::before{ content:""; position:absolute; inset:8px; border:1px solid var(--gold-line); border-radius:19px; opacity:.7; pointer-events:none; }
.kick{ font-family:var(--sans); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); text-align:center; }
h2{ font-family:var(--display); font-weight:600; font-size:clamp(30px,4.2vw,50px); line-height:1.1; letter-spacing:.06em; text-align:center; color:var(--ink); }
h2.gold{ color:var(--gold); }
h3{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:.05em; color:var(--ink); }
.orn{ display:flex; align-items:center; justify-content:center; gap:10px; margin:18px auto; color:var(--gold); }
.orn span{ width:min(120px,22vw); height:1px; background:var(--gold-line); }
.orn i{ font-style:normal; font-size:11px; }
.lead{ font-size:21px; text-align:center; margin:0 auto; }
.script{ font-family:var(--script); font-size:clamp(34px,4vw,46px); line-height:1.2; color:var(--sepia); text-align:center; }
.center-h{ text-align:center; font-size:26px; }
.tri{ display:flex; width:220px; height:5px; margin:14px auto 0; }
.tri span{ flex:1; }
.tri span:nth-child(1){ background:#2E8B3E; }
.tri span:nth-child(2){ background:#fff; border-block:1px solid #eee; }
.tri span:nth-child(3){ background:#D22B2B; }

/* ---------- 4. SEZIONI ---------- */
/* apertura */
.crest{ text-align:center; }
.crest .farm{ width:min(520px,90%); margin:0 auto; }
.crest h1{ font-family:var(--display); font-weight:700; font-size:clamp(38px,12.5vw,120px); line-height:1; letter-spacing:.06em; margin-top:8px; color:var(--ink); }
.crest .sub{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; font-family:var(--display); font-size:clamp(14px,1.8vw,19px); letter-spacing:.3em; color:var(--ink); }
.crest .sub::before,.crest .sub::after{ content:""; width:48px; height:1px; background:var(--ink); }
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; column-gap:40px; margin-top:34px; }
/* ogni prodotto usa le righe comuni: immagini, nomi e sottotitoli restano allineati anche se un nome va a capo */
.prod{ display:grid; grid-row:span 3; grid-template-rows:subgrid; justify-items:center; align-content:start; text-align:center; text-decoration:none; }
.prod img{ width:100%; aspect-ratio:1/1; object-fit:contain; object-position:center bottom; align-self:end; }
.prod .name{ align-self:start; font-family:var(--display); font-size:clamp(24px,3vw,36px); line-height:1.2; letter-spacing:.06em; margin-top:10px; }
.prod.o .name{ color:var(--olive); }
.prod.m .name{ color:var(--gold); }
.prod .small{ align-self:start; font-family:var(--sans); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); margin-top:6px; }

/* la famiglia */
.cols{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:center; margin-top:36px; }
.aside-box{ border:1px solid var(--gold-line); border-radius:18px; padding:30px; text-align:center; }
.facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; border:1px solid var(--gold-line); border-radius:14px; overflow:hidden; }
.facts div{ padding:14px 10px; border-right:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); }
.facts div:nth-child(2n){ border-right:none; }
.facts div:nth-last-child(-n+2){ border-bottom:none; }
.facts b{ display:block; font-family:var(--display); font-weight:600; font-size:24px; color:var(--gold-text); }
.facts small{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text); }

/* olivi */
.cv{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:36px; border:1px solid var(--gold-line); border-radius:18px; overflow:hidden; }
.cv article{ padding:32px 30px; border-bottom:1px solid var(--gold-line); }
.cv article:nth-child(odd){ border-right:1px solid var(--gold-line); }
.cv article:nth-last-child(-n+2){ border-bottom:none; }
.cv h3{ font-size:26px; color:var(--olive); }
.cv .meta{ font-family:var(--script); font-size:26px; line-height:1.2; color:var(--gold-text); margin:2px 0 10px; }
.cv p{ font-size:17.5px; line-height:1.65; }
.tales{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-top:26px; }
.tales h4{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:21px; line-height:1.25; color:var(--ink); margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--gold-line); }
.tales p{ font-size:16.5px; line-height:1.6; }

/* olio e miele: immagine + testo */
.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; margin-top:30px; }
.split.rev{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
.split.rev .big{ order:2; }
.big img{ width:100%; }
.traits{ list-style:none; margin-top:20px; border-top:1px solid var(--gold-line); }
.traits li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--gold-line); color:var(--sepia); }
.traits li::before{ content:"\25C6"; color:var(--gold); font-size:10px; padding-top:7px; }
.more{ margin-top:44px; }
details{ border-top:1px solid var(--gold-line); }
details:last-of-type{ border-bottom:1px solid var(--gold-line); }
summary{ list-style:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-size:20px; letter-spacing:.05em; color:var(--ink); }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; font-family:var(--serif); font-size:30px; line-height:1; color:var(--gold); }
details[open] summary::after{ content:"\2013"; }
details .body{ padding:0 4px 24px; }

/* i quattro mieli */
.labels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-top:40px; }
.lab{ text-align:center; }
.illu{ height:190px; display:flex; align-items:center; justify-content:center; }
.illu img{ width:auto; max-width:100%; max-height:100%; }
.lname{ font-size:clamp(24px,6vw,30px); text-align:center; margin-top:12px; }
.lab .meta{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); margin-top:14px; }
.lab p{ font-size:17px; margin:6px auto 0; }

/* territorio */
.farm-big{ width:min(760px,100%); margin:10px auto 0; }
.hist{ margin-top:34px; border:1px solid var(--gold-line); border-radius:18px; overflow:hidden; }
.hist div{ display:grid; grid-template-columns:150px minmax(0,1fr); border-bottom:1px solid var(--gold-line); }
.hist div:last-child{ border-bottom:none; }
.hist b{ padding:16px 18px; border-right:1px solid var(--gold-line); font-family:var(--display); font-weight:600; font-size:18px; color:var(--gold-text); }
.hist span{ padding:16px 20px; font-size:17.5px; line-height:1.55; color:var(--sepia); }

/* contatti e piede */
.contact{ text-align:center; }
.contactlogo{ display:block; width:170px; height:170px; margin:16px auto 10px; }
.contact .az{ font-family:var(--display); font-size:17px; letter-spacing:.2em; }
.contact .nm{ font-family:var(--display); font-weight:700; font-size:clamp(40px,6vw,64px); line-height:1.05; letter-spacing:.05em; }
.contact p{ margin:8px auto 0; text-align:center; }
.contact a{ color:var(--ink); text-decoration-color:var(--gold-line); }
footer{ padding:10px 16px 34px; text-align:center; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }
footer a{ color:var(--gold-text); }

/* ---------- 5. GALLERIA FOTO ---------- */
.note{ margin:24px auto 0; text-align:center; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text); }
.years{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:24px; }
.years a{ min-height:44px; padding:8px 18px; display:inline-flex; align-items:center; font-family:var(--display); font-size:17px; letter-spacing:.08em; color:var(--gold-text); text-decoration:none; background:var(--paper); border:1px solid var(--gold-line); border-radius:999px; }
.years a:hover{ background:var(--gold); color:var(--paper); }
.yblock{ margin-top:40px; scroll-margin-top:84px; }
.yhead{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.yhead span{ flex:1; height:1px; background:var(--gold-line); }
.yhead b{ font-family:var(--display); font-weight:600; font-size:clamp(28px,4vw,40px); letter-spacing:.06em; color:var(--gold-text); }
.gal2{ columns:4 220px; column-gap:18px; }
.g-it{ break-inside:avoid; margin:0 0 18px; padding:6px; cursor:pointer; background:var(--paper); border:1px solid var(--gold-line); border-radius:12px; }
.g-it:hover,.g-it:focus-visible{ border-color:var(--gold); }
.g-it img{ width:100%; height:auto; border-radius:8px; background:var(--photo-bg); }

/* finestra della foto */
dialog#lb{ width:100%; max-width:min(980px,96vw); margin:auto; padding:0; border:none; background:transparent; }
dialog#lb::backdrop{ background:rgba(40,28,14,.72); }
.lb-in{ position:relative; max-height:calc(100dvh - 24px); overflow:auto; padding:54px 26px 26px; background:var(--paper); border:2px solid var(--gold-line); border-radius:22px; }
.lb-x{ position:absolute; top:8px; right:10px; z-index:2; width:44px; height:44px; background:none; border:none; font-size:34px; line-height:1; color:var(--gold); cursor:pointer; }
.lb-stage{ position:relative; }
.lb-img{ display:block; width:100%; max-height:62vh; object-fit:contain; border-radius:12px; background:var(--photo-bg); touch-action:pan-y; }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; padding-bottom:4px; display:grid; place-items:center; font-size:34px; line-height:1; color:var(--gold-text); background:rgba(251,246,234,.92); border:1px solid var(--gold-line); border-radius:50%; cursor:pointer; }
.lb-nav.prev{ left:10px; }
.lb-nav.next{ right:10px; }
.lb-nav:hover{ background:var(--gold); color:var(--paper); }
.lb-meta{ display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:14px; margin-top:12px; }
.lb-cap{ font-family:var(--display); font-size:20px; color:var(--ink); }
.lb-count{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; color:var(--gold-text); }
.share{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.share span{ margin-right:6px; font-family:var(--script); font-size:28px; color:var(--sepia); }
.soc{ width:46px; height:46px; display:inline-grid; place-items:center; color:var(--gold-text); background:var(--paper); border:1px solid var(--gold-line); border-radius:50%; text-decoration:none; cursor:pointer; }
.soc svg{ width:20px; height:20px; }
.soc:hover{ background:var(--gold); color:var(--paper); }
.lb-ig{ margin:10px auto 0; font-size:15px; text-align:center; color:var(--sepia); }
.lb-msg{ min-height:1.5em; margin-top:10px; font-size:16px; text-align:center; color:var(--sepia); }

/* ---------- 6. BANNER COOKIE ---------- */
#cookie{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:100; max-width:560px; margin:0 auto; padding:18px 20px; font-size:16px; line-height:1.5; color:var(--sepia); background:var(--paper); border:2px solid var(--gold-line); border-radius:18px; box-shadow:0 10px 30px rgba(40,28,14,.25); }
#cookie[hidden]{ display:none; }
#cookie .cb{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
#cookie button{ flex:1; min-height:44px; padding:12px 18px; font-family:var(--sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1px solid var(--gold); border-radius:999px; cursor:pointer; }
#cookie button.ok{ background:var(--gold); color:var(--paper); }


/* ---------- APERTURA SU SCHERMI LARGHI ----------
   Come sull'etichetta: olio a sinistra, nome al centro, miele a destra.
   Così su un computer l'apertura sta tutta in una schermata. */
@media (min-width:1100px){
  #home{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:28px; padding-top:44px; padding-bottom:44px; }
  #home .duo{ display:contents; }
  #home .crest{ grid-column:2; grid-row:1 / span 3; align-self:center; container-type:inline-size; }
  #home .prod.o{ grid-column:1; grid-row:1 / span 3; }
  #home .prod.m{ grid-column:3; grid-row:1 / span 3; }
  #home .crest .farm{ width:100%; }
  #home .crest h1{ font-size:min(14.5cqw,96px); white-space:nowrap; letter-spacing:.05em; }
  #home .crest .sub{ font-size:clamp(13px,1.1vw,16px); letter-spacing:.26em; }
  #home .crest .sub::before,#home .crest .sub::after{ width:30px; }
  #home .lead{ font-size:19px; }
  #home .prod .name{ font-size:clamp(22px,2.1vw,30px); }
  #home .prod .small{ font-size:12px; letter-spacing:.16em; }
}
/* schermi Full HD e più grandi: un po' più di spazio in larghezza */
@media (min-width:1600px){
  main,.nav-in{ max-width:1320px; }
}

/* ---------- 7. SCHERMI PIÙ PICCOLI ---------- */
@media (max-width:980px){
  .tales{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .labels{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .illu{ height:160px; }
}
@media (max-width:860px){
  body{ font-size:18px; }
  /* menu a tendina: le voci si aprono sotto la barra, una per riga */
  .nav-in{ gap:10px; padding:0 14px; position:relative; }
  .brand{ margin-right:auto; }
  .lang{ margin-left:0; }
  .lang a{ min-height:34px; padding:6px 9px; }
  .menu-btn{ display:inline-grid; place-content:center; gap:5px; flex:none; width:44px; height:44px; padding:0; background:none; border:1px solid var(--gold-line); border-radius:12px; cursor:pointer; }
  .menu-btn span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s; }
  .nav.aperto .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.aperto .menu-btn span:nth-child(2){ opacity:0; }
  .nav.aperto .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:6px 20px 14px; background:var(--paper); border-bottom:1px solid var(--gold-line); box-shadow:0 12px 24px rgba(40,28,14,.18); max-height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top,0px)); overflow-y:auto; }
  .nav.aperto .links{ display:flex; }
  .links a{ padding:14px 4px; font-size:15px; text-align:center; border-bottom:1px solid var(--gold-line); }
  .links a:last-child{ border-bottom:none; }
  .links a:hover{ border-color:var(--gold-line); }
  .panel{ padding:46px 22px; border-radius:20px; }
  .duo{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; row-gap:34px; }
  .prod{ grid-row:auto; grid-template-rows:auto; }
  .prod img{ max-width:460px; }
  .cols,.split,.split.rev{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .split.rev .big{ order:0; }
  .hist div{ grid-template-columns:minmax(0,1fr); }
  .hist b{ border-right:none; padding-bottom:0; }
}
@media (max-width:620px){
  .cv{ grid-template-columns:minmax(0,1fr); }
  .cv article,.cv article:nth-child(odd){ border-right:none; }
  .cv article:nth-last-child(2){ border-bottom:1px solid var(--gold-line); }
  .tales{ grid-template-columns:minmax(0,1fr); }
  .labels{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .lab{ width:100%; max-width:420px; margin:0 auto; }
  .illu{ height:auto; }
  .illu img{ max-height:170px; }
  .lab .meta,.kick{ letter-spacing:.12em; }
  .gal2{ columns:2; column-gap:12px; }
  .g-it{ margin-bottom:12px; padding:4px; }
}
@media (max-width:520px){
  .lb-in{ padding:54px 16px 20px; }
  .lb-nav{ width:40px; height:40px; font-size:28px; }
  .lb-nav.prev{ left:6px; }
  .lb-nav.next{ right:6px; }
  .share span{ flex-basis:100%; margin:0; text-align:center; }
  .share .soc{ width:44px; height:44px; }
}
@media (max-width:460px){
  .facts b{ font-size:20px; }
}
@media (max-width:420px){
  .brand{ font-size:18px; gap:8px; }
  .navlogo{ width:38px; height:38px; }
  .panel{ padding:40px 18px; }
  h2{ font-size:26px; letter-spacing:.03em; }
  .crest .sub{ letter-spacing:.2em; }
  .crest .sub::before,.crest .sub::after{ width:24px; }
  .contact .nm{ font-size:34px; }
}

/* ---------- 8. PAGINA 404 ---------- */
.errore{ text-align:center; }
.errore .illustrazione{ max-width:820px; margin:0 auto; }
.errore .illustrazione img{ width:100%; height:auto; }
.errore h1{ font-family:var(--display); font-weight:600; font-size:clamp(24px,4vw,38px); letter-spacing:.05em; color:var(--ink); margin-top:8px; }
.torna{ margin:26px auto 0; }
.torna a{ display:inline-flex; align-items:center; min-height:48px; padding:12px 26px; font-family:var(--sans); font-size:14px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--paper); background:var(--gold-text); border-radius:999px; }
.torna a:hover{ background:var(--ink); }