/* ============================================================
   CiCC Theme 4.0 — Responsive Overrides
   Layer: utilities/responsive
   ============================================================ */

@layer utilities {
  .show-mobile { display: none !important; }
  .hide-mobile { display: block !important; }

  @media (max-width: 1024px) {
    .hide-tablet { display: none !important; }
    .show-tablet { display: block !important; }

    .cicc-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .cicc-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .cicc-card--featured { grid-column: span 1; grid-template-columns: 1fr; }
    .cicc-card--featured .cicc-card__thumb { min-height: 200px; }

    .process-steps { grid-template-columns: repeat(3, 1fr); }
    .process-step::after { display: none; }

    .app-feature { grid-template-columns: 1fr; }

    /* Belt pathway: 5 cols → 3 cols on tablet */
    .belt-pathway-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-4);
    }
  }

  @media (max-width: 768px) {
    .show-mobile { display: block !important; }
    .hide-mobile { display: none !important; }

    .cicc-grid--2,
    .cicc-grid--3,
    .cicc-grid--4 { grid-template-columns: 1fr; }

    .cicc-hero__stats { flex-wrap: wrap; gap: 24px; }
    .cicc-section { padding: 48px 0; }

    .process-steps { grid-template-columns: 1fr; }
    .feature-bento { grid-template-columns: 1fr; }
    .feature-bento > :first-child { grid-column: span 1; }

    .stat-counter__number { font-size: var(--text-3xl); }

    .hero-cta-cards {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: var(--space-4) !important;
    }

    /* Belt pathway: 3 cols → 2 cols on mobile */
    .belt-pathway-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: var(--space-3) !important;
    }

    /* Testimonial track: horizontal scroll on mobile */
    .testimonial-track {
      display: flex !important;
      gap: 16px !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
    }
    .testimonial-card--compact {
      flex: 0 0 85vw !important;
      min-width: 260px;
    }

    /* Logo wall: tighter gap on mobile */
    .logo-wall__track {
      gap: var(--space-4) !important;
    }

    /* Inner pages: sidebar layouts → stack */
    .page-sidebar-layout {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }

    /* Inner pages: 2-col forms → stack */
    .page-2col-layout {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }

    /* Inner pages: 4-col grid → 2 cols */
    .page-4col-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 16px !important;
    }

    /* Inner pages: 3-col grid → 1 col */
    .page-3col-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
  }

  @media (max-width: 640px) {
    .show-small { display: block !important; }
    .hide-small { display: none !important; }

    .cicc-card__thumb { height: 180px; }
    .cicc-card__body { padding: 16px 20px 20px; }
    .cicc-card__body h3 { font-size: 0.9375rem; }
    .cicc-filter { padding: 16px; border-radius: 12px; }

    /* Belt pathway: 2 cols → 1 col on small mobile */
    .belt-pathway-grid {
      grid-template-columns: 1fr !important;
    }

    /* Testimonial: full width cards */
    .testimonial-card--compact {
      flex: 0 0 90vw !important;
    }

    /* Inner pages: 2-col grid → 1 col */
    .page-4col-grid {
      grid-template-columns: 1fr !important;
    }
  }

  @media (max-width: 480px) {
    /* Belt pathway: guaranteed 1 col */
    .belt-pathway-grid {
      grid-template-columns: 1fr !important;
    }
  }
}
}