/* ==========================================================================
   Njoroge Ng'ang'a & Company Advocates — RESPONSIVE RULES
   Breakpoint-specific recomposition. Type sizes are handled with clamp()
   in styles.css; this file governs layout changes and spacing reduction.
   Reference breakpoints: 1512 / 1440 / 1280 / 1024 / 768 / 390
   ========================================================================== */

/* Small laptop / large tablet */
@media (max-width: 1279px) {
  .section { padding: var(--space-4xl) 0; }
}

/* Tablet landscape */
@media (max-width: 1100px) {
  .site-header { padding: 20px 0; }
  .site-header .logo { max-width: min(72vw, 260px); }
}

@media (max-width: 1023px) {
  :root { --header-height: 76px; }
  .section { padding: var(--space-3xl) 0; }
  .hero-copy { max-width: 680px; }
  .hero-copy h1 { max-width: 680px; }
  .practice-visual { display: none; }
  .about-head { position: static; }
  .legal-toc { display: none; }
}

/* Tablet */
@media (max-width: 767px) {
  .container { width: min(var(--container-max), calc(100% - 44px)); }
  .section { padding: var(--space-2xl) 0; }
  .hero {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    padding-top: calc(var(--header-height) + var(--space-lg));
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(11,18,26,0.04) 0%, rgba(11,18,26,0) 64%, rgba(11,18,26,0.42) 100%);
  }
  .hero-inner { order: 1; padding: var(--space-md) 0 var(--space-xl); }
  .hero-copy, .hero-copy h1 { max-width: 100%; }
  .hero .t-display-xl { font-size: clamp(40px, 10vw, 46px); line-height: 1.1; }
  .hero-copy .hero-line { display: inline; }
  .hero-copy h1 { margin-bottom: var(--space-md); }
  .hero-copy .t-lead { max-width: 62ch; }
  .hero-ctas { margin-bottom: var(--space-lg); }
  .hero-photo { position: relative; order: 2; width: 100%; height: clamp(280px, 72vw, 420px); }
  .hero-photo img { object-position: center 44%; }
  .hero-photo::after {
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, rgba(11,18,26,0.56) 18%, rgba(11,18,26,0.04) 58%, rgba(11,18,26,0.2) 100%);
  }
  .footer-legal { flex-direction: column; align-items: flex-start; }
  .bio-block { grid-template-columns: 1fr; }
  .related-people { grid-template-columns: 1fr 1fr; }
  .team-sub-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 480px) {
  .container { width: min(var(--container-max), calc(100% - 40px)); }
  .section { padding: var(--space-xl) 0; }
  .hero { padding-top: calc(var(--header-height) + var(--space-md)); }
  .hero-inner { padding-top: var(--space-sm); }
  .hero-copy .eyebrow { margin-bottom: var(--space-sm); }
  .hero-copy .t-lead { font-size: 18px; line-height: 1.52; }
  .hero-foot { align-items: flex-start; }
  .hero-ctas, .btn-row, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .btn-row .btn, .cta-actions .btn { justify-content: center; }
  .related-people, .team-sub-grid { grid-template-columns: 1fr; }
  .site-header { padding: 17px 0; }
  .site-header .container { gap: 16px; }
  .site-header .logo { width: 210px; max-width: calc(100vw - 100px); }
  .footer-mark { font-size: 9.4vw; }
  .practice-item { gap: var(--space-sm); }
  .audience-row { grid-template-columns: 1fr; }
  .insights-filter { gap: 8px; }
  .filter-chip { padding: 8px 14px; font-size: 12px; }
  .office-map iframe { min-height: 300px; aspect-ratio: 1 / 1; }
  .map-actions { align-items: stretch; flex-direction: column; }
  .map-actions .btn { justify-content: center; }
}

/* Fine breakpoints matching the brief's explicit test widths */
@media (max-width: 390px) {
  .t-display-xl { font-size: 40px; }
  .t-h1 { font-size: 36px; }
  .error-code { font-size: 84px; }
}