/* ============================================================
   CV Builder discover drawers: Examples + Guides.
   Builds on .cv-drawer / .cv-drawer-wide (cv-builder.css + cv-reviews.css).
   Uses the site tokens (--bg/--bg2/--bg3, --t1/2/3, --bd, --accent, --font).
   ============================================================ */

.cvd-body { padding: 18px 20px 28px; font-family: var(--font); color: var(--t1); }
.cvd-intro { font-size: 13.5px; line-height: 1.5; color: var(--t3); margin: 0 0 16px; }
.cvd-loading { font-size: 14px; color: var(--t3); padding: 8px 0; }
.cvd-empty { font-size: 14px; color: var(--t3); padding: 8px 0; }

/* Examples */
.cvd-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cvd-example {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 14px; background: var(--bg); border: 1px solid var(--bd); border-radius: 12px;
  cursor: pointer; color: var(--t1); font-family: var(--font);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.cvd-example:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26,22,20,0.1); }
.cvd-example-role { font-size: 14.5px; font-weight: 700; }
.cvd-example-intro { font-size: 12px; line-height: 1.45; color: var(--t3); }

/* Guides index */
.cvd-guide {
  display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  padding: 15px 16px; margin-bottom: 10px; background: var(--bg);
  border: 1px solid var(--bd); border-radius: 12px; cursor: pointer; color: var(--t1); font-family: var(--font);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.cvd-guide:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(26,22,20,0.1); }
.cvd-guide-title { font-size: 15px; font-weight: 700; }
.cvd-guide-tag { font-size: 12.5px; line-height: 1.45; color: var(--t2); }
.cvd-guide-meta { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; }

/* Guide article (inline reader) */
.cvd-back {
  background: none; border: 1px solid var(--bd); border-radius: 8px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--t2);
  padding: 7px 13px; margin-bottom: 14px; transition: border-color 0.15s, color 0.15s;
}
.cvd-back:hover { border-color: var(--accent); color: var(--accent); }
.cvg-h1 { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 0 0 8px; letter-spacing: -0.01em; }
.cvg-tagline { font-size: 14px; line-height: 1.55; color: var(--t2); margin: 0 0 6px; }
.cvg-meta { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 18px; }
.cvg-article-body h2 { font-size: 16.5px; font-weight: 800; color: var(--t1); margin: 22px 0 8px; }
.cvg-article-body p { font-size: 14px; line-height: 1.65; color: var(--t2); margin: 0 0 12px; }
.cvg-article-body ul, .cvg-article-body ol { margin: 0 0 14px; padding-left: 20px; }
.cvg-article-body li { font-size: 14px; line-height: 1.6; color: var(--t2); margin-bottom: 5px; }
.cvg-note {
  display: block; background: var(--accent-light); border-radius: 10px; padding: 12px 15px;
  font-size: 13.5px; line-height: 1.55; color: var(--t2); margin: 0 0 16px;
}
.cvg-article-body figure { margin: 0 0 18px; }
.cvg-article-body figure img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--bd); display: block; }
.cvg-article-body figcaption { font-size: 12px; color: var(--t3); margin-top: 7px; line-height: 1.45; }
.cvg-related { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bd); }
.cvg-related-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
.cvg-related-link {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; color: var(--accent); padding: 6px 0;
}
.cvg-related-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .cvd-examples { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cvd-example:hover, .cvd-guide:hover { transform: none; }
}