/**
 * BW Pretty Post Link — frontend styles.
 *
 * The markup is always <ul class="bw-ppl bw-ppl--{layout}"> containing
 * <li class="bw-ppl__item"> > <a class="bw-ppl__link"> with a thumbnail
 * wrap and a title.
 *
 * Layout switches the display; both modes use the same HTML.
 *   - bw-ppl--simple    : plain bulleted list, thumbnails hidden
 *   - bw-ppl--thumbnail : 16:9 thumb on the left, title on the right
 */

.bw-ppl {
	margin: 0 0 1.5em;
	padding: 0;
}

.bw-ppl__item {
	margin: 0;
}

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

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

/* =========================================================================
 * Simple mode — plain bulleted list of text links
 * ======================================================================= */
.bw-ppl--simple {
	list-style: disc;
	padding-left: 1.25em;
}

.bw-ppl--simple .bw-ppl__item {
	display: list-item;
	padding: 0.2em 0;
}

.bw-ppl--simple .bw-ppl__link {
	display: inline;
	text-decoration: underline;
}

.bw-ppl--simple .bw-ppl__thumb-wrap {
	display: none;
}

/* =========================================================================
 * Thumbnail mode — one row per item, 16:9 thumb + title
 * ======================================================================= */
.bw-ppl--thumbnail {
	list-style: none;
	padding-left: 0;
}

.bw-ppl--thumbnail .bw-ppl__item {
	padding: 1em 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.08 );
}

.bw-ppl--thumbnail .bw-ppl__item:last-child {
	border-bottom: none;
}

.bw-ppl--thumbnail .bw-ppl__link {
	display: flex;
	align-items: center;
	gap: 1em;
}

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

.bw-ppl--thumbnail .bw-ppl__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.bw-ppl--thumbnail .bw-ppl__title {
	flex: 1;
	font-weight: 600;
	line-height: 1.3;
}

/* Responsive: give thumbs a little more room on narrow screens */
@media ( max-width: 600px ) {
	.bw-ppl--thumbnail .bw-ppl__thumb-wrap {
		flex-basis: clamp( 30%, var( --bw-ppl-img-width, 20% ), 40% );
	}
}