/*
 * Neuigkeiten: the homepage section, the archive tiles and the post page
 * (includes/news-front.php). Loaded by the three blocks' render callbacks.
 *
 * Colours, fonts and rhythm come from kayjays-design.css tokens; nothing here
 * sets a page colour of its own. No class of the form kj-slot* or kj-ph__tag,
 * and never the bare stcls class.
 */

/* ---------- Tiles ----------
   One <article>: Art, a heading holding the only link (its ::after covers the tile), the date.
   A photo tile paints a real <img> under a dark gradient. */
.kj-news-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	aspect-ratio: 4 / 3;
	max-width: 100%;
	padding: 16px;
	background: var(--tile, #1f1d24);
	border: 1px solid var(--kj-line);
	overflow: hidden;
	color: var(--kj-text);
}
.kj-news-tile:hover,
.kj-news-tile:focus-within { border-color: var(--kj-accent-text); }
.kj-news-tile:has(a:focus-visible) { outline: 2px solid var(--kj-accent-text); outline-offset: 2px; }
.kj-news-tile a { color: var(--kj-text) !important; text-decoration: none; }
.kj-news-tile a:focus-visible { outline: none; }
.kj-news-tile a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kj-news-tile__k { font: 700 10px/1 var(--kj-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245, 243, 238, 0.78); }
.kj-news-tile .kj-news-tile__t {
	margin: 0;
	font: 400 21px/1.1 var(--kj-display);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--kj-text);
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kj-news-tile__d { font: 600 12px/1 var(--kj-body); color: rgba(245, 243, 238, 0.78); }
.kj-news-tile--photo { justify-content: flex-end; border-color: transparent; }
.kj-news-tile--photo:hover,
.kj-news-tile--photo:focus-within { border-color: var(--kj-accent-text); }
.kj-news-tile--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 9, 12, 0.85), rgba(10, 9, 12, 0.35) 55%, rgba(10, 9, 12, 0.15));
}
.kj-page .kj-news-tile__img,
.kj-news-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.kj-news-tile--photo .kj-news-tile__k { margin-bottom: auto; }
.kj-news-tile--photo * { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); }
.kj-news-item { display: grid; gap: 8px; align-content: start; }
.kj-news-item__x { margin: 0; color: var(--kj-muted) !important; font-size: 13px !important; line-height: 1.5 !important; }

/* ---------- Homepage section ---------- */
.kj-news__cols { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 22px; }
@media (min-width: 900px) {
	.kj-news__cols { grid-template-columns: 1fr 1.5fr; }
	.kj-news__cols--single { grid-template-columns: 1fr; }
}
.kj-news .kj-news__sub { font: 700 11px/1 var(--kj-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--kj-muted); margin: 0 0 10px; }
.kj-news__events { list-style: none; margin: 0; padding: 0; }
.kj-news__events > li { margin: 0; padding: 0; font-size: inherit; }
.kj-news .kj-news-ev:focus-visible,
.kj-news .kj-btn--ghost:focus-visible { outline: 2px solid var(--kj-accent-text); outline-offset: 2px; }
.kj-news__tiles { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .kj-news__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kj-news-ev {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--kj-line);
	color: var(--kj-text) !important;
	text-decoration: none;
}
.kj-news-ev:hover .kj-news-ev__t,
.kj-news-ev:focus-visible .kj-news-ev__t { text-decoration: underline; }
.kj-news-ev__date { display: block; background: var(--kj-accent); color: #fff; text-align: center; padding: 8px 4px; align-self: start; }
.kj-news-ev__date b { display: block; font: 400 26px/1 var(--kj-display); color: #fff; }
.kj-news-ev__date i { font: 700 10px/1 var(--kj-body); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }
.kj-news-ev__body { display: grid; gap: 4px; align-content: start; }
.kj-news-ev__t { font-weight: 700; font-size: 16px; }
.kj-news-ev__m { color: var(--kj-muted); font-size: 13px; }

/* ---------- Post page (1.2.8: R1) ----------
   One 760px content column: these are direct children of .kj-news-post
   (the .kj-page element itself), and the (0,2,0) prefix is required to outrank
   kayjays-design.css's .kj-page figure / .kj-page p rules, which otherwise beat
   a class-only column rule on specificity. content-box is the default here (a
   plain div/figure/p, no wp-block-* class), so the gutter from `.kj-page > *`
   is added OUTSIDE this max-width, not inside it. margin-inline/margin-block
   only, never the `margin` shorthand: the shorthand also zeroes
   margin-left/right, which ties this rule's specificity and wins by source
   order, silently pulling the element out of the column. */
.kj-news-post > .kj-news-post__top,
.kj-news-post > .kj-news-post__hero,
.kj-news-post > .kj-news-post__sub,
.kj-news-post > .kj-news-post__facts,
.kj-news-post > .kj-news-post__body,
.kj-news-post > .kj-news-post__button,
.kj-news-post > .kj-news-post__back-wrap {
	max-width: 760px;
	margin-inline: auto;
}
.kj-news-post > .kj-news-post__top--band { max-width: none; padding-inline: max(24px, calc(50% - 380px)); }
@media (min-width: 900px) { .kj-news-post > .kj-news-post__top--band { padding-inline: max(64px, calc(50% - 380px)); } }
.kj-news-post { padding-bottom: 72px; }
.kj-news-post__top { display: grid; gap: 14px; padding-top: 40px; padding-bottom: 24px; }
.kj-news-post__top--band { background: var(--tile, #1f1d24); border-bottom: 1px solid var(--kj-line); }
.kj-news-post__top h1 { margin: 0; text-wrap: balance; hyphens: manual; }
.kj-news-post__top p { margin: 0; }
.kj-news-post__crumb { font: 600 12px/1 var(--kj-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--kj-muted); }
.kj-news-post__crumb a { color: var(--kj-muted); }
/* The coloured bands (Termin, Kurs, Trainer:in, Stunde): the lilac kicker and the grey crumb link
   are too dark on them (2.5 to 3.6:1). Lightened to at least 4.5:1 on every band; the plain
   Neuigkeit band already passes and is left alone. */
.kj-news-post .kj-news-post__top--tinted .kj-kicker { color: #c9ccf2; }
.kj-news-post .kj-news-post__top--tinted .kj-news-post__crumb a { color: #cfcbc4; }
.kj-news-post .kj-news-post__top--tinted .kj-news-post__crumb a:hover { color: var(--kj-accent-hover, #c6c9e5); }
.kj-news-post__hero { margin-block: 0; padding-top: 24px; }
/* Never upscales, never crops (R2): natural proportions, capped by the column. The
   sizes core builds for this image is the fix (see news-front.php); nothing here sets one. */
.kj-news-post__hero img { display: block; width: auto; max-width: 100%; height: auto; }
.kj-news-post__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-top: 1px solid var(--kj-line);
	border-bottom: 1px solid var(--kj-line);
	margin-top: 28px;
}
.kj-news-post__dl { display: flex; flex: 1 1 auto; flex-wrap: wrap; margin: 0; }
.kj-news-post__dl > div { flex: 1 1 180px; padding: 20px 24px; border-right: 1px solid var(--kj-line); }
.kj-news-post__dl > div:first-child { padding-left: 0; }
.kj-news-post__dl dt { display: block; font: 700 11px/1 var(--kj-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--kj-accent-text); margin: 0 0 8px; }
.kj-news-post__dl dd { margin: 0; font: 400 22px/1.15 var(--kj-display); text-transform: uppercase; letter-spacing: 0.01em; color: var(--kj-text); }
.kj-news-post__facts .kj-news-post__act { display: flex; align-items: center; flex: 0 0 auto; padding: 20px 0 20px 24px; }
@media (max-width: 759px) {
	.kj-news-post__dl > div { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--kj-line); padding: 14px 0; }
	.kj-news-post__facts .kj-news-post__act { flex-basis: 100%; padding: 16px 0; }
}
.kj-news-post__body { padding-top: 28px; }
.kj-news-post__body p { font-size: 17px; line-height: 1.65; color: #e4e1da; margin: 0 0 14px; }
.kj-news-post__button { margin-block: 8px 0; }
/* Subheading (R4): under the hero/band, above the Termin strip. .kj-page p is
   (0,1,1) and would otherwise beat an unprefixed rule here too. */
.kj-news-post > .kj-news-post__sub { margin-block: 24px 0; font: 600 26px/1.3 var(--kj-body); color: var(--kj-text); text-wrap: balance; }
@media (max-width: 480px) { .kj-news-post > .kj-news-post__sub { font-size: 21px; } }
/* Empty subheading: the first body paragraph is the lead instead. Weight 400, not
   R4's 300: this plugin self-hosts Archivo 400/500/600/700/800 only, and the body text
   already computes weight 300 from the theme, rendered with the shipped 400 face — so
   400 and 300 draw the same glyphs on this stack; 400 records what actually renders. */
.kj-news-post__body--lead > p:first-child { font-size: 26px; line-height: 1.4; font-weight: 400; color: var(--kj-text); margin-bottom: 22px; }
@media (max-width: 480px) { .kj-news-post__body--lead > p:first-child { font-size: 21px; } }
.kj-news-post .kj-news-post__back { font: 700 16px/1 var(--kj-body); letter-spacing: 0.1em; text-transform: uppercase; }
.kj-news-post > .kj-news-post__back-wrap { margin-block: 0; padding-top: 12px; }
.kj-news-post__more { border-top: 1px solid var(--kj-line); margin-top: 40px; }