/* ================================================================
   Content Filter Block — Frontend styles  v1.3
   ================================================================ */

.cfb-block,
.cfb-block *,
.cfb-block *::before,
.cfb-block *::after {
	box-sizing: border-box;
}

.cfb-block {
	width: 100%;
}

.cfb-no-posts p {
	color: #666;
	font-style: italic;
	margin: 0;
}

.cfb-heading {
	margin: 0 0 .9em;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 2px solid currentColor;
	padding-bottom: .35em;
}

/* ================================================================
   SHARED CARD BASE
   ================================================================ */
.cfb-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.cfb-card:hover {
	box-shadow: 0 3px 12px rgba( 0, 0, 0, .10 );
}

/* ── Image link (wrapper) ────────────────────────────────────────
   The PHP renders aspect-ratio + height as inline styles on this
   element. CSS here just ensures the img fills it correctly.
   We do NOT set aspect-ratio here in the stylesheet — it comes
   from the inline style so PHP controls the ratio + height.
   ─────────────────────────────────────────────────────────────── */
.cfb-card__image-link {
	/* overflow:hidden and display:block are set inline by PHP too,
	   but keep them here as a safe fallback */
	display: block;
	overflow: hidden;
	line-height: 0;
	width: 100%;
}

/* The <img> must fill the wrapper completely.
   width/height HTML attributes have been stripped by PHP so
   CSS wins here. object-fit:cover does the cropping. */
.cfb-card__image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	/* NO aspect-ratio on the img itself — that fights the wrapper */
	transition: transform 0.3s ease;
}

.cfb-card:hover .cfb-card__image {
	transform: scale( 1.035 );
}

/* ── Text body ───────────────────────────────────────────────── */
.cfb-card__body {
	display: flex;
	flex-direction: column;
	gap: .4em;
}

.cfb-card__title {
	margin: 0;
	font-size: .95em;
	font-weight: 700;
	line-height: 1.35;
}

.cfb-card__title a {
	text-decoration: none;
	color: inherit;
}

.cfb-card__title a:hover {
	text-decoration: underline;
}

.cfb-card__excerpt {
	margin: 0;
	font-size: .82em;
	line-height: 1.55;
	color: #555;
}

.cfb-card__readmore {
	display: inline-block;
	margin-top: .15em;
	font-size: .78em;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	opacity: .7;
	transition: opacity 0.15s;
}

.cfb-card__readmore:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ================================================================
   LAYOUT: VERTICAL  (stacked cards — default)
   ================================================================ */
.cfb-layout-vertical {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.cfb-layout-vertical .cfb-card {
	flex-direction: column;
}

.cfb-layout-vertical .cfb-card__image-link {
	width: 100%;
}

.cfb-layout-vertical .cfb-card__body {
	padding: .8em 1em 1em;
}

/* ================================================================
   LAYOUT: SIDE  (image left, text right)
   ================================================================ */
.cfb-layout-side {
	display: flex;
	flex-direction: column;
	gap: .75em;
}

.cfb-layout-side .cfb-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
}

/* In side layout the image-link width is driven by the aspect-ratio
   + height set inline. We let it be auto width (ratio * height). */
.cfb-layout-side .cfb-card__image-link {
	flex-shrink: 0;
	width: auto; /* width = height * (ratio) — computed by browser from inline style */
}

.cfb-layout-side .cfb-card__body {
	flex: 1 1 auto;
	padding: .6em .75em .7em;
	min-width: 0;
}

.cfb-layout-side .cfb-card__title {
	font-size: .88em;
}

.cfb-layout-side .cfb-card__excerpt {
	font-size: .78em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* No thumbnail: let body fill whole card */
.cfb-layout-side .cfb-card:not(:has(.cfb-card__image-link)) .cfb-card__body,
.cfb-layout-vertical .cfb-card:not(:has(.cfb-card__image-link)) .cfb-card__body {
	padding-top: .9em;
}