/* Shared styles for 1st Croydon Hills how-to guides */
body { background: var(--off-white); }
.guide-hero { background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 100%); color:#fff; padding:56px 0 64px; position:relative; overflow:hidden; }
.guide-hero.leader { background: linear-gradient(135deg, #16143a 0%, var(--purple) 100%); }
.guide-hero .container { position:relative; z-index:2; max-width:860px; }
.guide-kicker { font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; }
.guide-hero h1 { color:#fff; font-size:2.4rem; line-height:1.15; margin-bottom:12px; }
.guide-hero p { color:rgba(255,255,255,.82); font-size:1.05rem; max-width:640px; }
.guide-meta { display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.7); }
.guide-meta span { display:inline-flex; align-items:center; gap:7px; }
.guide-wrap { max-width:860px; margin:-32px auto 0; padding:0 20px 80px; position:relative; z-index:3; }
.guide-card { background:#fff; border-radius:var(--radius-lg); box-shadow:0 8px 40px rgba(40,38,92,.10); padding:40px 44px; }
.intro { font-size:1.02rem; color:#444; border-left:4px solid var(--scouts); padding:4px 0 4px 18px; margin-bottom:40px; }
.intro.leader { border-left-color: var(--purple); }
.step { display:grid; grid-template-columns:44px 1fr; gap:20px; margin-bottom:44px; }
.step-num { width:44px; height:44px; border-radius:50%; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.15rem; flex-shrink:0; }
.step-body h3 { font-size:1.2rem; margin-bottom:8px; color:var(--purple); }
.step-body p { color:#4a4a55; margin-bottom:14px; line-height:1.7; }
.step-body ul { margin:0 0 14px 2px; padding-left:20px; color:#4a4a55; line-height:1.7; }
.step-body ul li { margin-bottom:6px; }
.shot { border-radius:12px; border:1px solid var(--grey-200); box-shadow:0 4px 20px rgba(40,38,92,.08); overflow:hidden; margin:8px 0 4px; }
.shot img { width:100%; display:block; }
.shot-cap { font-size:.8rem; color:var(--grey-500); margin-top:8px; font-style:italic; }
.tip { background:#FFF9E6; border:1px solid #F5D97A; border-radius:10px; padding:14px 18px; margin:16px 0; font-size:.92rem; color:#6b5000; }
.tip strong { color:#6b5000; }
.callout-scouts { background:#E7F7EE; border:1px solid var(--scouts); color:var(--scouts-dark); border-radius:10px; padding:14px 18px; margin:16px 0; font-size:.92rem; }
.callout-warn { background:#FDECEA; border:1px solid var(--rovers); color:var(--rovers-dark); border-radius:10px; padding:14px 18px; margin:16px 0; font-size:.92rem; }
.pw-chip { display:inline-block; background:var(--purple-tint,#EDEDF4); color:var(--purple); font-weight:800; padding:2px 10px; border-radius:6px; font-family:ui-monospace,monospace; }
.guide-foot { margin-top:20px; padding-top:28px; border-top:1px solid var(--grey-200); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.print-btn { background:var(--purple); color:#fff; border:none; border-radius:50px; padding:11px 24px; font-weight:800; font-size:.9rem; cursor:pointer; }
.back-link { color:var(--purple); font-weight:700; font-size:.9rem; text-decoration:none; }
@media (max-width:600px){ .guide-card{padding:28px 22px;} .guide-hero h1{font-size:1.8rem;} .step{grid-template-columns:36px 1fr;gap:14px;} .step-num{width:36px;height:36px;font-size:1rem;} }
@media print { .guide-hero{background:var(--purple)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} .print-btn,.back-link,.guide-meta{display:none;} .guide-wrap{margin-top:20px;} .guide-card{box-shadow:none;padding:0;} .step{break-inside:avoid;} }