/* ==========================================================================
   PRE KOHO SÚ KURZY URČENÉ

   Nadpis a text vľavo hore, pod nimi značka so skupinami po oboch
   stranách. Prostredný riadok je odtlačený ďalej od stredu — skupiny
   tak obiehajú značku po oblúku, nie v dvoch rovných stĺpcoch.
   Dizajn je kreslený na 1728 × 1159 px.
   ========================================================================== */

.shs-audience {
	/* Odsadenia sú prepočty z návrhu: 120 px hore, 227 px dole. */
	--shs-audience-mark: min(15.34vw, 265px);
	--shs-audience-bow: min(8vw, 138px);
	--shs-audience-gap: min(1.8vw, 31px);

	padding-block: calc(var(--shs-space-96) + var(--shs-space-24))
		calc(2 * var(--shs-space-96) + var(--shs-space-32));
	color: var(--shs-brand);
	background: var(--shs-sand);
}

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

.shs-audience__text {
	max-width: 610px;
	margin-top: var(--shs-space-24);
	font-size: var(--shs-fs-base);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-loose);
}

/* ---- Značka so skupinami ------------------------------------------------ */

.shs-audience__ring {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--shs-audience-mark) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--shs-audience-gap);
	margin-top: calc(var(--shs-space-96) + var(--shs-space-80));
}

.shs-audience__mark {
	display: block;
	grid-row: 1;
	grid-column: 2;
}

.shs-audience__mark :is(svg, img) {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Známka sedí v pravom dolnom rohu značky, tak ako v podklade od
 * klienta — nie vedľa nej: značka je tu veľká a známka pri jej boku
 * by odsadila celý stĺpec z osi sekcie.
 */
.shs-audience__mark--reg {
	position: relative;
	padding-bottom: 9%;
}

/*
 * Poloha aj veľkosť sú z podkladu klienta: krúžok má 6,3 % šírky
 * značky a jeho stred sedí v 69 % šírky — teda pod pravým lalokom
 * uzla, nie na krajnej hrane.
 */
.shs-audience__reg {
	position: absolute;
	right: 27.7%;
	bottom: 0;
	display: block;
	width: 6.3%;
}

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

.shs-audience__side {
	display: grid;
	row-gap: calc(var(--shs-space-96) + var(--shs-space-8));
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--shs-font-display);
	font-size: var(--shs-fs-script);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
	text-transform: uppercase;
}

.shs-audience__side--start {
	grid-row: 1;
	grid-column: 1;
	text-align: right;
}

.shs-audience__side--end {
	grid-row: 1;
	grid-column: 3;
	text-align: left;
}

/*
 * Oblúk: prostredná skupina ustupuje od značky. Percento je prepočet
 * z návrhu (138 px naľavo, 149 px napravo z 1728).
 */
.shs-audience__side--start li:nth-child(2) {
	margin-inline-end: var(--shs-audience-bow);
}

.shs-audience__side--end li:nth-child(2) {
	margin-inline-start: var(--shs-audience-bow);
}

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

@media (max-width: 900px) {
	.shs-audience {
		padding-block: var(--shs-space-64);
	}

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

	/*
	 * Na úzkom okne sa oblúk nedá udržať — značka ide nad zoznam
	 * a skupiny sa zoradia pod seba na os.
	 */
	.shs-audience__ring {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--shs-space-42);
		margin-top: var(--shs-space-48);
	}

	.shs-audience__mark {
		grid-row: 1;
		grid-column: 1;
		width: 40%;
		margin-inline: auto;
	}

	.shs-audience__side,
	.shs-audience__side--start,
	.shs-audience__side--end {
		grid-row: auto;
		grid-column: 1;
		row-gap: var(--shs-space-24);
		font-size: var(--shs-fs-lead);
		text-align: center;
	}

	.shs-audience__side--start li:nth-child(2),
	.shs-audience__side--end li:nth-child(2) {
		margin-inline: 0;
	}
}