/* ==========================================================================
   KURZY — PREHĽADNÁ MRIEŽKA

   Karty troch (na užšom okne dvoch, na mobile jednej) v rade, delené
   do skupín s nadpisom. Karta je celý kurz naraz: fotka, názov, popis,
   údaje v dlaždiciach, organizačné informácie a výzvy.
   ========================================================================== */

.shs-coursegrid {
	padding-block: var(--shs-section-py);
	color: var(--shs-brand);
	background: var(--shs-mist);
}

.shs-coursegrid__inner {
	padding-inline: calc(var(--shs-gutter) + var(--shs-inset));
}

.shs-coursegrid__title {
	text-align: center;
}

/* ---- Skupina ------------------------------------------------------------ */

.shs-coursegrid__group {
	margin-top: var(--shs-space-80);
}

/*
 * Sekcia bez skupín (jeden zoznam kurzov) — karty nadväzujú na nadpis
 * sekcie, nie na nadpis skupiny, takže odstup je menší.
 */
.shs-coursegrid--plain .shs-coursegrid__group {
	margin-top: var(--shs-space-48);
}

/*
 * Číslo skupiny stojí PRED nadpisom v jednom riadku — rovnako ako
 * v rozbaľovacích riadkoch, z ktorých sekcia vychádza. Zarovnanie na
 * `baseline` drží číslo v účiari nadpisu aj pri inej veľkosti písma.
 */
.shs-coursegrid__head {
	display: flex;
	align-items: baseline;
	gap: var(--shs-space-24);
	padding-bottom: var(--shs-space-16);
	border-bottom: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

.shs-coursegrid__number {
	flex: 0 0 auto;
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	color: color-mix(in srgb, var(--shs-brand) 60%, transparent);
}

/*
 * Nadpis skupiny je veľký a oba rezy tečú v JEDNOM riadku — je to
 * jedna veta („Začíname so sound healingom"), nie nadpis a podnadpis.
 * Spany sú predvolene blokové, preto sa tu prepínajú na `inline`.
 */
.shs-coursegrid__group-title {
	margin: 0;
	font-size: var(--shs-fs-script);
	font-weight: var(--shs-weight-extralight);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.shs-coursegrid__group-title .shs-section-title__soft,
.shs-coursegrid__group-title .shs-section-title__strong {
	display: inline;
}

.shs-coursegrid__group-title .shs-section-title__strong {
	font-weight: var(--shs-weight-regular);
}

.shs-coursegrid__text {
	margin: var(--shs-space-19) 0 0;
	max-width: 70ch;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

.shs-coursegrid__text p {
	margin: 0 0 var(--shs-space-12);
}

.shs-coursegrid__text > :last-child {
	margin-bottom: 0;
}

.shs-coursegrid__text a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Skupina vie mať nadpis aj text pri pravom okraji. Nestačí
 * `text-align` — číslo a nadpis sú riadok mriežky, preto sa presúva aj
 * ich zarovnanie, a text sa musí odtlačiť doprava vlastným okrajom
 * (má obmedzenú šírku riadka).
 */
.shs-coursegrid__group--right .shs-coursegrid__head {
	justify-content: flex-end;
}

.shs-coursegrid__group--right .shs-coursegrid__group-title,
.shs-coursegrid__group--right .shs-coursegrid__text {
	text-align: end;
}

.shs-coursegrid__group--right .shs-coursegrid__text {
	margin-inline-start: auto;
}

.shs-coursegrid__group--center .shs-coursegrid__head {
	justify-content: center;
}

.shs-coursegrid__group--center .shs-coursegrid__group-title,
.shs-coursegrid__group--center .shs-coursegrid__text {
	text-align: center;
}

.shs-coursegrid__group--center .shs-coursegrid__text {
	margin-inline: auto;
}

/* ---- Mriežka kariet ----------------------------------------------------- */

/*
 * Počet kariet v rade je nastavenie skupiny — a vypíše sa PRESNE tak,
 * ako je nastavený. `auto-fill` s vypočítanou šírkou stĺpca sa tu
 * použiť nedá: šírka `100% / počet` nepočíta s medzerami medzi
 * kartami, každý stĺpec je o kúsok širší, než koľko na neho zostane,
 * a do radu sa zmestí o jeden menej — pri troch sa ukázali dva, pri
 * štyroch tri (reklamácia klienta). Užšie okná preberajú menší počet
 * v mediálnych pravidlách nižšie.
 */
.shs-coursegrid__list {
	display: grid;
	grid-template-columns: repeat(var(--shs-coursegrid-cols, 3), minmax(0, 1fr));
	gap: var(--shs-space-24);
	margin: var(--shs-space-32) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Karta je stĺpec, nie blok textu: obsah rastie zhora, výzvy sedia na
 * spodnej hrane. Bez toho by tlačidlá kariet v rade končili každé inde,
 * podľa dĺžky popisu.
 */
.shs-coursegrid__card {
	/*
	 * Karta je vlastný kontajner: pri štyroch v rade má sotva 300 px
	 * a dlaždice vedľa seba sa v nej lámali („559 € s / DPH"). Rozhodovať
	 * podľa šírky OKNA by nestačilo — tá istá šírka okna nesie raz dve
	 * karty, raz štyri.
	 */
	container-type: inline-size;

	display: flex;
	flex-direction: column;
	padding: var(--shs-space-24);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
	background: var(--shs-white);
}

.shs-coursegrid__media {
	margin: 0 0 var(--shs-space-19);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.shs-coursegrid__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shs-coursegrid__name {
	margin: 0;
	font-size: var(--shs-fs-heading);
	font-weight: var(--shs-weight-extralight);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;

	/* Dlhý názov sa rozloží na riadky rovnomerne, nie s jedným slovom dole. */
	text-wrap: balance;
}

.shs-coursegrid__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Fotka je tiež odkaz — pod myšou sa jemne priblíži, nič viac. */
.shs-coursegrid__media a {
	display: block;
	height: 100%;
}

.shs-coursegrid__media img {
	transition: scale var(--shs-duration) var(--shs-ease);
}

.shs-coursegrid__card:hover .shs-coursegrid__media img {
	scale: 1.03;
}

/* Silnejší rez názvu začína vlastný riadok — je to samostatná veta. */
.shs-coursegrid__name strong {
	display: block;
	font-weight: var(--shs-weight-regular);
}

.shs-coursegrid__lead {
	margin: var(--shs-space-12) 0 0;
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
	text-wrap: pretty;
}

/* ---- Údaje v dlaždiciach ------------------------------------------------ */

.shs-coursegrid__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: var(--shs-space-8);
	margin: var(--shs-space-19) 0 0;
}

.shs-coursegrid__tile {
	padding: var(--shs-space-12);
	background: var(--shs-mist);
}

.shs-coursegrid__tile dt {
	margin: 0;
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--shs-brand) 65%, transparent);
}

.shs-coursegrid__tile dd {
	margin: var(--shs-space-4) 0 0;
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-medium);
	line-height: var(--shs-lh-tight);
}

/* ---- Cena, lektor a kapacita -------------------------------------------- */

/*
 * Kurz má aj niekoľko foriem (prezenčne, online, individuálne) a každá
 * má inú cenu — preto sa bloky opakujú v skupinách s vlastným
 * popisom. Forma bez popisu je tá hlavná, zapísaná priamo v poliach
 * kurzu.
 */
.shs-coursegrid__form + .shs-coursegrid__form {
	margin-top: var(--shs-space-12);
}

.shs-coursegrid__form-title {
	margin: var(--shs-space-16) 0 0;
	font-size: var(--shs-fs-small);
	font-weight: var(--shs-weight-medium);
	line-height: var(--shs-lh-tight);
}

/*
 * Cena, lektor a kapacita nie sú ďalšie riadky medzi termínmi — sú to
 * údaje, podľa ktorých sa človek rozhoduje. Stoja preto vo vlastných
 * blokoch a cena je obrátená do farby značky, aby ju oko našlo prvú.
 */
.shs-coursegrid__offer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--shs-space-8);
	margin: var(--shs-space-12) 0 0;
}

.shs-coursegrid__block {
	padding: var(--shs-space-12) var(--shs-space-16);
	border: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

.shs-coursegrid__block dt {
	margin: 0;
	font-size: var(--shs-fs-micro);
	font-weight: var(--shs-weight-light);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--shs-brand) 65%, transparent);
}

.shs-coursegrid__block dd {
	margin: var(--shs-space-4) 0 0;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-tight);
}

/*
 * Cena je zvýraznená len jemne — farebná plocha z nej robila to
 * najhlasnejšie na karte a prebíjala aj názov kurzu. Stačí tmavší rám
 * a pokojné písmo v pokojnej ploche, ako majú ostatné bloky.
 */
.shs-coursegrid__block--cena {
	border-color: color-mix(in srgb, var(--shs-brand) 55%, transparent);
	background: color-mix(in srgb, var(--shs-brand) 5%, transparent);
}

/* Meno lektora a kapacita sú kratšie než cena — sadzia pokojnejšie. */
.shs-coursegrid__block--lektor dd,
.shs-coursegrid__block--kapacita dd {
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-medium);
}

/* ---- Úzka karta (štyri v rade) ------------------------------------------ */

/*
 * V úzkej karte sa z dlaždíc stanú riadky: popis vľavo, hodnota vpravo.
 * Nič sa neláme, výška kariet sa vyrovná a údaje sa dajú čítať pod
 * sebou ako v cenníku.
 */
@container (max-width: 340px) {
	.shs-coursegrid__meta,
	.shs-coursegrid__offer {
		grid-template-columns: minmax(0, 1fr);
	}

	.shs-coursegrid__tile,
	.shs-coursegrid__block {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--shs-space-12);
		padding-block: var(--shs-space-8);
	}

	.shs-coursegrid__tile dd,
	.shs-coursegrid__block dd {
		margin-top: 0;
		font-size: var(--shs-fs-base);
		text-align: end;
	}

	.shs-coursegrid__actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Výzvy -------------------------------------------------------------- */

/*
 * Výzvy sedia v rovnakej mriežke ako bloky nad nimi — rovnako široké
 * a v rovnakých stĺpcoch. Pri tlačidlách rôznej dĺžky textu by inak
 * každé začínalo inde a spodok karty by pôsobil nezarovnane.
 */
.shs-coursegrid__actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--shs-space-8);
	margin-top: auto;
	padding-top: var(--shs-space-24);
}

.shs-coursegrid__actions .btn {
	justify-content: center;
	text-align: center;
}

/* ---- Užšie okná --------------------------------------------------------- */

/*
 * Medzi mobilom a širokým monitorom sú najviac dve karty v rade, nech
 * si redaktor nastavil čokoľvek — pri troch by karta klesla pod 300 px
 * a z názvu kurzu by ostal stĺpec slov.
 */
@media (max-width: 1300px) {
	.shs-coursegrid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Mobil -------------------------------------------------------------- */

@media (max-width: 900px) {
	.shs-coursegrid {
		padding-block: var(--shs-section-py-sm);
	}

	.shs-coursegrid__inner {
		padding-inline: var(--shs-gutter);
	}

	.shs-coursegrid__title {
		text-align: left;
	}

	.shs-coursegrid__group {
		margin-top: var(--shs-space-48);
	}

	/*
	 * Na mobile sa z mriežky stane PÁS: karty pod sebou by z jednej
	 * skupiny spravili tri obrazovky rolovania. Karta je široká 82 vw,
	 * takže z ďalšej vidieť kúsok — bez toho by nikto netušil, že sa dá
	 * posúvať. Pás siaha od hrany po hranu (záporný okraj ruší odsadenie
	 * kontajnera), ale prvá karta začína v línii s textom nad ňou.
	 */
	.shs-coursegrid__list {
		display: flex;
		grid-template-columns: none;
		gap: var(--shs-space-16);
		margin: var(--shs-space-24) calc(-1 * var(--shs-gutter)) 0;
		padding-inline: var(--shs-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: var(--shs-gutter);
		scrollbar-width: none;
	}

	.shs-coursegrid__list::-webkit-scrollbar {
		display: none;
	}

	.shs-coursegrid__card {
		flex: 0 0 82vw;
		scroll-snap-align: start;
	}

	.shs-coursegrid__actions .btn {
		justify-content: center;
	}
}