/*
 * Styles for the markup the article mu-plugins print, and for the news card loop item.
 *
 * They live here rather than in a template's Custom CSS because two templates share the
 * breadcrumbs, and because Elementor does not print a loop item's own CSS when a Loop Grid
 * renders it. One file, loaded once, no duplication.
 */

/* ------------------------------------------------------------------ breadcrumbs */

.article-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var( --e-global-color-tzbodytext );
	font-family: "Manrope", sans-serif;
	font-size: 13.5px;
	line-height: 20px;
}

.article-breadcrumbs li {
	margin: 0;
}

.article-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: 10px;
	color: rgba( 27, 58, 49, .45 );
}

.article-breadcrumbs a {
	color: var( --e-global-color-tzbodytext );
	text-decoration: none;
}

.article-breadcrumbs a:hover,
.article-breadcrumbs a:focus-visible {
	color: var( --e-global-color-tzgreendk );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-breadcrumbs [aria-current="page"] {
	color: var( --e-global-color-tzgreendk );
}

/* -------------------------------------------------------------------- news card */

/* The whole card is the link, so nothing inside it should look separately clickable. */
.news-card {
	height: 100%;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.news-card:hover,
.news-card:focus-visible {
	box-shadow: 0 10px 26px rgba( 27, 58, 49, .1 );
	transform: translateY( -2px );
}

.news-card:focus-visible {
	outline: 2px solid var( --e-global-color-tzgreendk );
	outline-offset: 3px;
}

/* The photograph keeps the design's 16:9 frame whatever the upload's own ratio. */
.news-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-radius: 9px;
}

/* A post with no featured image keeps the card's shape: the frame stays, empty and quiet. */
.news-card__image:not(:has(img)) {
	aspect-ratio: 16 / 9;
	border-radius: 9px;
	background: var( --e-global-color-tzgreentint );
}

.news-card .news-card__badge .elementor-heading-title {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var( --e-global-color-tzgreensoft );
}

.news-card__body {
	flex-grow: 1;
}

/*
 * The excerpt keeps the cards on one baseline: three lines, as in the design. The dynamic tag
 * returns plain text, so the clamp sits on the widget's container rather than on a paragraph.
 */
.news-card__excerpt .elementor-widget-container {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__excerpt p {
	margin: 0;
}

.news-card__more {
	margin-top: auto;
}

.news-card__more-icon svg {
	width: 16px;
	height: auto;
	stroke-width: 1.9;
}

.news-card:hover .news-card__title .elementor-heading-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}