/* ================================================================
   Guides index. Page layer.

   A category here is a label and a link to its pillar guide, never a
   URL of its own. That is what keeps /guides/{slug}/ flat and lets
   the taxonomy be reorganised later without a single redirect.
   ================================================================ */

.g-head{border-top:none;padding:30px 0 0}
.g-crumb{display:flex;flex-wrap:wrap;gap:7px;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:16px}
.g-crumb a{color:var(--ink-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){.g-crumb a:hover{color:var(--teal)}}
.g-crumb i{font-style:normal;color:var(--line)}
.g-head h1{font-size:clamp(28px,4.4vw,42px);margin:10px 0 14px;padding-left:0}
.g-lede{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:56ch;margin-bottom:0}

.g-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.g-cat{display:block;border:1.5px solid var(--line);border-radius:var(--r-md);background:#fff;padding:20px 22px;text-decoration:none;color:var(--ink)}
@media (hover:hover) and (pointer:fine){a.g-cat:hover{border-color:var(--teal)}}
.g-cat b{display:block;font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;margin-bottom:6px}
.g-cat span{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:10px}
.g-cat em{font-style:normal;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark)}
/* A category whose pillar is unpublished renders as a card with no link
   rather than being hidden, so the reader can see what the site covers
   before every pillar exists. */
div.g-cat{opacity:.62}

.g-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.g-list>*{flex:none}

@media(max-width:900px){
  .g-cats{grid-template-columns:repeat(2,1fr)}
  .g-list{grid-template-columns:1fr}
}
@media(max-width:600px){
  .g-cats{grid-template-columns:1fr}
}