/* ============================================================================
   ms-home.css — la home (landing.php)
   Accodato per ultimo e solo qui (inc/ms-home.php). Parla la lingua dello shop:
   card #FDFBF7 con filo #EAE2D5, raggio --ms-r-card, pulsanti --ms-r-btn, un solo
   rosso sulle CTA, fasce carbone con testo crema. Niente !important.
   Le regole condivise che qui cambiano sono riscritte con :where() e segnalate.
   ========================================================================== */
.ms-p--landing{
  --h-card:#FDFBF7; --h-filo:#EAE2D5;
  --h-r:var(--ms-r-card, 20px); --h-rb:var(--ms-r-btn, 24px);
  --h-sec:clamp(64px, 8vw, 112px);
  --h-ombra:inset 0 0 0 1px var(--h-filo), 0 2px 4px rgba(35,33,29,.06), 0 16px 32px -16px rgba(35,33,29,.32);
  --h-ombra-su:inset 0 0 0 1px var(--h-filo), 0 2px 4px rgba(35,33,29,.08), 0 22px 40px -18px rgba(35,33,29,.40);
  --h-tenue:color-mix(in srgb, var(--cream) 78%, transparent);
}

/* ---------------------------------------------------------------------------
   Ritmo e testate di sezione (8 / 16 / 24)
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-sez{ position:relative; padding:var(--h-sec) 0; }
.ms-p--landing .ms-head{ max-width:720px; margin:0 0 clamp(32px, 4vw, 48px); }
.ms-p--landing .ms-head--c{ margin-inline:auto; text-align:center; }
.ms-p--landing .ms-eb{
  display:block; margin:0 0 12px;
  font-family:var(--sans); font-weight:600; font-size:.78rem; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.ms-p--landing .ms-h2{
  margin:0; max-width:22ch;
  font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height:1.06; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
}
.ms-p--landing .ms-head--c .ms-h2{ margin-inline:auto; }
.ms-p--landing .ms-lead{
  margin:16px 0 0; max-width:56ch;
  font-size:clamp(1rem, .95rem + .3vw, 1.1rem); line-height:1.6; color:var(--muted); text-wrap:pretty;
}
.ms-p--landing .ms-head--c .ms-lead{ margin-inline:auto; }
.ms-p--landing .ms-sez--scura .ms-eb{ color:var(--h-tenue); }
.ms-p--landing .ms-sez--scura .ms-h2{ color:var(--cream); }
.ms-p--landing .ms-sez--scura .ms-lead{ color:var(--cream); }

/* Card della home: la stessa superficie della card prodotto */
.ms-p--landing .ms-vcard{
  display:flex; flex-direction:column; padding:12px;
  background:var(--h-card); border-radius:var(--h-r); box-shadow:var(--h-ombra);
  color:var(--ink);
}
.ms-p--landing .ms-vcard__m{ overflow:hidden; border-radius:calc(var(--h-r) / 2); background:var(--h-card); }
.ms-p--landing .ms-vcard__m img{ width:100%; height:100%; object-fit:cover; }
.ms-p--landing .ms-vcard__b{ display:flex; flex-direction:column; flex:1; padding:16px 8px 8px; }
.ms-p--landing .ms-vcard__n{ display:block; margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:.8rem; letter-spacing:.06em; color:var(--muted); }
.ms-p--landing .ms-vcard__t{ margin:0 0 8px; font-family:var(--serif); font-weight:600; font-size:1.3rem; line-height:1.15; letter-spacing:-.01em; color:var(--ink); }
.ms-p--landing .ms-vcard__p{ margin:0; font-size:.94rem; line-height:1.55; color:var(--muted); }

/* ---------------------------------------------------------------------------
   Hero: foto vera, testo in basso a sinistra sopra il velo
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-hero{ min-height:clamp(600px, 94svh, 880px); }
.ms-p--landing .ms-hero .hero__bg{ inset:0; will-change:auto; }
.ms-p--landing .ms-hero .hero__bg img{ filter:brightness(.86) saturate(.96); object-position:40% 50%; }
.ms-p--landing .ms-hero .hero__bg::after{
  background:linear-gradient(180deg, rgba(18,16,14,.45) 0%, rgba(18,16,14,.10) 20%, rgba(18,16,14,.46) 40%, rgba(18,16,14,.82) 62%, rgba(18,16,14,.94) 100%);
}
.ms-p--landing .ms-hero__inner{ padding-bottom:clamp(40px, 6vw, 72px); }
.ms-p--landing .ms-hero__eb{
  margin:0 0 clamp(16px, 2.4vw, 24px);
  font-family:var(--sans); font-weight:600; font-size:.78rem; line-height:1.4;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cream); text-shadow:0 1px 2px rgba(18,16,14,.4);
}
.ms-p--landing .ms-hero h1{ font-size:clamp(3rem, 9vw, 7.5rem); font-weight:500; letter-spacing:-.03em; line-height:.98; }
.ms-p--landing .ms-hero__p{
  max-width:44ch; margin:clamp(16px, 2.4vw, 24px) 0 clamp(24px, 3vw, 32px);
  font-size:clamp(1rem, .9rem + .4vw, 1.15rem); line-height:1.6; color:var(--cream);
}
.ms-p--landing .ms-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.ms-p--landing .ms-hero__cta .btn{ min-height:48px; }

/* [16/09 lotto 1 · referto §7a] Entrata dell'hero al primo paint: 0 richieste, 0 ms di blocco, solo
   transform/opacity (CLS 0). Stessa famiglia di cs-posa/cs-su delle altre vetrine. L'immagine LCP resta
   a opacità 1 — a opacity:0 Chrome sposterebbe l'LCP di tutta la durata — e fa solo scale(1.03→1).
   Il titolo NON è qui: ha già la sua entrata (.mask>span, pagine.css), due animazioni si sommerebbero. */
@keyframes ms-hero-posa{ from{ transform:scale(1.03); } to{ transform:none; } }
@keyframes ms-hero-su{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.ms-p--landing .ms-hero .hero__bg img{ animation:ms-hero-posa 1.2s var(--ease) both; }
.ms-p--landing .ms-hero__eb, .ms-p--landing .ms-hero__p, .ms-p--landing .ms-hero__cta{ animation:ms-hero-su .35s ease-out both; }
.ms-p--landing .ms-hero__p{ animation-delay:.1s; }
.ms-p--landing .ms-hero__cta{ animation-delay:.2s; }
@media (prefers-reduced-motion:reduce){
  .ms-p--landing .ms-hero .hero__bg img, .ms-p--landing .ms-hero__eb, .ms-p--landing .ms-hero__p, .ms-p--landing .ms-hero__cta{ animation:none; }
}

/* ---------------------------------------------------------------------------
   Striscia: quattro voci su carbone
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-trust{ background:var(--ink); color:var(--cream); }
.ms-p--landing .ms-trust__g{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.ms-p--landing .ms-trust__g > span{
  display:flex; align-items:center; gap:.6em;
  padding:18px 20px; border-left:1px solid rgba(245,240,232,.14);
  font-size:.8rem; line-height:1.4; letter-spacing:.02em; color:#d9d2c6;
}
.ms-p--landing .ms-trust__g > span:first-child{ border-left:0; padding-left:0; }
.ms-p--landing .ms-trust__g b{ color:var(--cream); font-weight:600; }
.ms-p--landing .ms-trust__g i{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--red); }

/* ---------------------------------------------------------------------------
   Fascia valori: quattro card, due foto e due segni (in attesa delle foto)
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-valori__g{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; }
.ms-p--landing .ms-vcard__m{ aspect-ratio:4 / 3; background:var(--ink); }
.ms-p--landing .ms-vcard__m--segno{ display:grid; place-items:center; color:var(--cream); }
.ms-p--landing .ms-vcard__m--segno svg{ width:64px; height:64px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }

/* ---------------------------------------------------------------------------
   Filiera: foto della terra, testo e tre numeri
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-filiera__g{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.ms-p--landing .ms-filiera__m{ overflow:hidden; border-radius:var(--h-r); box-shadow:var(--h-ombra); background:var(--h-card); aspect-ratio:4 / 5; }
.ms-p--landing .ms-filiera__m img{ width:100%; height:100%; object-fit:cover; }
.ms-p--landing .ms-filiera__p{ margin:16px 0 24px; max-width:56ch; font-size:clamp(1rem, .95rem + .3vw, 1.08rem); line-height:1.65; color:var(--muted); text-wrap:pretty; }
.ms-p--landing .ms-num{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:32px 0 0; padding:24px 0 0; border-top:1px solid var(--border); }
.ms-p--landing .ms-num > div{ margin:0; }
.ms-p--landing .ms-num dt{ font-family:var(--serif); font-weight:500; font-size:clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1; letter-spacing:-.02em; color:var(--ink); }
.ms-p--landing .ms-num dd{ margin:8px 0 0; max-width:14ch; font-size:.82rem; line-height:1.4; letter-spacing:.02em; color:var(--muted); }

/* ---------------------------------------------------------------------------
   Shop: testata della sezione (le card sono quelle del catalogo)
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-shop .ms-head{ margin-bottom:clamp(24px, 3vw, 40px); }
.ms-p--landing .ms-shop__cta{ text-align:center; margin-top:8px; }
/* I reparti (16/09): una riga di testo fra la testata e le tre card, separata da un puntino,
   sottolineatura solo al passaggio. Un dettaglio, non un blocco: stesso corpo dell'occhiello. */
.ms-p--landing .ms-shop__rep{ margin:calc(-1 * clamp(24px, 3vw, 40px) + 16px) 0 clamp(24px, 3vw, 40px); }
.ms-p--landing .ms-shop__rep-l{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 0;
  margin:0; padding:0; list-style:none;
  font-family:var(--sans); font-size:.82rem; font-weight:600; line-height:1.4; letter-spacing:.02em;
}
.ms-p--landing .ms-shop__rep-l li{ margin:0; white-space:nowrap; }
.ms-p--landing .ms-shop__rep-l li + li::before{ content:"·"; margin:0 .7em; color:var(--muted); }
.ms-p--landing .ms-shop__rep-l a{
  color:var(--ink); text-decoration:underline; text-decoration-color:transparent;
  text-decoration-thickness:1px; text-underline-offset:.28em;
  transition:text-decoration-color .2s ease, color .2s ease;
}
@media (hover:hover){ .ms-p--landing .ms-shop__rep-l a:hover{ text-decoration-color:currentColor; } }
.ms-p--landing .ms-shop__rep-l a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------------------------------
   Agriturismo: foto a tutta larghezza, testo a sinistra sopra il velo
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-agri{ display:flex; align-items:center; min-height:clamp(520px, 56vw, 720px); overflow:hidden; color:var(--cream); background:var(--charcoal-2); }
.ms-p--landing .ms-agri__bg{ position:absolute; inset:0; z-index:0; }
.ms-p--landing .ms-agri__bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 30%; filter:brightness(.92); }
.ms-p--landing .ms-agri__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,16,14,.84) 0%, rgba(18,16,14,.66) 36%, rgba(18,16,14,.22) 66%, rgba(18,16,14,.06) 100%); }
.ms-p--landing .ms-agri .wrap{ position:relative; z-index:1; width:100%; }
.ms-p--landing .ms-agri__in{ max-width:560px; }
.ms-p--landing .ms-agri__in .ms-lead{ max-width:46ch; }
.ms-p--landing .ms-agri__srv{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:24px 0 32px; padding:0; }
.ms-p--landing .ms-agri__srv li{ padding:8px 14px; border:1px solid rgba(245,240,232,.38); border-radius:var(--h-rb); font-size:.82rem; line-height:1.3; color:var(--cream); }

/* ---------------------------------------------------------------------------
   Sedi e ritiro: una sala e quattro indirizzi
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-sedi{ border-top:1px solid var(--border); }
.ms-p--landing .ms-sedi__g{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 4vw, 64px); align-items:center; }
.ms-p--landing .ms-sedi__m{ overflow:hidden; border-radius:var(--h-r); box-shadow:var(--h-ombra); background:var(--h-card); aspect-ratio:4 / 5; }
.ms-p--landing .ms-sedi__m img{ width:100%; height:100%; object-fit:cover; }
.ms-p--landing .ms-sedi__l{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.ms-p--landing .ms-sede{ display:flex; flex-direction:column; gap:4px; padding:20px 20px 16px; background:var(--h-card); border-radius:var(--h-r); box-shadow:var(--h-ombra); }
.ms-p--landing .ms-sede__c{ font-family:var(--serif); font-weight:600; font-size:1.35rem; line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.ms-p--landing .ms-sede__q{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ms-p--landing .ms-sede__a{ margin-top:8px; font-size:1rem; color:var(--ink); }
.ms-p--landing .ms-sede__r{ font-size:.82rem; color:var(--muted); }

/* ---------------------------------------------------------------------------
   Newsletter: fascia carbone (coherence.css la dipinge già), modulo com'è
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-news .ms-head{ margin-bottom:24px; }
.ms-p--landing .ms-news .ms-lead{ color:#d9d2c6; }
.ms-p--landing .news__form{ gap:8px; }
.ms-p--landing .news__form input{ min-height:48px; }
.ms-p--landing .news__form button{ min-height:48px; border-radius:var(--h-rb); }
.ms-p--landing .news__premio{ border:1px solid rgba(245,240,232,.28); border-radius:var(--h-r); }

/* ---------------------------------------------------------------------------
   Chiusura: testo e tavola, prima del footer
   ------------------------------------------------------------------------ */
.ms-p--landing .ms-fine{ background:var(--cream-card); border-top:1px solid var(--border); }
.ms-p--landing .ms-fine__g{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.ms-p--landing .ms-fine__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.ms-p--landing .ms-fine__cta .btn{ min-height:48px; }
.ms-p--landing .ms-fine__m{ overflow:hidden; border-radius:var(--h-r); box-shadow:var(--h-ombra); background:var(--h-card); aspect-ratio:4 / 3; }
.ms-p--landing .ms-fine__m img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------------------
   Viewport
   ------------------------------------------------------------------------ */
@media (max-width:1100px){
  .ms-p--landing .ms-valori__g{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  .ms-p--landing .ms-trust__g{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ms-p--landing .ms-trust__g > span{ padding:14px 16px; }
  .ms-p--landing .ms-trust__g > span:nth-child(3){ border-left:0; padding-left:0; }
  .ms-p--landing .ms-trust__g > span:nth-child(n+3){ border-top:1px solid rgba(245,240,232,.14); }
  .ms-p--landing .ms-filiera__g,
  .ms-p--landing .ms-sedi__g,
  .ms-p--landing .ms-fine__g{ grid-template-columns:1fr; gap:32px; }
  .ms-p--landing .ms-sedi__m{ aspect-ratio:3 / 2; }
  .ms-p--landing .ms-sedi__m img{ object-position:50% 60%; }
  .ms-p--landing .ms-fine__g{ gap:24px; }
  .ms-p--landing .ms-fine__m{ order:-1; }
  .ms-p--landing .ms-filiera__m{ aspect-ratio:4 / 3; }
  .ms-p--landing .ms-filiera__m img{ object-position:50% 40%; }
}
@media (max-width:640px){
  .ms-p--landing .ms-hero{ min-height:clamp(560px, 92svh, 760px); }
  .ms-p--landing .ms-hero .hero__bg img{ object-position:34% 50%; }
  .ms-p--landing .ms-hero h1{ font-size:clamp(3rem, 15vw, 4.4rem); }
  .ms-p--landing .ms-hero__cta{ flex-direction:column; }
  .ms-p--landing .ms-hero__cta .btn{ width:100%; justify-content:center; }
  .ms-p--landing .ms-trust__g{ grid-template-columns:1fr; padding:8px 0; }
  .ms-p--landing .ms-trust__g > span,
  .ms-p--landing .ms-trust__g > span:nth-child(3){ padding:10px 0; border-left:0; border-top:0; }
  .ms-p--landing .ms-valori__g{ grid-template-columns:1fr; gap:14px; }
  .ms-p--landing .ms-num{ gap:12px; }
  .ms-p--landing .ms-sedi__l{ grid-template-columns:1fr; gap:12px; }
  .ms-p--landing .ms-fine__cta{ flex-direction:column; }
  .ms-p--landing .ms-fine__cta .btn{ width:100%; justify-content:center; }
  .ms-p--landing .ms-agri{ min-height:0; padding:clamp(72px, 18vw, 112px) 0; }
  .ms-p--landing .ms-agri__bg img{ object-position:64% 50%; }
  .ms-p--landing .ms-agri__bg::after{ background:linear-gradient(180deg, rgba(18,16,14,.70) 0%, rgba(18,16,14,.62) 100%); }
  .ms-p--landing .ms-agri .btn{ width:100%; justify-content:center; }
  /* Reparti: una fila sola che scorre, senza barra; parte dal gutter e arriva a filo schermo a destra. */
  .ms-p--landing .ms-shop__rep{ --ms-g:clamp(20px, 5vw, 64px); margin-right:calc(-1 * var(--ms-g)); }
  .ms-p--landing .ms-shop__rep-l{
    flex-wrap:nowrap; padding-right:var(--ms-g);
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none;
    padding-block:4px; margin-block:-4px;   /* spazio per l'anello di fuoco, che il contenitore taglierebbe */
  }
  .ms-p--landing .ms-shop__rep-l::-webkit-scrollbar{ display:none; }
}

/* ---------------------------------------------------------------------------
   Moto: la sola cosa che si muove è il titolo della hero (pagine.css, .mask).
   Chi chiede meno movimento vede tutto fermo.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ms-p--landing .mask > span{ transform:none; transition:none; }
}