/* Powerups page specific styles - built on top of base.css */

/* Sections spacing and alternation */
.section { padding: var(--space-16) 0; }
.section-alt { background: var(--color-bg-secondary); }

/* Hero */
.hero-powerups { background: linear-gradient(180deg, var(--color-bg-accent) 0%, var(--color-bg-primary) 100%); }
.hero-copy p { color: var(--color-text-secondary); }
.hero-cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Breadcrumb */
.breadcrumb { padding-top: var(--space-6); }
.breadcrumb-list { display: flex; gap: var(--space-2); align-items: center; color: var(--color-text-light); font-size: var(--font-size-sm); }
.breadcrumb-list li+li::before { content: '\203A'; margin: 0 var(--space-2); color: var(--color-gray-400); }
.breadcrumb-list a { color: var(--color-primary); }

/* Lists */
.list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }

/* Tables */
.table-responsive { width: 100%; overflow-x: auto; box-shadow: var(--shadow-inner); border-radius: var(--radius-lg); }
.table { width: 100%; background: var(--color-bg-primary); }
.table caption { text-align: left; padding: var(--space-4); color: var(--color-text-light); font-size: var(--font-size-sm); }
.table thead th { text-align: left; padding: var(--space-4); background: var(--color-gray-100); position: sticky; top: 0; z-index: 1; }
.table tbody td, .table tbody th { padding: var(--space-4); border-top: 1px solid var(--color-gray-200); }
.table-compact thead th, .table-compact tbody td, .table-compact tbody th { padding: var(--space-3); }

/* Results hint */
.results-hint { margin-top: var(--space-3); color: var(--color-text-light); }

/* FAQ */
.faq details { background: var(--color-bg-primary); border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: var(--font-weight-semibold); }
.faq details[open] { border-color: var(--color-primary); box-shadow: var(--shadow-base); }

/* CTA links below FAQ */
.cta-links { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Misc */
.hero-media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }