/**
 * Styl pro shortcode [kalendar]. Všechny třídy mají prefix "kalendar-", aby se
 * nekřížily se styly šablony Divi. Základní, snadno upravitelný vzhled — barvy
 * a typografie jde doladit podle grafiky webu bez zásahu do PHP.
 */

.kalendar-table-wrap {
	/* Písma webu drží plugin explicitně (ne přes inherit), aby kalendář vypadal
	   stejně i tam, kde by šablona měla nastavené jiné písmo: název inscenace
	   patkovou Lorou jako nadpisy, ostatní údaje bezpatkovým Jostem. */
	--kalendar-font-nazev: "Lora", Georgia, "Times New Roman", serif;
	--kalendar-font-text: "Jost", "Open Sans", Helvetica, Arial, sans-serif;

	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

.kalendar-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--kalendar-font-text);
	font-size: 16px;
}

.kalendar-table thead th {
	text-align: left;
	padding: 12px 14px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	color: #9a2e2f;
	border-bottom: 2px solid #d9d9d9;
	white-space: nowrap;
}

.kalendar-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid #e6e6e6;
	vertical-align: top;
}

.kalendar-table tbody tr:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

.kalendar-table tbody tr:last-child td {
	border-bottom: none;
}

.kalendar-table a {
	color: #9a2e2f;
	text-decoration: none;
	font-weight: 600;
}

.kalendar-table a:hover {
	text-decoration: underline;
}

.kalendar-prazdno {
	padding: 16px;
	font-style: italic;
	color: #666;
}

/* Responzivní zobrazení na mobilu — tabulka se rozpadne na "karty" místo scrollu
   celé stránky do stran. Řádek se stane blokem, buňky se srovnají pod sebe a
   před hodnotu se vypíše popisek sloupce z atributu data-label.

   Platí jen pro Varianty 1 a 3, které jsou skutečné tabulky. Varianta 2 je karta
   na všech šířkách a má vlastní responzivní pravidla — bez tohoto vyloučení jí
   sem zasahovaly `display: block/flex` a popisky `data-label` ("INSCENACE",
   "MÍSTO", …), což jí na mobilu rozbíjelo layout. */
@media (max-width: 680px) {
	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table thead {
		display: none;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table,
	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody,
	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tr,
	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table td {
		display: block;
		width: 100%;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody tr {
		margin-bottom: 14px;
		border: 1px solid #e6e6e6;
		border-radius: 4px;
		padding: 6px 0;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		border-bottom: 1px solid #f0f0f0;
		padding: 8px 14px;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody tr td:last-child {
		border-bottom: none;
	}

	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody td::before {
		content: attr(data-label);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		font-weight: 600;
		color: #9a2e2f;
		flex-shrink: 0;
	}

	/* Bez odkazu je buňka prázdná — schovat ji i s popiskem, ať nezůstane
	   viset "VSTUPENKY" bez hodnoty. V rozpadlé tabulce je buňka blok,
	   takže skrytí nerozhodí zarovnání sloupců. */
	.kalendar-table-wrap:not(.kalendar-skin-2) .kalendar-table tbody td.kalendar-col-vstupenky:empty {
		display: none;
	}
}

/* =========================================================================
   Varianta 2 — "Karty": každý termín jako samostatná, kompaktnější karta.
   Vlevo jeden spojený štítek s datem a pod ním časem, uprostřed Inscenace jako
   hlavní černý název a pod ním Místo (název – info + adresa) jako menší
   vedlejší info, vpravo odkaz "info". Zobrazuje se takto na všech šířkách,
   ne jen na mobilu.
   ========================================================================= */

.kalendar-table-wrap.kalendar-skin-2 {
	/* Jediná šířka pro OBĚ poloviny štítku Datum/Čas. Dřív si každá polovina
	   držela šířku sama (min-width) a delší datum si ji rozšířilo jen u sebe —
	   vznikl "schod" mezi Datem a Časem (např. "21. 11. 2026"). Odsud ji berou
	   obě, takže se rozejít nemůžou. Hodnota pokrývá i nejširší možné datum
	   formátu "j. n. Y" (nejhorší případ "24. 10. 2026" = 84 px textu + 24 px
	   vodorovného paddingu), takže text štítek nikdy nepřeteče. */
	--kalendar-stitek-sirka: 112px;
	--kalendar-stitek-odsazeni: 16px;

	max-width: 640px;
	margin: 0 auto;
}

.kalendar-skin-2 .kalendar-table {
	border-collapse: separate;
	border-spacing: 0;
}

.kalendar-skin-2 .kalendar-table thead {
	display: none;
}

.kalendar-skin-2 .kalendar-table,
.kalendar-skin-2 .kalendar-table tbody {
	display: block;
	width: 100%;
}

.kalendar-skin-2 .kalendar-table tr {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"inscenace vstupenky"
		"misto vstupenky";
	column-gap: 14px;
	row-gap: 0;
	align-items: center;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 10px;
	/* Vlevo navíc místo pro Datum/Čas štítek, který stojí mimo grid (viz níže).
	   Počítá se ze šířky štítku, aby se odsazení textu drželo s ním. */
	padding: 12px 16px 12px calc(var(--kalendar-stitek-odsazeni) + var(--kalendar-stitek-sirka) + 16px);
	margin-bottom: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	/* Štítek je mimo grid (position: absolute), takže se sám o sobě nepodílí na
	   výšce karty — bez min-height by se u krátkého obsahu (1-2 řádky Místa)
	   karta mohla zmenšit pod výšku štítku a ten by z ní přečníval. */
	min-height: 98px;
}

.kalendar-skin-2 .kalendar-table tr:last-child {
	margin-bottom: 0;
}

.kalendar-skin-2 .kalendar-table td {
	padding: 0;
	border: none;
	min-width: 0;
}

/* Datum + Čas jako dva navazující kusy jednoho vizuálního "obdélníku", umístěné
   mimo grid (`position: absolute` vůči celé kartě). Díky tomu se centrují podle
   SKUTEČNÉ výšky celé karty, ne podle dílčích řádků gridu (jejichž výška se liší
   podle délky Místa/Inscenace) — odsazení nahoře a dole tak vždy vyjde stejné.
   `top: 50%` + `translateY(-100%)`/`translateY(0)` spojí obě části přesně na
   středové ose karty, ať je karta jakkoli vysoká. */
/* Pozn.: selektor musí mít "td" natvrdo (ne jen třídu), jinak prohraje ve
   specificitě proti obecnému ".kalendar-skin-2 .kalendar-table td { padding:0 }"
   pravidlu výše a padding/rozměry štítku by se vůbec neuplatnily. */
/* Obě poloviny mají pevnou šířku ze společné proměnné (viz --kalendar-stitek-sirka),
   ne vlastní min-width — jinak si delší datum rozšíří jen svou polovinu a štítek
   se "rozejde". Tabulkové číslice navíc drží všechna data stejně široká bez
   ohledu na to, které číslice zrovna obsahují. */
.kalendar-skin-2 td.kalendar-col-datum,
.kalendar-skin-2 td.kalendar-col-cas {
	position: absolute;
	left: var(--kalendar-stitek-odsazeni);
	top: 50%;
	width: var(--kalendar-stitek-sirka);
	box-sizing: border-box;
	background: #9a2e2f;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	line-height: 17px;
}

.kalendar-skin-2 td.kalendar-col-datum {
	transform: translateY(-100%);
	color: #ffffff;
	border-radius: 8px 8px 0 0;
	/* Stejná line-height jako u Času + zrcadlově obrácený padding (víc odsazení
	   směrem od švu ven, míň k němu), aby obě poloviny vyšly naprosto stejně
	   vysoké a odsazení nahoře/dole tak bylo vizuálně shodné. */
	padding: 10px 12px 4px;
	font-weight: 700;
	font-size: 13px;
}

.kalendar-skin-2 td.kalendar-col-cas {
	transform: translateY(0);
	color: rgba(255, 255, 255, 0.85);
	border-radius: 0 0 8px 8px;
	padding: 4px 12px 10px;
	font-weight: 600;
	font-size: 14px;
}

/* Bez vyplněného Času tvoří Datum štítek sám za sebe — zaoblit všechny rohy
   a posunout tak, aby zůstal vycentrovaný přesně na střed sám o sobě. */
.kalendar-skin-2 td.kalendar-col-cas:empty {
	display: none;
}

.kalendar-skin-2 td.kalendar-col-datum:has(+ .kalendar-col-cas:empty) {
	transform: translateY(-50%);
	border-radius: 8px;
	padding: 12px;
}

/* Inscenace je nyní hlavní název karty — červeně (barva webu), stejně velké
   písmo jako dřív mělo Místo. */
.kalendar-skin-2 .kalendar-col-inscenace {
	grid-area: inscenace;
	align-self: end;
	font-family: var(--kalendar-font-nazev);
	font-size: 16px;
	font-weight: 700;
	color: #9a2e2f;
	overflow-wrap: break-word;
}

.kalendar-skin-2 .kalendar-col-inscenace a {
	color: #9a2e2f;
}

/* Místo je vedlejší info pod hlavním názvem: "Název místa (tučně) – Info o místu"
   na jednom řádku a Adresa (odkaz na mapu) na dalším — vše menším písmem. */
.kalendar-skin-2 .kalendar-col-misto {
	grid-area: misto;
	align-self: start;
	margin-top: 2px;
	font-size: 13px;
	line-height: 1.5;
	color: #888888;
	overflow-wrap: break-word;
}

.kalendar-skin-2 .kalendar-col-misto strong {
	color: #555555;
	font-weight: 700;
}

.kalendar-skin-2 .kalendar-col-vstupenky {
	grid-area: vstupenky;
}

/* Bez odkazu je buňka prázdná — schovat ji, ať si na mobilu nedrží margin
   a nezvětšovala kartu o prázdné místo po tlačítku. */
.kalendar-skin-2 .kalendar-col-vstupenky:empty {
	display: none;
}

.kalendar-skin-2 .kalendar-col-vstupenky a {
	display: inline-block;
	padding: 8px 14px;
	background: #D4AF37;
	color: #ffffff;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

/* Na úzkých displejích se štítek vrací do toku nad text. Divi dává řádce na
   mobilu jen 80 % šířky, takže karta má kolem 240 px — vyhrazený svislý pruh
   pro štítek by z toho ukrojil přes polovinu a na název s místem by zbylo
   ~90 px, do kterých se text láme po jednom slově. */
@media (max-width: 480px) {
	.kalendar-skin-2 .kalendar-table tr {
		grid-template-columns: 1fr;
		grid-template-areas:
			"datum"
			"cas"
			"inscenace"
			"misto"
			"vstupenky";
		padding-left: 16px;
		/* Štítek už není mimo tok, takže si výšku karty hlídá sám. */
		min-height: 0;
	}

	.kalendar-skin-2 td.kalendar-col-datum,
	.kalendar-skin-2 td.kalendar-col-cas {
		position: static;
		transform: none;
		/* Šířka zůstává ze společné proměnné, jen se štítek neroztahuje
		   přes celou kartu. */
		justify-self: start;
	}

	.kalendar-skin-2 td.kalendar-col-datum {
		grid-area: datum;
	}

	.kalendar-skin-2 td.kalendar-col-cas {
		grid-area: cas;
		margin-bottom: 10px;
	}

	.kalendar-skin-2 .kalendar-col-vstupenky {
		margin-top: 8px;
		justify-self: start;
	}
}

/* =========================================================================
   Varianta 3 — "Barevná hlavička": tradičnější tabulka s výraznou plnou
   hlavičkou a jemným pruhováním řádků.
   ========================================================================= */

.kalendar-table-wrap.kalendar-skin-3 {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.kalendar-skin-3 .kalendar-table thead th {
	background: #9a2e2f;
	color: #ffffff;
	border-bottom: none;
	padding: 14px 16px;
}

.kalendar-skin-3 .kalendar-table tbody td {
	border-bottom: none;
	padding: 14px 16px;
}

.kalendar-skin-3 .kalendar-table tbody tr:nth-child(even) {
	background-color: #faf5e6;
}

.kalendar-skin-3 .kalendar-table tbody tr:hover {
	background-color: #f3e6bd;
}

.kalendar-skin-3 .kalendar-col-vstupenky a {
	display: inline-block;
	padding: 6px 14px;
	border: 1.5px solid #9a2e2f;
	border-radius: 20px;
	font-size: 13px;
}