/* Guides list: one card per guide, image on top. */
.guides { display: grid; gap: 1.6rem; padding-top: 1.5rem; }
.intro { display: grid; gap: .9rem; }
.guides h1 { font-size: clamp(2.6rem, 7vw, 4rem); }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.guide-list > li { display: flex; min-width: 0; }
.guide-card { flex: 1; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
a.guide-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 14px 30px -20px rgba(13,74,74,.6); }
.guide-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.g-body { display: grid; gap: .4rem; padding: 1.1rem 1.2rem 1.3rem; align-content: start; }
.g-meta { font: 600 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.g-title { font: 400 1.55rem/1.15 var(--display); }
.g-text { font-size: .95rem; color: var(--ink-soft); }
.guide-card.next { background: var(--wash); border-style: dashed; }
.guide-card.next .btn { justify-self: start; margin-top: .5rem; }