/* ==========================================================================
   NAJČASTEJŠIE OTÁZKY / CESTA VZDELÁVANIA

   Riadky vysoké 140 px oddelené vlasovou linkou, vpravo šípka nadol.
   Otvorený riadok šípku otočí. Linka ide cez celý kontajner (42 až
   1686 px), text je odsadený hlbšie (150 px) — preto odsadenie nesie
   riadok, nie obal. Dizajn je kreslený na 1728 px.

   Rovnaké riadky používa aj „Cesta vzdelávania" na prehľade kurzov:
   pribudne im číslo vľavo, druhý rez v štítku a poznámka pred šípkou.
   ========================================================================== */

.shs-faq {
	--shs-faq-row: 140px;

	padding-block: calc(var(--shs-space-96) + var(--shs-space-24))
		calc(var(--shs-space-96) + var(--shs-space-64));
	color: var(--shs-brand);
	background: var(--shs-cream);
}

.shs-faq__title,
.shs-faq__answer {
	padding-inline: var(--shs-inset);
}

/*
 * Šípka končí bližšie k okraju než text (1601 oproti 1578 px v návrhu),
 * preto má riadok vpravo o niečo menšie odsadenie.
 */
.shs-faq__question {
	padding-inline: var(--shs-inset) calc(var(--shs-inset) - var(--shs-space-23));
}

.shs-faq--center .shs-faq__title {
	text-align: center;
}

.shs-faq__list {
	margin-top: calc(var(--shs-space-96) + var(--shs-space-24));
}

/* Nadpis na stred sedí bližšie k zoznamu — tak je to nakreslené. */
.shs-faq--center .shs-faq__list {
	margin-top: var(--shs-space-64);
}

/*
 * Linka je len pod riadkom, nie nad prvým — zoznam tak nezačína dvomi
 * linkami pod nadpisom.
 */
.shs-faq__item {
	border-bottom: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

.shs-faq__question {
	display: flex;
	align-items: center;
	min-height: var(--shs-faq-row);
	padding-block: var(--shs-space-24);
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-script);
	font-weight: var(--shs-weight-extralight);
	line-height: var(--shs-lh-tight);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	transition: color var(--shs-duration) var(--shs-ease);
}

/* Vlastná šípka nahrádza trojuholník, ktorý si prehliadač kreslí sám. */
.shs-faq__question::-webkit-details-marker {
	display: none;
}

.shs-faq__question:hover {
	color: color-mix(in srgb, var(--shs-brand) 70%, transparent);
}

/* Číslo drží pevný stĺpec, aby štítky začínali v jednej línii. */
.shs-faq__index {
	flex: 0 0 auto;
	width: 73px;
}

.shs-faq__label {
	flex: 1 1 auto;
	padding-inline-end: var(--shs-space-32);
}

.shs-faq__label strong {
	font-weight: var(--shs-weight-regular);
}

.shs-faq__meta {
	flex: 0 0 auto;
	margin-inline-end: calc(var(--shs-space-48) + var(--shs-space-8));
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	text-transform: none;
}

/* Šípka ukazuje nadol; po otvorení sa otočí nahor. */
.shs-faq__mark {
	display: block;
	flex: 0 0 auto;
	width: 20px;
	rotate: 90deg;
	transition: rotate var(--shs-duration) var(--shs-ease);
}

.shs-faq__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

.shs-faq__item[open] .shs-faq__mark {
	rotate: -90deg;
}

/*
 * Výšku animuje skript; tu je len to, čo platí v pokoji. Pravé
 * odsadenie je rovnaké ako v riadku — pravý stĺpec kurzu končí
 * v jednej línii so šípkou.
 */
.shs-faq__answer {
	padding-block: 0 var(--shs-space-42);
	padding-inline: var(--shs-inset) calc(var(--shs-inset) - var(--shs-space-23));
}

.shs-faq__text {
	display: flex;
	flex-direction: column;
	gap: var(--shs-space-16);
	max-width: 980px;
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

/* ==========================================================================
   KURZY V ROZBALENOM RIADKU

   Štvorcová fotka 340 px vľavo, text pri jej spodnej hrane a termín
   v pravom stĺpci. Text sadá k spodku fotky, nie k jej vrchu — tak je
   to nakreslené a tlačidlo tak vždy končí v línii s fotkou.
   Dizajn: 1728 × 2020 px.
   ========================================================================== */

.shs-faq__courses {
	display: grid;
	row-gap: 0;
	margin: 0;
	padding: var(--shs-space-19) 0 0;
	list-style: none;
}

.shs-faq__course {
	position: relative;
	display: grid;
	/* Fotka 340 px, medzera 54 px — z návrhovej šírky riadka (1451 px). */
	grid-template-columns: 23.43% minmax(0, 1fr);
	column-gap: 3.72%;
	align-items: end;
}

.shs-faq__course:not(:last-child) {
	padding-bottom: var(--shs-space-80);
}

/*
 * Linka medzi kurzami je krátka — siaha len po šírku fotky. Preto
 * vrstva a nie `border-bottom` na položke.
 */
.shs-faq__course:not(:last-child)::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: var(--shs-space-42);
	width: 23.43%;
	border-top: var(--shs-hairline) solid color-mix(in srgb, var(--shs-brand) 25%, transparent);
}

.shs-faq__course-media {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--shs-mist);
}

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

/* ---- Text a termín ------------------------------------------------------ */

.shs-faq__course-body {
	display: grid;
	/* Termín 273 px, medzera 150 px — z návrhu. */
	grid-template-columns: minmax(0, 1fr) 25.83%;
	column-gap: 14.19%;
	align-items: start;
}

.shs-faq__course-title {
	font-size: var(--shs-fs-heading);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
	text-transform: uppercase;
}

/*
 * Silnejší rez začína vlastný riadok. Nie je to zalomenie podľa šírky:
 * v návrhu je to samostatná veta („Autorská metóda Lucie Nosko®"),
 * ktorá pod názvom kurzu stojí vždy, nech je názov akokoľvek krátky.
 */
.shs-faq__course-title strong {
	display: block;
	font-weight: var(--shs-weight-medium);
}

.shs-faq__course-lead {
	margin-top: var(--shs-space-32);
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-airy);
	text-transform: none;
}

/*
 * Dve výzvy vedľa seba: rezervácia termínu a odkaz na podstránku
 * kurzu. Na úzkom okne sa zalomia pod seba.
 */
.shs-faq__course-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shs-space-12);
	margin-top: var(--shs-space-24);
}

.shs-faq__course-meta {
	margin: 0;
	font-family: var(--shs-font-body);
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-base);
	text-transform: none;
}

.shs-faq__course-meta dt,
.shs-faq__course-meta dd {
	display: inline;
	margin: 0;
}

/* Miesto a dĺžka stoja pod termínom ako samostatné riadky. */
.shs-faq__course-meta > div {
	display: block;
}

.shs-faq__course-term {
	margin-bottom: var(--shs-space-24);
}

.shs-faq__course-term dt {
	font-weight: var(--shs-weight-medium);
}

/*
 * Dátum stojí POD popisom, nie za ním. V jednom riadku sa dvojdielny
 * termín („24 – 25. 9. 2026") lámal na náhodnom mieste a stĺpec
 * s termínom je najužší v riadku kurzu.
 */
.shs-faq__course-term dt,
.shs-faq__course-term dd {
	display: block;
}

.shs-faq__course-term dd {
	margin-inline-start: 0;
}

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

@media (max-width: 900px) {
	.shs-faq {
		--shs-faq-row: 0px;

		padding-block: var(--shs-space-64);
	}

	.shs-faq__title,
	.shs-faq__question,
	.shs-faq__answer {
		padding-inline: 0;
	}

	/* Fotka kurzu ide na úzkom okne nad text, nie vedľa neho. */
	.shs-faq__course {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-24);
	}

	.shs-faq__course:not(:last-child)::after {
		width: 100%;
	}

	.shs-faq__course-body {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-24);
	}


	.shs-faq__list,
	.shs-faq--center .shs-faq__list {
		margin-top: var(--shs-space-48);
	}

	.shs-faq__question {
		gap: var(--shs-space-16);
		padding-block: var(--shs-space-24);
		font-size: var(--shs-fs-lead);
	}

	.shs-faq__label {
		padding-inline-end: 0;
	}

	.shs-faq__index {
		width: auto;
	}

	/* Poznámka na úzkom okne konkuruje štítku — schová sa. */
	.shs-faq__meta {
		display: none;
	}
}