/* ==========================================================================
   responsive.css — additional breakpoint refinements
   Most components are already responsive inline (main.css / components.css
   / pages.css use clamp() for type and mobile-first grid rules). This file
   handles the smaller adjustments that don't belong inside a component's
   own definition — spacing rhythm at very small widths, and safe-area
   handling for modern Android/iOS devices with notches or gesture bars.
   ========================================================================== */

/* Respect device safe areas (notches, gesture bars) on modern Android and
   iOS so the sticky header and fixed toast never sit under a system UI
   overlay. */
.site-header {
  padding-top: env(safe-area-inset-top, 0);
}

.toast {
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0));
}

/* Small phones (< 400px): tighten spacing scale slightly so sections
   don't feel like they're mostly whitespace on a small screen. */
@media (max-width: 400px) {
  :root {
    --space-7: 3.5rem;
    --space-8: 4.5rem;
  }

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

/* Landscape phones: hero shouldn't force a full extra scroll just to see
   the CTA button. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-block: var(--space-5); }
  .hero__portrait { aspect-ratio: 16 / 10; }
}

/* Tablet portrait (iPad-class devices): 2-column service grid reads
   better than the mobile single column here, before hitting desktop's
   3-column layout. */
@media (min-width: 620px) and (max-width: 959px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .navbar__links { display: none; }
}

/* Ensure tap targets stay comfortably large on touch devices regardless
   of how compact a design element looks visually. */
@media (pointer: coarse) {
  .btn, .navbar__toggle, .footer-social-link, .faq-item__question {
    min-height: 44px;
  }
}

/* Print styles: nobody asked, but a reading/mentorship confirmation page
   or blog article being printed shouldn't print the navbar/footer chrome. */
@media print {
  .site-header, .site-footer, .mobile-nav, .toast, .hero__actions {
    display: none !important;
  }
  body { background: #fff; color: #000; }
}