/* ===========================================================================
   ToolHub Kenya - guides index, guide articles and the homepage guides block.
   Tokens come from styles.css. All of this markup is produced by
   _src/build.mjs; edit the generator, never the generated pages.
   =========================================================================== */

.guide-page main{background:var(--bg);color:var(--text)}
.guide-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------------- */

.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding-block:var(--s-6) 0;
  color:var(--text-muted);font-size:.84rem;
}
.breadcrumbs a{color:var(--text-muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs span[aria-hidden]{color:var(--border-strong)}

/* ---------------------------------------------------------------------------
   Article and index headers
   --------------------------------------------------------------------------- */

.guide-cat{
  margin:0;
  color:var(--brand);font-size:var(--fs-xs);font-weight:var(--fw-black);
  letter-spacing:var(--track-wide);text-transform:uppercase;
}
.guide-hero,.guides-hero{max-width:820px;padding-block:var(--s-6) var(--s-8)}
.guides-hero{padding-block:var(--s-10) var(--s-8)}
.guide-hero h1,.guides-hero h1{
  margin:.38em 0 .42em;
  color:var(--navy);font-size:clamp(2rem,4.4vw,3.05rem);line-height:1.08;
  letter-spacing:-.02em;text-wrap:balance;
}
.guide-intro{margin:0 0 var(--s-4);max-width:64ch;color:var(--text-muted);font-size:var(--fs-lg);line-height:1.6}
.guide-meta{margin:0;color:var(--text-muted);font-size:var(--fs-sm)}

/* ---------------------------------------------------------------------------
   Hero figure
   --------------------------------------------------------------------------- */

.guide-figure{margin:0 0 var(--s-9)}
.guide-figure img{
  display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-xl);background:var(--surface-2);
}
.guide-figure figcaption{margin-top:var(--s-3);color:var(--text-muted);font-size:var(--fs-xs)}
.guide-figure figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.guide-lead{
  max-width:760px;margin:0 0 var(--s-9);
  color:var(--text);font-size:1.22rem;line-height:1.6;
}

/* ---------------------------------------------------------------------------
   Article layout and table of contents
   --------------------------------------------------------------------------- */

.guide-layout{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:var(--s-11);align-items:start;padding-bottom:var(--s-11);
}

.guide-toc{
  position:sticky;top:calc(var(--header-h) + 24px);
  padding:var(--s-5) var(--s-6);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
}
.guide-toc summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:38px;cursor:pointer;list-style:none;
  color:var(--navy);font-size:var(--fs-xs);font-weight:var(--fw-black);
  letter-spacing:.1em;text-transform:uppercase;
}
.guide-toc summary::-webkit-details-marker{display:none}
.guide-toc summary::after{content:"+";color:var(--brand);font-size:1.05rem;line-height:1}
.guide-toc[open] summary::after{content:"−"}
.guide-toc summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.guide-toc ol{
  margin:var(--s-4) 0 0;padding-left:1.1em;
  display:grid;gap:var(--s-3);
  border-left:2px solid var(--border);
  font-size:.92rem;
}
.guide-toc li{padding-left:var(--s-2)}
.guide-toc a{color:var(--text-muted);text-decoration:none;line-height:1.4}
.guide-toc a:hover{color:var(--brand)}

/* ---------------------------------------------------------------------------
   Article body
   --------------------------------------------------------------------------- */

.guide-body{max-width:740px;font-size:1.08rem;line-height:1.78}
.guide-body section{scroll-margin-top:calc(var(--header-h) + 24px)}
.guide-body h2{
  margin:2em 0 .62em;
  color:var(--navy);font-size:clamp(1.4rem,2.4vw,1.72rem);line-height:1.22;
  letter-spacing:-.01em;text-wrap:balance;
}
.guide-body > section:first-child h2{margin-top:0}
.guide-body p{margin:0 0 1.1em;color:var(--text)}
.guide-body ul{margin:0 0 1.3em;padding-left:1.3em}
.guide-body li{margin:.45em 0}
.guide-body li::marker{color:var(--brand)}

/* ---------------------------------------------------------------------------
   Tools mentioned in this guide
   --------------------------------------------------------------------------- */

.guide-products{
  margin-top:3em;padding:var(--s-7);
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:var(--surface);
}
.guide-products h2{margin-top:0}
.guide-products > p{margin:0;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.6}

.guide-product-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--s-4);margin-top:var(--s-6);
}
.guide-product{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color var(--t),box-shadow var(--t);
}
.guide-product:hover{border-color:var(--border-strong);box-shadow:var(--sh-sm)}
.guide-product-media{
  position:relative;aspect-ratio:1;overflow:hidden;
  background:var(--surface);border-bottom:1px solid var(--border);
}
.guide-product-media img{
  position:absolute;inset:0;margin:auto;
  width:auto;height:auto;max-width:calc(100% - var(--s-7));max-height:calc(100% - var(--s-7));
  object-fit:contain;padding:0;
}
.guide-product-body{display:flex;flex-direction:column;gap:var(--s-2);flex:1;padding:var(--s-4)}
.guide-product h3{flex:1;margin:0;color:var(--navy);font-size:.92rem;line-height:1.35;font-weight:var(--fw-bold)}
.guide-product-sku{margin:0;color:var(--text-muted);font-size:.7rem;letter-spacing:.04em}
.guide-product-actions{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.guide-product-actions .button{width:100%;min-height:44px}
.guide-product-link{
  display:flex;align-items:center;justify-content:center;min-height:40px;
  color:var(--navy);font-size:.76rem;font-weight:var(--fw-bold);text-align:center;
  text-decoration:underline;text-underline-offset:3px;
}
.guide-product-link:hover{color:var(--brand)}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.guide-faq{margin-top:2.6em}
.guide-faq details{border-bottom:1px solid var(--border);padding:var(--s-4) 0}
.guide-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:38px;cursor:pointer;list-style:none;
  color:var(--navy);font-weight:var(--fw-bold);line-height:1.45;
}
.guide-faq summary::-webkit-details-marker{display:none}
.guide-faq summary::after{content:"+";flex-shrink:0;color:var(--brand);font-size:1.15rem;line-height:1}
.guide-faq details[open] summary::after{content:"−"}
.guide-faq summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.guide-faq details p{margin:.8em 0 0;color:var(--text-muted);line-height:1.7}

/* ---------------------------------------------------------------------------
   Guide cards (index, related and the homepage block)
   --------------------------------------------------------------------------- */

.guide-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-5);
}
.guide-card a{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text);text-decoration:none;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.guide-card a:hover,.guide-card a:focus-visible{border-color:var(--border-strong);box-shadow:var(--sh-md);transform:translateY(-3px)}
.guide-card-media{display:block;overflow:hidden;background:var(--surface-2)}
.guide-card-img{
  display:block;width:100%;height:auto;max-width:none;
  aspect-ratio:16/9;object-fit:cover;margin:0;
  transition:transform .35s ease;
}
.guide-card a:hover .guide-card-img{transform:scale(1.03)}
.guide-card-body{display:flex;flex-direction:column;gap:var(--s-3);flex:1;padding:var(--s-6)}
.guide-card-cat{
  color:var(--brand);font-size:.68rem;font-weight:var(--fw-black);
  letter-spacing:.12em;text-transform:uppercase;
}
.guide-card h2,.guide-card h3{
  margin:0;color:var(--navy);font-size:1.12rem;line-height:1.32;
  font-weight:var(--fw-bold);text-wrap:balance;
}
.guide-card p{flex:1;margin:0;color:var(--text-muted);font-size:.88rem;line-height:1.6}
.guide-card-meta{color:var(--text-muted);font-size:.78rem}
.guide-card-more{
  color:var(--navy);font-size:.8rem;font-weight:var(--fw-black);
  border-bottom:2px solid var(--brand);align-self:flex-start;padding-bottom:2px;
}
.guide-card a:hover .guide-card-more{color:var(--brand)}

.guides-all{padding-bottom:var(--s-11)}
.guide-empty{color:var(--text-muted)}

.guide-related{padding-bottom:var(--s-11)}
.guide-related h2{margin:0 0 var(--s-6);color:var(--navy)}

/* ---------------------------------------------------------------------------
   Guide call to action
   --------------------------------------------------------------------------- */

.guide-cta{
  margin-bottom:var(--s-11);padding:clamp(28px,4.5vw,56px);
  border-radius:var(--r-xl);
  background:var(--navy);color:var(--text-invert-muted);
}
.guide-cta h2{margin:0 0 var(--s-3);color:#fff;text-wrap:balance}
.guide-cta p{margin:0 0 var(--s-6);max-width:60ch;line-height:1.65}
.guide-cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-4)}

/* ---------------------------------------------------------------------------
   Homepage guides block
   --------------------------------------------------------------------------- */

.home-guides{background:var(--bg)}
.home-guides .guide-list{margin-top:0}
.home-guides-more{margin:var(--s-8) 0 0}
.home-guides .text-link{color:var(--navy);border-bottom-color:var(--brand)}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width:1000px){
  .guide-layout{grid-template-columns:1fr;gap:var(--s-7);padding-bottom:var(--s-10)}
  .guide-toc{position:static;padding:var(--s-4) var(--s-5)}
  .guide-toc ol{max-height:32vh;overflow-y:auto}
}

@media (max-width:640px){
  .guide-products{padding:var(--s-5)}
  .guide-product-grid{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .guide-lead{font-size:1.08rem}
  .guide-body{font-size:1.04rem}
  .guide-cta-actions .button{width:100%}
  .guide-list{grid-template-columns:1fr}
  .guide-product-link{min-height:44px}
}

@media (max-width:420px){
  .guide-product-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .guide-card a,.guide-card-img{transition:none}
  .guide-card a:hover,.guide-card a:focus-visible{transform:none}
  .guide-card a:hover .guide-card-img{transform:none}
}