/* =========================================================
   MIOBUK — Home (homeb) — simplified "no colored blocks" pass
   Loaded only on this page. Boreal uppercase throughout, no serif.
   ========================================================= */
:root{
  --mb-gold-pale:#EDE7DB;
}

.mb-home{padding-top:var(--mb-header-h);background:#fff}

/* Il template avvolge il contenuto in un contenitore "a larghezza
   contenuta" di WordPress, che applica un max-width a ogni figlio
   diretto. Va neutralizzato SOLO dove serve davvero.

   27/08 (sera, 2) — LA CAUSA VERA dei titoli non centrati.
   Qui c'era una regola che azzerava max-width E padding orizzontale su
   OGNI figlio diretto della home, con !important. Ma i figli diretti
   sono solo sei tipi — .mb-hero, .mb-divider, .mb-sec, .mb-sec-gold,
   .mb-split-banner, .mb-membership-sec — e cinque di questi la propria
   larghezza ce l'hanno gia' (1200px le sezioni e le righe divisorie,
   1400px le fasce split). La regola gliela strappava, insieme al loro
   padding laterale: le sezioni si allargavano a tutto lo schermo e i
   titoli, che dentro la sezione hanno un max-width proprio in "ch",
   finivano posizionati rispetto a un contenitore enorme invece che
   rispetto alla colonna da 1200px. Su schermi larghi il risultato era
   un titolo spostato e un occhiello su tutt'altro centro.
   L'unico elemento che ha davvero bisogno di uscire dal vincolo e' la
   hero, che si allarga a 100vw. Quindi la regola vale solo per lei.

   Nota per il futuro: aggiungendo una nuova sezione alla home, se deve
   andare a tutta larghezza va aggiunta qui; se ha una sua misura non va
   toccata, il vincolo di WordPress perde gia' da solo contro il
   max-width dichiarato nella sua classe. */
body.page-id-14 .entry-content.is-layout-constrained > .mb-hero {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Le misure dichiarate dalle sezioni, riaffermate con !important perche'
   il foglio di stile del layout a blocchi puo' essere stampato dopo il
   nostro: senza !important il risultato dipenderebbe dall'ordine di
   caricamento, che non controlliamo. */
body.page-id-14 .entry-content.is-layout-constrained > .mb-sec,
body.page-id-14 .entry-content.is-layout-constrained > .mb-divider {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-id-14 .entry-content.is-layout-constrained > .mb-split-banner,
body.page-id-14 .entry-content.is-layout-constrained > .mb-membership-sec {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.mb-divider{height:1px;background:var(--mb-taupe-line);max-width:1200px;margin:0 auto}

/* Hero — video background (test embed), roughly double the previous
   height. Fallback gold background stays underneath in case the video
   is blocked/slow; dark overlay keeps the title readable over any
   footage. Text here is an INTENTIONAL exception to the canonical
   dark-ink h1/.mb-eyebrow colors: white, because it sits over a video,
   not because it's a different style — everything else (font, size,
   weight, letter-spacing, uppercase) still comes from the canonical
   classes below. */
.mb-hero{
  position:relative; left:50%; width:var(--mb-vw, 100vw); transform:translateX(-50%);
  box-sizing:border-box; overflow:hidden; background:var(--mb-gold-pale);
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:clamp(500px,85vh,900px); margin-top:70px; padding:clamp(40px,6vw,64px) var(--mb-px);
}
.mb-hero-video-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.mb-hero-video-wrap iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; /* 16:9 */
  min-height:100%; min-width:177.78vh; /* covers the box regardless of viewport ratio */
  border:0; pointer-events:none;
}
.mb-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(20,18,14,.38);
}
.mb-hero .mb-eyebrow,.mb-hero h1{ position:relative; z-index:2; }
.mb-hero .mb-eyebrow{ margin-bottom:10px; color:var(--mb-white,#fff) !important; }
.mb-hero h1{ max-width:22ch; margin:0 auto; color:var(--mb-white,#fff) !important; }

/* Generic white section — layout only, typography inherits from the
   canonical .mb-eyebrow / h2 / body rules in miobuk-global.css */
.mb-sec{background:#fff;text-align:center;max-width:1200px;margin:0 auto;
  padding:clamp(56px,8vw,100px) clamp(24px,5vw,48px)}
.mb-sec .mb-eyebrow{margin-bottom:8px}
.mb-sec h2{max-width:26ch;margin:0 auto 32px !important;color:var(--mb-taupe-deep,#7C6F59) !important}
/* 27/08 (sera, 3) — Il titolo di sezione si centrava con "margin:0 auto",
   e su schermi larghi restava spostato di centinaia di pixel mentre
   occhiello e griglia della stessa sezione erano centrati correttamente.
   Il centraggio con margini automatici e' fragile: basta una qualunque
   regola con !important su margin-left perche' salti, e in un progetto
   con una regola madre dei pulsanti e decine di !important quel rischio
   e' concreto e difficile da rintracciare.
   Qui si toglie del tutto la dipendenza dai margini: il titolo diventa
   un elemento in linea e viene centrato dal "text-align:center" della
   sezione, cioe' dallo stesso meccanismo che gia' centra l'occhiello.
   Nessuna regola sui margini puo' piu' spostarlo.
   Solo i figli DIRETTI: gli h2 dentro le schede collezione stanno piu'
   in basso nell'albero e hanno un trattamento loro. */
body.page-id-14 .mb-sec > h2,
.mb-sec > h2{
  display:inline-block;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:center;
}
.mb-sec p{margin:16px auto 0;max-width:48ch}

.mb-cta-row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* Titoli-sezione cliccabili (Ghost Technology, Made in Italy) — devono
   leggersi IDENTICI a un h2 normale. La regola base "a" del sito dichiara
   font-size/peso/maiuscolo DIRETTAMENTE sull'elemento <a> stesso: una
   dichiarazione diretta vince sempre sull'ereditarietà dal genitore h2,
   quindi qui vanno ridichiarati esplicitamente, non solo il colore. */
.mb-sec h2 a.mb-sec-title-link{
  display: inline-block;
  font-family: "boreal", sans-serif !important; font-weight: 200 !important;
  text-transform: uppercase !important; letter-spacing: .04em !important; font-size: 24px !important;
  line-height: 1.2; color: inherit !important; text-decoration: none !important;
  transition: color .3s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-sec h2 a.mb-sec-title-link:hover{ color: var(--mb-taupe, #9A8C74) !important; }

/* "Shop All" staccato dalla griglia prodotti sopra */
.mb-shop-showcase .mb-shop-all-btn{ display:inline-block; margin-top:40px; }
/* Stessa spaziatura per qualunque bottone che segue direttamente un blocco
   (griglia collezioni, vetrina prodotti...) dentro una sezione Home */
.mb-sec > .mb-btn-outline{ display:inline-block; margin-top:36px; }

/* Philosophy — 3 column, hairline top. Layout only; h3/p typography
   inherits from the canonical rules. Ogni colonna è ora una vera card:
   immagine (quadrato) + zoom leggero on hover, poi la riga oro e il
   testo sotto. Richiesta cliente 26/08: stesso trattamento del banner
   split e della hero — sfondo colore brand invece del nero pieno, con
   etichetta bianca finché non arrivano le foto reali. */
.mb-philosophy .mb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin-top:40px;text-align:center}
.mb-step-col{ overflow: hidden; }
.mb-step-img{
	aspect-ratio: 1/1; background: var(--mb-gold-pale) center/cover no-repeat; margin-bottom: 20px; overflow: hidden;
	border-radius: 2px; background-size: cover; background-position: center;
	transition: transform .6s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
	position: relative; display: flex; align-items: center; justify-content: center;
}
.mb-step-img::after{
	content:"Immagine da inserire";
	color:#fff; font-family:"boreal",sans-serif; font-weight:200;
	text-transform:uppercase; letter-spacing:.12em; font-size:11px;
}
.mb-step-col:hover .mb-step-img{ transform: scale(1.04); }
.mb-philosophy .mb-step{border-top:1px solid var(--mb-taupe-line);padding-top:16px}
.mb-philosophy .mb-step-n{font-size:10px;letter-spacing:.16em;color:var(--mb-taupe)}
.mb-philosophy .mb-step h3{margin:10px 0 8px;color:var(--mb-taupe-deep,#7C6F59) !important}
.mb-philosophy .mb-step p{margin:0 auto;max-width:none}
@media(max-width:760px){.mb-philosophy .mb-grid{grid-template-columns:1fr;gap:24px}}

/* Vetrina Shop in home — blocco nativo WooCommerce "Product Collection"
   (hand-picked), stessi selettori reali usati in Shop (miobuk-woocommerce.css)
   per l'immagine/hover; titolo e prezzo ereditano dalle regole universali
   in questo stesso file (.mb-pc-name/.mb-pc-collection e .price qui sotto),
   nessuna ridichiarazione locale. */
.mb-shop-showcase { max-width: 1400px; }
.mb-shop-showcase .wc-block-product-template { gap: 2.5rem 1.25rem !important; margin-top: 24px !important; }
.mb-shop-showcase [data-block-name="woocommerce/product-image"] {
  max-width: 262px; margin: 0 auto;
}
.mb-shop-showcase [data-block-name="woocommerce/product-image"] img {
  border-radius: 2px; aspect-ratio: 3/4; object-fit: cover;
  transition: transform .6s var(--mb-ease, cubic-bezier(.22,.61,.36,1));
}
.mb-shop-showcase li.wc-block-product:hover [data-block-name="woocommerce/product-image"] img {
  transform: scale(1.05);
}
@media (max-width: 900px) {
  .mb-shop-showcase .wc-block-product-template,
  .mb-shop-showcase .wc-block-product-template__responsive {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
  }
  .mb-shop-showcase .wc-block-product-template > li,
  .mb-shop-showcase .wc-block-product-template__responsive > li {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Banner a due colonne (immagine + testo/CTA) — usato per "Premium
   Notebook" e "New & Limited". .mb-split-banner-reverse inverte l'ordine
   (testo a sinistra, immagine a destra). Richiesta cliente 26/08: stesso
   trattamento già usato per lo spazio video della hero — sfondo colore
   brand (oro chiaro) invece del nero pieno, con una piccola etichetta
   bianca "Immagine da inserire" a indicare che è un segnaposto. Basta
   sostituire il background del div .mb-split-banner-media con
   un'immagine reale quando disponibile (l'etichenta sparisce da sola,
   è generata via ::after solo quando lo sfondo resta il colore di
   default). */
.mb-split-banner{
  display:flex; align-items:stretch; max-width:1400px; margin:0 auto;
  min-height:420px;
}
.mb-split-banner-media{
  flex:1 1 50%; background:var(--mb-gold-pale) center/cover no-repeat;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.mb-split-banner-media::after{
  content:"Immagine da inserire";
  color:#fff; font-family:"boreal",sans-serif; font-weight:200;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.mb-split-banner-copy{
  flex:1 1 50%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(32px,5vw,64px);
}
.mb-split-banner-copy h2{margin:0 0 12px !important;color:var(--mb-taupe-deep,#7C6F59) !important}
.mb-split-banner-copy p{margin:0 0 24px}
.mb-split-banner-reverse{flex-direction:row-reverse}
@media(max-width:760px){
  .mb-split-banner{flex-direction:column; min-height:0}
  .mb-split-banner-reverse{flex-direction:column}
  .mb-split-banner-media{min-height:280px}
}

/* Membership section — stesso schema a due colonne del banner sopra, con
   una lista di benefici invece di un paragrafo singolo. Stesso
   trattamento sfondo+etichetta degli altri placeholder immagine. */
.mb-membership-sec{
  display:flex; align-items:stretch; max-width:1400px; margin:0 auto;
  min-height:460px;
}
.mb-membership-media{
  flex:1 1 45%; background:var(--mb-gold-pale) center/cover no-repeat;
  position:relative; display:flex; align-items:center; justify-content:center;
}
.mb-membership-media::after{
  content:"Immagine da inserire";
  color:#fff; font-family:"boreal",sans-serif; font-weight:200;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px;
}
.mb-membership-copy{
  flex:1 1 55%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(32px,5vw,72px);
}
.mb-membership-benefits{ list-style:none; margin:20px 0 28px; padding:0; text-align:center; }
.mb-membership-benefits li{ margin-bottom:14px; line-height:1.6; }
.mb-membership-benefits strong{ color:var(--mb-taupe-deep,#7C6F59); font-weight:400 !important; }
@media(max-width:760px){
  .mb-membership-sec{flex-direction:column; min-height:0}
  .mb-membership-media{min-height:280px}
}