/* ============================================================
   Groov-illa · groovilla-base.css
   Design system condiviso: variabili, reset, layout,
   topbar, nav, sezioni shared, newsletter, footer.
   Importare su OGNI pagina del sito.
   ============================================================ */

:root {
  --cream:      oklch(0.968 0.010 80);
  --cream-2:    oklch(0.945 0.016 78);
  --cream-3:    oklch(0.915 0.022 76);
  --paper-line: #cccccc;
  --ink:        oklch(0.14  0.014 60);
  --ink-2:      oklch(0.18  0.014 60);
  --ink-mute:   oklch(0.28  0.018 60);
  --olive:      oklch(0.5   0.075 110);
  --olive-deep: oklch(0.38  0.07  112);
  --olive-soft: oklch(0.78  0.06  108);
  --rust:       oklch(0.55  0.14  45);
  --serif:   "Instrument Serif", Georgia, serif;
  --display: "DM Serif Display", Georgia, serif;
  --body:    "Work Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
  --serif-article: "Lora", Georgia, serif;

  /* ── Type scale ── */
  --type-hero:    clamp(40px, 5.6vw, 82px);
  --type-section: clamp(44px, 6vw, 80px);
  --type-h2:      clamp(22px, 2.2vw, 32px);
  --type-lede:    clamp(17px, 1.6vw, 20px);
  --type-body:    17px;
  --type-caption: 13px;
  --type-label:   10px;

  /* ── Spacing scale ── */
  --space-xs:  16px;
  --space-sm:  28px;
  --space-md:  48px;
  --space-lg:  64px;
  --space-xl:  96px;
  --space-2xl: 128px;

  /* ── Content widths ── */
  --width-text:    720px;   /* corpo testo: guida, reportage, classifica */
  --width-article: 1100px;  /* articoli con sidebar: pillar, review */
  --width-full:    1320px;  /* archivi, layout a colonne */
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body::before{display:none!important}
body{
  background:#fff;
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, oklch(0.92 0.04 80/.6), transparent 60%),
    radial-gradient(900px  500px at 95%   5%, oklch(0.9  0.05 50/.35),transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, oklch(0.6 0.02 70/.035) 39px 40px);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;object-fit:cover}

/* ── LAYOUT ── */
.page{max-width:1400px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.page{padding:0 16px}}

/* ── TOPBAR ── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-mute);text-transform:uppercase;
  border-bottom:1px solid var(--paper-line);
}
.tb-live{display:inline-flex;align-items:center;gap:8px}
.pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--rust);box-shadow:0 0 0 4px oklch(0.55 0.14 45/.18);
  animation:pulse 2.4s ease-in-out infinite;flex-shrink:0
}
@keyframes pulse{50%{box-shadow:0 0 0 8px oklch(0.55 0.14 45/.05)}}
.tb-links{display:flex;gap:20px}
@media(max-width:600px){.tb-links{display:none}}

/* ── NAV ── */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0 14px;gap:24px;
  border-bottom:1px solid var(--paper-line);
}
.logo{
  font-family:'Boldonse',sans-serif;font-size:38px;line-height:1;
  display:inline-flex;align-items:baseline;flex-shrink:0;text-decoration:none;
}
.logo .g{color:var(--ink);text-shadow:0 1px 1px rgba(255,255,255,0.5),0 -1px 1px rgba(0,0,0,0.18)}
.logo .dash{color:var(--rust);text-shadow:0 1px 1px rgba(255,255,255,0.4),0 -1px 1px rgba(0,0,0,0.15)}
.logo .i{color:var(--olive-deep);text-shadow:0 1px 1px rgba(255,255,255,0.4),0 -1px 1px rgba(0,0,0,0.15)}
.nav-links{
  display:flex;gap:24px;align-items:center;
  font-family:var(--display);font-size:15px;font-weight:400;color:var(--ink);flex:1;margin-left:28px;
}
.nav-links a:hover{color:var(--ink)}
.nav-r{display:flex;gap:10px;align-items:center}
.btn-ghost{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--paper-line);border-radius:999px;
  color:var(--ink-mute);background:transparent;cursor:pointer;
}
.btn-solid{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 18px;border-radius:999px;
  background:var(--ink);color:var(--cream);border:none;cursor:pointer;
  display:inline-flex;align-items:center;
}
.menu-btn{display:none;background:none;border:none;padding:12px 8px;cursor:pointer;flex-direction:column;gap:5px;align-items:flex-end;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
.hbg-icon{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.hbg-icon span{display:block;height:1.5px;background:var(--ink);transition:width .2s}
.hbg-icon span:nth-child(1){width:16px}
.hbg-icon span:nth-child(2){width:22px}
.hbg-icon span:nth-child(3){width:22px}
.menu-btn:hover .hbg-icon span{width:22px}
@media(max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  .btn-ghost:not(.menu-btn){display:none}
  .btn-solid{display:none}
  .topbar .tb-links{display:none}
}

/* ── NEWSLETTER ── */
.nl-wrap{background:var(--ink);padding:80px 0}
.nl-inner{
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
@media(max-width:900px){.nl-inner{grid-template-columns:1fr;gap:36px;padding:0 16px}}
.nl-wrap h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(34px,4.5vw,58px);line-height:1;letter-spacing:-.02em;
  margin:0 0 16px;color:var(--cream);text-wrap:balance;
}
.nl-wrap h2 em{font-family:var(--serif);font-style:italic;color:var(--olive-soft)}
.nl-desc{font-family:var(--serif);font-size:17px;line-height:1.46;color:oklch(0.7 0.02 80);margin:0}
.nl-form{display:flex;flex-direction:column;gap:14px}
.nl-field{
  display:flex;border:1.5px solid oklch(0.42 0.02 60);border-radius:3px;overflow:hidden;
}
.nl-field input{
  flex:1;border:0;background:transparent;padding:15px 18px;
  font-family:var(--body);font-size:15px;color:var(--cream);outline:none;
}
.nl-field input::placeholder{color:oklch(0.48 0.02 80)}
.nl-field button{
  appearance:none;border:0;background:var(--rust);color:var(--cream);
  padding:0 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.nl-field button:hover{background:oklch(0.62 0.14 45)}
.nl-terms{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.42 0.02 80)}
.nl-stats{display:flex;flex-direction:column;gap:0}
.nl-stat{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-bottom:1px solid oklch(0.3 0.02 60);
}
.nl-stat:last-child{border-bottom:0}
.nl-stat .nv{font-family:var(--display);font-size:44px;line-height:1;color:var(--cream);letter-spacing:-.02em}
.nl-stat .nv em{font-family:var(--serif);font-style:italic;color:var(--olive-soft)}
.nl-stat .nl-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:oklch(0.48 0.02 80);max-width:200px}

/* ── FOOTER ── */
footer{padding:56px 0 44px;border-top:1px solid var(--paper-line)}
.footer-big{
  font-family:var(--display);font-size:clamp(54px,8vw,108px);line-height:.84;
  color:var(--ink);letter-spacing:-.03em;margin:0 0 44px;font-weight:400;opacity:.1;
}
.footer-big em{font-family:var(--serif);font-style:italic;color:var(--olive-deep)}
.footer-top{
  display:grid;grid-template-columns:2fr repeat(4,1fr);gap:32px;margin-bottom:44px;
}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr}}

/* ── Mobile menu ── */
.nav-mobile-menu{display:none;padding:16px 32px 24px;border-top:1px solid var(--paper-line)}
.nav-mobile-menu.open{display:block}
.nav-mobile-menu ul{list-style:none;margin:0;padding:0}
.nav-mobile-menu ul li{border-bottom:1px solid var(--paper-line)}
.nav-mobile-menu ul li a{display:block;padding:12px 0;font-family:var(--display);font-size:18px;font-weight:400;color:var(--ink);text-decoration:none}
.nav-mobile-menu ul li a:hover{color:var(--rust)}
.nav-mobile-menu ul li a.nav-cta{color:var(--rust);font-weight:600}
.mobile-lang{display:flex;gap:8px;margin-top:16px}

/* ── Lang switcher ── */
.lang-btn{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:transparent;border:1px solid var(--paper-line);color:var(--ink-mute);padding:4px 10px;cursor:pointer;transition:all .15s}
.lang-btn:hover,.lang-btn.active{color:var(--ink);border-color:var(--ink)}

/* ── FONT OVERRIDE GLOBALE ──
   Tutti i body text usano Lora indipendentemente da
   quale CSS inline ogni articolo/template carica.
   Sovrascrive var(--body) = Work Sans nei contesti editoriali. */
.cl-intro p,
.cl-verdict-short,
.cl-pros li, .cl-cons li,
.cl-buy-if-text,
.bn-body p,
.guida-prose p,
.guida-section p,
.rec-prose p,
.pillar-content p,
.pillar-content li,
.rec-faq-a,
.rec-faq-item .rec-faq-a,
article p,
.body-text p {
  font-family: var(--serif-article);
}

/* ── NAV STICKY ── */
.nav-sticky{
  position:sticky;top:0;z-index:200;
  background:#fff;
  border-bottom:1px solid var(--paper-line);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.nav-sticky .nav{border-bottom:none}
.nav-wrapper{position:sticky;top:0;z-index:200;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.06)}

@media(max-width:1200px) and (min-width:721px){
  .logo{font-size:52px}
}

/* ── MIGRATI DA grooville.css ── */
.footer-brand{margin-bottom:.5rem}
.footer-desc{font-size:13px;line-height:1.6;opacity:.6;max-width:280px}
.footer-disclosure{font-family:"Lora",Georgia,serif;font-style:italic;font-size:12px;line-height:1.6;color:var(--ink-mute)}
.breadcrumb{max-width:1280px;margin:0 auto;padding:1rem 2rem;font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--ink-mute);display:flex;gap:.5rem;align-items:center}
.breadcrumb a{color:var(--rust);text-decoration:none}
.divider{height:6px;background:repeating-linear-gradient(90deg,var(--rust) 0,var(--rust) 30px,var(--olive-deep) 30px,var(--olive-deep) 60px,var(--cream-2) 60px,var(--cream-2) 90px)}
.scroll-top{position:fixed;bottom:2rem;right:2rem;background:var(--rust);color:var(--cream);width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;z-index:300;opacity:0;pointer-events:none;transition:opacity .3s}
.scroll-top.visible{opacity:1;pointer-events:all}
@media(max-width:600px){.book-callout__btn-label{display:none}.book-callout__btn{padding:.55rem .8rem}}

.book-callout{background:var(--cream-2);border:1px solid var(--paper-line);padding:0;margin:48px auto;max-width:720px}
.book-callout__inner{display:flex;gap:2rem;padding:2rem;align-items:center}
.book-callout__cover{flex:0 0 120px;max-width:120px}
.book-callout__cover img{width:100%;display:block;box-shadow:0 4px 20px rgba(0,0,0,.12)}
.book-callout__content{flex:1;min-width:0}
.book-callout__eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin-bottom:8px}
.book-callout__title{font-family:var(--display);font-size:clamp(18px,2vw,24px);line-height:1.1;color:var(--ink);margin:0 0 4px}
.book-callout__subtitle{font-family:"Lora",Georgia,serif;font-style:italic;font-size:14px;color:var(--ink-mute);margin:0 0 8px}
.book-callout__synopsis{font-family:"Lora",Georgia,serif;font-size:14px;line-height:1.6;color:var(--ink);margin:0 0 16px}
.book-callout__author{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-mute);margin-bottom:16px}
.book-callout__buttons{display:flex;gap:8px;flex-wrap:wrap}
.book-callout__btn{display:inline-flex;align-items:center;gap:6px;padding:.45rem .9rem;border:1.5px solid var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);transition:background .18s,color .18s}
.book-callout__btn:hover{background:var(--ink);color:var(--cream)}
.book-callout__btn-flag{font-size:1rem}
@media(max-width:600px){.book-callout__inner{flex-direction:column;gap:1rem;padding:1.5rem;text-align:center}.book-callout__cover{flex:none;max-width:120px;margin:0 auto}.book-callout__btn-label{display:none}}
/* ── ACCESSIBILITY: reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

.section-more--static{cursor:default;pointer-events:none}

/* ── Section title modifiers ── */
.section-title--rust{ color:var(--rust) }
.section-title--ink{ color:var(--ink) }
.section-title-em{ font-style:italic;color:var(--rust);font-family:var(--serif) }

/* ── Author box — globale ── */
.author-box{display:flex;flex-direction:row;align-items:flex-start;gap:20px;padding:20px 24px;border:1px solid var(--paper-line);background:oklch(0.97 0.005 80/.5);margin:40px 0}
.author-avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;overflow:hidden;border:2px solid var(--paper-line)}
.author-avatar picture{display:block;width:100%;height:100%}
.author-avatar img{width:56px;height:56px;object-fit:cover;object-position:center top}
.av-initials{width:56px;height:56px;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.author-body{flex:1;display:flex;flex-direction:column;gap:4px}
.author-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--rust);display:block}
.author-name{font-family:var(--display);font-size:20px;font-style:italic;color:var(--ink)}
.author-role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.author-link{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);text-decoration:none;margin-top:6px;display:inline-block}
.author-link:hover{color:var(--ink)}

/* ── i18n: nascondi contenuto EN su pagine IT e viceversa ── */
[data-lang="en"]{ display:none }
body.en [data-lang="en"]{ display:block }
body.en [data-lang="it"]{ display:none }