/* ============================================================
   COACHING & ADVIES GELUK — RESPONSIVE STYLESHEET
   Breakpoints: Tablet 1024px | Mobile 768px | Small 480px
   ============================================================ */


/* ─── TABLET (max-width: 1024px) ────────────────────────────── */
@media (max-width: 1024px) {

  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  .container { padding: 0 var(--space-3); }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .stats-bar .container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}


/* ─── MOBILE (max-width: 768px) ─────────────────────────────── */
@media (max-width: 768px) {

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl);  }

  .section,
  .section-alt { padding: var(--space-8) 0; }

  .container { padding: 0 var(--space-2); }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .stats-bar .container { grid-template-columns: repeat(2, 1fr); }

  .page-hero h1 { font-size: var(--text-3xl); }
  .page-hero p  { font-size: var(--text-base); }

  .cta-strip .btn-group {
    flex-direction: column;
    align-items: center;
  }

  .cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3);
  }

  .whatsapp-float {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 52px;
    height: 52px;
  }
}


/* ─── SMALL MOBILE (max-width: 480px) ───────────────────────── */
@media (max-width: 480px) {

  h1 { font-size: var(--text-2xl); }

  .btn-primary,
  .btn-ghost { padding: 0.75rem 1.5rem; font-size: var(--text-sm); }

  .stat-item .stat-number { font-size: var(--text-3xl); }
}

/* ─── OVERFLOW / SCROLL LOCK ─────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ─── HERO CARDS — stack at 768px not just 480px ────────────── */
@media (max-width: 768px) {
  .hero-inner {
    text-align: center;
  }
  .hero-ctas {
    justify-content: center;
  }
  .hero-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
    margin: 0 auto;
  }
  .hero-tagline {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-cards {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .btn-whatsapp-hero {
    justify-content: center;
  }
}


/* ─── ABOUT TEASER — center image on mobile ─────────────────── */
@media (max-width: 768px) {
  .about-teaser {
    text-align: center;
  }
  .about-teaser-img {
    display: flex;
    justify-content: center;
  }
  .about-values {
    text-align: left;
  }
  .about-teaser .btn-primary {
    display: inline-block;
  }
}


/* ─── STATS BAR — 2x2 on all mobile ────────────────────────── */
@media (max-width: 480px) {
  .stats-bar .container {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .stat-item {
    padding: var(--space-3);
  }
}


/* ─── CTA STRIP ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .cta-strip .btn-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .cta-strip .btn-primary,
  .cta-strip .btn-ghost-white {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* ─── SERVICE PAGES (work / biz / fin / rel) ────────────────── */
@media (max-width: 768px) {
  .work-intro,
  .biz-intro,
  .fin-intro,
  .rel-intro {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .work-intro-emoji-wrap,
  .biz-intro-emoji-wrap,
  .fin-intro-emoji-wrap,
  .rel-intro-emoji-wrap {
    margin: 0 auto;
  }
  .work-intro > div:last-child,
  .biz-intro  > div:last-child,
  .fin-intro  > div:last-child,
  .rel-intro  > div:last-child {
    text-align: left;
  }
  .areas-grid {
    grid-template-columns: 1fr;
  }
  .process-steps {
    grid-template-columns: 1fr 1fr;
  }
  .process-steps::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .process-steps {
    grid-template-columns: 1fr;
  }
  .helps-grid {
    grid-template-columns: 1fr;
  }
  .work-intro-emoji-wrap,
  .biz-intro-emoji-wrap,
  .fin-intro-emoji-wrap,
  .rel-intro-emoji-wrap {
    width: 180px !important;
    height: 180px !important;
    font-size: 3.5rem !important;
  }
}


/* ─── CONTACT PAGE ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}


/* ─── FOOTER ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}


/* ─── TOUCH TARGET MINIMUM SIZE ─────────────────────────────── */
@media (max-width: 768px) {
  .btn-primary,
  .btn-ghost,
  .btn-ghost-white,
  .card-link,
  .nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .whatsapp-float {
    width: 56px;
    height: 56px;
  }
}


/* ─── PAGE HERO ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-hero {
    padding: var(--space-8) 0 var(--space-6);
  }
  .page-hero h1 {
    font-size: var(--text-2xl);
  }
}