/* ==========================================================
   GUIDES — GearUP Booster
   Listing + category components. Built only on style.css
   tokens (--bg, --panel, --line, --cyan, --purple, --radius).
   No homepage rules are redefined here.
   ========================================================== */

.guides-hero{padding:64px 0 10px;text-align:center}
.guides-hero .section-heading{margin-inline:auto}
.guides-hero h1{margin-inline:auto}
.guides-sub{max-width:640px;margin:0 auto;color:var(--muted);font-size:14px;line-height:1.85}

/* Category cards on /guides/ */
.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.category-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(150deg,rgba(21,30,77,.88),rgba(11,17,48,.9));transition:.25s}
.category-card:hover{transform:translateY(-4px);border-color:rgba(25,227,244,.45)}
.category-card>img{width:100%;height:170px;object-fit:cover}
.category-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.category-card h2{font-size:21px;margin:0}
.category-card p{color:var(--muted);font-size:12.5px;line-height:1.8;margin:0;flex:1}
.category-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.guide-count{font-size:9px;font-weight:800;letter-spacing:.13em;color:#8edff2;padding:5px 9px;border:1px solid rgba(25,227,244,.22);border-radius:99px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#74eff8}
.text-link img{width:15px;height:15px}

/* Article cards (listing + category pages) */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:30px}
.guide-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(15,22,59,.85);transition:.25s}
.guide-card:hover{transform:translateY(-4px);border-color:rgba(25,227,244,.45)}
.guide-card>img{width:100%;height:150px;object-fit:cover}
.guide-card-body{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.guide-card h3{font-size:15.5px;line-height:1.35;margin:0}
.guide-card h3 a:hover{color:var(--cyan)}
.guide-card p{color:var(--muted);font-size:11.5px;line-height:1.75;margin:0;flex:1}
.guide-card .text-link{margin-top:2px}
.cat-label{font-size:8.5px;font-weight:800;letter-spacing:.15em;color:#6fdff5;text-transform:uppercase}

/* Category page header band */
.category-hero{padding:56px 0 6px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:#8e9cc1;margin-bottom:18px}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb .sep{color:#5b719e}

@media(max-width:1050px){
  .guide-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .category-grid{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr}
  .guides-hero{padding-top:44px}
}

/* Hero title width (owner fix, 2026-11-14): guide hero titles use the full width of
   their section instead of the 640px cap the shared base h1 rule imposes. */
.article-hero h1,.category-hero h1,.guides-hero h1{max-width:none}

/* Whole-card click (owner fix, 2026-11-14): clicking anywhere on a guide or category
   card opens it; the card's own link stretches over the whole card surface. */
.guide-card,.category-card{position:relative;cursor:pointer}
.guide-card h3 a::after,.category-card .text-link::after{content:"";position:absolute;inset:0}