/* The hero band at the top of the athlete pages (AthleteNutrition). The landing page's hero and its classes went
   with the v4 screens (#1532). */

.hero-section {
  background: var(--fs-bg-primary);
  position: relative;
  border-bottom: 1px solid var(--fs-border-default);
  /* Base padding — single source of truth for hero spacing (replaces Bootstrap py-5) */
  padding: 3rem 0;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23f1f5f9" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23e2e8f0" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>')
    repeat;
  opacity: 0.05;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 1.5rem 0;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 1rem 0;
  }
}