/**
 * BD Media — listing layer presentation (WS3 + WS4).
 * Scoped under .bdm-* so nothing collides with JetBlog, Kava or Elementor.
 */

/* ---------- category chip on every listing card ---------- */
.bdm-chip {
	display: inline-block;
	margin: 0 8px 6px 0;
	padding: 3px 9px;
	border-radius: 3px;
	background: var(--bdm-chip, #BE1E51);
	color: #fff !important;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}
.bdm-chip:hover,
.bdm-chip:focus {
	background: #17202e;
	color: #fff !important;
}

/* the chip sits inside the meta row — keep the row readable beside it */
.jet-smart-listing__meta .bdm-chip {
	margin-bottom: 4px;
	vertical-align: middle;
}
.jet-smart-listing__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/* featured post: the chip goes above the image, so give it room */
.jet-smart-listing__featured .bdm-chip {
	margin-bottom: 8px;
}

/* ---------- read time on listing cards (mirrors the article byline) ---------- */
.bdm-readtime--card {
	font-size: 12px;
	color: #6b7280;
	margin-left: 2px;
}

/* ---------- "most read" affordance: rank number when ordering by popularity ---------- */
.jet-smart-listing__post-wrapper { position: relative; }
body.single .jet-smart-listing__post-wrapper { counter-increment: bdmrank; }
body.single .jet-smart-listing__post-wrapper .jet-smart-listing__post-content::before {
	content: counter(bdmrank);
	position: absolute;
	left: -6px;
	top: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #17202e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}
body.single .jet-smart-listing__posts { counter-reset: bdmrank; }

/* ---------- responsive ---------- */
@media (max-width: 560px) {
	.bdm-chip { font-size: 10px; padding: 2px 7px; }
	.jet-smart-listing__meta { gap: 4px; }
}

/* ---------- listing thumbnails: a landscape box, matching the cover art ----------
   JetBlog sizes the thumb column at 22-25% of the card and lets the image decide its own height
   (img{width:100%;height:auto}). Inside a narrow column that produced a near-portrait box, so a
   16:9 cover was either cropped square or stretched. Pin the box to the cover's own ratio instead.
   Also neutralises ewww's reserved 1:1 box (`data-eio-rwidth/rheight` = 150x150 on the placeholder).
   Scoped to the `simple` context only - the featured/hero thumb is left exactly as it was. */
.jet-smart-listing__post-thumbnail.post-thumbnail-simple a,
.jet-smart-listing__post-thumbnail.post-thumbnail-simple img {
	display: block;
	width: 100%;
}
.jet-smart-listing__post-thumbnail.post-thumbnail-simple img {
	height: auto;
	aspect-ratio: 16 / 9 !important;
	object-fit: cover;
	object-position: center;
	border-radius: 3px;
}

/* ---------- the rail: a real card, not a thumbnail beside some text ----------
   The covers are POSTERS - display type over full-bleed art. At the old 25% (~131px) the headline
   was unreadable noise, which is what made the whole column look unfinished. Give the art room and
   let the type sit in a proper hierarchy under it. Scoped to the rail (the posts that follow a
   left/right featured card) so the hero and the grid are untouched.
   `!important` on the width: Elementor's generated CSS is enqueued after this file and sets
   flex-basis:25% at equal specificity. */
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-thumbnail.post-thumbnail-simple,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-thumbnail.post-thumbnail-simple {
	max-width: 38% !important;
	flex: 0 0 38% !important;
	margin-right: 18px;
}

/* title: the strongest element in the card */
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.005em;
	margin: 0 0 8px;
	/* three lines, then a tidy ellipsis - a two-line clamp cut headlines mid-phrase */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* never hyphenate a headline */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple a,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple a {
	color: #101828;
	text-decoration: none;
}
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple a:hover,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-title.post-title-simple a:hover {
	color: #BE1E51;
}

/* the chip + date line */
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__meta,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__meta {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.4;
}
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__meta a,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__meta a,
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__meta time,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__meta time {
	color: #6b7280;
	text-decoration: none;
}

/* standfirst: two calm lines, never three */
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-excerpt,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-excerpt {
	font-size: 14px;
	line-height: 1.5;
	color: #5b6472;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* the theme broke words mid-syllable ("memo-ry"); only break a word if it truly cannot fit */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
}

/* breathing room between rail items */
.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post,
.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post {
	align-items: flex-start;
	padding-bottom: 20px;
}

/* Desktop only - on mobile JetBlog flips the art above the text at full width. */
@media (max-width: 767px) {
	.jet-smart-listing__post-thumbnail.post-thumbnail-simple img { aspect-ratio: 16 / 9 !important; }
	.jet-smart-listing.has-featured-position-left > .jet-smart-listing__posts .jet-smart-listing__post-thumbnail.post-thumbnail-simple,
	.jet-smart-listing.has-featured-position-right > .jet-smart-listing__posts .jet-smart-listing__post-thumbnail.post-thumbnail-simple {
		max-width: 100% !important;
		flex: 1 0 100% !important;
		margin-right: 0;
		margin-bottom: 12px;
	}
}