/**
 * BW Dev — Post Link Block frontend styles.
 *
 * Markup is always <ul class="bw-dev-post-link bw-dev-post-link--{layout}">
 * containing <li class="bw-dev-post-link__item"> > <a> > thumb + title.
 * Two layouts share the same HTML and switch via the modifier class.
 */

.bw-dev-post-link {
	margin: 0 0 1.5em;
	padding: 0;
}

.bw-dev-post-link__item {
	margin: 0;
}

.bw-dev-post-link__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.bw-dev-post-link__link:hover,
.bw-dev-post-link__link:focus {
	color: var( --wp--preset--color--primary, #0073aa );
}

/* Simple — bulleted text list */
.bw-dev-post-link--simple {
	list-style: disc;
	padding-left: 1.25em;
}

.bw-dev-post-link--simple .bw-dev-post-link__item {
	display: list-item;
	padding: 0.2em 0;
}

.bw-dev-post-link--simple .bw-dev-post-link__link {
	display: inline;
	text-decoration: underline;
}

.bw-dev-post-link--simple .bw-dev-post-link__thumb-wrap {
	display: none;
}

/* Thumbnail — 16:9 thumb + title row */
.bw-dev-post-link--thumbnail {
	list-style: none;
	padding-left: 0;
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__item {
	padding: 1em 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__item:last-child {
	border-bottom: none;
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__link {
	display: flex;
	align-items: center;
	gap: 1em;
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__thumb-wrap {
	flex: 0 0 var( --bw-dev-post-link-img-width, 20% );
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f3f3f3;
	border-radius: 4px;
	display: block;
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__thumb--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #e9e9e9 0%, #f5f5f5 100% );
}

.bw-dev-post-link--thumbnail .bw-dev-post-link__title {
	flex: 1;
	font-weight: 600;
	line-height: 1.3;
}

@media ( max-width: 600px ) {
	.bw-dev-post-link--thumbnail .bw-dev-post-link__thumb-wrap {
		flex-basis: clamp( 30%, var( --bw-dev-post-link-img-width, 20% ), 40% );
	}
}