/**
 * newslist: loaded only on pages that show it.
 *
 * The news and category pages as a list — picture on the left; title, date,
 * category and a few lines on the right — the shape the church's news pages
 * have always had. Written for the archive block's list layout
 * (blocks/archive-grid).
 */

.cong-newslist {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	max-width: 1100px;
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: 0;
	list-style: none;
}

/* The category chips sit over the list, not out at the page's edge. */
.cong-archive:has(> .cong-newslist) > .cong-archive__siblings {
	max-width: 1100px;
	margin-inline: auto;
}

.cong-newslist__item {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

/* No picture: the words take the whole row rather than leaving a hole. */
.cong-newslist__item:not(:has(.cong-newslist__media)) {
	grid-template-columns: minmax(0, 1fr);
}

.cong-newslist__media {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg, 20px);
}

.cong-newslist__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 280px;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cong-newslist__media:hover img {
	transform: scale(1.03);
}

.cong-newslist__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.2;
}

.cong-newslist__title a {
	color: var(--wp--preset--color--sky);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cong-newslist__title a:hover {
	color: var(--wp--preset--color--ink);
}

.cong-newslist__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.25em;
	margin: 0.6em 0 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--leaf);
}

.cong-newslist__date,
.cong-newslist__cat {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.cong-newslist__cat {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* A calendar and a tag, drawn rather than fetched. */
.cong-newslist__date::before,
.cong-newslist__cat::before {
	content: "";
	inline-size: 1em;
	block-size: 1em;
	background: currentColor;
	-webkit-mask: var(--cong-icon) center / contain no-repeat;
	mask: var(--cong-icon) center / contain no-repeat;
}

.cong-newslist__date::before {
	--cong-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3zm12 8H5v9h14z'/%3E%3C/svg%3E");
}

.cong-newslist__cat::before {
	--cong-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8l10 10-8 8L3 11zm4 5.5A1.5 1.5 0 1 0 7 5.5a1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E");
}

.cong-newslist__excerpt {
	margin: 0.75em 0 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink);
}

@media (max-width: 640px) {
	.cong-newslist__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}
}