/* Guides page specific styles - minimal and modular, extending base.css */
.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.breadcrumbs ol { display: flex; gap: var(--space-2); align-items: center; }
.breadcrumbs li { color: var(--color-text-secondary); }

/* Content helpers */
.guide-list { display: grid; gap: var(--space-3); }
.guide-steps { display: grid; gap: var(--space-3); padding-left: var(--space-4); }
.guide-steps li { margin-left: var(--space-2); }

/* Media layouts */
.media-row { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.media-col { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-base); }

@media (min-width: 1024px) {
  .media-row { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .media-col { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
}

/* Table styling */
.table-responsive { width: 100%; overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-inner); }
.table { width: 100%; min-width: 720px; background: var(--color-bg-primary); }
.table th, .table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid var(--color-gray-200); vertical-align: top; }
.table thead th { background: var(--color-bg-secondary); font-weight: var(--font-weight-semibold); position: sticky; top: 0; z-index: 1; }
.table tbody tr:nth-child(2n) { background: var(--color-gray-50); }

/* Utilities */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

/* Subtle scroll hint for tables */
.table-responsive.is-scrolling { box-shadow: var(--shadow-base); }