/* The guide library reuses shared card media, typography and colors. */
.guide-archive { padding: 30px 0 90px; }
.guide-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.guide-card { min-width: 0; }
.guide-card-link { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius); }
.guide-card .product-media { display: block; flex-shrink: 0; aspect-ratio: 16 / 10; }
.guide-card .product-media img { display: block; object-fit: contain; padding: 18px; }
.guide-card .guide-card-ambient img { object-fit: cover; padding: 0; }
.guide-card-copy { display: flex; flex-direction: column; flex: 1; align-items: flex-start; padding: 22px 3px 0; }
.guide-card-copy .eyebrow { font-size: 10px; color: var(--muted); }
.guide-card-copy h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.025em; margin: 12px 0; }
.guide-card-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.guide-card-action { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: var(--accent); font-size: 13px; font-weight: 800; }
.guide-card-link:hover .guide-card-action { text-decoration: underline; text-underline-offset: 4px; }
.guide-card-link:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); outline-offset: 6px; }
@media (max-width: 1050px) {
  .guide-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .guide-archive { padding: 22px 0 60px; }
  .guide-archive-grid { grid-template-columns: 1fr; gap: 38px; }
  .guide-card-copy { padding-top: 18px; }
}