/* =========================================================
   KH-G SDGs — responsive.css
   Breakpoints wajib: 1920 / 1440 / 1200 / 992 / 768 / 576 / 480 / 360
   ========================================================= */

/* ≥1440px — sedikit lega */
@media (min-width: 1440px) {
	.khg-container { max-width: 1320px; }
}

/* ≤1200px */
@media (max-width: 1200px) {
	.khg-sdg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ≤992px — nav desktop bergeser ke mobile toggle, grid 3→2 kolom, stats 4→3 */
@media (max-width: 992px) {
	.khg-nav { display: none !important; }
	.khg-header__actions .khg-btn--primary { display: none; }

	.khg-grid--3,
	.khg-grid--4 { grid-template-columns: repeat(2, 1fr); }

	.khg-sdg-grid { grid-template-columns: repeat(3, 1fr); }

	.khg-stats__grid { grid-template-columns: repeat(3, 1fr); }

	.khg-masonry { column-count: 3; }

	.khg-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ≥993px — nav desktop tampil, toggle disembunyikan */
@media (min-width: 993px) {
	.khg-nav { display: block; }
	.khg-nav-toggle,
	.khg-mobile-nav { display: none !important; }
}

/* ≤768px */
@media (max-width: 768px) {
	.khg-section { padding-block: 56px; }
	.khg-hero { min-height: 82vh; }
	.khg-hero__actions { flex-direction: column; align-items: stretch; }
	.khg-hero__actions .khg-btn { width: 100%; }

	.khg-sdg-grid { grid-template-columns: repeat(2, 1fr); }

	.khg-section__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }

	.khg-single-layout { grid-template-columns: 1fr; }
	.khg-single-layout--profile { grid-template-columns: 1fr; }
	.khg-contact-layout { grid-template-columns: 1fr; }
	.khg-info-card { position: static; }
	.khg-sdg-target-grid { grid-template-columns: 1fr; }
	.khg-sdg-hero__inner { flex-direction: column; align-items: flex-start; gap: 12px; }

	.khg-masonry { column-count: 2; }
}

/* ≤576px */
@media (max-width: 576px) {
	.khg-container { padding-inline: 18px; }

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

	.khg-stats__grid { grid-template-columns: repeat(2, 1fr); }

	.khg-footer__grid { grid-template-columns: 1fr; }

	.khg-cta__actions { flex-direction: column; }
	.khg-cta__actions .khg-btn { width: 100%; }

	.khg-charts-grid { grid-template-columns: 1fr; }
	.khg-chart-card,
	.khg-chart-card--wide { height: 280px; }
}

/* ≤480px */
@media (max-width: 480px) {
	.khg-hero__title { font-size: 2rem; }
	.khg-sdg-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.khg-sdg-card { min-height: 150px; padding: 16px; }
}

/* ≤360px */
@media (max-width: 360px) {
	.khg-stats__grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
	.khg-btn--lg { padding: 0.85em 1.5em; font-size: 0.92rem; }
}