/* ============================================================
   Groov-illa · guida-v5.css — solo token del sistema v5
   ============================================================ */

.guida-page{}

/* ── Hero ─────────────────────────────────────────────────── */
.guida-hero{
  position: relative; background: var(--ink); overflow: hidden;
  min-height: 280px; display: flex; flex-direction: column;
}
.guida-hero-img{
  width: 100%; aspect-ratio: 21/8; object-fit: cover;
  display: block; opacity: .42; flex-shrink: 0;
}
@media(max-width:720px){ .guida-hero-img{ aspect-ratio: 16/9; } }
/* Con immagine: absolute sopra */
.guida-hero:has(.guida-hero-img) .guida-hero-body{
  position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.22 0.025 50 / .82) 0%, transparent 60%);
}
/* Senza immagine: flow normale */
.guida-hero-body{
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(36px,5vw,72px) clamp(20px,5vw,80px);
  flex: 1;
}
.guida-hero-cat{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--cream); opacity: .7; margin-bottom: 14px;
}
.guida-hero-title{
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(32px, 5vw, 72px); line-height: .96; letter-spacing: -.018em;
  color: var(--cream); margin: 0 0 16px; max-width: 20ch; text-wrap: balance;
}
.guida-hero-sub{
  font-family: var(--serif); font-style: italic; font-size: clamp(16px,1.4vw,20px);
  line-height: 1.45; color: oklch(0.962 0.014 80 / .90); max-width: 56ch;
}

/* ── Disclosure ───────────────────────────────────────────── */
.guida-disclosure{
  background: var(--cream-2); border-bottom: 1px solid var(--paper-line);
  padding: 12px clamp(20px,5vw,80px);
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-mute); display: flex; gap: 8px; align-items: flex-start;
}
.guida-disclosure::before{
  content: "›"; font-style: normal; font-family: var(--serif);
  font-size: 15px; color: var(--rust); flex-shrink: 0;
}

/* ── Body ─────────────────────────────────────────────────── */
.guida-body{
  max-width: var(--width-text); margin: 0 auto;
  padding: 64px clamp(20px,5vw,80px);
}

/* Intro */
.guida-intro{
  font-family: var(--serif-article); font-style: italic;
  font-size: clamp(17px,1.6vw,20px); line-height: 1.55;
  color: var(--ink-2); margin: 0 0 52px; max-width: 62ch;
  padding-bottom: 32px; border-bottom: 1px solid var(--paper-line);
}

/* Sezioni */
.guida-section{ margin: 0 0 56px; }
.guida-section-title{
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 18px;
  padding-top: 20px; border-top: 1px solid var(--paper-line);
}
.guida-section-body p{
  font-family: var(--serif-article); font-size: 18px; line-height: 1.72;
  color: var(--ink); margin: 0 0 1.3em; text-wrap: pretty;
}
.guida-section-body strong{ font-weight: 600; }
.guida-section-body em{ font-style: italic; }
.guida-section-body a{ color: var(--rust); border-bottom: 1px solid oklch(0.56 0.165 42 / .3); }
.guida-section-body a:hover{ border-bottom-color: var(--rust); }
.guida-section-body ul, .guida-section-body ol{
  font-family: var(--serif-article); font-size: 17px; line-height: 1.65;
  color: var(--ink); padding-left: 1.4em; margin: 0 0 1.3em;
}
.guida-section-body li{ margin-bottom: .4em; }

/* Verdict */
.guida-verdict{
  background: var(--ink); color: var(--cream);
  padding: 28px 32px; margin: 48px 0;
}
.guida-verdict-label{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--rust); display: block; margin-bottom: 14px;
}
.guida-verdict p{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px,1.6vw,19px); line-height: 1.55;
  color: oklch(0.962 0.014 80 / .96); margin: 0;
}

/* FAQ */
.guida-faq{ margin: 48px 0; border-top: 1px solid var(--paper-line); }
.guida-faq-label{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--rust); display: block; padding: 20px 0 0; margin-bottom: 4px;
}
.guida-faq-item{ border-bottom: 1px solid var(--paper-line); padding: 20px 0; }
.guida-faq-q{
  font-family: var(--serif); font-weight: 500; font-size: 17px;
  color: var(--ink); line-height: 1.35; margin: 0 0 10px;
}
.guida-faq-a{
  font-family: var(--serif); font-size: 16px; line-height: 1.62;
  color: var(--ink-2); margin: 0;
}

/* Related */
.guida-related{ margin: 48px 0; }
.guida-related-label{
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--rust);
  display: block; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.guida-related-list{ list-style: none; padding: 0; }
.guida-related-item{
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--paper-line);
}
.guida-related-item a{
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink); text-decoration: none;
}
.guida-related-item a:hover{ color: var(--rust); }
.guida-related-arrow{ font-family: var(--serif); font-size: 17px; color: var(--ink-mute); }

@media(max-width:720px){
  .guida-body{ padding-top: 40px; padding-bottom: 48px; }
  .guida-verdict{ padding: 20px 22px; }
}
.guida-content{max-width:var(--width-text);margin:0 auto;padding:48px 0 80px}
.guida-content p{font-family:var(--serif-article);font-size:18px;line-height:1.72;color:var(--ink);margin:0 0 24px}
.guida-content h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.5vw,32px);margin:48px 0 16px;color:var(--ink)}
.guida-content h3{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:40px 0 12px;color:var(--ink)}
.guida-content strong{font-weight:600}

/* ── Author box ── */
.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)}