/*
 * Karty cyklů – zkratka [jb_cycles].
 *
 * Vlastní soubor, protože se vypisují nezávisle na formuláři a nemá smysl
 * kvůli nim natahovat jeho styly. Barvy si proto definují samy, stejně jako
 * formulář je berou z tokenů child tématu.
 */

.jb-cycles {
	--jb-cycles-accent: var(--jb-color-accent, #ea5198);
	--jb-cycles-accent-hover: var(--jb-color-accent-hover, #ff0080);

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.jb-cycles__item {
	margin: 0;
}

/* Termíny pod obsahem cyklu */

.jb-cycle-terms {
	--jb-cycles-accent: var(--jb-color-accent, #ea5198);
	--jb-cycles-accent-hover: var(--jb-color-accent-hover, #ff0080);

	margin-block-start: 2rem;
}

.jb-cycle-terms__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.jb-cycle-terms__list li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.8em;
	margin: 0;
	padding-block: 0.35em;
	/* Řádkování z textu je na výpis údajů zbytečně vzdušné. */
	line-height: 1.45;
	border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}

/*
 * Skrytý řádek musí přebít display: flex z pravidla výš – atribut hidden má
 * jen sílu výchozích stylů prohlížeče.
 */
.jb-cycle-terms__list li[hidden] {
	display: none;
}

/* Náhled dalšího termínu – poslední řádek se ztrácí do ztracena. */
.jb-cycle-terms__list li.jb-cycle-terms__peek {
	-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
	mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
	border-block-end: 0;
}

/*
 * Skryté tlačítko musí ustoupit vlastnímu display níž – atribut hidden má jen
 * sílu výchozích stylů prohlížeče a ta by prohrála. Bez toho se „Zobrazit
 * všechny termíny“ ukázalo i u cyklu, kde není co rozbalovat.
 */
.jb-cycle-terms__more[hidden] {
	display: none;
}

.jb-cycle-terms__more {
	display: inline-block;
	background: none;
	border: 0;
	padding: 0;
	margin-block-end: 1.5rem;
	font: inherit;
	font-weight: 600;
	color: var(--jb-cycles-accent);
	cursor: pointer;
}

.jb-cycle-terms__more:hover,
.jb-cycle-terms__more:focus-visible {
	color: var(--jb-cycles-accent-hover);
}

/*
 * Hlavní je téma lekce – den, datum a čas jsou souřadnice, podle kterých se
 * hledá, ne to, co má člověk číst první. Proto tučně jen název.
 */
.jb-cycle-terms__day,
.jb-cycle-terms__date,
.jb-cycle-terms__time {
	font-weight: 400;
	/* Ať data pod sebou začínají na stejné svislici jako ve formuláři. */
	font-variant-numeric: tabular-nums;
}

/* Zarovnání doprava srovná „9. 9.“ pod „14. 10.“ na konci, ne na začátku. */
.jb-cycle-terms__date,
.jb-cycle-terms__time {
	text-align: right;
}

/*
 * Den, datum, čas a téma stojí ve čtyřech sloupcích – oko sjede po svislici,
 * místo aby četlo každý řádek od začátku. Šířku sloupců drží napříč řádky
 * subgrid; <li> tak zůstává skutečným boxem a nese dál linku pod sebou,
 * prolnutí náhledu i skrývání atributem hidden. Kde subgrid není, platí
 * pravidlo výš a řádek zůstane jednou řádkou textu jako dřív.
 */
@supports (grid-template-columns: subgrid) {
	.jb-cycle-terms__list {
		/* den | datum | čas | téma */
		grid-template-columns: auto auto auto 1fr;
		gap: 0;
	}

	.jb-cycle-terms__list li {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
		gap: 0 1em;
	}

	/*
	 * Na úzkém displeji by na téma zbyl proužek na tři řádky. Sloupce se
	 * proto zúží na samotný termín a název se přesune pod ně.
	 */
	@media (max-width: 26rem) {
		.jb-cycle-terms__list {
			grid-template-columns: auto auto 1fr;
		}

		.jb-cycle-terms__list li {
			gap: 0 0.7em;
		}

		.jb-cycle-terms__time {
			text-align: left;
		}

		.jb-cycle-terms__topic {
			grid-column: 1 / -1;
		}
	}
}

.jb-cycle-terms__topic {
	font-weight: 600;
}

.jb-cycle-terms__cta a,
.jb-event__cta a {
	display: inline-block;
	background: var(--jb-cycles-accent);
	color: #fff;
	border-radius: 6px;
	padding: 0.7em 1.5em;
	font-weight: 600;
	text-decoration: none;
}

.jb-cycle-terms__cta a:hover,
.jb-cycle-terms__cta a:focus-visible,
.jb-event__cta a:hover,
.jb-event__cta a:focus-visible {
	background: var(--jb-cycles-accent-hover);
	color: #fff;
}

/*
 * Klikací je celá karta, ne jen nadpis. Vnořené odkazy by v ní stejně nešly,
 * takže je odkazem obal a uvnitř jsou jen řádkové prvky.
 */
.jb-cycles__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

/*
 * Na najetí se mění jen rámeček a zdvih. Barvu textu je potřeba držet
 * výslovně – téma barví „a:hover“ a to by přebarvilo název i úryvek,
 * protože celá karta je odkaz.
 */
.jb-cycles__link:hover,
.jb-cycles__link:focus-visible {
	color: inherit;
	border-color: var(--jb-cycles-accent);
	transform: translateY(-2px);
}

.jb-cycles__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}

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

.jb-cycles__body {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	padding: 0.9em 1em 1em;
}

.jb-cycles__title {
	font-weight: 600;
	line-height: 1.25;
}

.jb-cycles__dates {
	font-size: 0.8em;
	opacity: 0.7;
}

.jb-cycles__excerpt {
	font-size: 0.9em;
	opacity: 0.85;
}

.jb-cycles__more {
	margin-block-start: auto;
	padding-block-start: 0.4em;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--jb-cycles-accent);
}

.jb-cycles__more::after {
	content: " →";
}

.jb-cycles__link:hover .jb-cycles__more,
.jb-cycles__link:focus-visible .jb-cycles__more {
	color: var(--jb-cycles-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
	.jb-cycles__link {
		transition: none;
	}

	.jb-cycles__link:hover,
	.jb-cycles__link:focus-visible {
		transform: none;
	}
}

/*
 * Stránka jednorázové akce – kdy, za kolik a odkud se přihlásit.
 *
 * Připojuje se pod popis, který Šárka napsala v editoru, takže si drží
 * odstup a vlastní rámeček: je to údaj, ne pokračování textu.
 */
.jb-event {
	--jb-cycles-accent: var(--jb-color-accent, #ea5198);
	--jb-cycles-accent-hover: var(--jb-color-accent-hover, #ff0080);

	margin-block-start: 2rem;
	padding: 1.2rem 1.4rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.7);
}

.jb-event__when {
	margin-block: 0 0.8rem;
	font-size: 1.1em;
}

/* Ceník: popisek a částka na jednom řádku, aby se dvojice četly jako dvojice. */
.jb-event__prices {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.2em 1em;
	margin-block: 0 1rem;
}

.jb-event__prices dt {
	opacity: 0.75;
}

.jb-event__prices dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.jb-event__cta {
	margin-block-end: 0;
}

.jb-event__closed {
	margin-block-end: 0;
	opacity: 0.75;
}

/* U proběhlé akce stojí tlačítko hned pod větou, tak ať se nelepí. */
.jb-event__closed + .jb-event__cta {
	margin-block-start: 1rem;
}