/* Tips page specific styles - lightweight, leveraging base.css */
.page-hero {
  padding: var(--space-16) 0 var(--space-10);
  background: radial-gradient(80% 120% at 10% 0%, rgba(255, 184, 77, 0.06) 0%, transparent 60%),
              radial-gradient(80% 120% at 90% 100%, rgba(77, 159, 255, 0.05) 0%, transparent 60%);
}
.page-hero .hero-cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); }

.breadcrumbs { padding: var(--space-4) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.breadcrumbs ol { display: flex; gap: var(--space-2); align-items: center; }
.breadcrumbs li+li::before { content: '\203A'; /* › */ margin: 0 var(--space-2); color: var(--color-neutral-500); }
.breadcrumbs a:hover { color: var(--color-primary-light); }

.section { padding: var(--space-10) 0; }
.tips-grid .card { height: 100%; display: flex; flex-direction: column; }
.tips-grid .card-body { flex: 1 1 auto; }

.tip-list { display: grid; gap: var(--space-2); }
.tip-details summary { cursor: pointer; color: var(--color-accent-light); margin-top: var(--space-3); }
.tip-details[open] summary { color: var(--color-accent); }
.tip-details summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); }

.cta-bottom .card { background: linear-gradient( to bottom right, var(--color-background-card), var(--color-background-elevated) ); }

@media (max-width: 768px) {
  .page-hero { padding: var(--space-12) 0 var(--space-8); }
}