/* Guides page styles — scoped and minimal, building on base.css */

:root {
  --guides-green: #4caf50;
  --guides-brown: #7b5e3b;
  --guides-stone: #7b8a8b;
  --guides-dark: #1e1e1e;
}

.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Breadcrumbs */
.guides-breadcrumb { padding: 0.75rem 1rem; font-size: 0.875rem; }
.guides-breadcrumb ol { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0; flex-wrap: wrap; }
.guides-breadcrumb li::after { content: "/"; margin: 0 0.5rem; color: var(--guides-stone); }
.guides-breadcrumb li:last-child::after { content: ""; }
.guides-breadcrumb a { text-decoration: none; color: var(--guides-green); }

/* Hero */
.guides-hero { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: center; padding: 1rem; background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 60%, #0d3a15 100%); color: #fff; }
.guides-hero__content { display: grid; gap: 0.75rem; }
.guides-hero h1 { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.2; }
.guides-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.guides-hero__media { margin: 0; }
.guides-hero__media img { width: 100%; height: auto; display: block; image-rendering: pixelated; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

/* Tools: search + toc */
.guides-tools { display: grid; gap: 1rem; grid-template-columns: 1fr; padding: 1rem; }
.guides-search { display: grid; gap: 0.5rem; }
.guides-search__label { font-weight: 600; }
#guide-search { padding: 0.65rem 0.75rem; border: 2px solid #2e7d32; border-radius: 6px; background: #0e1a0f; color: #fff; }
#guide-search::placeholder { color: #b7ccb8; }

.guides-toc { background: #0f1d11; border: 1px solid #284d2a; border-radius: 8px; padding: 0.75rem; }
.guides-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.guides-toc a { color: #cfe9d0; text-decoration: none; display: block; padding: 0.4rem 0.5rem; border-radius: 6px; }
.guides-toc a:hover, .guides-toc a:focus { background: rgba(76, 175, 80, 0.15); outline: 2px solid transparent; }
.guides-toc a.is-active { background: rgba(76, 175, 80, 0.22); color: #fff; }

/* Content */
.guides-content { display: grid; gap: 1rem; padding: 1rem; }
.guide-section { background: #0b0f0c; border: 1px solid #1f2d20; border-radius: 10px; padding: 1rem; }
.guide-section header { display: grid; gap: 0.25rem; margin-bottom: 0.5rem; }
.guide-intro { color: #cde5ce; }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; }
.guide-figure { margin: 0 0 0.75rem 0; }
.guide-figure img { width: 100%; height: auto; border-radius: 8px; image-rendering: pixelated; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.guide-figure figcaption { font-size: 0.875rem; color: #b7ccb8; margin-top: 0.25rem; }

/* CTA */
.guides-cta { padding: 1.25rem; text-align: center; background: linear-gradient(180deg, #102015, #0b140e); border-top: 1px solid #1f2d20; }
.guides-cta__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }

/* Responsive */
@media (min-width: 768px) {
  .guides-hero { grid-template-columns: 1.1fr 1fr; padding: 2rem; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
  .guides-tools { grid-template-columns: 1fr 320px; align-items: start; padding: 1rem 2rem; }
  .guides-toc { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
  .guides-content { grid-template-columns: 1fr; padding: 1rem 2rem; }
}

@media (min-width: 1200px) {
  .guides-content { grid-template-columns: 1fr 1fr; }
}