/* ============================================================
   responsive.css — Media Queries
   Mobile-first: base styles are already mobile.
   This file adds min-width expansions AND max-width fixes
   for elements that need mobile-specific overrides.

   Breakpoints:
     Mobile:  < 768px   (single column, touch-friendly)
     Tablet:  768px+    (2-column layouts)
     Desktop: 1024px+   (full nav, 3–4 columns)
     Wide:    1280px+   (extra breathing room)
   ============================================================ */


/* ============================
   Mobile-only overrides (< 768px)
   ============================ */

@media (max-width: 767px) {

  /* ── Spacing ── */
  .section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }

  .section-lg {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }

  /* ── Logo ── */
  .logo-image {
    height: 36px;
  }

  /* ── Hero ── */
  .hero {
    min-height: auto;
    padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  }

  .hero-headline {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: var(--spacing-md);
  }

  .hero-subheading {
    font-size: var(--font-size-base);
    max-width: 100%;
    margin-bottom: var(--spacing-lg);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Page Hero (inner pages) ── */
  .page-hero {
    padding: var(--spacing-2xl) 0;
  }

  .page-hero-title {
    font-size: clamp(26px, 8vw, 36px);
  }

  .page-hero-subtitle {
    font-size: var(--font-size-base);
  }

  /* ── Section titles ── */
  .section-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .section-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xl);
  }

  /* ── Cards ── */
  .card {
    padding: var(--spacing-lg);
  }

  /* Expanded profile cards (Jonjit / Arpan) */
  .card[style*="max-width: 760px"] {
    padding: var(--spacing-lg) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Team grid ── */
  .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* ── Practice area card icons ── */
  .card-practice-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* ── Value prop section ── */
  .value-prop-layout {
    gap: var(--spacing-xl);
  }

  .value-prop-heading-col h2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  /* ── Goals grid ── */
  .goal-item {
    flex-direction: row;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }

  /* ── Contact direct links ── */
  .contact-direct-links {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .contact-direct-link {
    font-size: var(--font-size-base);
  }

  /* ── Map ── */
  .contact-map iframe {
    height: 260px;
  }

  /* ── Footer ── */
  .footer-grid {
    gap: var(--spacing-xl);
  }

  .footer-logo .logo-image {
    height: 36px;
  }

  /* ── CTA sections ── */
  .about-cta-section h2 {
    font-size: clamp(22px, 6vw, 28px);
  }

  /* ── Badges ── */
  .card-team-specialties {
    justify-content: center;
  }

  /* ── Insights filter buttons ── */
  .insights-filter {
    gap: var(--spacing-xs);
  }

  .filter-btn {
    font-size: var(--font-size-xs);
    padding: 6px 12px;
  }

  /* ── Practice detail sidebar ── */
  .practice-sidebar {
    order: -1;
  }
}


/* ============================
   Tablet: 768px+
   ============================ */

@media (min-width: 768px) {

  /* Container padding */
  .container,
  .container-wide,
  .container-narrow {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }

  /* Section spacing */
  .section {
    padding-top: var(--spacing-3xl);
    padding-bottom: var(--spacing-3xl);
  }

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

  /* Split layout */
  .layout-split {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Hero */
  .hero {
    padding: var(--spacing-4xl) 0;
    min-height: 520px;
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
  }

  .hero-actions .btn {
    width: auto;
  }

  /* Value prop */
  .value-prop-layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-3xl);
  }

  .value-prop-heading-col {
    flex: 1 1 40%;
    position: sticky;
    top: calc(var(--nav-height) + var(--spacing-lg));
  }

  .value-prop-content-col {
    flex: 1 1 55%;
  }

  /* Goals */
  .goals-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact direct */
  .contact-direct-links {
    flex-direction: row;
    justify-content: center;
  }
}


/* ============================
   Desktop: 1024px+
   ============================ */

@media (min-width: 1024px) {

  /* Show desktop nav, hide hamburger */
  .site-nav  { display: flex; }
  .hamburger { display: none; }

  /* Section spacing */
  .section {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }

  /* Grids: full columns */
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* Split layout variants */
  .layout-split { grid-template-columns: 1fr 1fr; }
  .layout-split.layout-split-60-40 { grid-template-columns: 3fr 2fr; }
  .layout-split.layout-split-40-60 { grid-template-columns: 2fr 3fr; }

  /* Footer: 4 columns */
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

  /* Visibility utilities */
  .hide-mobile  { display: block; }
  .hide-desktop { display: none; }

  /* Container */
  .container {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }

  /* Hero */
  .hero {
    padding: var(--spacing-5xl) 0;
    min-height: 600px;
  }

  .hero-content {
    max-width: 680px;
  }

  /* Contact methods */
  .contact-methods {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Value prop columns */
  .value-prop-heading-col { flex: 1 1 42%; }
  .value-prop-content-col { flex: 1 1 52%; }
}


/* ============================
   Wide: 1280px+
   ============================ */

@media (min-width: 1280px) {

  .section {
    padding-top: var(--spacing-5xl);
    padding-bottom: var(--spacing-5xl);
  }

  .hero {
    min-height: 640px;
  }
}


/* ============================
   Print
   ============================ */

@media print {

  .site-header,
  .hamburger,
  .mobile-menu,
  .menu-overlay,
  .site-footer .footer-bottom,
  .btn,
  nav {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}