/* ============================================================
   CiCC Theme 4.0 — Responsive Overrides (v3 - Color + Mobile Fix)
   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: 16px; }
    .cicc-hero__stat { min-width: calc(50% - 16px); }
    .cicc-section { padding: 32px 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); }

    /* CTA Cards → 1 column */
    .hero-cta-cards { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* Module Stats → 2 columns */
    .stats-modules { grid-template-columns: repeat(2, 1fr) !important; }

    /* Testimonial cards → full width */
    .testimonial-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .testimonial-card { flex: 0 0 calc(100vw - 48px) !important; scroll-snap-align: start; }

    /* Belt pathway cards */
    .belt-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 16px; display: flex; gap: 16px; }
    .belt-track .cicc-card { flex: 0 0 calc(100vw - 48px); scroll-snap-align: start; }

    /* Client logo wall */
    .logo-wall__track { gap: 16px !important; animation: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
    .logo-wall__track > div { flex: 0 0 auto; scroll-snap-align: start; }

    /* Hero section */
    .cicc-hero { padding: 48px 0 32px; }
    .cicc-hero__tag { font-size: 0.6875rem; padding: 4px 12px; }
    .cicc-hero__title { font-size: 1.5rem; line-height: 1.3; }
    .cicc-hero__subtitle { font-size: 0.875rem; }

    /* Section headings */
    .cicc-section h2 { font-size: 1.25rem; }

    /* Container padding */
    .container { padding-left: 16px; padding-right: 16px; }

    /* Mega menu overlay */
    .mega-menu { display: none !important; }

    /* Footer columns */
    .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* CTA section */
    .cicc-cta { padding: 32px 0; }
    .cicc-cta h2 { font-size: 1.25rem; }
    .cicc-cta__actions { flex-direction: column; }
    .cicc-cta__actions .btn { width: 100%; }

    /* Adjust Top Bar for mobile */
    .top-bar { display: none; /* Hide for very small screens or make it smaller */ }
    .site-header { top: 0; } /* Make header sticky to top */
  }

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

    /* Module Stats → 1 column on very small */
    .stats-modules { grid-template-columns: 1fr !important; }
  }
}

/* --- Color Overrides for better consistency --- */
.btn--primary, .btn--hero--green, .btn--hero--purple, .btn--hero--accent {
  background: var(--cicc-blue) !important;
  border-color: var(--cicc-blue) !important;
  color: #fff !important;
}

.btn--outline {
  border-color: var(--cicc-blue) !important;
  color: var(--cicc-blue) !important;
}
.btn--outline:hover {
  background: var(--cicc-blue) !important;
  color: #fff !important;
}

/* Hero CTA cards */
.hero-cta-card--green, .hero-cta-card--purple, .hero-cta-card--orange {
  border-top-color: var(--cicc-blue) !important;
}
.hero-cta-card--blue { /* for ungdungai card */
  border-top-color: var(--cicc-blue-light) !important;
}
.cta-icon--green, .cta-icon--purple, .cta-icon--orange {
  background: var(--cicc-blue-100) !important;
  color: var(--cicc-blue) !important;
}

/* Section tags/pills */
.cicc-hero__tag, .section-tag {
  background: var(--cicc-blue-100) !important;
  color: var(--cicc-blue) !important;
  border-color: rgba(0,87,163,0.15) !important;
}

/* Badges */
.badge--green, .badge--purple, .badge--orange, .badge--red {
  background: var(--cicc-blue-100) !important;
  color: var(--cicc-blue) !important;
}

/* Link-arrows */
.link-arrow {
  color: var(--cicc-blue) !important;
}
.link-arrow:hover {
  color: var(--cicc-blue-600) !important;
}