/* ============================================================
   Dodatečné styly Living Academy
   Doplňky nad rámec main.css (ten se generuje z dist designu a needitujeme ho).
   Načítá se v @layout.latte hned za main.css.
   ============================================================ */


/* ------------------------------------------------------------
   Typografie dlouhých textů (detaily stránek i kategorie)
   Vyšší řádkování, větší rozestup odstavců, zřetelnější nadpisy.
   ------------------------------------------------------------ */
.c-Wysiwyg--stretch.h5 {
	line-height: 1.7;
}

.c-Wysiwyg--stretch.h5 > * + * {
	margin-block-start: 2rem;
}

.c-Wysiwyg--stretch.h5 h2,
.c-Wysiwyg--stretch.h5 h3 {
	margin-block-start: 3rem;
	line-height: 1.25;
}


/* ------------------------------------------------------------
   Přílohy stránky (soubory ke stažení, fotogalerie)
   Pozn.: grid projektu negeneruje třídy mb-*, proto vlastní odsazení.
   ------------------------------------------------------------ */
.l-PageMedia {
	margin-bottom: 3rem;
}

@media (min-width: 1024px) {
	.l-PageMedia {
		margin-bottom: 5rem;
	}
}


/* ------------------------------------------------------------
   Videa na stránkách (YouTube embed)
   ------------------------------------------------------------ */
.c-Video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.c-Video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* ------------------------------------------------------------
   Formuláře – společné prvky (kontaktní formulář i přihláška)
   ------------------------------------------------------------ */

/* Zelený pruh s potvrzením po odeslání */
.c-Form-banner {
	display: none;
	background-color: #cfe3c4;
	color: #000;
	padding: 1rem 1.5rem;
}

.c-Form-banner.is-visible {
	display: block;
}

/* Vysvětlivka k povinným položkám */
.c-Form-note {
	opacity: .6;
	margin-top: .5rem;
}

/* Popisek se zaškrtávacím políčkem */
.c-Form-check {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	cursor: pointer;
}

.c-Form-check input[type="checkbox"] {
	margin-top: .3rem;
}


/* ------------------------------------------------------------
   Kontaktní formulář
   ------------------------------------------------------------ */
.js-contact-banner {
	margin-top: 1.5rem;
}


/* ------------------------------------------------------------
   Přihláška ke kurzu
   ------------------------------------------------------------ */
.prihlaska .l-Regform-box {
	background-color: var(--bs-white);
	padding: 2rem;
}

@media (min-width: 992px) {
	.prihlaska .l-Regform-box {
		padding: 3rem;
	}
}

.prihlaska .js-regform-banner {
	margin-bottom: 1.5rem;
}

/* Viditelná šipka u selectů */
.prihlaska select.c-Form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .25rem center;
	padding-right: 1.75rem;
	cursor: pointer;
}

/* Grid projektu generuje jen některé col-N; doplňujeme chybějící šířky (z 28 sloupců).
   Do 576 px jsou pole pod sebou, od 576 px vedle sebe. */
.prihlaska .col-title,
.prihlaska .col-person,
.prihlaska .col-birth,
.prihlaska .col-addr {
	flex: 0 0 auto;
	width: 100%;
}

/* Na mobilu jsou pole pod sebou – sjednotíme svislé mezery s rozestupem formuláře (2rem),
   jinak by uvnitř skupiny byla mezera nulová a mezi skupinami 2rem. */
@media (max-width: 575.98px) {
	.prihlaska .c-Form .row {
		--bs-gutter-y: 2rem;
	}
}

@media (min-width: 576px) {
	.prihlaska .col-title { width: 21.4286%; }
	.prihlaska .col-person { width: 39.2857%; }
	.prihlaska .col-birth { width: 35.7143%; }
	.prihlaska .col-addr { width: 64.2857%; }
}

.prihlaska .c-Form-required {
	color: inherit;
}

/* Fakturační adresa – skrytá, dokud ji uživatel nevyžádá */
.prihlaska .js-regform-invoice {
	display: none;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.prihlaska .js-regform-invoice.is-visible {
	display: block;
}

.prihlaska .c-Form-subheading {
	margin-bottom: 1rem;
}


/* ------------------------------------------------------------
   Family – hover efekt karet
   ------------------------------------------------------------ */
.family .c-Card-inner {
	transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s cubic-bezier(.4, 0, .2, 1);
}

.family .c-Card-number {
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.family .c-Card--link {
	cursor: pointer;
}

.family .c-Card--link:hover .c-Card-inner {
	transform: translateY(-10px);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .14);
}

.family .c-Card--link:hover .c-Card-number {
	transform: scale(1.08);
}


/* ------------------------------------------------------------
   Detail kurzu – studijní obsah
   ------------------------------------------------------------ */
.kurz .c-Wysiwyg--stretch h2.l-Content-heading {
	font-weight: 700;
}

.kurz .c-Wysiwyg--stretch h2.l-Content-heading + p {
	opacity: .5;
	margin-block-start: 1rem;
	font-size: calc(1.04375rem + .71352vw);
}

@media (min-width: 1864px) {
	.kurz .c-Wysiwyg--stretch h2.l-Content-heading + p {
		font-size: 1.875rem;
	}
}

/* Číslované bloky studijního obsahu = zarovnaná mřížka s čárou nad každým blokem */
.kurz .l-Content-groups {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 4.5rem;
	row-gap: 2.5rem;
	margin-block-start: 2.5rem;
}

@media (min-width: 992px) {
	.kurz .l-Content-groups {
		grid-template-columns: 1fr 1fr;
		row-gap: 3.5rem;
	}
}

.kurz .l-Content-group {
	border-block-start: 1px solid rgba(0, 0, 0, .1);
	padding-block-start: 2.5rem;
}

.kurz .l-Content-group-number {
	font-weight: 700;
	letter-spacing: .12em;
	opacity: .35;
	font-size: calc(1.0125rem + .20386vw);
}

.kurz .l-Content-group-heading {
	font-weight: 600;
	font-size: calc(1.04375rem + .71352vw);
	margin-block-start: .75rem;
}

.kurz .l-Content-group-text {
	margin-block-start: 1rem;
}

@media (min-width: 1864px) {
	.kurz .l-Content-group-number { font-size: 1.25rem; }
	.kurz .l-Content-group-heading { font-size: 1.875rem; }
}