/* Guides + article + About styling for SprinklerBlueprint.
   Uses the site design tokens defined in style.css (:root --ld-*). */

/* ---- Guides hub ---- */
.guides-hub{padding:34px 0 60px}
.guides-hero{max-width:760px; margin:0 auto 40px; text-align:center}
.guides-hero h1{font-family:"Fraunces",serif; font-weight:700; font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.08; color:var(--ld-ink); margin:0 0 14px}
.guides-hero .sub{color:var(--ld-ink-2); font-size:1.08rem; line-height:1.6; margin:0 auto 20px; max-width:640px}

.guides-cat{margin:0 0 38px}
.guides-cat > h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; color:var(--ld-ink); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--ld-border)}
.guides-grid,.guide-related-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}

.guide-card{display:flex; flex-direction:column; gap:7px; background:var(--ld-bg); border:1px solid var(--ld-border); border-radius:var(--ld-radius); padding:18px 20px; text-decoration:none; box-shadow:var(--ld-shadow); transition:transform .2s var(--ld-ease), box-shadow .2s var(--ld-ease), border-color .2s var(--ld-ease)}
.guide-card:hover{transform:translateY(-3px); box-shadow:var(--ld-shadow-soft); border-color:var(--ld-accent-ring)}
.guide-card-cat{font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ld-accent)}
.guide-card-title{font-family:"Fraunces",serif; font-weight:600; font-size:1.08rem; line-height:1.25; color:var(--ld-ink)}
.guide-card-desc{font-size:.92rem; line-height:1.5; color:var(--ld-ink-2); flex:1}
.guide-card-more{font-size:.82rem; font-weight:700; color:var(--ld-accent); margin-top:2px}

/* ---- Single article ---- */
.guide{max-width:820px; padding:26px 0 60px}
.guide-crumbs{font-size:.85rem; color:var(--ld-ink-3); margin:0 0 18px; display:flex; flex-wrap:wrap; gap:7px; align-items:center}
.guide-crumbs a{color:var(--ld-ink-2); text-decoration:none}
.guide-crumbs a:hover{color:var(--ld-accent); text-decoration:underline}
.guide-crumb-cur{color:var(--ld-ink-3)}

.guide-head{margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--ld-border)}
.guide-eyebrow{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ld-accent); background:var(--ld-accent-soft); border:1px solid var(--ld-accent-ring); padding:5px 12px; border-radius:999px; margin-bottom:14px}
.guide-head h1{font-family:"Fraunces",serif; font-weight:700; font-size:clamp(1.75rem,4vw,2.6rem); line-height:1.12; color:var(--ld-ink); margin:0 0 12px}
.guide-meta{font-size:.9rem; color:var(--ld-ink-3); margin:0}

/* Article body typography */
.guide-body{font-size:1.06rem; line-height:1.72; color:var(--ld-ink-2)}
.guide-body > .guide-lede{font-size:1.22rem; line-height:1.6; color:var(--ld-ink); font-weight:500; margin:0 0 24px}
.guide-body p{margin:0 0 18px}
.guide-body h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.55rem; line-height:1.2; color:var(--ld-ink); margin:36px 0 14px}
.guide-body h3{font-weight:700; font-size:1.18rem; color:var(--ld-ink); margin:26px 0 10px}
.guide-body ul,.guide-body ol{margin:0 0 18px; padding-left:1.3em}
.guide-body li{margin:0 0 8px}
.guide-body li::marker{color:var(--ld-accent)}
.guide-body a{color:var(--ld-accent-h); text-decoration:underline; text-underline-offset:2px; font-weight:500}
.guide-body a:hover{color:var(--ld-accent-2)}
.guide-body strong{color:var(--ld-ink); font-weight:700}
.guide-body em{font-style:italic}

.guide-body table{width:100%; border-collapse:collapse; margin:8px 0 24px; font-size:.96rem; background:var(--ld-bg); border:1px solid var(--ld-border); border-radius:var(--ld-radius); overflow:hidden}
.guide-body thead th{background:var(--ld-surface); text-align:left; font-weight:700; color:var(--ld-ink); padding:11px 14px; border-bottom:1px solid var(--ld-border); font-size:.9rem}
.guide-body tbody td{padding:11px 14px; border-bottom:1px solid var(--ld-border); vertical-align:top; color:var(--ld-ink-2)}
.guide-body tbody tr:last-child td{border-bottom:0}
.guide-body tbody tr:nth-child(even){background:rgba(245,246,240,.5)}
.guide-tablewrap,.guide-body .tablewrap{overflow-x:auto}

.guide-body .guide-callout{background:var(--ld-accent-soft); border:1px solid var(--ld-accent-ring); border-left:4px solid var(--ld-accent); border-radius:12px; padding:14px 18px; margin:0 0 22px}
.guide-body .guide-callout p{margin:0}
.guide-body .guide-callout p + p{margin-top:8px}

.guide-body h2:first-child,.guide-body h3:first-child{margin-top:0}
.guide-body img{max-width:100%; height:auto; border-radius:12px}

/* CTA card (also on hub + about) */
.guide-cta{margin:40px 0 0; background:linear-gradient(180deg,var(--ld-forest),var(--ld-forest-2)); color:#eaf3ee; border-radius:var(--ld-radius-lg); padding:30px 30px; text-align:center; box-shadow:var(--ld-shadow-soft)}
.guide-cta h2{font-family:"Fraunces",serif; font-weight:700; font-size:1.5rem; color:#fff; margin:0 0 10px}
.guide-cta p{color:#bfe0cd; font-size:1.02rem; line-height:1.6; margin:0 auto 18px; max-width:560px}

/* Related */
.guide-related{margin:44px 0 0}
.guide-related > h2{font-family:"Fraunces",serif; font-weight:600; font-size:1.35rem; color:var(--ld-ink); margin:0 0 16px}
.guide-alllink{margin:18px 0 0}
.guide-alllink a{color:var(--ld-accent-h); font-weight:700; text-decoration:none}
.guide-alllink a:hover{text-decoration:underline}

@media (max-width:600px){
  .guide-body{font-size:1.02rem}
  .guide-body > .guide-lede{font-size:1.12rem}
  .guides-grid,.guide-related-grid{grid-template-columns:1fr}
  .guide-cta{padding:24px 20px}
}

/* ---- Footer columns (guides + site links) — loaded site-wide ---- */
.ld-foot-h{display:block; font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ld-ink-3); margin:0 0 4px}
.ld-footer .ld-foot-cols{display:flex; flex-wrap:wrap; gap:30px 54px; align-items:flex-start}
.ld-footer .ld-foot-cols > div:first-child{flex:1 1 220px; min-width:200px}
.ld-footer .ld-foot-nav{display:flex; flex-direction:column; gap:8px}
.btn-secondary{display:inline-flex; align-items:center; gap:8px}