/*
 * Croator Webstudio Addons — related posts.
 *
 * Ported from the "Nastavite čitati" band at the foot of Croator Blog Post.dc.html.
 * Kept in its own stylesheet, like the listing, so a single-post page carrying only
 * this band never downloads the ~9 KB of blog-index CSS — no chips, no search field,
 * no skeletons, no spinner. It is the smallest sheet in the pack.
 *
 * Two deliberate differences from the listing card in croator-blog.css, both taken
 * straight from the source rather than invented here:
 *
 *   - The related card does not change its border colour on hover. It lifts and casts
 *     a brand-tinted shadow, nothing more. The listing card, being the page's main
 *     content, also takes a brand border.
 *   - Its title is set in the body face (Manrope), not the display face. The source
 *     writes it as a plain bold div; only the section heading above uses Space Grotesk.
 *
 * The source hard-codes a 1000px inner column and 140px media strip. Both are custom
 * properties here, driven by controls.
 */

/* -------------------------------------------------------------------- shell */

.cws-related {
	font-family: var(--cws-font-body);
	color: var(--cws-tx);

	/* Tunable through Elementor controls. Defaults are the source values. */
	--cws-related-max: 1000px;
	--cws-related-card-min: 260px;
	--cws-related-gap: 20px;
	--cws-related-radius: 16px;
	--cws-related-media-h: 140px;
}

.cws-related *,
.cws-related *::before,
.cws-related *::after {
	box-sizing: border-box;
}

/*
 * The full-bleed tinted band. Optional: switched off, the widget renders flush into
 * whatever container Elementor put it in, and the container owns the spacing.
 */
.cws-related--band {
	background: var(--cws-s1);
	border-top: 1px solid var(--cws-bd);
}

.cws-related__inner {
	max-width: var(--cws-related-max);
	margin-inline: auto;
}

.cws-related--band .cws-related__inner {
	padding: clamp(48px, 6vw, 72px) 24px;
}

/* ------------------------------------------------------------------ heading */

.cws-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 30px;
}

.cws-related__title {
	margin: 0;
	font-family: var(--cws-font-display);
	font-weight: 700;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.12;
	letter-spacing: -0.8px;
	color: var(--cws-tx);
	text-wrap: balance;
}

.cws-related__all {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cws-brand);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cws-related__all:hover,
.cws-related__all:focus-visible {
	color: var(--cws-brand-hover);
}

/* --------------------------------------------------------------------- grid */

/*
 * auto-fit rather than the listing's auto-fill: a related band holds three or four
 * cards, and auto-fit lets them stretch across the row instead of leaving a gap where
 * a fifth column would have been.
 */
.cws-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cws-related-card-min)), 1fr));
	gap: var(--cws-related-gap);
}

/* -------------------------------------------------------------------- cards */

.cws-related__card {
	display: flex;
	flex-direction: column;
	background: var(--cws-card);
	border: 1px solid var(--cws-bd);
	border-radius: var(--cws-related-radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cws-related__card:hover,
.cws-related__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 24px 40px -24px rgba(219, 68, 55, 0.32);
	color: inherit;
}

.cws-related__media {
	position: relative;
	flex: none;
	height: var(--cws-related-media-h);
	background: var(--cws-s1);
}

/* Covers both the real thumbnail and the empty-state fill. */
.cws-related__media-fill,
.cws-related__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cws-related__media-fill {
	background: var(--cws-media-bg);
}

.cws-related__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}

.cws-related__meta {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cws-acc);
}

/*
 * Body face, not the display face — see the file header. text-wrap: pretty keeps a
 * single word off the last line, which a 17px title in a 260px column hits often.
 */
.cws-related__card-title {
	margin: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: var(--cws-tx);
	text-wrap: pretty;
}

.cws-related__excerpt {
	margin: 10px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--cws-tx2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------------------------------------------------------------- empty state */

.cws-related__empty {
	margin: 0;
	padding: 26px;
	border: 1.5px dashed var(--cws-bd);
	border-radius: var(--cws-related-radius);
	background: var(--cws-card);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--cws-tx2);
	text-align: center;
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.cws-related *,
	.cws-related *::before,
	.cws-related *::after {
		transition-duration: 0.01ms !important;
	}

	.cws-related__card:hover,
	.cws-related__card:focus-visible {
		transform: none;
	}
}