/* =========================================================================
   Responsive Styling Overrides (Mobile-First Philosophy)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Large Screens & Desktop (1280px - 1920px+)
   ------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-32);
  }
}

/* -------------------------------------------------------------------------
   2. Large Tablets & Small Laptops (1024px - 1279px)
   ------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .container {
    padding: 0 var(--space-24);
  }

  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }

  .section-padding {
    padding: var(--space-64) 0;
  }

  .leadership-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .leadership-card.large {
    grid-column: span 1;
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .leadership-card.large img {
    height: 250px;
  }

  /* Prevent navigation menu wrapping */
  .nav-menu-list {
    gap: var(--space-16);
  }
}

@media (max-width: 1160px) {
  .nav-menu-desktop {
    display: none;
  }

  .hamburger-toggle {
    display: flex;
  }

  .navbar-links {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   3. Small Tablets & Portraits (768px - 1023px)
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .navbar-actions {
    gap: var(--space-12);
  }

  /* Balance hero column stacking order */
  .hero-wrap.row {
    flex-direction: column-reverse;
    gap: var(--space-32);
  }

  .hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
    max-width: 580px;
  }

  .hero-item img {
    max-width: 70%;
    display: block;
    margin: 0 auto;
  }

  .header-spacing {
    height: 84px;
  }

  /* Provider groups content panel responsive collapse */
  .pg-content-panel {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .pg-content-panel.pg-reverse {
    grid-template-columns: 1fr;
  }
  .pg-content-panel.pg-reverse .pg-copy-card {
    grid-column: auto;
  }
  .pg-content-panel.pg-reverse .pg-image-frame {
    grid-column: auto;
    grid-row: auto;
  }

  .contact-shell {
    grid-template-columns: 1fr;
  }

  .contact-copy {
    padding: var(--space-24);
  }

  .page-hero-shell.page-hero-left,
  .partner-category-strip,
  .partner-showcase-grid,
  .team-metrics-shell {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------------------------------------------------------------
   4. Mobile Landscapes & Portables (576px - 767px)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .container {
    padding: 0 var(--space-24);
  }

  .grid-3,
  .grid-4,
  .leadership-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .page-hero-shell,
  .resource-toolbar,
  .partner-category-card,
  .partner-showcase-card {
    padding: var(--space-24);
  }

  .page-hero-shell.page-hero-left,
  .partner-category-strip,
  .partner-showcase-grid,
  .team-metrics-shell {
    grid-template-columns: 1fr;
  }

  .page-hero-title {
    font-size: clamp(2.15rem, 8vw, 3rem);
  }

  .section-padding {
    padding: var(--space-48) 0;
  }

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

  .nav-logo img {
    height: 32px;
  }

  /* Stats counters mobile overrides */
  .counter-content {
    flex-direction: column;
    gap: var(--space-24);
  }

  .counter-item {
    width: 100%;
    padding: var(--space-24) var(--space-16);
  }

  .counter-item h2.counter {
    font-size: 2.35rem;
  }

  /* CTA Content layout */
  .cta-content h2 {
    font-size: 1.85rem;
    letter-spacing: -0.015em;
  }

  .cta-content p {
    font-size: 0.95rem;
  }

  /* Google Map wrapper responsive height */
  .map-wrapper iframe {
    height: 360px !important;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 360px;
  }

  /* Forms spacing columns wrapping */
  .form-group.colum-row.row {
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  .form-group.colum-row.row > div[class*="col-"] {
    padding: 0;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Stacking margins safeguard */
  .row > [class*="col-"] {
    margin-bottom: var(--space-32);
  }
  .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Hero section image spacer */
  .hero-item {
    margin-top: var(--space-24);
  }

  /* Blog post single layout responsive */
  .blog-single-content {
    padding: var(--space-24) var(--space-16);
  }
  .blog-single-content blockquote {
    padding: var(--space-24) var(--space-16);
    margin: var(--space-24) 0;
  }
  .project-content-2 {
    padding: var(--space-24) var(--space-16);
  }
  .project-content-2 .ml-30 {
    margin-left: var(--space-8);
  }
  .pg-cta-card,
  .merged-cta-box {
    padding: var(--space-32) var(--space-24);
  }

  .hero-highlight,
  .metric-highlight {
    white-space: nowrap;
  }

  /* Table responsive overflow */
  .project-content-2 table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* -------------------------------------------------------------------------
   5. Small Phones (320px - 480px)
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html {
    font-size: 14.5px;
  }

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

  .page-hero-shell {
    padding: var(--space-24) var(--space-16);
    border-radius: 24px;
  }

  .page-hero-panel,
  .resource-toolbar,
  .partner-category-card,
  .partner-showcase-card {
    padding: var(--space-16);
    border-radius: 20px;
  }

  .contact-form {
    padding: var(--space-24) var(--space-16);
  }

  /* Mobile drawer fit */
  .mobile-drawer-overlay {
    max-width: 100%;
    padding: 6rem var(--space-24) var(--space-24);
  }

  .mobile-drawer-list a {
    font-size: 1.15rem;
  }
}

/* -------------------------------------------------------------------------
   6. Legal Layout Responsive Collapses
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .legal-layout-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .legal-toc-sidebar {
    display: none;
  }
}

@media (max-width: 1279px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-meta {
    flex-direction: column;
  }
}

@media (max-width: 1023px) {
  .navbar-shell {
    padding: var(--space-16);
  }

  .header-spacing {
    height: 112px;
  }

  .hero-content h2,
  .cta-content h2,
  .page-content h2,
  .about-contant h2,
  .content-item h2,
  .pg-hero-shell h1,
  .team-unified-hero h1 {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .padding,
  .section-padding,
  .about-section,
  .feature-section,
  .counter-section,
  .content-section,
  .blog-section,
  .testimonial-section,
  .cta-section,
  .team-section,
  .widget-section,
  .projects-single-section,
  .contact-section {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }

  .hero-section,
  .page-header,
  .page-header03,
  .page-header15,
  .page-header21,
  .page-header23 {
    padding-top: var(--space-48);
    padding-bottom: var(--space-32);
  }

  .navbar-shell {
    border-radius: 24px;
  }

  .nav-logo img {
    height: 34px;
  }

  .mobile-drawer-overlay {
    padding: var(--space-16);
  }

  .mobile-drawer-panel {
    padding: var(--space-64) var(--space-24) var(--space-24);
    border-radius: 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .footer-socials,
  .footer-meta {
    align-items: flex-start;
  }

  .hero-item img,
  .counter-img img,
  .about-wrap img,
  .pg-image-frame img,
  .leadership-card img,
  .team-box img,
  .blog-thumb img,
  .blog-single-wrap .blog-thumb img {
    min-height: 240px;
  }

  .resource-card .blog-thumb img,
  .partner-card-media img,
  .leadership-card img {
    min-height: 220px;
  }

  .scroll-top-btn {
    width: 48px;
    height: 48px;
    right: var(--space-16);
    bottom: var(--space-16);
  }
}