/*
 * KFB Events – Frontend-Styles.
 * Nutzt bewusst die Theme-Presets (Farben, Abstände, Schrift) aus theme.json,
 * damit sich der Kalender in jede Theme-Stilvariante einfügt, statt eigene
 * Farben mitzubringen.
 */

.kfbe-info-box,
.kfbe-block,
.kfbe-calendar-page {
	--kfbe-border: var( --wp--preset--color--contrast-3, #e0e0e0 );
	--kfbe-accent: var( --wp--preset--color--accent, var( --wp--preset--color--contrast, #1e1e1e ) );
	--kfbe-accent-text: var( --wp--preset--color--accent-4, #fff );
	--kfbe-muted: var( --wp--preset--color--contrast-2, #6b6b6b );
	--kfbe-bg: var( --wp--preset--color--base, #fff );
	--kfbe-bg-2: var( --wp--preset--color--base-2, #f4f4f4 );
	font-family: var( --wp--preset--font-family--body, inherit );
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.kfbe-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6em 1.1em;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid var( --kfbe-border );
	color: var( --wp--preset--color--contrast, #1e1e1e );
	background: var( --kfbe-bg );
	transition: opacity 0.15s ease;
}
.kfbe-btn:hover { opacity: 0.75; }
.kfbe-btn--save {
	background: var( --kfbe-accent );
	color: var( --kfbe-accent-text );
	border-color: var( --kfbe-accent );
}

/* ── Termin-Infobox (oben im Beitrag) ───────────────────────────────────── */
.kfbe-info-box {
	border: 1px solid var( --kfbe-border );
	border-radius: 12px;
	padding: var( --wp--preset--spacing--30, 1.25rem ) var( --wp--preset--spacing--40, 1.5rem );
	margin-bottom: var( --wp--preset--spacing--40, 1.5rem );
	background: var( --kfbe-bg-2 );
}
.kfbe-info-box--past { opacity: 0.7; }
.kfbe-info-box__row {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-bottom: 0.4em;
	font-size: 1rem;
}
.kfbe-info-box__icon { flex: none; }
.kfbe-info-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin-top: var( --wp--preset--spacing--20, 1em );
}
.kfbe-info-box__past-note {
	margin-top: 0.6em;
	color: var( --kfbe-muted );
	font-style: italic;
}

/* ── Termin-Karten ───────────────────────────────────────────────────────── */
.kfbe-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 1px solid var( --kfbe-border );
	border-radius: 10px;
	overflow: hidden;
	background: var( --kfbe-bg );
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kfbe-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
.kfbe-card__body { padding: 1em 1.2em; }
.kfbe-card__date {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --kfbe-accent );
	margin-bottom: 0.3em;
}
.kfbe-card__title { margin: 0 0 0.3em; font-size: 1.15rem; line-height: 1.3; }
.kfbe-card__meta,
.kfbe-card__location {
	display: block;
	font-size: 0.9rem;
	color: var( --kfbe-muted );
}
.kfbe-card__excerpt { margin: 0.6em 0 0; color: var( --kfbe-muted ); }
.kfbe-card__media img { display: block; width: 100%; height: auto; }

.kfbe-card--compact { display: flex; align-items: baseline; gap: 0.8em; border-radius: 8px; }
.kfbe-card--compact .kfbe-card__body { display: flex; align-items: baseline; gap: 0.8em; flex-wrap: wrap; padding: 0.75em 1em; }
.kfbe-card--compact .kfbe-card__date { margin: 0; }
.kfbe-card--compact .kfbe-card__title { margin: 0; font-size: 1rem; }

.kfbe-card--banner { display: grid; grid-template-columns: 1fr; }
@media ( min-width: 640px ) {
	.kfbe-card--banner { grid-template-columns: 40% 1fr; }
}
.kfbe-card--banner .kfbe-card__title { font-size: 1.4rem; }

.kfbe-card--highlight {
	border-color: var( --kfbe-accent );
	box-shadow: 0 0 0 2px var( --kfbe-accent ) inset;
}

/* ── Bausteine allgemein ─────────────────────────────────────────────────── */
.kfbe-block { margin: 1em 0; }
.kfbe-block__label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --kfbe-muted );
	margin-bottom: 0.5em;
}
.kfbe-list { display: grid; gap: 0.75em; }
.kfbe-empty,
.kfbe-list__empty { color: var( --kfbe-muted ); font-style: italic; }

/* ── Mini-Monatskalender ─────────────────────────────────────────────────── */
.kfbe-mini-calendar { font-size: 0.9rem; }
.kfbe-mini-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6em;
	font-weight: 600;
}
.kfbe-mini-calendar__nav { text-decoration: none; color: var( --kfbe-accent ); padding: 0 0.4em; }
.kfbe-mini-calendar__grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 2px;
	text-align: center;
}
.kfbe-mini-calendar__weekday { font-size: 0.7rem; color: var( --kfbe-muted ); padding-bottom: 0.3em; }
.kfbe-mini-calendar__day {
	display: block;
	padding: 0.35em 0;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}
.kfbe-mini-calendar__day--today { font-weight: 700; border: 1px solid var( --kfbe-border ); }
.kfbe-mini-calendar__day--event { background: var( --kfbe-accent ); color: var( --kfbe-accent-text ); font-weight: 600; }

/* ── Großes Monatsraster ─────────────────────────────────────────────────── */
.kfbe-grid__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1em;
	flex-wrap: wrap;
	gap: 0.5em;
}
.kfbe-grid__title { margin: 0; font-size: 1.4rem; }
.kfbe-grid__nav { text-decoration: none; color: var( --kfbe-accent ); font-size: 0.9rem; }
.kfbe-grid__table {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 1px;
	background: var( --kfbe-border );
	border: 1px solid var( --kfbe-border );
	border-radius: 8px;
	overflow: hidden;
}
.kfbe-grid__weekday {
	background: var( --kfbe-bg-2 );
	padding: 0.5em;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
	color: var( --kfbe-muted );
}
.kfbe-grid__cell {
	background: var( --kfbe-bg );
	min-height: 84px;
	padding: 0.4em;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}
.kfbe-grid__cell--empty { background: var( --kfbe-bg-2 ); }
.kfbe-grid__cell--today { outline: 2px solid var( --kfbe-accent ); outline-offset: -2px; }
.kfbe-grid__daynum { font-size: 0.75rem; color: var( --kfbe-muted ); }
.kfbe-grid__event {
	display: block;
	font-size: 0.72rem;
	line-height: 1.2;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	background: var( --kfbe-bg-2 );
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kfbe-grid__event--highlight { background: var( --kfbe-accent ); color: var( --kfbe-accent-text ); }
.kfbe-grid__more { font-size: 0.68rem; color: var( --kfbe-muted ); }

@media ( max-width: 640px ) {
	.kfbe-grid__table { grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); }
	.kfbe-grid__cell { min-height: 56px; font-size: 0.85em; }
	.kfbe-grid__event { display: none; }
	.kfbe-grid__cell--has-events { position: relative; }
	.kfbe-grid__cell--has-events::after {
		content: "";
		width: 5px; height: 5px; border-radius: 50%;
		background: var( --kfbe-accent );
		position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
	}
}

/* ── Kalenderseite (Gesamtlayout) ────────────────────────────────────────── */
.kfbe-hero { margin-bottom: var( --wp--preset--spacing--50, 2rem ); }
.kfbe-hero__label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --kfbe-muted );
	margin-bottom: 0.5em;
}
.kfbe-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--40, 2rem );
}
@media ( min-width: 782px ) {
	.kfbe-layout { grid-template-columns: 280px 1fr; align-items: start; }
}
.kfbe-sidebar {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40, 1.5rem );
	position: sticky;
	top: 1rem;
}
.kfbe-sidebar__months ul { list-style: none; margin: 0; padding: 0; }
.kfbe-sidebar__months li { border-bottom: 1px solid var( --kfbe-border ); }
.kfbe-sidebar__months a {
	display: flex;
	justify-content: space-between;
	padding: 0.55em 0.1em;
	text-decoration: none;
	color: inherit;
}
.kfbe-sidebar__months a.is-active { font-weight: 700; color: var( --kfbe-accent ); }
.kfbe-sidebar__count {
	background: var( --kfbe-bg-2 );
	border-radius: 999px;
	padding: 0.1em 0.6em;
	font-size: 0.8rem;
	color: var( --kfbe-muted );
}
.kfbe-sidebar__archive-link {
	display: block;
	text-decoration: underline;
	color: var( --kfbe-muted );
	font-size: 0.9rem;
}
.kfbe-sidebar__archive-link.is-active { color: var( --kfbe-accent ); font-weight: 600; }
.kfbe-main__title { margin: var( --wp--preset--spacing--50, 2rem ) 0 0.6em; }
.kfbe-main__intro { color: var( --kfbe-muted ); margin-top: 0; }