/**
 * Stylesheet untuk Tata Letak Homepage
 *
 * DAFTAR ISI:
 * 1. STRUKTUR DASAR SECTION KATEGORI
 * 2. ITEM UTAMA (FEATURED)
 * 3. DAFTAR ITEM BIASA
 * 4. SLOT IKLAN
 * 5. GAYA RESPONSIVE (MEDIA QUERIES)
 */

/* ==========================================
   1. STRUKTUR DASAR SECTION KATEGORI
   ========================================== */
/* ==========================================
   PERBAIKAN UNTUK TARGET SENTUH
   ========================================== */

/* 1. Perbaikan untuk Link Kategori Umum */
.post-category, .category-section-tag {
    margin: 1px 0px;
    position: relative;
    z-index: 1;
}

/* 2. Target sentuh untuk link yang tidak memiliki padding (misal: judul) */
.featured-post-thumbnail,
.category-section-heading a,
.grid-post-title a {
    position: relative; /* Diperlukan untuk pseudo-element */
}

/* Inilah 'papan sentuh transparan' kita */
.post-category::before,
.category-section-tag::before,
.category-section-heading a::before,
.grid-post-title a::before {
    content: '';
    position: absolute;
    
    /* Posisikan di tengah dan perbesar area */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Ukuran minimal yang direkomendasikan Google */
    min-width: 48px;
    min-height: 48px;

    /* Tidak terlihat oleh mata dan tidak mengganggu */
    background: transparent;
    z-index: 0;
}

.category-section {
	margin-bottom: 1.5rem;
}

.category-section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.category-section-title {
	font-family: var(--font-heading);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	margin: 0;
	padding-bottom: 0.5rem;
	position: relative;
}

.category-section-title-underline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 4rem;
    border-bottom: 4px solid var(--color-primary);
}

.category-section-more-link {
	display: none; /* Defaultnya disembunyikan, tampil di desktop */
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
	align-items: center;
	gap: 0.5rem;
}

.category-section-more-link svg {
	width: 1.5rem;
	height: 1.5rem;
}

.category-section-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}


/* ==========================================
   2. ITEM UTAMA (FEATURED)
   ========================================== */

.category-section-item-featured {
	position: relative;
	margin-bottom: 0.6rem;
}

.category-section-item-featured .category-section-thumbnail {
	position: relative;
	width: 100%;
	height: 236px !important; /* Pertahankan tinggi spesifik */
	overflow: hidden;
	border-radius: .25rem;
	display: block;
    z-index: 0;
}

.category-section-item-featured .category-section-thumbnail img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 5px;
	display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.category-section-item-featured .category-section-content {
	position: absolute;
	bottom: 0;
    left: 0;
    right: 0;
	width: 100%;
	padding: 4rem 1rem 1rem;
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	border-radius: 0 0 0.25rem 0.25rem;
	z-index: 1;
	box-sizing: border-box;
}

.category-section-item-featured .category-section-tag {
	display: inline-block;
	color: #fff;
	background: var(--color-primary);
	text-transform: uppercase;
	font-size: 0.625rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	margin-bottom: 0.5rem;
}

.category-section-item-featured .category-section-heading {
    font-family: var(--font-heading);
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0 0 0.5rem;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.category-section-item-featured .category-section-date {
	color: rgba(255,255,255,0.8);
	font-size: 0.75rem;
}

/* ==========================================
   3. DAFTAR ITEM BIASA
   ========================================== */

.category-section-item:not(.category-section-item-featured) {
	display: flex;
	gap: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 0.25rem;
}

.category-section-item:last-child {
	margin-bottom: -12px;
    border-bottom: 1px solid var(--color-border);
}

.category-section-item:not(.category-section-item-featured) .category-section-thumbnail {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	border-radius: 0.25rem;
	overflow: hidden;
	margin-top: 0.60rem;
}

.category-section-item:not(.category-section-item-featured) .category-section-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video overlay untuk item kecil: play icon lebih kecil */
.category-section-item:not(.category-section-item-featured) .video-play-icon {
	width: 28px;
	height: 28px;
}

/* Overlay gradient lebih subtle untuk thumbnail kecil */
.category-section-item:not(.category-section-item-featured) .video-post-overlay {
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.35) 0%,
		rgba(0, 0, 0, 0.1) 50%,
		rgba(0, 0, 0, 0.02) 100%
	);
}

.category-section-item:not(.category-section-item-featured) .category-section-content {
	flex: 1;
	min-width: 0;
}

.category-section-item:not(.category-section-item-featured) .category-section-tag {
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.725rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	margin-bottom: 0.25rem;
}

.category-section-item:not(.category-section-item-featured) .category-section-heading {
    font-family: var(--font-heading);
	font-size: 0.875rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 0.25rem;
	color: var(--color-text, #1a202c); /* Fallback color */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.category-section-item:not(.category-section-item-featured) .category-section-date {
	font-size: 0.70rem;
	color: var(--color-secondary);
}

/* Pastikan link di dalam judul menggunakan warna teks standar, bukan warna link */
.category-section-heading a {
    color: #1a202c; /* Menggunakan warna hitam pekat, bukan var(--color-link) */
    text-decoration: none;
}

time.berita-pilihan-date-bawah {
    font-size: 12px;
    margin-top: 0px;
    display: block;
}

/* Ubah warna hanya saat di-hover, menggunakan warna primer */
.category-section-heading a:hover {
    color: var(--color-primary);
}

.category-section-mobile-more-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}
.category-section-mobile-more-link svg {
	width: 1.5rem;
	height: 1.5rem;
}

.category-section-column.category-section-column-left {
    margin-top: 10px;
}

/* ==========================================
   4. SLOT IKLAN
   ========================================== */

.homepage-ad-slot,
.ad-slot--above-pilihan,
.ad-slot--below-pilihan {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 2rem 0;
	overflow: hidden;
}

/* ==========================================
   5. GAYA RESPONSIVE (MEDIA QUERIES)
   ========================================== */

/* --- Tampilan Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
	.category-section-more-link {
        display: flex;
    }
	.category-section-mobile-more-link {
        display: none;
    }
	.main-content-layout .sidebar {
        margin-top: 0 !important;
    }
    .site-main {
        margin-top: 15px;
    }
}

/* --- Tampilan Tablet (>= 768px) --- */
@media (min-width: 768px) {
	.category-section-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
    /* Membuat kolom kanan mengambil 2 baris */
	.category-section-column-right {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    
}

/* --- Tampilan Mobile (<= 782px) --- */
@media screen and (max-width: 782px) {
    .widget_Menara_popular_posts {
	    position: unset; /* Hapus sticky pada mobile */
	}
	div#content {
        margin-top: 20px !important;
    }
    
    .category-section-item:last-child {
        margin-bottom: -10px;
    }
}