/* Buurtsportcoach Den Haag: global styles.
   Component-level layout/colors stay inline on elements (matches the source design);
   this file holds resets, fonts, animations and responsive breakpoints. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #16202a; background: #ffffff; font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Poppins", system-ui, sans-serif; margin: 0; line-height: 1.12; color: #16202a; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: #0E7DB4; text-decoration: none; }
a:hover { color: #7A2069; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
::selection { background: #159FDE; color: #fff; }

.placeholder-slot { display: flex; align-items: center; justify-content: center; text-align: center; background: #EAF6FC; color: #5b7488; font-size: 0.95rem; padding: 20px; border: 2px dashed #a9cfe3; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
  .prof-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .personal-band { grid-template-columns: 1fr !important; padding: 34px !important; }
  .cards-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .wijk-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
  .coach-card { grid-template-columns: auto 1fr !important; }
  .coach-actions { grid-column: 1 / -1 !important; }
  .wijkhero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 720px) {
  body { font-size: 18px; }
  .nav-links { display: none !important; }
  .burger { display: flex !important; }
  .phone-label { display: none !important; }
  .header-call { padding: 0 !important; width: 48px; height: 48px; border-radius: 50% !important; }
  .cards-3 { grid-template-columns: 1fr !important; }
  .cards-4 { grid-template-columns: 1fr !important; }
  .wijk-grid { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .coach-card { grid-template-columns: 1fr !important; text-align: center; }
  .coach-card-inline { display: grid !important; }
  .coach-card-desktop-only { display: none !important; }
  .wijk-tile { flex-wrap: wrap; }
  .coach-card > div:first-child { margin: 0 auto; }
  .hero-badge { left: 12px !important; right: 12px !important; }
  .sched-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .sched-head { display: none !important; }
  .daytabs { overflow-x: auto; }
}