/*
 * Dokterin Post Slider - Category Grid & Category Buttons.
 *
 * Per widget (inline style): --dps-cols / --dps-cols-t / --dps-cols-m,
 * --dps-ratio (grid), --dps-justify (buttons).
 */

.dps-cat-grid,
.dps-cat-buttons {
	--dps-cat-accent: #1a75bb;
	--dps-cat-accent-soft: #eaf2ff;
	--dps-cat-pink: #df1683;
	--dps-cat-text: #1f1f1f;
	--dps-cat-muted: #6b7280;
}

/* Theme content styles underline links inside .entry-content - not here. */
.dps-cat-grid a,
.dps-cat-grid a:hover,
.dps-cat-grid a *,
.dps-cat-buttons a,
.dps-cat-buttons a:hover,
.dps-cat-buttons a * {
	text-decoration: none !important;
}

/* ------------------------------------------------------------------ */
/* Category Grid                                                       */
/* ------------------------------------------------------------------ */

.dps-cat-grid {
	display: grid;
	grid-template-columns: repeat( var( --dps-cols, 4 ), minmax( 0, 1fr ) );
	gap: 20px;
	width: 100%;
}

@media ( max-width: 1024px ) {

	.dps-cat-grid {
		grid-template-columns: repeat( var( --dps-cols-t, 3 ), minmax( 0, 1fr ) );
		gap: 16px;
	}
}

@media ( max-width: 767px ) {

	.dps-cat-grid {
		grid-template-columns: repeat( var( --dps-cols-m, 2 ), minmax( 0, 1fr ) );
		gap: 12px;
	}
}

.dps-cat-grid .dps-cat-card {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: 14px;
	letter-spacing: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dps-cat-grid .dps-cat-card-name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.dps-cat-grid .dps-cat-card-count {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
}

/* Dengan gambar: gambar penuh + gradasi gelap, teks putih di bawah. */
.dps-cat-grid--image .dps-cat-card {
	aspect-ratio: var( --dps-ratio, 4 / 3 );
	align-items: flex-end;
	background: linear-gradient( 135deg, var( --dps-cat-accent ), var( --dps-cat-pink ) );
	box-shadow: 0 4px 18px rgba( 20, 40, 80, 0.1 );
}

.dps-cat-grid--image .dps-cat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 0, 0, 0, 0 ) 35%, rgba( 0, 0, 0, 0.72 ) 100% );
}

.dps-cat-grid--image .dps-cat-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.dps-cat-grid--image .dps-cat-card-body {
	position: relative;
	z-index: 1;
	padding: 16px 18px;
	color: #fff;
}

.dps-cat-grid--image .dps-cat-card-name {
	color: #fff;
	font-size: 18px;
}

.dps-cat-grid--image .dps-cat-card-count {
	color: rgba( 255, 255, 255, 0.85 );
}

.dps-cat-grid--image .dps-cat-card:hover {
	transform: translateY( -3px );
	box-shadow: 0 12px 28px rgba( 20, 40, 80, 0.18 );
}

.dps-cat-grid--image .dps-cat-card:hover .dps-cat-card-img {
	transform: scale( 1.06 );
}

/* Sederhana: tile putih dengan border, tanpa gambar. */
.dps-cat-grid--simple .dps-cat-card {
	align-items: center;
	min-height: 88px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e5e9f0;
	border-left: 4px solid var( --dps-cat-accent );
}

.dps-cat-grid--simple .dps-cat-card-name {
	color: var( --dps-cat-text );
	font-size: 16px;
}

.dps-cat-grid--simple .dps-cat-card-count {
	color: var( --dps-cat-muted );
}

.dps-cat-grid--simple .dps-cat-card:hover {
	border-color: var( --dps-cat-accent );
	box-shadow: 0 8px 20px rgba( 20, 40, 80, 0.1 );
}

.dps-cat-grid--simple .dps-cat-card:hover .dps-cat-card-name {
	color: var( --dps-cat-accent );
}

@media ( max-width: 767px ) {

	.dps-cat-grid--image .dps-cat-card-body {
		padding: 12px 14px;
	}

	.dps-cat-grid--image .dps-cat-card-name {
		font-size: 15px;
	}
}

/* ------------------------------------------------------------------ */
/* Category Buttons                                                    */
/* ------------------------------------------------------------------ */

.dps-cat-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: var( --dps-justify, flex-start );
	gap: 10px;
	width: 100%;
}

.dps-cat-buttons .dps-cat-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dps-cat-buttons .dps-cat-btn-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: rgba( 26, 117, 187, 0.12 );
}

/* Outline */
.dps-cat-buttons--outline .dps-cat-btn {
	border-color: var( --dps-cat-accent );
	color: var( --dps-cat-accent );
	background: transparent;
}

.dps-cat-buttons--outline .dps-cat-btn:hover,
.dps-cat-buttons--outline .dps-cat-btn.is-active {
	background: var( --dps-cat-accent );
	color: #fff;
}

/* Solid */
.dps-cat-buttons--solid .dps-cat-btn {
	background: var( --dps-cat-accent );
	border-color: var( --dps-cat-accent );
	color: #fff;
}

.dps-cat-buttons--solid .dps-cat-btn:hover,
.dps-cat-buttons--solid .dps-cat-btn.is-active {
	background: var( --dps-cat-pink );
	border-color: var( --dps-cat-pink );
	color: #fff;
}

/* Soft */
.dps-cat-buttons--soft .dps-cat-btn {
	background: var( --dps-cat-accent-soft );
	color: var( --dps-cat-accent );
}

.dps-cat-buttons--soft .dps-cat-btn.is-active {
	background: var( --dps-cat-accent );
	color: #fff;
}

/* Hover: tanpa background, hanya border + teks putih. */
.dps-cat-buttons--soft .dps-cat-btn:hover {
	background: transparent;
	border-color: #fff;
	color: #fff;
}

.dps-cat-buttons.dps-cat-buttons--soft .dps-cat-btn:hover .dps-cat-btn-count {
	background: transparent;
	box-shadow: inset 0 0 0 1px #fff;
}

.dps-cat-buttons .dps-cat-btn:hover .dps-cat-btn-count,
.dps-cat-buttons .dps-cat-btn.is-active .dps-cat-btn-count,
.dps-cat-buttons--solid .dps-cat-btn .dps-cat-btn-count {
	background: rgba( 255, 255, 255, 0.25 );
}

/* HP: satu baris yang bisa digeser, bukan menumpuk banyak baris. */
@media ( max-width: 767px ) {

	.dps-cat-buttons--scroll {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
	}

	.dps-cat-buttons--scroll::-webkit-scrollbar {
		display: none;
	}

	.dps-cat-buttons--scroll .dps-cat-btn {
		flex-shrink: 0;
	}
}