/* Guides: long-form articles on the AgentUnion site. Loaded after /style.css. */

.crumbs{max-width:var(--wrap);margin:28px auto 0;padding:0 var(--pad);font:600 14px var(--body);color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:'/';margin-right:8px;color:#b9a988}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--red)}

/* Article header */
.guide-head{max-width:var(--wrap);margin:22px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.guide-kicker{font:800 20px var(--display);color:var(--red);letter-spacing:.04em;text-transform:uppercase;margin:0}
.guide-head h1{font-size:clamp(44px,5.6vw,82px);max-width:18ch}
.guide-dek{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--text);max-width:62ch;margin:0}
.guide-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font:600 14px var(--body);color:var(--muted);margin:0}
.guide-meta time{color:var(--ink)}
.guide-hero{max-width:var(--wrap);margin:36px auto 0;padding:0 var(--pad)}
.guide-hero img{display:block;width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 60px #4b382524}
.guide-hero figcaption{font-size:13px;color:var(--muted);margin-top:10px}

/* Layout: table of contents beside the article */
.guide-layout{max-width:var(--wrap);margin:56px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:calc(var(--header) + 24px);font-size:14px;border-left:2px solid var(--line);padding-left:18px}
.toc p{font:800 17px var(--display);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px;color:var(--ink)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.toc a{color:var(--muted);text-decoration:none;line-height:1.35;display:block}
.toc a:hover{color:var(--red)}

/* Prose */
.prose{max-width:720px;font-size:18px;line-height:1.72;color:var(--text)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(34px,3.4vw,46px);color:var(--ink);margin-top:2.1em;scroll-margin-top:calc(var(--header) + 20px)}
.prose h3{font-size:27px;color:var(--ink);margin-top:1.8em;scroll-margin-top:calc(var(--header) + 20px)}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose p,.prose ul,.prose ol{margin-bottom:0}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--red)}
.prose strong{color:var(--ink)}
.prose a{color:var(--red);font-weight:600}
.prose .lead{font-size:20px;color:var(--ink)}
.prose code{font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#efe3cb;border:1px solid #e3d3b4;border-radius:5px;padding:1px 5px;color:var(--ink);word-break:break-word}
.prose pre{background:var(--night);color:var(--night-ink);border-radius:14px;padding:20px 22px;overflow-x:auto;font:14.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 18px 36px #2a1e1426;margin-top:1.3em}
.prose pre code{background:none;border:0;padding:0;color:inherit;font:inherit;word-break:normal}
.prose figure{margin:1.6em 0 0}
.prose figcaption,.code-label{font:600 13px var(--body);color:var(--muted);margin-top:8px}
.code-label{margin:1.6em 0 -.6em;display:flex;align-items:center;gap:8px}
.code-label+pre{margin-top:.9em}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;margin-top:1.3em;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:800 17px var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);border-bottom:2px solid var(--ink)}
.prose td code{font-size:13.5px}
.prose blockquote{margin:1.4em 0 0;padding:4px 0 4px 22px;border-left:4px solid var(--red);font-size:20px;color:var(--ink)}
.prose blockquote cite{display:block;font:600 14px var(--body);color:var(--muted);margin-top:6px;font-style:normal}

/* Callouts */
.callout{border-radius:14px;padding:18px 20px 18px 22px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--green);font-size:16.5px;line-height:1.6}
.callout.warn{border-left-color:var(--red)}
.callout b:first-child{display:block;font:800 19px var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:4px}
.callout p{margin:0}
.callout p+p{margin-top:.6em}

/* Key takeaways box at the top of an article */
.takeaways{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.takeaways h2{font-size:24px!important;margin:0!important;letter-spacing:.02em;text-transform:uppercase}
.takeaways ul{margin-top:10px!important}

/* Product call to action inside an article */
.guide-cta{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:center;background:var(--night);color:var(--night-ink);border-radius:18px;padding:24px;margin-top:2em!important}
.guide-cta img{width:96px;height:96px;border-radius:22px}
.guide-cta h3{color:#fff5df!important;margin:0!important;font-size:28px}
.guide-cta p{margin:.4em 0 0;color:#d9cbb1;font-size:16px}
.guide-cta a.button{margin-top:14px}

/* FAQ inside an article */
.guide-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.guide-faq summary{cursor:pointer;font:800 22px/1.2 var(--display);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary::after{content:'+';color:var(--red);font-size:26px;line-height:.9}
.guide-faq details[open] summary::after{content:'–'}
.guide-faq details p{margin:.7em 0 0;font-size:17px}

/* Related guides and the guides index */
.related{max-width:var(--wrap);margin:110px auto 0;padding:0 var(--pad)}
.related h2{font-size:clamp(34px,3.4vw,46px);margin-bottom:26px}
.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.related:not(.home-guides) .guide-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.guide-card a{display:block;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.guide-card a:hover{transform:translateY(-3px);box-shadow:0 22px 44px #4b38251f}
.guide-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.guide-card div{padding:18px 20px 22px}
.guide-card span{font:800 15px var(--display);color:var(--red);text-transform:uppercase;letter-spacing:.05em}
.guide-card h3{font-size:27px;margin-top:6px}
.guide-card p{font-size:15.5px;color:var(--text);margin:8px 0 0;line-height:1.55}
.guides-intro{max-width:var(--wrap);margin:30px auto 0;padding:0 var(--pad)}
.guides-intro h1{font-size:clamp(50px,6.4vw,96px);max-width:14ch}
.guides-intro p{font-size:21px;line-height:1.5;color:var(--text);max-width:60ch;margin:18px 0 0}
.guides-list{max-width:var(--wrap);margin:56px auto 0;padding:0 var(--pad)}

@media (max-width:980px){
  .related:not(.home-guides) .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc{position:static;border-left:0;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
}
@media (max-width:680px){
  .guide-cards,.related:not(.home-guides) .guide-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .prose{font-size:17px}
  .guide-cta{grid-template-columns:minmax(0,1fr)}
  .guide-cta img{width:72px;height:72px}
}
@media (prefers-color-scheme:dark){
  .prose code{background:#2e2722;border-color:#3d342c}
  .prose pre{background:#141110;box-shadow:0 0 0 1px #ffffff14}
  .callout,.takeaways,.guide-card a,.toc{background:#25201b}
  .guide-cta{background:#141110;box-shadow:0 0 0 1px #ffffff14}
  .crumbs li+li::before{color:#6e6152}
}