/* Global responsive utilities for PC, laptop, smartphone */

/* Typography scaling */
:root {
  --fs-sm: clamp(0.9rem, 0.9rem + 0.3vw, 1rem);
  --fs-md: clamp(1rem, 1rem + 0.5vw, 1.15rem);
  --fs-lg: clamp(1.2rem, 1.2rem + 0.8vw, 1.6rem);
  --fs-xl: clamp(1.4rem, 1.4rem + 1.2vw, 2.2rem);
}

h1, .h1 { font-size: var(--fs-xl); }
h2, .h2 { font-size: var(--fs-lg); }
h3, .h3 { font-size: var(--fs-md); }
body { font-size: var(--fs-sm); }

/* Container padding and layout tweaks */
@media (max-width: 576px) {
  .container, .explore-container, .content-wrapper .container { padding-left: 12px; padding-right: 12px; }
  .main-header { flex-wrap: wrap; gap: 10px; }
  .nav-links a { padding: 6px 8px; font-size: 0.95rem; }
}

/* Images scale */
img { max-width: 100%; height: auto; }

/* Cards and lists */
.card { border-radius: 10px; }
.card .card-img-top { border-top-left-radius: 10px; border-top-right-radius: 10px; }

/* Stats */
.stat-card { padding: 12px; }
.stat-icon { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.stat-value { font-size: clamp(1.1rem, 2.8vw, 1.6rem); font-weight: 700; }
.stat-label { font-size: clamp(0.85rem, 2.2vw, 1rem); }

/* Feature cards */
.features-section .feature-card { padding: clamp(12px, 2.5vw, 18px); }

/* Training list */
@media (max-width: 576px){ .ict-section .training-list { gap: 8px; } }

/* Skeleton utilities scaling */
.skeleton { background: #eee; border-radius: 8px; }
.skeleton-text { height: 14px; margin: 6px 0; }
@media (max-width: 576px){ .skeleton-text { height: 12px; margin: 5px 0; } }

/* Spinner utility */
.loading-spinner { display:flex; align-items:center; justify-content:center; gap:8px; }
.loading-spinner[hidden] { display:none !important; }
.loading-inline { width: 1.5rem; height: 1.5rem; }

/* Tables (dashboards) */
.table-responsive { width: 100%; overflow-x: auto; }

/* Form controls */
input, select, textarea { max-width: 100%; }