/**
 * anna/event-list — Front-end + Editor styles.
 *
 * Loaded both on the front-end and inside the block editor (via "style" in
 * block.json). Uses CSS custom properties so the theme can override colours
 * and rhythm without touching this file.
 */

/* -----------------------------------------------------------
 * Design tokens (overridable per page or block instance).
 * --------------------------------------------------------- */
.anna-event-list {
	--anna-card-bg:           var(--wp--preset--color--pergament, #fbf7ec);
	--anna-card-radius:       18px;
	--anna-card-shadow:       0 8px 18px -14px rgba(40, 25, 10, 0.45);
	--anna-card-padding:      1.5rem;
	--anna-card-gap:          2.5rem;

	--anna-media-radius:      14px;
	--anna-year-offset:       40px;
	--anna-media-offset:      128px;         /* how far the image overhangs above the card */
	--anna-media-shadow:      0 6px 16px -10px rgba(40, 25, 10, 0.45);
	--anna-media-aspect:      16 / 10;
	--anna-media-focus-y:     50%;           /* vertical focus point of the crop; render.php
	                                            overrides this per card based on image orientation
	                                            (portrait → 20%) and the optional ACF "image_focus"
	                                            field */

	/* Theme-Palette → lokale, sprechende Tokens.
	   Mapping nach Funktion gemäß Farbwelt:
	     espresso  → Headlines (Card-Titel)
	     walnuss   → Sublines / hervorgehobene Sekundärinfo (Datum)
	     tinte     → Fließtext (Beschreibung, Ort)
	     sandstein → Captions / Pagination-Zwischenton
	     kupfer    → Links / Akzent (Hover, current-state)
	     beige     → Linien, Trenner */
	--anna-color-title:       var(--wp--preset--color--espresso,  #2a1407);
	--anna-color-date:        var(--wp--preset--color--walnuss,   #3c1400);
	--anna-color-location:    var(--wp--preset--color--schiefer,  #3d2d22);
	--anna-color-body:        var(--wp--preset--color--tinte,     #180d05);
	--anna-color-muted:       var(--wp--preset--color--sandstein, #5a4a3e);
	--anna-color-accent:      var(--wp--preset--color--kupfer,    #955a23);
	--anna-color-accent-soft: color-mix(in srgb, var(--anna-color-accent) 12%, transparent);
	--anna-color-rule:        var(--wp--preset--color--beige,     #e2d6be);

	--anna-event-columns:     1;

	display: block;
}

/* -----------------------------------------------------------
 * Grid
 *
 * Breakpoints (mobile-first):
 *   default     → 1 column (Mobile)
 *   ≥ 700px     → 2 columns (Tablet)
 *   ≥ 1200px    → N columns (Desktop, N = editor setting via
 *                  inline --anna-event-columns-desktop)
 * --------------------------------------------------------- */
.anna-event-list__grid {
	display: grid;
	grid-template-columns: repeat(var(--anna-event-columns), minmax(0, 1fr));
	gap: 2rem 1.75rem;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.anna-event-list {
		--anna-event-columns: 2;
	}

	.anna-event-list__grid {
		gap: var(--anna-card-gap) 1.75rem;
	}
}

@media (min-width: 1200px) {
	.anna-event-list {
		--anna-event-columns: var(--anna-event-columns-desktop, 3);
	}
}

/* -----------------------------------------------------------
 * Year separators
 *
 * They span the full grid width. The image-offset on the cards below
 * gets visually "subtracted" — so we add it as padding here, so the
 * heading keeps a sensible distance from the next row of cards.
 * --------------------------------------------------------- */
.anna-event-list__year {
	grid-column: 1 / -1;
	margin: var(--anna-year-offset) 0 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--anna-color-rule);
	font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif);
	font-size: 1.375rem; /* 22px — Mobile */
	font-weight: 500;
	color: var(--anna-color-title);
	letter-spacing: 0.01em;
}

@media (min-width: 700px) {
	.anna-event-list__year {
		font-size: 1.5rem; /* 24px — Tablet & Desktop */
	}
}

.anna-event-list__year:first-child {
	margin-top: 0;
}

/* -----------------------------------------------------------
 * Card
 *
 * Each card reserves space above itself (margin-top = media-offset) for
 * the image that overhangs. This way the layout works automatically for
 * the first row, between rows, and below year headings — no separate
 * container padding needed.
 * --------------------------------------------------------- */
.anna-event-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: var(--anna-media-offset);
	padding: var(--anna-card-padding);
	background: var(--anna-card-bg);
	border-radius: var(--anna-card-radius);
	box-shadow: var(--anna-card-shadow);
	color: var(--anna-color-body);
}

/* -----------------------------------------------------------
 * Media — image overhangs above the card's top edge.
 *
 * Math: image's margin-top = -(card padding-top + offset).
 * With padding 1.5rem (~24px) and offset 128px → margin-top = -152px.
 * --------------------------------------------------------- */
.anna-event-card__media {
	margin-top: calc(0px - var(--anna-card-padding) - var(--anna-media-offset));
	margin-right: 0;
	margin-bottom: 1rem;
	margin-left: 0;
	border-radius: var(--anna-media-radius);
	overflow: hidden;
	box-shadow: var(--anna-media-shadow);
	background: rgba(0, 0, 0, 0.06); /* placeholder colour while loading */
	aspect-ratio: var(--anna-media-aspect);
}

.anna-event-card__image,
.anna-event-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Horizontal centre; vertical position is per-card via the CSS variable
	   set inline by render.php. Falls back to 50% if the variable is missing
	   (e.g. when the block is rendered without orientation data). */
	object-position: 50% var(--anna-media-focus-y, 50%);
}

/* -----------------------------------------------------------
 * Body typography
 * --------------------------------------------------------- */
.anna-event-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	text-align: center;
}

.anna-event-card__title {
	margin: 0.2rem 0 0.4rem;
	font-family: var(--wp--preset--font-family--vesper-libre, Georgia, serif);
	font-size: 1.375rem; /* 22px — Mobile */
	font-weight: 700;
	line-height: 1.25;
	color: var(--anna-color-title);
}

@media (min-width: 700px) {
	.anna-event-card__title {
		font-size: 1.5rem; /* 24px — Tablet & Desktop */
	}
}

.anna-event-card__date,
.anna-event-card__location {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.1;
}

.anna-event-card__date {
	color: var(--anna-color-date);
	font-variant-numeric: tabular-nums;
}

.anna-event-card__date-sep {
	display: inline-block;
	margin: 0 0.125em;
	color: var(--anna-color-date);
}

.anna-event-card__date-time {
	color: var(--anna-color-date);
}

.anna-event-card__location {
	color: var(--anna-color-location);
	font-style: italic;
	font-size: 1rem;
}

/* Zarte, eingezogene Trennlinie nach dem Ort — trennt den Veranstaltungs-Header
   (Titel/Datum/Ort) vom Beschreibungs-Block. Pseudo-Element auf der Location,
   damit es nur erscheint, wenn ein Ort gerendert wurde. */
.anna-event-card__location::after {
	content: "";
	display: block;
	width: 55%;
	max-width: 13rem;
	height: 1px;
	margin: 0.75rem auto 0;
	background: var(--anna-color-rule);
}

/* -----------------------------------------------------------
 * Text body: excerpt / full toggle.
 *
 * Default (no JS): show the full text, hide the excerpt and the button.
 * With JS (the script adds .is-ready and sets data-expanded="false"):
 *   - data-expanded="false" → excerpt visible, full hidden, toggle visible.
 *   - data-expanded="true"  → excerpt hidden, full visible, toggle visible.
 * --------------------------------------------------------- */
.anna-event-card__text {
	margin-top: 0.5rem;
	text-align: left;
}

.anna-event-card__excerpt,
.anna-event-card__full {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--anna-color-body);
}

.anna-event-card__full p {
	margin: 0 0 0.6em;
}

.anna-event-card__full p:last-child {
	margin-bottom: 0;
}

/* Default state (no JS): only show full text, hide excerpt and toggle. */
.anna-event-card__text[data-anna-collapsible] .anna-event-card__excerpt {
	display: none;
}
.anna-event-card__text[data-anna-collapsible] .anna-event-card__toggle {
	display: none;
}

/* JS-enhanced state. */
.anna-event-card__text.is-ready .anna-event-card__excerpt {
	display: block;
}
.anna-event-card__text.is-ready .anna-event-card__toggle {
	display: flex;
}
.anna-event-card__text.is-ready[data-expanded="false"] .anna-event-card__full {
	display: none;
}
.anna-event-card__text.is-ready[data-expanded="true"] .anna-event-card__excerpt {
	display: none;
}

/* -----------------------------------------------------------
 * Toggle: a small centred triangle only — no text label visible.
 * The accessible name lives in an sr-only <span>.
 *
 * The triangle itself is an inline SVG drawn via background-image,
 * so we can control fill and stroke independently and rotate cleanly.
 *
 * Click-Target-Strategie:
 * - Sichtbare Trennlinie bleibt eingezogen (55%/13rem) — über ::before.
 * - Der Button selbst spannt die volle Card-Breite und hat reichlich
 *   Vertikal-Padding, damit der Klickbereich großzügig ist (>=44px hoch,
 *   wie für Touch empfohlen) und der Nutzer nicht aufs Dreieck zielen muss.
 * --------------------------------------------------------- */
.anna-event-card__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0.75rem 0 0;
	padding: .75rem 0 0.125rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	color: var(--anna-color-muted);
	transition: color 0.2s ease;

	/* Defensive Resets gegen den "Zwischen-State" nach Mausklick:
	   – outline: none für alle States (Tastatur-Fokus erhält unten
	     explizit ein eigenes outline über :focus-visible),
	   – tap-highlight gegen den grauen Kasten auf iOS/Android,
	   – user-select gegen versehentliche Textmarkierung,
	   – appearance: none gegen Browser-eigene Button-Styles. */
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Sichtbare Trennlinie als Pseudo-Element — eingezogen wie die Linie
   nach dem Ort. Der eigentliche Button bleibt dabei voll-breit klickbar. */
.anna-event-card__toggle::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 55%;
	max-width: 13rem;
	height: 1px;
	background: var(--anna-color-rule);
}

.anna-event-card__toggle:hover {
	color: var(--anna-color-accent);
}

/* Kein outline bei Maus-Fokus (clicked-State), aber sichtbares outline
   für Tastaturnutzer — das ist genau, wofür :focus-visible existiert. */
.anna-event-card__toggle:focus {
	outline: none;
}

.anna-event-card__toggle:focus-visible {
	outline: 2px solid var(--anna-color-accent-soft);
	outline-offset: 2px;
}

/* Dreieck als inline SVG: flache, breite Form (viewBox 14:6 → Verhältnis ca. 2.3:1).
   Fläche weiß, Umrandung in der Akzent-Farbe (Anna Kupfer). currentColor wird
   hier NICHT verwendet, weil sich Fill und Stroke unabhängig verhalten sollen. */
.anna-event-card__chevron {
	display: inline-block;
	width: 1.1em;
	height: 0.48em;
	font-size: 1.1rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'><polygon points='7,5.4 0.6,0.6 13.4,0.6' fill='%23ffffff' stroke='%23955a23' stroke-width='0.5' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.25s ease;
}

/* Hover/Fokus: leicht dunklerer Stroke für stärkere Wirkung beim Überfahren.
   Zweites SVG mit anderer stroke-Farbe; austauschen statt umfärben, weil
   SVG-Datenurls keine CSS-Variablen mitlesen. */
.anna-event-card__toggle:hover .anna-event-card__chevron,
.anna-event-card__toggle:focus-visible .anna-event-card__chevron {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'><polygon points='7,5.4 0.6,0.6 13.4,0.6' fill='%23ffffff' stroke='%236b3a1e' stroke-width='0.5' stroke-linejoin='round'/></svg>");
}

/* Expanded: Dreieck zeigt nach oben. Reine Rotation, kein Translate-Hack. */
.anna-event-card__text[data-expanded="true"] .anna-event-card__chevron {
	transform: rotate(180deg);
}

/* Screen-reader-only label for the toggle. */
.anna-event-card__toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------
 * Pagination
 * --------------------------------------------------------- */
.anna-event-list__pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

.anna-event-list__pagination-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.anna-event-list__pagination-item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--anna-color-body);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.anna-event-list__pagination-item .page-numbers:hover,
.anna-event-list__pagination-item .page-numbers:focus-visible {
	background: var(--anna-color-accent-soft);
	color: var(--anna-color-accent);
	outline: none;
}

.anna-event-list__pagination-item .page-numbers.current {
	background: var(--anna-color-accent);
	color: #fff;
}

.anna-event-list__pagination-item .page-numbers.dots {
	color: var(--anna-color-muted);
	cursor: default;
}

/* -----------------------------------------------------------
 * Editor placeholder (when SSR returns empty)
 * --------------------------------------------------------- */
.anna-event-list__placeholder {
	padding: 1.5rem;
	border: 1px dashed var(--anna-color-rule);
	border-radius: var(--anna-card-radius);
	color: var(--anna-color-muted);
	font-size: 0.9rem;
	text-align: center;
}