/* Nutrition page specific styles - keep minimal, build on base.css */

.section { padding-block: var(--space-16); }

.hero { padding-block: clamp(var(--space-14), 8vw, var(--space-20)); }
.hero__inner { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: 1fr; }
.hero__content { max-width: 60ch; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.hero__note { display: block; margin-top: var(--space-3); color: var(--color-text-muted); }
.hero__media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

@media (min-width: 992px) {
  .hero__inner { grid-template-columns: 1.2fr 1fr; }
}

/* Table of contents */
.toc { padding-block: var(--space-6); }
.toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.toc__list a { display: inline-block; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text); background: var(--color-surface); }
.toc__list a:hover { text-decoration: none; border-color: var(--color-primary); }
.toc__list a.is-active { border-color: var(--color-primary); background: var(--color-tint); color: var(--color-text); }

/* Grid content tweaks */
.nutrient-grid .card h3 { margin-bottom: var(--space-2); }

/* Stats list */
.stats__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.stats__list strong { color: var(--color-primary); }

/* Inline CTAs */
.cta-inline { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Side figures */
.hero-side-figure { display: block; padding: var(--space-2); }
.hero-side-figure img { border-radius: var(--radius-xl); }

/* Resources list */
.resources { padding-left: 1.25rem; }
.resources li { margin-bottom: var(--space-2); }

/* Myths cards spacing */
.myths .card h3 { margin-bottom: var(--space-2); }