/* Sekcie Realizácie a Služby — rozcestník, výpis, detail. */

/**
 * Astra má .ast-container ako flex kontajner. Bez width:100% by sa náš
 * blok scvrkol na šírku obsahu a zostal prilepený vľavo — preto je tento
 * riadok to jediné, čo drží celú stránku vycentrovanú.
 */
.hgl-r {
	width: 100%;
	/**
	 * Flex položka má implicitne min-width:auto a odmieta sa zmenšiť pod
	 * šírku svojho obsahu — na úzkych displejoch by preto roztiahla stránku.
	 */
	min-width: 0;
	/**
	 * Pruhy v záhlaví sú absolútne umiestnené a na úzkych displejoch
	 * presahujú vpravo — bez tohto by rozťahovali celý dokument a stránka
	 * by sa dala posúvať do strany. clip (nie hidden) preto, lebo presah
	 * pod spodnú hranu záhlavia musí zostať viditeľný.
	 */
	overflow-x: clip;
}

.hgl-r__obal {
	max-width: 1240px;
	margin-right: auto;
	margin-left: auto;
	padding: 3.5rem 20px 4rem;
}
.hgl-r__obal a {
	text-decoration: underline;
}

.hgl-r__nadpis {
	text-align: center;
	margin-bottom: 1rem;
}

.hgl-r__text {
	max-width: 900px;
	margin: 0 auto 3.5rem;
	text-align: center;
}

/* ----------------------------------------------------------- Záhlavie */

/**
 * Kópia záhlavia zo stránky Služby: fotka cez celú šírku, zaoblené dolné
 * rohy a žltý nadpis. Horný padding je veľký zámerne — hlavička webu je
 * priehľadná a leží nad obrázkom, bez neho by nadpis končil pod menu.
 */
.hgl-r-hero {
	position: relative;
	padding: 240px 20px 160px;
	border-radius: 0 0 80px 80px;
	background-color: #14532d;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 70px;
}

.hgl-r-hero__obal {
	max-width: 1780px;
	margin: 0 auto;
}

.hgl-r-hero__nadpis {
	margin: 0;
	color: #ffcd00;
	font-weight: 700;
	line-height: 1.08;
	/* Menej než na Službách — tam je nadpis jedno slovo, tu sú tri riadky textu. */
	font-size: clamp(2.25rem, 4.6vw, 4.25rem);
}

/* Pruhy presahujú cez spodnú hranu záhlavia, preto margin-bottom vyššie. */
.hgl-r-hero__pruhy {
	position: absolute;
	right: 100px;
	bottom: -51px;
	line-height: 0;
	pointer-events: none;
}

.hgl-r-hero__pruhy img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.hgl-r-hero {
		padding: 240px 40px 160px;
		border-radius: 0 0 56px 56px;
	}

	.hgl-r-hero__pruhy {
		right: 35px;
		bottom: -34px;
		max-width: 45%;
	}
}

@media (max-width: 600px) {
	.hgl-r-hero {
		padding: 140px 24px 80px;
		border-radius: 0 0 32px 32px;
		margin-bottom: 48px;
	}

	.hgl-r-hero__pruhy {
		right: 20px;
		bottom: -22px;
		max-width: 55%;
	}
}

/* ------------------------------------------------------ Posuvník log */

.hgl-r-loga {
	overflow: hidden;
	margin-bottom: 3.5rem;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hgl-r-loga__pas {
	display: flex;
	align-items: center;
	gap: 3.5rem;
	width: max-content;
	animation: hgl-r-posun 45s linear infinite;
}

.hgl-r-loga:hover .hgl-r-loga__pas {
	animation-play-state: paused;
}

.hgl-r-loga__polozka img {
	display: block;
	width: auto;
	height: 58px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s, opacity 0.2s;
}

.hgl-r-loga__polozka img:hover {
	filter: none;
	opacity: 1;
}

@keyframes hgl-r-posun {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hgl-r-loga__pas {
		animation: none;
	}

	.hgl-r-loga {
		overflow-x: auto;
	}
}

/* ------------------------------------------- Zobraziť viac (výpis) */

/* Dlaždice nad limitom sú v HTML prítomné, len skryté — tlačidlo ich odkryje. */
.hgl-r-dlazdica.is-nad-limit {
	display: none;
}

.hgl-r-viac {
	margin: 2.5rem 0 0;
	text-align: center;
}

/* Explicitne — niektoré témy prebíjajú atribút hidden vlastným display. */
.hgl-r-viac[hidden] {
	display: none;
}

.hgl-r-viac__tlacidlo {
	display: inline-block;
	padding: 14px 34px;
	border: 0;
	border-radius: 999px;
	background: #183f22;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s;
}

.hgl-r-viac__tlacidlo:hover,
.hgl-r-viac__tlacidlo:focus-visible {
	background: #14532d;
}

/* ------------------------------------------------------------ Video */

.hgl-r__podnadpis {
	text-align: center;
	margin: 0 0 1.5rem;
}

.hgl-r-video {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 900px;
	margin: 0 auto 3.5rem;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}

.hgl-r-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------- Galéria */

.hgl-r-galeria {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 1024px) {
	.hgl-r-galeria {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hgl-r-galeria__polozka {
	display: block;
	padding: 0;
	border: 0;
	cursor: zoom-in;
	background: #ececec;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.hgl-r-galeria__polozka img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.hgl-r-galeria__polozka:hover img {
	transform: scale(1.04);
}

/* --------------------------------------------------------- Lightbox */

.hgl-r-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 4rem 1rem;
	background: rgba(0, 0, 0, 0.9);
}

.hgl-r-lightbox[hidden] {
	display: none;
}

body.hgl-r-lightbox-otvoreny {
	overflow: hidden;
}

.hgl-r-lightbox__obrazok {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hgl-r-lightbox__zavriet,
.hgl-r-lightbox__sipka {
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	line-height: 1;
}

.hgl-r-lightbox__zavriet {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	font-size: 1.8rem;
}

.hgl-r-lightbox__sipka {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	font-size: 2.2rem;
}

.hgl-r-lightbox__zavriet:hover,
.hgl-r-lightbox__sipka:hover {
	background: rgba(255, 255, 255, 0.28);
}

.hgl-r-lightbox__sipka[hidden] {
	display: none;
}

/* ------------------------------------------------- Detail služby */

/* Redakčný text z editora — rovnaká šírka ako perex, ale zarovnaný vľavo. */
.hgl-r__obsah {
	max-width: 900px;
	margin: 0 auto 3.5rem;
}

.hgl-r__obsah > *:last-child {
	margin-bottom: 0;
}

.hgl-r-formular {
	max-width: 900px;
	margin: 0 auto;
}

/**
 * Odsadenie formulára od galérie.
 *
 * Zámerne cez susedný selektor a nie ako margin-bottom na galérii: na
 * detaile realizácie je galéria posledný prvok a spodný okraj by jej
 * vyrobil prázdne miesto pod obsahom. A nie ako margin-top na formulári,
 * lebo perex aj text z editora už svoj spodný okraj majú — pri službe bez
 * galérie by vznikla dvojitá medzera.
 */
.hgl-r-galeria + .hgl-r-formular {
	margin-top: 3.5rem;
}

/* Medzera medzi galériou a časté otázky na detaile služby. */
.hgl-r-galeria + .hgl-r-faq {
	margin-top: 3.5rem;
}

/* ------------------------------------------- Výpis s textom pod gridom */

/**
 * Text, ktorý nasleduje až za dlaždicami.
 *
 * Horný okraj je tu a nie ako margin-bottom na gride: grid je na väčšine
 * výpisov posledný prvok a spodný okraj by pod ním vyrobil prázdne miesto.
 */
.hgl-r__obsah--pod {
	margin-top: 3.5rem;
}

/* Rovnaká šírka ako text nad ním, aby stĺpec stránky nepreskakoval. */
.hgl-r-faq {
	max-width: 900px;
	margin: 0 auto;
}

/**
 * Odsadenie len po gride, po FAQ a po formulári — teda po prvkoch, ktoré
 * vlastný spodný okraj nemajú. Textové bloky ho už majú v .hgl-r__obsah
 * a pridať ho aj tu by medzeru zdvojilo.
 *
 * Dvojica FAQ a formulár je tu v oboch poradiach zámerne: prepínač na
 * službe ich vie prehodiť a medzera musí sedieť tak aj tak.
 */
.hgl-r-grid + .hgl-r-faq,
.hgl-r-grid + .hgl-r-formular,
.hgl-r-faq + .hgl-r-formular,
.hgl-r-formular + .hgl-r-faq {
	margin-top: 3.5rem;
}