/**
 * Vazir Bricks Extras — Suggested Box: "Minimal Row" design.
 *
 * @package VazirBricksExtras
 */

.vbe-suggested-box--minimal-row {
	/* !important: aggressive theme content-link rules (e.g. `.entry-content
	   a { display: inline-block }`) otherwise collapse the flex row. */
	display: flex !important;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var( --vbe-sb-border, #e2e4e7 );
	background: var( --vbe-sb-bg, #f6f7f7 );
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vbe-suggested-box--minimal-row:hover {
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.07 );
	transform: translateY( -1px );
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	overflow: hidden;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__thumb img,
.vbe-suggested-box--minimal-row .vbe-suggested-box__thumb-placeholder {
	display: block;
	width: 100%;
	/* !important: beats the ubiquitous `img { height: auto !important }`
	   theme reset so the square thumbnail stays square. */
	height: 100% !important;
	object-fit: cover;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__thumb-placeholder {
	background: linear-gradient( 135deg, #93a3b8, #56637a );
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__badge {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --vbe-sb-accent, #2271b1 );
	color: var( --vbe-sb-accent_text, #ffffff );
	font-size: 10px;
	font-weight: 700;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__title {
	overflow: hidden;
	color: var( --vbe-sb-title, #14161a );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__meta {
	color: var( --vbe-sb-meta_text, #6b7280 );
	font-size: 12px;
}

.vbe-suggested-box--minimal-row .vbe-suggested-box__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --vbe-sb-arrow, #2271b1 );
	transition: transform 0.15s ease;
}

.vbe-suggested-box--minimal-row:hover .vbe-suggested-box__arrow {
	transform: translateX( -3px );
}

[dir='ltr'] .vbe-suggested-box--minimal-row .vbe-suggested-box__arrow svg {
	transform: scaleX( -1 );
}

[dir='ltr'] .vbe-suggested-box--minimal-row:hover .vbe-suggested-box__arrow {
	transform: translateX( 3px );
}

@media ( max-width: 480px ) {
	.vbe-suggested-box--minimal-row .vbe-suggested-box__thumb {
		width: 44px;
		height: 44px;
	}

	.vbe-suggested-box--minimal-row .vbe-suggested-box__meta {
		display: none;
	}
}
