/* Guide format (templates/partials/guide.html, guide_format.go): a numbered
   troubleshooting guide that goes with a video. Owner's design, 2026-11-12:
   the bold chapters of mockup 10 with the HaruHost section of mockup 6
   (docs/features/landing-seo-topics/guide-page-design/README.md).
   Loaded by guide pages alone, after site.css.

   One grid for the whole guide, so every block shares the same edges:
   the hero's title and video, the chapter card, each reason's number, text
   and screenshot, the HaruHost section and the questions all start at the
   wrap's left edge and end at its right edge. Reasons use three columns:
   the number (--gx-num), the text, and the screenshot (--gx-shot). */

.gx {
  --gx-num: 136px;
  --gx-gap: 44px;
  --gx-shot: 440px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "crumbs crumbs" "head video" "toc toc" "reasons reasons" "payoff payoff" "close close" "more more";
  column-gap: 56px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 32px;
}
.gx > * { min-width: 0; }
.gx-crumbs { grid-area: crumbs; }
.gx-crumbs .crumbs { margin-bottom: 28px; }

/* ---------- Hero: title and intro beside the video, tops aligned ---------- */
.gx-head { grid-area: head; }
.gx-head .eyebrow { margin-bottom: 14px; }
.gx-head h1 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -0.035em; line-height: 1.04; font-weight: 750; text-wrap: balance; }
.gx-intro { margin-top: 22px; color: #d6d3d1; font-size: 18px; }
.gx-intro p:first-child { color: var(--text); }
.gx-intro p:last-child { margin-bottom: 0; }
.gx-video { grid-area: video; margin-top: 39px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: #000; box-shadow: var(--shadow); }
.gx-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Chapter card: two columns read top to bottom ---------- */
.gx-toc { grid-area: toc; margin-top: 56px; padding: 22px 28px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--accent); }
.gx-toc-k { color: var(--accent); font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.gx-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.gx-toc li { break-inside: avoid; }
.gx-toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; padding: 10px 0; color: #d6d3d1; font-size: 15.5px; line-height: 1.35; border-bottom: 1px solid var(--line); transition: color .15s; }
.gx-toc a:hover { color: var(--text); }
.gx-toc .gx-n { color: var(--accent); font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---------- Reasons: number | text | screenshot ---------- */
.gx-reasons { grid-area: reasons; margin-top: 24px; }
/* Every reason has the screenshot column, with or without a screenshot, so
   the text column has the same edges all the way down. */
.gx-reason { display: grid; grid-template-columns: var(--gx-num) minmax(0, 1fr) var(--gx-shot); column-gap: var(--gx-gap); padding: 56px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.gx-reason:first-child { border-top: 0; }
.gx-num { font-size: 96px; font-weight: 800; line-height: 0.74; letter-spacing: -0.06em; color: var(--accent); font-variant-numeric: tabular-nums; border-right: 2px solid var(--accent-line); height: 100%; }
.gx-num span { position: sticky; top: 96px; display: block; }
.gx-text { min-width: 0; }
.gx-text h2 { font-size: clamp(25px, 2.5vw, 31px); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.gx-text p, .gx-text li { color: #d6d3d1; }
.gx-text > :last-child { margin-bottom: 0; }
.gx-text ul { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 1em; }
.gx-text ul li { position: relative; padding-left: 22px; }
.gx-text ul li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.gx-text strong { color: var(--text); }
.gx-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.gx-text code { color: #fdba74; overflow-wrap: anywhere; }
.gx-code { margin: 4px 0 18px; padding: 14px 16px; border-radius: 10px; background: #0a0807; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); overflow-x: auto; font-size: 15px; line-height: 1.5; }
.gx-code code { color: var(--text); font-size: 0.95em; white-space: pre-wrap; overflow-wrap: anywhere; }
.gx-shot { margin: 0; align-self: start; position: sticky; top: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--card); }
.gx-shot img { width: 100%; height: auto; display: block; }

/* ---------- HaruHost section: the payoff (mockup 6) ---------- */
.gx-payoff { grid-area: payoff; padding: 64px 0 8px; border-top: 1px solid var(--line-2); scroll-margin-top: 80px; }
.gx-payoff h2 { font-size: clamp(34px, 4.2vw, 54px); letter-spacing: -0.035em; line-height: 1.04; font-weight: 750; margin: 0 0 18px; }
.gx-payoff h2 em { font-style: normal; color: var(--accent); }
.gx-payoff-lead { max-width: 860px; color: #d6d3d1; font-size: 18px; }
.gx-feats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.gx-feats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-content: start; }
.gx-feat-i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent); }
.gx-feat-i .i { font-size: 20px; }
.gx-feats p { margin: 0; color: #d6d3d1; font-size: 15.5px; line-height: 1.55; }
.gx-feats strong { display: block; color: var(--text); font-size: 18px; letter-spacing: -0.01em; margin: 7px 0 6px; }
.gx-colon { display: none; }
.gx-covers { grid-column: 2; justify-self: start; margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: #fdba74; font-size: 13.5px; font-weight: 600; }
.gx-covers::before { content: ""; width: 10px; height: 10px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; border-bottom-left-radius: 3px; transform: translateY(-3px); }
.gx-covers:hover { border-color: var(--accent); color: var(--text); }
.gx-cta { margin: 48px 0 0; text-align: center; }
.gx-close { grid-area: close; margin: 22px auto 0; max-width: 680px; text-align: center; font-size: 17px; color: #d6d3d1; }
.gx-close a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ---------- The topic's questions, related and other guides ---------- */
.gx-more { grid-area: more; display: grid; gap: 40px; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.gx-more h2 { font-size: 24px; margin: 0 0 16px; }
.gx-more .faq { max-width: none; }
.gx-more a.guide-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-weight: 600; font-size: 15px; }
.gx-more a.guide-link:hover { border-color: var(--line-2); }
.gx-more a.guide-link .i { color: var(--accent); flex: none; }
.gx-more .gx-guides { display: block; }
.gx-guides .legal-toc-k { padding: 0 16px; color: var(--faint); font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; margin: 6px 0; }
.gx-guides ol { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 20px; font-size: 14px; }
.gx-guides li a { display: block; padding: 5px 0; color: var(--muted); }
.gx-guides li a:hover { color: var(--text); }
.gx-guides li a[aria-current] { color: var(--accent); font-weight: 600; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .gx { --gx-shot: 360px; --gx-num: 112px; --gx-gap: 36px; }
  .gx-num { font-size: 80px; }
  .gx-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
}
/* Tablets: one column; the screenshot goes under its reason's text. */
@media (max-width: 980px) {
  .gx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "head" "video" "toc" "reasons" "payoff" "close" "more"; }
  .gx-video { margin-top: 32px; }
  .gx-toc { margin-top: 40px; }
  .gx-reason { grid-template-columns: var(--gx-num) minmax(0, 1fr); }
  .gx-reason .gx-shot { grid-column: 2; position: static; margin-top: 24px; }
  .gx-num { grid-row: span 2; }
}
/* Phones: the number above its heading, the video right after the first
   intro paragraph so it shows on the first screen. */
@media (max-width: 640px) {
  .gx { display: flex; flex-direction: column; padding-top: 20px; }
  .gx-crumbs .crumbs { margin-bottom: 20px; }
  .gx-head, .gx-intro { display: contents; }
  .gx-intro p { font-size: 17px; }
  .gx-intro p:first-child { margin-top: 18px; }
  .gx-video { order: 1; width: 100%; margin: 8px 0 24px; border-radius: 12px; }
  .gx-intro p ~ p { order: 2; }
  .gx-toc { order: 3; margin-top: 28px; padding: 18px 18px 8px; }
  .gx-toc ol { columns: 1; }
  .gx-reasons { order: 4; margin-top: 8px; }
  .gx-payoff { order: 5; }
  .gx-close { order: 6; }
  .gx-more { order: 7; }
  .gx-reason, .gx-reason.has-shot { display: block; padding: 44px 0; }
  .gx-num { font-size: 64px; height: auto; border-right: 0; border-bottom: 2px solid var(--accent-line); padding: 0 0 12px; margin-bottom: 18px; width: max-content; }
  .gx-num span { position: static; }
  .gx-text h2 { font-size: 25px; }
  .gx-code { font-size: 14px; padding: 12px 14px; }
  .gx-payoff { padding-top: 48px; }
  .gx-payoff h2 { font-size: 36px; }
  .gx-payoff-lead { font-size: 17px; }
  .gx-feats { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 32px; }
  .gx-cta { margin-top: 36px; }
  .gx-cta .btn { width: 100%; justify-content: center; }
  .gx-more { margin-top: 48px; padding-top: 40px; }
}