/* ==========================================================================
   BURUH THEME — RESPONSIVE.CSS
   Mobile-first overrides for breakpoints: 320-1440px+
   ========================================================================== */

/* ==========================================================================
   BASE MOBILE (<768px) — applies by default via component defaults below,
   then progressively enhanced upward with min-width queries.
   ========================================================================== */

@media (max-width: 767.98px) {

	.container { padding: 0 16px; }

	/* Header */
	.header-top-inner { height: var(--header-height-mobile); gap: var(--space-3); }
	.header-search { display: none; }
	.header-actions { display: none; }
	.mobile-menu-toggle,
	.mobile-search-toggle { display: inline-flex; }
	.site-logo-text { font-size: 28px; }
	.custom-logo { max-height: 48px; }

	/* Susunan header mobile: hamburger di kiri, logo di tengah, ikon cari di kanan */
	.mobile-menu-toggle { order: -2; }
	.site-branding {
		order: -1;
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 0;
	}
	.mobile-search-toggle { order: 1; }

	.mobile-search-bar.is-visible { display: block; }

	.primary-navigation { display: none; }

	.trending-inner { padding: 8px 16px; }
	.trending-label { font-size: 10px; padding: 3px 8px; }

	/* Advertisement: Top Banner (970x250/728x90) tidak muat di mobile,
	   digantikan Mobile Banner (320x100/300x250) — lihat inc/customizer.php. */
	.ad-slot-top-banner { display: none; }
	.ad-slot-mobile-banner { display: block; }

	/* Hero */
	.hero-section { padding-top: var(--space-5); }
	.hero-layout { grid-template-columns: 1fr; gap: var(--space-6); }
	.featured-title { font-size: 24px; }
	.featured-excerpt { font-size: 15px; }

	/* Ensure featured + popular never sit side-by-side on mobile */
	.hero-popular { order: 2; }
	.hero-quicklinks { grid-template-columns: 1fr; gap: var(--space-3); }

	/* Grids collapse to 1 column, short items can use 2-col */
	.grid-cols-4,
	.grid-cols-3 { grid-template-columns: 1fr; }

	.news-card-title { font-size: 15px; }

	/* Special content sections stack */
	.special-layout { grid-template-columns: 1fr; gap: var(--space-5); }

	/* Video feature stacks */
	.video-feature { grid-template-columns: 1fr; }
	.video-feature-media img,
	.video-feature-media .media-placeholder { aspect-ratio: 16/9; }
	.video-feature-body { padding: var(--space-5); }
	.video-feature-body h2 { font-size: 20px; }

	/* Short video cards smaller on mobile */
	.short-video-card { flex: 0 0 130px; }
	.carousel-arrow { display: none; }

	/* Article rows: stack image on top */
	.article-row { grid-template-columns: 1fr; gap: var(--space-3); }
	.article-row-media img { aspect-ratio: 16/9; }

	/* Footer */
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
	.footer-about { grid-column: 1 / -1; }

	/* Single article */
	.single-title { font-size: 26px; }
	.single-meta { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
	.single-body {
		font-size: 17px;
		/* Padding ekstra tipis sebagai pengaman visual tambahan di atas padding
		   .container (16px) — memastikan teks artikel tidak pernah menempel
		   atau terpotong di tepi layar pada perangkat mobile sekecil apa pun. */
		padding: 0 2px;
	}
	.single-body img,
	.single-body iframe,
	.single-body table { max-width: 100%; }

	/* Category header */
	.category-header h1 { font-size: 24px; }

	/* Sidebar sits below content on mobile */
	.two-col-layout { grid-template-columns: 1fr; }

	/* Trending: pastikan daftar topik bisa digeser (swipe) horizontal di layar sempit */
	.trending-inner { flex-wrap: nowrap; padding: 8px 16px; }
}

/* Small phones */
@media (max-width: 374.98px) {
	.container { padding: 0 12px; }
	.featured-title { font-size: 21px; }
	.error-code { font-size: 64px; }
}

/* ==========================================================================
   TABLET (768px – 1023.98px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {

	.header-search { max-width: 320px; }

	.hero-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-5); }
	.featured-title { font-size: 27px; }

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

	.special-layout { grid-template-columns: 1fr; gap: var(--space-5); }

	.article-row { grid-template-columns: 180px 1fr; }

	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-about { grid-column: 1 / -1; }

	.two-col-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* Mobile nav & overlay are toggled via the `hidden` attribute in JS.
   We intentionally do NOT force display:block here — a plain <div> already
   defaults to display:block once `hidden` is removed. Forcing it via CSS
   previously caused the (invisible, opacity:0) overlay to always sit on
   top of the page below 1024px, silently blocking every click/tap on
   news cards and the hamburger button itself. */

@media (min-width: 1024px) {
	.mobile-menu-toggle,
	.mobile-search-toggle,
	.mobile-nav,
	.mobile-nav-overlay,
	.mobile-search-bar { display: none !important; }
}

/* ==========================================================================
   DESKTOP (>=1024px) refinements
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.hero-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ==========================================================================
   LARGE DESKTOP (>=1440px) — extra whitespace at the edges
   ========================================================================== */
@media (min-width: 1440px) {
	.hero-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ==========================================================================
   Prevent any accidental horizontal overflow globally
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
/* .container SENGAJA tidak dimasukkan di sini. .container sudah punya
   `max-width: var(--container-max); width: 100%;` di style.css, yang
   secara matematis sudah tidak mungkin melebihi induknya (viewport) —
   jadi tidak butuh safety-net max-width:100% tambahan. Menambahkannya
   di sini justru BUG: karena aturan ini dimuat setelah style.css dan
   sama-sama selector satu-class (spesifisitas sama), `max-width:100%`
   di sini akan MENIMPA `max-width:1200px` yang dimaksud, membuat
   .container (dipakai header, trending bar, footer) jadi nyaris
   selebar viewport sementara area artikel tetap tampak sempit (karena
   dibatasi terpisah oleh .single-content-col/.two-col-layout) —
   sehingga Header terlihat lebih lebar daripada Content. */
.news-grid, .special-layout, .hero-layout { max-width: 100%; }

/* Lapisan pengaman ekstra (defense-in-depth) khusus mobile: memaksa media
   dan teks artikel selalu patuh pada lebar viewport, meskipun ada plugin,
   cache, atau CSS pihak ketiga di server production yang bisa menimpa aturan
   di atas. `!important` sengaja dipakai di sini karena ini adalah baris
   pertahanan TERAKHIR melawan horizontal overflow, bukan styling biasa. */
@media (max-width: 767.98px) {
	/* Hanya membatasi max-width, TIDAK memaksa height:auto — beberapa
	   thumbnail (kartu video pendek, hero-quicklink, video ENAM+) sengaja
	   memakai height:100% untuk mengisi container rasio-tetapnya; height
	   dasar sudah diatur per-komponen di components.css. */
	img, table, svg { max-width: 100% !important; }
	iframe, video, embed, object { max-width: 100% !important; }

	.single-body, .page-body,
	.single-body p, .page-body p,
	.single-body li, .page-body li,
	.single-title, .featured-title, .news-card-title {
		overflow-wrap: anywhere !important;
		word-break: break-word !important;
	}
}