/**
 * Výpis akcí – shortcode [svj_akce].
 *
 * Barvy a písma odpovídají vzhledu webu SVJ. Pokud stránka rodinu písem
 * nenačte, použije se systémová záloha.
 */

.svj-akce {
	--svj-akce-barva: #10314f;
	--svj-akce-text: #14202c;
	--svj-akce-tlumene: #6d7783;
	--svj-akce-popisek: #7b8694;
	--svj-akce-modra: #10314f;
	--svj-akce-linka: #eceef1;
	--svj-akce-ramecek: #dfe3e8;
	--svj-akce-plocha: #fff;
	--svj-akce-pismo: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--svj-akce-pismo-datum: "Source Serif 4", Georgia, "Times New Roman", serif;
	--svj-akce-pismo-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	font-family: var(--svj-akce-pismo);
	color: var(--svj-akce-text);
}

.svj-akce *,
.svj-akce *::before,
.svj-akce *::after {
	box-sizing: border-box;
}

/* Popisek nad výpisem – „NEJBLIŽŠÍ TERMÍNY“. */
.svj-akce__popisek {
	margin: 0 0 4px;
	font-family: var(--svj-akce-pismo-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--svj-akce-popisek);
}

.svj-akce__prazdno {
	margin: 8px 0;
	font-size: 14px;
	color: var(--svj-akce-tlumene);
}

.svj-akce__polozky {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Datum */
.svj-akce__datum {
	display: block;
	font-family: var(--svj-akce-pismo-datum);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--svj-akce-modra);
}

.svj-akce__cas {
	display: block;
	margin-top: 2px;
	font-family: var(--svj-akce-pismo-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.2px;
	color: var(--svj-akce-tlumene);
}

/* Štítek kategorie */
.svj-akce__kategorie {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 3px;
	font-family: var(--svj-akce-pismo-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--svj-akce-barva);
}

.svj-akce__tecka {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--svj-akce-barva);
}

/* Nadpis a popis */
.svj-akce__nadpis {
	margin: 0;
	font-family: var(--svj-akce-pismo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--svj-akce-text);
}

.svj-akce__nadpis a {
	color: inherit;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--svj-akce-ramecek);
}

.svj-akce__nadpis a:hover,
.svj-akce__nadpis a:focus {
	color: var(--svj-akce-modra);
	box-shadow: inset 0 -1px 0 currentColor;
}

.svj-akce__popis {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--svj-akce-tlumene);
}

.svj-akce__popis > :first-child {
	margin-top: 0;
}

.svj-akce__popis > :last-child {
	margin-bottom: 0;
}

.svj-akce__popis p {
	margin: 0 0 6px;
}

.svj-akce__obrazek img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Styl „seznam“ – kompaktní výpis pod sebou                           */
/* ------------------------------------------------------------------ */

.svj-akce--seznam .svj-akce__polozka {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: start;
	padding: 15px 0;
}

/* Oddělovací linka patří každé viditelné položce kromě první.
   Dřív to řešilo :first-child, jenže po vyfiltrování zůstává první potomek
   v DOM (jen skrytý), takže první *zobrazená* položka dostala linku navíc.
   Tenhle zápis znamená „viditelná položka, před kterou je jiná viditelná“. */
.svj-akce--seznam .svj-akce__polozka:not([hidden]) ~ .svj-akce__polozka:not([hidden]) {
	border-top: 1px solid var(--svj-akce-linka);
}

.svj-akce--seznam .svj-akce__kdy {
	grid-column: 1;
}

.svj-akce--seznam .svj-akce__text {
	grid-column: 2;
}

.svj-akce--seznam .svj-akce__obrazek {
	grid-column: 3;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--svj-akce-linka);
}

@media (max-width: 600px) {
	.svj-akce--seznam .svj-akce__polozka {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 14px;
	}

	.svj-akce--seznam .svj-akce__kdy {
		grid-column: 1;
		grid-row: 1;
	}

	.svj-akce--seznam .svj-akce__text {
		grid-column: 1;
		grid-row: 2;
	}

	.svj-akce--seznam .svj-akce__obrazek {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* Na úzké obrazovce datum a čas vedle sebe na jednom řádku. */
	.svj-akce--seznam .svj-akce__kdy {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 2px 8px;
	}

	.svj-akce--seznam .svj-akce__cas {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Styl „karty“ – dlaždice s obrázkem                                  */
/* ------------------------------------------------------------------ */

.svj-akce--karty .svj-akce__polozky {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 12px;
}

.svj-akce--karty .svj-akce__polozka {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--svj-akce-ramecek);
	border-top: 3px solid var(--svj-akce-barva);
	border-radius: 6px;
	background: var(--svj-akce-plocha);
}

.svj-akce--karty .svj-akce__obrazek {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--svj-akce-linka);
}

.svj-akce--karty .svj-akce__kdy {
	padding: 16px 18px 0;
}

.svj-akce--karty .svj-akce__datum {
	font-size: 19px;
}

.svj-akce--karty .svj-akce__cas {
	display: inline-block;
	margin-top: 3px;
}

.svj-akce--karty .svj-akce__text {
	padding: 6px 18px 18px;
}

@supports not (aspect-ratio: 16 / 9) {
	.svj-akce--karty .svj-akce__obrazek {
		height: 160px;
	}
}

/* ---------- Filtrování a hledání ---------- */

/* POZOR: samotný atribut hidden položku neskryje. Prohlížečové
   [hidden] { display: none } má specificitu (0,1,0), kdežto
   .svj-akce--seznam .svj-akce__polozka { display: grid } má (0,2,0) a vyhraje.
   Bez tohohle pravidla filtr „funguje“ jen v počítadle a položky zůstanou
   vidět – přesně to se stalo ve verzi 1.3.0. */
.svj-akce--seznam .svj-akce__polozka[hidden],
.svj-akce--karty .svj-akce__polozka[hidden] {
	display: none;
}
/* Vykresluje se jen u [svj_akce filtr="ano"] / hledani="ano" – na úvodní
   stránce se čtyřmi termíny by ovládání překáželo. */

.svj-akce__nastroje {
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.svj-akce__hledat {
	width: 100%;
	max-width: 420px;
	padding: 9px 12px;
	border: 1px solid var(--svj-akce-ramecek);
	border-radius: 8px;
	background: var(--svj-akce-plocha);
	font-family: inherit;
	font-size: 15px;
	color: var(--svj-akce-text);
	-webkit-appearance: none;
	appearance: none;
}

.svj-akce__hledat::placeholder {
	color: var(--svj-akce-popisek);
}

.svj-akce__hledat:focus-visible {
	outline: 2px solid var(--svj-akce-modra);
	outline-offset: 1px;
	border-color: var(--svj-akce-modra);
}

.svj-akce__dlazdice {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Obě varianty dlaždice sdílejí tvar; liší se jen tečkou a barvou okraje. */
.svj-akce__dlazdice-vse,
.svj-akce__dlazdice-tlacitko {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--svj-akce-ramecek);
	border-radius: 999px;
	background: var(--svj-akce-plocha);
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--svj-akce-text);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.svj-akce__dlazdice-vse:hover,
.svj-akce__dlazdice-tlacitko:hover {
	border-color: var(--svj-akce-tlumene);
}

.svj-akce__dlazdice-vse:focus-visible,
.svj-akce__dlazdice-tlacitko:focus-visible {
	outline: 2px solid var(--svj-akce-modra);
	outline-offset: 1px;
}

/* Aktivní dlaždice se obarví vlastní barvou kategorie – proto je barva
   na tlačítku ve stylu jako --svj-akce-barva, stejně jako u položek. */
.svj-akce__dlazdice-tlacitko.je-aktivni {
	border-color: var(--svj-akce-barva);
	background: color-mix(in srgb, var(--svj-akce-barva) 10%, #fff);
	font-weight: 600;
}

.svj-akce__dlazdice-vse.je-aktivni {
	border-color: var(--svj-akce-modra);
	background: color-mix(in srgb, var(--svj-akce-modra) 8%, #fff);
	font-weight: 600;
}

/* Prohlížeče bez color-mix dostanou aspoň zvýrazněný okraj. */
@supports not (background: color-mix(in srgb, red 10%, #fff)) {
	.svj-akce__dlazdice-tlacitko.je-aktivni,
	.svj-akce__dlazdice-vse.je-aktivni {
		background: var(--svj-akce-linka);
	}
}

.svj-akce__dlazdice-tlacitko .svj-akce__tecka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--svj-akce-barva);
	flex: 0 0 auto;
}

.svj-akce__pocet {
	font-family: var(--svj-akce-pismo-mono);
	font-size: 11px;
	color: var(--svj-akce-tlumene);
	font-variant-numeric: tabular-nums;
}

.svj-akce__stav {
	margin: 0;
	min-height: 1.2em;
	font-size: 13px;
	color: var(--svj-akce-tlumene);
}

.svj-akce__bez-vysledku {
	margin: 8px 0;
	font-size: 14px;
	color: var(--svj-akce-tlumene);
}

@media (prefers-reduced-motion: reduce) {
	.svj-akce__dlazdice-vse,
	.svj-akce__dlazdice-tlacitko {
		transition: none;
	}
}

/* Tištěný výpis ovládací prvky nepotřebuje. */
@media print {
	.svj-akce__nastroje,
	.svj-akce__bez-vysledku {
		display: none;
	}
}