/* ==========================================================================
   KONTAKT

   Mapa vľavo, pieskový panel s údajmi vpravo. Vodoznak v pozadí je ten
   istý znak ako v logu. Dizajn je kreslený na 1728 × 770 px.
   ========================================================================== */

.shs-contact {
	display: grid;
	grid-template-columns: 47.7% 52.3%;

	/*
	 * Výšku drží mapa, nie text — pomer 770 : 1728 je z dizajnu. Strop
	 * bráni tomu, aby sa sekcia na širokom monitore roztiahla donekonečna.
	 */
	min-height: min(44.56vw, 770px);
	color: var(--shs-brand);
	background: var(--shs-cream);
}

/* ---- Mapa --------------------------------------------------------------- */

.shs-contact__map {
	position: relative;
	display: block;
	align-self: stretch;
	min-height: 420px;
	overflow: hidden;
	background: var(--shs-cream);
}

/*
 * Vložená mapa je sýto farebná a vedľa tlmenej palety webu pôsobí ako
 * cudzí prvok. `multiply` ju vloží do krémového podkladu a odfarbenie
 * jej zoberie modrú — zostane čitateľná, ale prestane kričať.
 */
.shs-contact__map iframe,
.shs-contact__map img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	filter: grayscale(0.55) contrast(0.92) brightness(1.04);
	mix-blend-mode: multiply;
}

/* ---- Panel -------------------------------------------------------------- */

.shs-contact__panel {
	position: relative;
	overflow: hidden;
	background: color-mix(in srgb, var(--shs-sand) 55%, var(--shs-cream));
}

/*
 * Vodoznak presahuje panel hore aj dole — je to výrez z väčšieho znaku,
 * nie zmenšený znak. Percentá sú prepočty z návrhu.
 */
.shs-contact__watermark {
	position: absolute;
	top: -4.4%;
	left: -1.1%;
	display: block;
	width: 98.9%;
	color: var(--shs-cream);
	opacity: 0.55;
	pointer-events: none;
}

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

.shs-contact__body {
	position: relative;
	z-index: 1;
	padding: calc(var(--shs-space-96) + var(--shs-space-19)) var(--shs-space-48)
		calc(var(--shs-space-96) + var(--shs-space-19)) 11.06%;
}

.shs-contact__text {
	max-width: 670px;
	margin-top: var(--shs-space-32);
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

/* ---- Údaje -------------------------------------------------------------- */

.shs-contact__details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--shs-space-42) var(--shs-space-32);
	max-width: 560px;
	margin: var(--shs-space-64) 0 0;
}

.shs-contact__item dt {
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-medium);
	line-height: var(--shs-lh-relaxed);
}

.shs-contact__item dd {
	margin: 0;
	font-size: var(--shs-fs-lead);
	font-weight: var(--shs-weight-light);
	line-height: var(--shs-lh-relaxed);
}

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

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

@media (max-width: 900px) {
	.shs-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.shs-contact__map {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}

	.shs-contact__body {
		padding: var(--shs-space-64) var(--shs-gutter);
	}

	.shs-contact__details {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--shs-space-32);
		margin-top: var(--shs-space-48);
	}

	.shs-contact__watermark {
		width: 140%;
	}
}

/* ==========================================================================
   VARIANT „IBA MAPA" — Kontakt

   Mapa bez panela, na šírku obsahu. Dizajn: 1437 × 511 px v ploche
   1728 px, teda odsadenie 146 px na každej strane.
   ========================================================================== */

.shs-contact--wide {
	display: block;
	min-height: 0;
	padding-block: clamp(var(--shs-space-48), 7vw, 121px);
	padding-inline: max(clamp(var(--shs-gutter), 8.45vw, 146px), calc((100% - var(--shs-container)) / 2 + 86px));
	background: var(--shs-white);
}

.shs-contact--wide .shs-contact__map {
	aspect-ratio: 1437 / 511;
	min-height: 0;
	background: var(--shs-mist);
}

@media (max-width: 900px) {
	/* Rovnaký okraj ako zvyšok webu — nie výpočet z návrhu pre desktop. */
	.shs-contact--wide {
		padding-inline: var(--shs-gutter);
	}

	.shs-contact--wide .shs-contact__map {
		aspect-ratio: 4 / 3;
	}
}

/*
 * Vlastná výška mapy z nastavení sekcie.
 *
 * V širokom rozložení (iba mapa) nahrádza pomer strán — dve pravidlá
 * výšky naraz by si protirečili a vyhral by pomer. V rozdelenom
 * rozložení je to spodná hranica: mapa tam stojí vedľa panela a musí
 * s ním ostať rovnako vysoká, inak by vedľa nej svietil krémový pás.
 */
.shs-contact--wide .shs-contact__map--fixed {
	aspect-ratio: auto;
	height: var(--shs-map-h);
}

.shs-contact--split .shs-contact__map--fixed {
	min-height: var(--shs-map-h);
}

@media (max-width: 900px) {
	.shs-contact--wide .shs-contact__map--fixed {
		aspect-ratio: auto;
		height: var(--shs-map-h-mobile, var(--shs-map-h));
	}

	.shs-contact--split .shs-contact__map--fixed {
		min-height: var(--shs-map-h-mobile, var(--shs-map-h));
	}
}