/* ==========================================================================
   BW-News — homepage builder untuk portal berita/media
   Brand: hitam/putih, heading font Lexend
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');

:root {
	--ravb-black: #111111;
	--ravb-white: #ffffff;
	--ravb-gray-text: #6b6b6b;
	--ravb-gray-light: #8a8a8a;
	--ravb-gray-bg: #f4f4f4;
	--ravb-border: #e4e4e4;
	--ravb-img-placeholder: #e5e5e5;

	--ravb-heading-font: 'Lexend', sans-serif;
	--ravb-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ravb-radius: 4px;
	--ravb-max-width: 1200px;
	--ravb-rail-width: 160px;
}

.ravb-homepage,
.ravb-archive {
	width: 100%;
	font-family: var(--ravb-body-font);
	color: var(--ravb-black);
}

/* ==========================================================================
   PAGE WRAP — 3 kolom: rail kiri + konten tengah + rail kanan
   PENTING: total lebar wrap ini mengikuti container theme (Astra) tempat
   shortcode [rav_homepage] ditempatkan — TIDAK menambah lebar sendiri di
   luar container. Rail jadi bagian DALAM container, bukan elemen tambahan
   di luar. Kalau container Astra lebih sempit dari (rail+rail+konten
   minimum), rail otomatis hilang lewat media query di bawah.
   ========================================================================== */
.ravb-page-wrap {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.ravb-rail {
	flex: 0 0 var(--ravb-rail-width);
	width: var(--ravb-rail-width);
	position: sticky;
	top: 20px;
}

.ravb-homepage {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}

@media (max-width: 640px) {
	.ravb-page-wrap {
		padding: 0 16px;
	}
}

/* Rail hanya tampil kalau container cukup lebar untuk menampungnya tanpa
   membuat kolom tengah jadi terlalu sempit. container query lebih akurat
   dari media query disini, tapi fallback ke @media untuk browser lama. */
@media (max-width: 1300px) {
	.ravb-rail {
		display: none;
	}
}

.ravb-homepage *,
.ravb-archive *,
.ravb-sidebar-widgets *,
.ravb-related-posts * {
	box-sizing: border-box;
}

.ravb-no-img {
	background: var(--ravb-img-placeholder);
}

/* Section title umum */
.ravb-section-title {
	font-family: var(--ravb-heading-font);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--ravb-black);
}

.ravb-pillar-title {
	font-family: var(--ravb-heading-font);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ravb-black);
}

.ravb-pillar-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-badge {
	display: inline-block;
	color: var(--ravb-gray-text);
	font-family: var(--ravb-body-font);
	font-size: 13px;
	font-weight: 500;
	margin: 8px 0 4px;
}

.ravb-badge-sm {
	font-size: 11px;
	margin: 4px 0 2px;
}

a.ravb-badge-link {
	text-decoration: none;
}

.ravb-time-ago {
	display: block;
	font-size: 12px;
	color: var(--ravb-gray-light);
	margin: 2px 0 6px;
}

/* ==========================================================================
   1. BREAKING TICKER
   ========================================================================== */
.ravb-ticker {
	display: flex;
	align-items: center;
	background: var(--ravb-black);
	color: var(--ravb-white);
	border-radius: var(--ravb-radius);
	margin: 20px 0;
	overflow: hidden;
	height: 42px;
}

.ravb-ticker-label {
	flex: 0 0 auto;
	background: var(--ravb-white);
	color: var(--ravb-black);
	font-family: var(--ravb-heading-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.03em;
	padding: 0 16px;
	height: 100%;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.ravb-ticker-track-wrap {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.ravb-ticker-track {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	white-space: nowrap;
	animation: ravb-ticker-scroll 32s linear infinite;
}

.ravb-ticker-track li {
	flex: 0 0 auto;
	padding: 0 24px;
	position: relative;
	display: flex;
	align-items: center;
	line-height: 1;
}

.ravb-ticker-track li::after {
	content: "•";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255,255,255,0.4);
}

.ravb-ticker-track a {
	color: var(--ravb-white);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
}

.ravb-ticker-track a:hover {
	text-decoration: underline;
}

@keyframes ravb-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.ravb-ticker:hover .ravb-ticker-track {
	animation-play-state: paused;
}

/* ==========================================================================
   2. HERO GRID (1 besar kiri + list kanan)
   ========================================================================== */
.ravb-hero-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 28px;
	margin-bottom: 32px;
}

.ravb-hero-main {
	display: flex;
	flex-direction: column;
}

.ravb-hero-link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-hero-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ravb-hero-overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 20px 24px 22px;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%);
}

.ravb-badge-overlay {
	color: rgba(255,255,255,0.9);
	font-size: 14px;
	margin: 0 0 6px;
}

.ravb-hero-title {
	font-family: var(--ravb-heading-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--ravb-white);
}

.ravb-hero-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ravb-hero-list-item {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ravb-border);
}

.ravb-hero-list-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.ravb-hero-list-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-hero-list-img {
	width: 100px !important;
	height: 70px !important;
	object-fit: cover;
	display: block;
}

.ravb-hero-list-text h4 {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-hero-list-text h4 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-hero-list-text h4 a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   3. EDITOR'S PICK CAROUSEL
   ========================================================================== */
.ravb-editors-pick {
	margin-bottom: 32px;
}

.ravb-editors-pick-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 8px;
}

.ravb-editors-pick-card {
	flex: 0 0 auto;
	width: 220px;
	display: flex;
	flex-direction: column;
}

.ravb-editors-pick-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-editors-pick-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.ravb-editors-pick-title {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-editors-pick-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-editors-pick-title a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   4. 2-COLUMN ROW LAYOUT (dipakai berulang: latest+sidebar, pillar+spotlight)
   ========================================================================== */
.ravb-row-2col {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	align-items: start;
	margin-bottom: 32px;
}

.ravb-col-main {
	min-width: 0;
}

.ravb-col-side {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ==========================================================================
   5. BERITA TERBARU
   ========================================================================== */
.ravb-latest-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
}

.ravb-latest-layout-full {
	grid-template-columns: 1fr;
}

.ravb-latest-layout-full .ravb-latest-below-main {
	grid-template-columns: repeat(4, 1fr);
}

.ravb-latest-main {
	display: flex;
	flex-direction: column;
}

.ravb-latest-main .ravb-latest-below-main {
	margin-top: auto;
	padding-top: 18px;
}

.ravb-latest-main-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-latest-main-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9.5;
	object-fit: cover;
	display: block;
}

.ravb-latest-main-title {
	font-family: var(--ravb-heading-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.ravb-latest-main-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-latest-main-title a:hover {
	text-decoration: underline;
}

.ravb-latest-below-main {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--ravb-border);
}

.ravb-latest-below-card {
	display: flex;
	flex-direction: column;
}

.ravb-latest-below-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-latest-below-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.ravb-latest-below-title {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-latest-below-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-latest-below-title a:hover {
	text-decoration: underline;
}

.ravb-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ravb-latest-list li {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ravb-border);
}

.ravb-latest-list li:first-child {
	padding-top: 0;
}

.ravb-latest-list li:last-child {
	border-bottom: none;
}

.ravb-latest-list-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-latest-list-img {
	width: 84px !important;
	height: 64px !important;
	object-fit: cover;
	display: block;
}

.ravb-latest-list-text h4 {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-latest-list-text h4 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-latest-list-text h4 a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   6. PILLAR BLOCK (list-style "Market"/"Finansial"/"Ekonomi")
   ========================================================================== */
.ravb-pillar-block {
	margin-bottom: 32px;
}

.ravb-pillar-main-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-pillar-main-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9.3;
	object-fit: cover;
	display: block;
}

.ravb-pillar-main-title {
	font-family: var(--ravb-heading-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 14px;
}

.ravb-pillar-main-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-pillar-main-title a:hover {
	text-decoration: underline;
}

.ravb-pillar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ravb-pillar-list li {
	padding: 12px 0;
	border-top: 1px solid var(--ravb-border);
}

.ravb-pillar-list h5 {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-pillar-list h5 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-pillar-list h5 a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   7. TOPIK PILIHAN (hot topics tag list)
   ========================================================================== */
.ravb-hot-topics-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ravb-hot-topic-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.ravb-hot-topic-img {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex: 0 0 auto;
}

.ravb-hot-topic-link span {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--ravb-black);
}

.ravb-hot-topic-link:hover span {
	text-decoration: underline;
}

/* ==========================================================================
   8. VIDEO SECTION
   ========================================================================== */
.ravb-video-thumb-link {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-video-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ravb-video-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0,0,0,0.6);
}

.ravb-video-play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--ravb-white);
}

.ravb-video-title {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-video-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-video-title a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   9. SPOTLIGHT BOX
   ========================================================================== */
.ravb-spotlight-main-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-spotlight-main-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ravb-spotlight-main-title {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.ravb-spotlight-main-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-spotlight-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ravb-spotlight-list li {
	padding: 10px 0;
	border-top: 1px solid var(--ravb-border);
}

.ravb-spotlight-list h5 {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-spotlight-list h5 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-spotlight-list h5 a:hover {
	text-decoration: underline;
}

.ravb-spotlight-viewall {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-spotlight-viewall:hover {
	text-decoration: underline;
}

/* ==========================================================================
   10. GALERI FOTO
   ========================================================================== */
.ravb-photo-gallery {
	margin-bottom: 32px;
}

.ravb-photo-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.ravb-photo-gallery-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-photo-gallery-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.ravb-photo-gallery-title {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.ravb-photo-gallery-title a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-photo-gallery-title a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   11. INFOGRAFIS (strip horizontal poster vertikal)
   ========================================================================== */
.ravb-infographics {
	margin-bottom: 32px;
}

.ravb-infographics-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 8px;
}

.ravb-infographics-item {
	flex: 0 0 auto;
	display: block;
	width: 140px;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-infographics-img {
	width: 140px !important;
	height: 220px !important;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   12. TERPOPULER
   ========================================================================== */
.ravb-trending-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ravb-trending-list li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	padding: 12px 0;
	border-top: 1px solid var(--ravb-border);
}

.ravb-trending-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.ravb-trending-num {
	font-family: var(--ravb-heading-font);
	font-size: 22px;
	font-weight: 800;
	color: var(--ravb-border);
	line-height: 1.2;
}

.ravb-trending-list h5 {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
}

.ravb-trending-list h5 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-trending-list h5 a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   13. AD / BANNER SLOT
   ========================================================================== */
.ravb-ad-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.ravb-ad-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ravb-gray-light);
}

.ravb-ad-link {
	display: block;
	width: 100%;
}

.ravb-ad-img {
	width: 100%;
	display: block;
	border-radius: var(--ravb-radius);
}

.ravb-ad-placeholder {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ravb-gray-bg);
	border: 1px dashed var(--ravb-border);
	border-radius: var(--ravb-radius);
	color: var(--ravb-gray-light);
	font-size: 13px;
	font-weight: 500;
}

.ravb-ad-box {
	width: 100%;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}

.ravb-ad-box .ravb-ad-placeholder {
	height: 250px;
}

.ravb-ad-wide {
	width: 100%;
	max-width: 728px;
	margin-left: auto;
	margin-right: auto;
}

.ravb-ad-wide .ravb-ad-placeholder {
	height: 90px;
}

.ravb-ad-rail {
	width: 160px;
}

.ravb-ad-rail .ravb-ad-placeholder {
	width: 160px;
	height: 600px;
}

/* ==========================================================================
   14. SIDEBAR WIDGETS (single post & archive)
   ========================================================================== */
.ravb-sidebar-widgets {
	max-width: var(--ravb-max-width);
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-family: var(--ravb-body-font);
	color: var(--ravb-black);
}

.ravb-search-form {
	display: flex;
	border: 1px solid var(--ravb-border);
	border-radius: var(--ravb-radius);
	overflow: hidden;
}

.ravb-search-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 10px 12px;
	font-size: 14px;
	font-family: var(--ravb-body-font);
	color: var(--ravb-black);
}

.ravb-search-btn {
	flex: 0 0 auto;
	border: none;
	background: var(--ravb-black);
	color: var(--ravb-white);
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	padding: 0 16px;
	cursor: pointer;
}

.ravb-search-btn:hover {
	opacity: 0.85;
}

/* ==========================================================================
   15. CATEGORY ARCHIVE — grid gambar (gaya galeri), tanpa label kategori
   karena halaman archive sendiri sudah dalam konteks kategori tersebut
   ========================================================================== */

/* Sembunyikan pagination & judul archive BAWAAN THEME di halaman kategori —
   plugin ini sudah merender gridnya sendiri lengkap dengan pagination
   sendiri di dalam .ravb-archive-grid-wrap, jadi elemen asli theme di
   LUAR wrapper itu (kalau ada & tidak ikut ter-buffer oleh loop_start/
   loop_end) harus disembunyikan supaya tidak ada pagination dobel atau
   pagination yang muncul padahal grid artikelnya kosong. Selector di
   bawah TIDAK menyentuh apa pun di dalam .ravb-archive-grid-wrap. */
body.category nav.navigation.pagination,
body.category .pagination:not(.ravb-archive-grid-wrap .pagination),
body.category .page-title,
body.category .ast-archive-title,
body.category .ast-archive-description {
	display: none !important;
}

.ravb-archive-grid-wrap {
	margin-top: 20px;
}

.ravb-archive-fallback-notice {
	font-size: 14px;
	color: var(--ravb-gray-text);
	background: var(--ravb-gray-bg);
	padding: 12px 16px;
	border-radius: var(--ravb-radius);
	margin-bottom: 20px;
}

.ravb-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ravb-archive-grid-card {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--ravb-radius);
	text-decoration: none;
	aspect-ratio: 4 / 3;
}

.ravb-archive-grid-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ravb-archive-grid-card:hover .ravb-archive-grid-img {
	transform: scale(1.05);
}

.ravb-archive-grid-overlay {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	padding: 16px 18px;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
}

.ravb-archive-grid-title {
	font-family: var(--ravb-heading-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ravb-white);
	margin: 0 0 6px;
}

.ravb-archive-grid-time {
	font-size: 12px;
	color: rgba(255,255,255,0.8);
}

.ravb-archive-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.ravb-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ravb-border);
	border-radius: var(--ravb-radius);
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-archive-pagination .page-numbers.current {
	background: var(--ravb-black);
	color: var(--ravb-white);
	border-color: var(--ravb-black);
}

/* ==========================================================================
   16. SINGLE POST — full restyle elements
   ========================================================================== */

/* Breadcrumb */
.ravb-breadcrumb {
	max-width: var(--ravb-max-width);
	margin: 16px auto 12px;
	font-size: 13px;
	color: var(--ravb-gray-light);
}

.ravb-breadcrumb a {
	color: var(--ravb-gray-text);
	text-decoration: none;
}

.ravb-breadcrumb a:hover {
	text-decoration: underline;
}

.ravb-breadcrumb-sep {
	margin: 0 6px;
}

/* Author box */
.ravb-author-box {
	max-width: var(--ravb-max-width);
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ravb-author-avatar {
	border-radius: 50%;
	flex: 0 0 auto;
}

.ravb-author-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ravb-author-name {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--ravb-black);
}

.ravb-author-source {
	font-weight: 400;
	color: var(--ravb-gray-text);
}

.ravb-author-date {
	font-size: 12px;
	color: var(--ravb-gray-light);
}

/* Caption featured image (gambar sendiri sudah ditampilkan oleh theme) */
.ravb-featured-caption {
	max-width: var(--ravb-max-width);
	margin: 8px auto 16px;
	font-size: 12px;
	font-style: italic;
	color: var(--ravb-gray-light);
}

/* Topik tags */
.ravb-topic-tags {
	max-width: var(--ravb-max-width);
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--ravb-border);
}

.ravb-topic-tags-label {
	font-family: var(--ravb-heading-font);
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
}

.ravb-topic-tags-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ravb-topic-tags-list a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--ravb-border);
	border-radius: 20px;
	font-size: 12px;
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-topic-tags-list a:hover {
	background: var(--ravb-black);
	color: var(--ravb-white);
	border-color: var(--ravb-black);
}

/* Related posts — 4 kolom grid */
.ravb-related-posts {
	max-width: var(--ravb-max-width);
	margin: 24px auto 0;
	padding: 24px 0 0;
	border-top: 2px solid var(--ravb-black);
	font-family: var(--ravb-body-font);
}

.ravb-related-posts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.ravb-related-post-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ravb-related-post-img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--ravb-radius);
	margin-bottom: 10px;
}

.ravb-related-post-card h4 {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ravb-black);
	margin: 0;
}

.ravb-related-post-card:hover h4 {
	text-decoration: underline;
}

/* ==========================================================================
   17. SINGLE POST — fixed rail kiri/kanan (nempel di tepi viewport browser)
   ========================================================================== */
.ravb-fixed-rail {
	position: fixed;
	top: 140px;
	z-index: 10;
}

.ravb-fixed-rail-left {
	left: max(8px, calc((100vw - var(--ravb-max-width)) / 2 - 180px));
}

.ravb-fixed-rail-right {
	right: max(8px, calc((100vw - var(--ravb-max-width)) / 2 - 180px));
}

@media (max-width: 1500px) {
	.ravb-fixed-rail {
		display: none;
	}
}

/* ==========================================================================
   18. SINGLE POST — sidebar widgets (Terpopuler + Terbaru + Rekomendasi)
   ========================================================================== */
.ravb-single-sidebar {
	gap: 24px;
}

.ravb-sidebar-block {
	display: flex;
	flex-direction: column;
}

.ravb-sidebar-simple-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.ravb-sidebar-simple-list li {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid var(--ravb-border);
}

.ravb-sidebar-simple-list li:first-child {
	border-top: none;
	padding-top: 0;
}

.ravb-sidebar-simple-thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--ravb-radius);
}

.ravb-sidebar-simple-img {
	width: 72px !important;
	height: 54px !important;
	object-fit: cover;
	display: block;
}

.ravb-sidebar-simple-text h5 {
	font-family: var(--ravb-heading-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 4px;
}

.ravb-sidebar-simple-text h5 a {
	color: var(--ravb-black);
	text-decoration: none;
}

.ravb-sidebar-simple-text h5 a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
	.ravb-hero-grid {
		grid-template-columns: 1fr;
	}

	.ravb-row-2col {
		grid-template-columns: 1fr;
	}

	.ravb-latest-layout {
		grid-template-columns: 1fr;
	}

	.ravb-photo-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ravb-related-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.ravb-hero-title {
		font-size: 19px;
	}

	.ravb-hero-list-item {
		grid-template-columns: 80px 1fr;
	}

	.ravb-hero-list-img {
		width: 80px !important;
		height: 56px !important;
	}

	.ravb-editors-pick-card {
		width: 170px;
	}

	.ravb-latest-below-main {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ravb-photo-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.ravb-related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ravb-fixed-rail {
		display: none;
	}

	.ravb-archive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.ravb-archive-grid-title {
		font-size: 13px;
	}

	.ravb-ad-box .ravb-ad-placeholder {
		height: 200px;
	}

	.ravb-ad-wide .ravb-ad-placeholder {
		height: 80px;
	}

	.ravb-ticker-label {
		font-size: 11px;
		padding: 0 10px;
	}

	.ravb-ticker-track li {
		padding: 0 16px;
	}
}