/*
 * responsive.css
 * ─────────────────────────────────────────────────────
 * All breakpoints in one place.
 * Tablet: ≤ 1100px  |  Mobile: ≤ 768px
 */

/* ══════════════════════════════════════════════════════
   TABLET  (≤ 1100px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {

  nav { padding: 0 32px; }

  .section,
  #about,
  #projects,
  #workshops,
  #testimonials,
  #contact { padding: 80px 40px; }
  #logos    { padding: 40px 40px; }

  /* Hero: stays 2-column, side padding on #hero handles margins */
  .hero-content { padding: 64px 0; }
  .hero-image   { padding: 60px 0 88px; }

  /* Coaching: single column */
  .coaching-grid { grid-template-columns: 1fr; gap: 52px; }

  /* About: single column, image on top */
  #about { padding: 80px 40px; grid-template-columns: 1fr; }
  .about-image {
    width: 100%;
    max-width: 420px; max-height: 520px;
    margin: 0 auto 48px;
  }

  /* Projects: 2-column */
  .projects-grid         { grid-template-columns: 1fr 1fr; }
  .project-card.featured { grid-column: span 2; }

  /* Testimonials: 2-column */
  .testimonials-grid { grid-template-columns: 1fr 1fr; }

  /* Speaking bar */
  .speaking-bar     { grid-template-columns: 1fr; gap: 28px; }
  .speaking-bar .btn { width: fit-content; }

  footer { padding: 32px 40px; }
}


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

  nav { padding: 0 20px; }

  /* Mobile nav drawer */
  .nav-links {
    display: none;
    position: fixed; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    background: var(--cream); padding: 24px 24px 32px;
    border-bottom: 1px solid var(--border);
    gap: 20px; z-index: 99;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-links.open             { display: flex; }
  .nav-links a:not(.btn)      { font-size: 18px; opacity: 0.8; }
  .nav-mobile-toggle          { display: flex; }

  /* Dropdown: flatten inline in mobile drawer (no hover on touch) */
  .nav-item-dropdown          { width: 100%; }
  .nav-dropdown {
    display: block; position: static;
    box-shadow: none; border: none; border-radius: 0;
    background: transparent; padding: 6px 0 0 16px;
    min-width: unset;
  }
  .nav-dropdown a             { font-size: 15px; opacity: 0.65; padding: 5px 0; }
  .nav-dropdown a:hover       { background: transparent; opacity: 1; }

  /* Padding */
  .section,
  #about,
  #projects,
  #workshops,
  #testimonials,
  #contact { padding: 64px 20px; }
  #logos   { padding: 36px 20px; }
  footer   { padding: 32px 20px; flex-direction: column; text-align: center; }

  /* Hero: stack to single column at mobile */
  #hero           { grid-template-columns: 1fr; justify-content: stretch; min-height: auto; padding-left: 24px; padding-right: 24px; }
  .hero-content   { padding: 52px 0 36px; }
  .hero-headline  { font-size: clamp(40px, 11vw, 56px); }
  .hero-sub       { font-size: 17px; max-width: 100%; }
  .hero-image     { padding: 0 0 60px; justify-content: flex-start; }
  .hero-photo-wrap { max-width: 340px; }
  .hero-photo-accent { width: 80px; height: 80px; bottom: -20px; left: -16px; }

  /* About: single column, image on top centered */
  #about { grid-template-columns: 1fr; }
  .about-image {
    width: 100%; max-width: 280px; max-height: 360px;
    margin: 0 auto 36px;
  }

  /* Projects: single column */
  .projects-grid                      { grid-template-columns: 1fr; }
  .project-card.featured              { grid-column: span 1; }
  .project-card.featured .project-thumb { height: 200px; }

  /* Workshops */
  .workshops-grid { grid-template-columns: 1fr; }
  .ubuntu-card    { flex-direction: column; gap: 16px; }
  .speaking-bar   { padding: 36px 28px; }
  .speaking-bar h3 { font-size: 22px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Logos */
  .logos-grid     { gap: 20px 36px; }
  .logos-grid img { height: 22px; }

  /* Footer */
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px 24px; }

  /* Contact CTAs */
  .contact-ctas       { flex-direction: column; align-items: center; }
  .contact-ctas .btn  { width: 100%; max-width: 320px; text-align: center; }
}