/**
 * "Aktuelles & Termine" (page-templates/aktuelles.php) and single posts
 * (single.php) — D-029. Loaded only there.
 *
 * A little like a social media profile, in the site's calm language: a
 * feed of 4:5 post cards (the shared news-card in its `feed` variant),
 * category chips, and a post page with the images beside the text.
 * Typography and colors only from the tokens; the gallery and .prose are
 * shared components (components.css).
 */

/* ---------- Shared ground ---------- */

/* Like the offers page: the intro photo (overview) and the post's own top
   padding carry the header offset, so #main adds none (layout.css). */
#main.news-page,
#main.post-page {
	padding-top: 0;
}

/* Quiet aurora as on the offers and Kontakt pages. */
.news-feed,
.post-page {
	background:
		linear-gradient(to top, var(--color-cream-100) 0, rgba(247, 243, 236, 0) 16%),
		radial-gradient(ellipse 70% 55% at 12% 30%, var(--aurora-sage), transparent 70%),
		radial-gradient(ellipse 60% 55% at 88% 60%, var(--aurora-sage-soft), transparent 70%),
		radial-gradient(ellipse 45% 45% at 70% 20%, var(--aurora-apricot), transparent 70%),
		var(--color-cream-100);
}

/* ---------- Category filter ---------- */

.news-feed {
	padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 128px);
}

.news-filter {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.news-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pills: fine outline at rest, dark green when active. */
.news-filter__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--color-rule-strong);
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--color-white) 55%, transparent);
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.news-filter__chip:hover {
	border-color: var(--color-green-900);
}

.news-filter__chip[aria-current="page"] {
	border-color: var(--color-green-900);
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.news-filter__chip:focus-visible {
	outline: 3px solid var(--color-orange-600);
	outline-offset: 2px;
}

/* ---------- Feed ---------- */

/*
 * 1 / 2 / 3 columns. Each card spans five shared rows (subgrid): images,
 * date lines, titles and texts line up across a row whatever their length.
 */
.news-feed__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: auto;
	/* No row gap: it would also open between a card's own rows (subgrid);
	   the space between rows of cards is the items' bottom padding. */
	gap: 0 clamp(24px, 3vw, 40px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.news-feed__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.news-feed__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.news-feed__item {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	min-width: 0;
	padding-bottom: var(--space-7);
}

/* ---------- Feed card (news-card--feed) ---------- */

/* Overrides of the homepage card (sections.css): no panel padding, the
   whole card is the link, a calm lift of the image on hover. */
.news-card--feed {
	display: grid;
	grid-row: 1 / span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	padding: 0;
	background: none;
}

.news-card--feed:hover {
	background: none;
}

.news-card--feed:focus-within {
	outline-offset: 4px;
}

.news-card--feed .news-card__media {
	position: relative;
	grid-row: 1;
	aspect-ratio: 4 / 5;
	margin-bottom: 0;
}

.news-card--feed .news-card__image {
	transition: transform 0.4s ease, filter 0.3s ease;
}

.news-card--feed .news-card__image.is-cover {
	object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
	.news-card--feed:hover .news-card__image {
		transform: scale(1.02);
	}
}

/* Post without an image: the calm tinted ground with a quiet house mark. */
.news-card--feed .news-card__media-placeholder {
	display: grid;
	place-items: center;
}

.news-card__placeholder-icon {
	width: 56px;
	height: 56px;
	color: color-mix(in srgb, var(--color-green-900) 35%, transparent);
}

/* Image count, like a social media multi-image post. */
.news-card__count {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	border-radius: var(--radius-pill);
	background-color: color-mix(in srgb, var(--color-green-900) 80%, transparent);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.news-card__count-icon {
	width: 14px;
	height: 14px;
}

/* Category · date */
.news-card__kicker {
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin: var(--space-4) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* "Oben anheften": an icon plus text, not color alone. */
.news-card__pinned {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--color-text);
	font-size: 0.75rem;
	font-weight: 600;
}

.news-card__pinned-icon {
	width: 14px;
	height: 14px;
	color: var(--color-orange-600);
}

.news-card__category {
	color: var(--color-accent-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.news-card__date {
	color: var(--color-text-muted);
	font-weight: 500;
}

.news-card--feed .news-card__title {
	grid-row: 3;
	margin-top: var(--space-2);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.news-card--feed:hover .news-card__link {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--color-green-900) 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Time · place of an event, under the title. */
.news-card__event {
	grid-row: 4;
	margin: var(--space-1) 0 0;
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.45;
}

.news-card--feed .news-card__excerpt {
	grid-row: 5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin-top: var(--space-2);
	overflow: hidden;
}

/* ---------- Pagination ---------- */

.news-pagination {
	margin-top: clamp(48px, 6vw, 72px);
}

.news-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.news-pagination a.page-numbers,
.news-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.news-pagination a.page-numbers:hover {
	background-color: color-mix(in srgb, var(--color-white) 60%, transparent);
}

.news-pagination span.current {
	background-color: var(--color-green-900);
	color: var(--color-white);
}

.news-pagination a.page-numbers:focus-visible {
	outline: 3px solid var(--color-orange-600);
	outline-offset: 2px;
}

/* ---------- Empty state ---------- */

.news-feed__empty {
	max-width: 520px;
	padding-block: var(--space-7);
}

.news-feed__empty-title {
	margin: 0 0 var(--space-2);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
}

.news-feed__empty-note {
	margin: 0;
	color: var(--color-text);
}

/* ---------- Single post ---------- */

/* The frosted header floats over the page: its height is added on top. */
.post-entry__inner {
	padding-block: calc(var(--site-header-height) + clamp(24px, 3vw, 40px)) clamp(48px, 6vw, 96px);
}

.post-entry__back {
	grid-area: back;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.post-entry__back:hover,
.post-entry__back:focus-visible {
	color: var(--color-accent-text);
}

.post-entry__back-arrow {
	color: var(--color-orange-600);
	transition: transform 0.2s ease;
}

.post-entry__back:hover .post-entry__back-arrow {
	transform: translateX(-3px);
}

/* Phones and tablets: back link, images, then the text. */
.post-entry__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"back"
		"media"
		"body";
	gap: var(--space-4) 0;
}

.post-entry__media {
	grid-area: media;
	margin-bottom: clamp(12px, 2vw, 24px);
}

.post-entry__body {
	grid-area: body;
	min-width: 0;
}

/*
 * Desktop: images left, text right (back link on top of the text, like a
 * post's header). The image fits the visible height, sits next to the text
 * and stays in view while a long text scrolls.
 */
@media (min-width: 1024px) {
	.post-entry__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"media back"
			"media body";
		column-gap: clamp(40px, 4vw, 72px);
		align-items: start;
	}

	.post-entry__media {
		position: sticky;
		top: calc(var(--site-header-height) + var(--space-5));
		margin-bottom: 0;
	}

	/* Image + dots (≈ 18px) fit the visible height. */
	.post-entry__media .offer-gallery {
		--stage-max-height: calc(100svh - var(--site-header-height) - var(--space-8) - 18px);
	}

	.post-entry__media .offer-gallery__frame,
	.post-entry__media .offer-gallery__dots {
		margin-inline-start: auto;
	}
}

/* Without images: one calm reading column. */
.post-entry--text-only .post-entry__grid {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"back"
		"body";
	max-width: 68ch;
}

.post-entry__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 12px;
	margin: 0 0 var(--space-3);
	font-size: 0.875rem;
	line-height: 1.5;
}

.post-entry__category {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--color-accent-text);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

a.post-entry__category:hover,
a.post-entry__category:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.post-entry__date {
	color: var(--color-text-muted);
	font-weight: 500;
}

.post-entry__title {
	margin: 0 0 var(--space-5);
	color: var(--color-text);
	font-size: clamp(1.75rem, 1.2vw + 1.25rem, 2.5rem);
	line-height: 1.15;
	text-wrap: balance;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 12 6 6;
}

/* Event: boxed by fine rules, like the offers' opening hours. */
.post-event {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: var(--space-4);
	align-items: start;
	margin: 0 0 var(--space-5);
	padding-block: var(--space-4);
	border-block: 1px solid var(--color-rule);
}

.post-event__icon {
	width: 26px;
	height: 26px;
	margin-top: 2px;
	color: var(--color-green-900);
}

.post-event__body {
	display: grid;
	gap: 4px;
}

.post-event__label {
	font-size: 0.6875rem;
	letter-spacing: 0.28em;
}

.post-event__text {
	margin: 0;
	color: var(--color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}

.post-entry__content {
	max-width: 62ch;
}

/* ---------- More posts ---------- */

.post-more {
	padding-block: clamp(48px, 6vw, 96px) clamp(64px, 8vw, 128px);
	border-top: 1px solid var(--color-rule);
}

.post-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	margin-bottom: clamp(28px, 4vw, 40px);
}

.post-more__all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.post-more__title {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
	line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
	.news-filter__chip,
	.news-card--feed .news-card__image,
	.post-entry__back,
	.post-entry__back-arrow {
		transition: none;
	}

	.post-entry__back:hover .post-entry__back-arrow {
		transform: none;
	}
}