/* AI Curator Consulting Suite: css/guide.css
   The user guide hub (web/guide/, built by guide/build.py). Loaded after
   suite.css, whose colors, header, buttons and footer it reuses. */

.gd-main { padding: 26px 0 70px; }
.guide .wl-brand .brand-logo { width: 170px; }

.gd-crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.gd-crumbs a { color: var(--muted); text-decoration: none; }
.gd-crumbs a:hover { color: var(--text); text-decoration: underline; }
.gd-crumbs span:last-child { color: var(--text); }

.gd-hero h1, .gd-guide-head h1, .gd-task h1 {
  margin: 0 0 12px; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.6px;
}
.gd-hero h1 { background: linear-gradient(90deg, var(--cyan), var(--blue) 45%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.gd-intro { margin: 0; max-width: 760px; color: #c9d0ea; font-size: 18px; line-height: 1.6; }
.gd-kicker { margin: 0 0 10px; color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }

/* ---- the hub: one card per guide ---- */
.gd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.gd-card {
  border: 1px solid var(--line); border-radius: 22px; padding: 24px 24px 14px;
  background: linear-gradient(180deg, rgba(21, 24, 58, .75), rgba(11, 13, 28, .92));
  box-shadow: 0 0 34px rgba(78, 124, 255, .10);
}
.gd-card.gd-suite { border-color: rgba(25, 215, 255, .45); box-shadow: 0 0 38px rgba(25, 215, 255, .14); }
.gd-card-head { display: block; text-decoration: none; color: var(--text); }
.gd-card-head h2 { margin: 14px 0 6px; font-size: 22px; }
.gd-card-head:hover h2 { text-decoration: underline; }
.gd-card > p { margin: 0 0 6px; color: var(--muted); line-height: 1.55; }
.gd-logo { display: block; height: 58px; width: auto; max-width: 100%; }
.gd-guide-head .gd-logo { height: 76px; margin-bottom: 20px; }

/* ---- a list of tasks ---- */
.gd-list { list-style: none; counter-reset: task; margin: 16px 0 0; padding: 0; }
.gd-list li { counter-increment: task; border-top: 1px solid var(--line); }
.gd-list a {
  display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; padding: 13px 4px;
  color: var(--text); text-decoration: none;
}
.gd-list a::before { content: counter(task); grid-row: span 2; color: var(--cyan); font-weight: 800; }
.gd-list a b { font-size: 16.5px; }
.gd-list a span { grid-column: 2; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.gd-list a:hover b { color: #8ee9ff; }
.gd-guide-head + .gd-list { max-width: 820px; margin-top: 30px; }
.gd-guide-head + .gd-list a { padding: 17px 6px; }
.gd-guide-head + .gd-list a b { font-size: 18px; }

/* ---- one task: numbered steps, a picture each ---- */
.gd-task { max-width: 900px; }
.gd-steps { list-style: none; margin: 38px 0 0; padding: 0; }
.gd-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; padding-bottom: 40px; }
.gd-num {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--pink)); box-shadow: 0 0 22px rgba(129, 91, 255, .45);
}
.gd-step-body h2 { margin: 9px 0 8px; font-size: 22px; }
.gd-step-body p { margin: 0 0 16px; color: #d5daf0; font-size: 17px; line-height: 1.65; }
.gd-shot { display: block; width: fit-content; max-width: 100%; border: 1px solid #2f3770; border-radius: 14px; overflow: hidden; background: var(--panel); box-shadow: 0 14px 44px rgba(0, 0, 0, .5); }
.gd-shot img { display: block; width: auto; max-width: 100%; height: auto; }
.gd-shot:hover { border-color: var(--cyan); }

.gd-notes { margin: 0 0 40px; padding: 20px 24px; border: 1px solid rgba(25, 215, 255, .35); border-radius: 16px; background: rgba(25, 215, 255, .06); }
.gd-notes h2 { margin: 0 0 8px; font-size: 17px; color: var(--cyan); }
.gd-notes ul { margin: 0; padding-left: 20px; color: #d5daf0; line-height: 1.65; }
.gd-notes li + li { margin-top: 6px; }

.gd-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gd-turn a { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); color: var(--text); text-decoration: none; font-weight: 700; }
.gd-turn a:hover { border-color: var(--blue); }
.gd-turn small { display: block; margin-bottom: 4px; color: var(--muted); font-weight: 600; font-size: 13px; }
.gd-next { text-align: right; }

.guide .wl-footer a { text-decoration: underline; }

@media (max-width: 860px) {
  .gd-cards { grid-template-columns: 1fr; }
  .guide .wl-nav nav { display: none; }
}
@media (max-width: 560px) {
  .gd-step { grid-template-columns: 1fr; row-gap: 8px; }
  .gd-num { width: 38px; height: 38px; font-size: 16px; }
  .gd-turn { grid-template-columns: 1fr; }
  .gd-next { text-align: left; }
  .gd-step-body p, .gd-intro { font-size: 16px; }
}

/* ---- the language menu: links to the same page in each language ---- */
.guide .tools { display: flex; align-items: center; gap: 12px; }
.lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.lang-menu a:hover { background: #1a2148; }
.lang-menu a[aria-current="true"] { color: #fff; font-weight: 800; background: #1a2148; }
.gd-shots-note { margin: 14px 0 0; color: var(--muted); font-size: 14.5px; }