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

.guida-page{ background: var(--cream); }

/* ── 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(--serif-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(--hair);
  padding: 12px clamp(20px,5vw,80px);
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-3); 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: 760px; margin: 0 auto;
  padding: 64px clamp(20px,5vw,80px);
}

/* Intro */
.guida-intro{
  font-family: var(--serif); 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(--hair);
}

/* Sezioni */
.guida-section{ margin: 0 0 56px; }
.guida-section-title{
  font-family: var(--serif-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(--hair-strong);
}
.guida-section-body p{
  font-family: var(--serif); 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); 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(--hair-strong); }
.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(--hair); 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(--hair);
}
.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-3); }

@media(max-width:720px){
  .guida-body{ padding-top: 40px; padding-bottom: 48px; }
  .guida-verdict{ padding: 20px 22px; }
}