/* ============================================================
   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; }
  }

  @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 { grid-template-columns: 1fr; }
  }

  @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; }
  }
}