@charset "utf-8";

/* =========================================================
   INOX-POOL.EU — hlavní styl
   ========================================================= */

@view-transition { navigation: auto; }

:root{
	/* --color-primary:   #144073; */
	--color-primary:   #0062d3;
	--color-deep:      #0b2946;
	--color-secondary: #d7dadf;
	--color-link:      #008cff;
	--color-text:      #2b3440;
	--color-line:      #4d688b8a;

	--gap:    calc(20px + 2vw);
	--margin: calc(var(--gap) * 2);

	--font-size:    calc(15px + 0.4vw);
	--font-display: 'Darker Grotesque', 'Space Grotesk', sans-serif;
	--font-text:    'DM Sans', -apple-system, 'Segoe UI', sans-serif;

	--heroratio: 16/7;
}

*{ box-sizing: border-box; }

html{
	margin: 0;
	padding: 0;
	min-height: 100%;
	overflow-x: hidden;
	font-size: var(--font-size);
	scroll-behavior: smooth;
	background: rgb(195, 202, 214);
}

body{
	font-family: var(--font-display);
	color: var(--color-primary);
	background: linear-gradient(317deg, rgba(215,218,223,1) 0%, rgba(247,247,247,1) 49%, rgb(176, 185, 201) 100%);
	background-attachment: fixed;
	margin: 0;
	padding: var(--gap) var(--margin);
	min-height: 100%;
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
}


/* ---------- typografie ---------- */

h1, h2, h3, h4, p{ margin: calc(var(--gap) / 1.5) 0; }

h1{ font-size: 2em; margin: 0; letter-spacing: -0.025em; }

h2{
	font-size: 4.75em;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.025em;
	padding-top: var(--gap);
	/* max-width: 22ch; */
}

h3{ font-size: 3em;   font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
h4{ font-size: 2em;   font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;  }
h5{ font-size: 1.5em; font-weight: 600; line-height: 1.2; margin: 0 0 .4em;         }

p, li, td, th, dd, dt, label, input, textarea{
	font-family: var(--font-text);
	font-weight: 400;
}

p{
	max-width: 74ch;
	line-height: 1.6;
	color: var(--color-text);
	font-size: .82em;
}

.lead{
	font-size: 1.05em;
	line-height: 1.5;
	color: var(--color-text);
	max-width: 60ch;
}

.subtitle{
	font-family: var(--font-text);
	font-size: .8em;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-text);
}

strong{ font-weight: 700; }

a{
	color: var(--color-primary);
	text-decoration: none;
	transition: all .3s ease;
	position: relative;
}
a:hover{ color: var(--color-link); }

a:after{
	content: "";
	display: block;
	border-bottom: 1px solid var(--color-link);
	width: 0;
	transition: all .3s ease;
	margin-top: .15em;
	position: absolute;
	left: 0;
}
a:hover:after{ width: 100%; }
a.notext:after{ display: none; }

img, iframe, video{
	max-width: 100%;
	height: auto;
	display: block;
}

hr{
	border: none;
	border-top: 1px solid var(--color-line);
	opacity: .5;
	height: 1px;
	margin: calc((var(--gap) / 2)) 0;
}


/* ---------- layout ---------- */

.layout{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content auto min-content;
	grid-gap: var(--gap);
	min-height: 100%;
	margin: auto;
	max-width: 2000px;
}

/* obsah stránky si drží stejné rozestupy jako zbytek layoutu */
main{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: var(--gap);
	align-content: start;
}

section{
	position: relative;
	overflow-x: hidden;
}

/* odkaz „přejít k obsahu“ — viditelný jen při tabování */
.skip:focus{
	position: fixed;
	top: 0; left: 0;
	width: auto; height: auto;
	clip: auto;
	margin: 0;
	padding: .6em 1em;
	background: var(--color-primary);
	color: #fff;
	z-index: 2000;
}

.my{ margin-top: var(--gap);  margin-bottom: var(--gap); }
.py{ padding-top: var(--gap); padding-bottom: var(--gap); }

.grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: var(--gap);
}
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-4{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.narrow{ max-width: 62ch; }


/* ---------- animace ---------- */

@keyframes load{
	from{ transform: translateY(40px); opacity: 0; }
	to  { transform: translateY(0);    opacity: 1; }
}


/* ---------- hlavička ---------- */

header{
	align-items: center;
	gap: var(--gap);
}

header h1{
	overflow: hidden;
	position: relative;
	line-height: 1.4;
	font-size: 1.75em;
	font-weight: 700;
	letter-spacing: -0.01em;
}
header h1 a{ display: block; animation: load .5s .25s both; }
header h1 a:after{ display: none; }
header h1 sup{ font-weight: 500; font-size: 1rem; }

nav{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6rem;
	animation: load .5s .75s both;
	font-weight: 600;
	font-size: .9em;
	text-transform: uppercase;
}

nav a.active{ color: var(--color-link); }
nav a.active:after{ width: 100%; }

.lang{
	border: 1px solid;
	padding: .17em .5em .08em;
	font-weight: 600;
}
.lang:after{ display: none; }



/* ---------- hero ---------- */

.hero{
	margin-left: calc(var(--margin) * -1);
	margin-right: calc(var(--margin) * -1);
}

.owl-carousel{
	position: relative;
	overflow-x: hidden;
	aspect-ratio: var(--heroratio);
}
.owl-carousel .owl-stage-outer{
	background: var(--color-primary);
	width: 100%;
	height: 100%;
}

.item{ position: relative; overflow: hidden; }

.item .bg{
	aspect-ratio: var(--heroratio);
	width: 100%;
	height: auto;
	object-fit: cover;
}

.item::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(45deg, #051f3ecc, transparent 70%);
}

.item-caption{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	padding: 0 var(--margin) 0 calc(var(--margin) * 1.5);
	color: #fff;
	animation: load .6s 1.2s both;
	z-index: 2;
	pointer-events: none;
	text-shadow: 0 2px 24px rgba(5,31,62,.45);
}
.item-caption h2{
	margin: .3em 0 0;
	padding: 0;
	line-height: .95;
	max-width: 18ch;
	font-weight: 500;
}
.item-caption .subtitle{ opacity: .9; }

.owl-dots{
	position: absolute;
	bottom: 6%;
	left: 0;
	right: 0;
	animation: load 1s 1.6s both;
}
.owl-theme .owl-dots .owl-dot span{ background: #ffffff88; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{ background: #fff; }

.owl-nav{
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	z-index: 1;
	animation: load .5s 1.8s both;
	pointer-events: none;
}
.owl-nav span{
	aspect-ratio: 1/1;
	font-size: 1.5em;
	background-color: var(--color-primary);
	opacity: .75;
	margin: 0 -5px;
	color: #fff;
	display: flex;
	height: auto;
	align-items: center;
	line-height: 1;
	justify-content: center;
	padding: 1rem;
	font-family: math;
	transition: all .25s ease-in;
	pointer-events: all;
}
.owl-nav span:hover{ opacity: 1; background: #fff; color: var(--color-primary); }

/* stránkový hero (podstránky) */
.pagehead{ padding-bottom: var(--gap); }
.pagehead h2{ padding-top: 0; }


/* ---------- tmavý blok ---------- */

.services{
	position: relative;
	background-color: var(--color-primary);
	color: #fff;
	padding: calc(var(--gap) * 2.5) var(--margin) calc(var(--gap) * 2);
	margin: calc(var(--gap) * -3) calc(var(--margin) * -1) 0;
}
.services h2{ padding-top: 0; }
.services > p{ color: #dbe4f0; }
.services > p strong{ color: #fff; }
.services a{ color: #fff; }
.services a:hover{ color: var(--color-secondary); }


/* ---------- karty ---------- */

.card{ background-color: #fff; }
.card a,
.card > div{
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	transition: all .3s ease-in;
	overflow: hidden;
}
.card a:hover{ background-color: var(--color-secondary); }
.card a:hover img{ transform: scale(1.06); }
.card a:hover:after{ display: none; }

.card img{ transition: all .4s ease-in; display: block; width: 100%; }

.card h3,
.card h4{
	margin: 0;
	font-size: 1.75em;
	padding: var(--gap) var(--gap) 0;
	font-weight: 500;
	line-height: 1.1;
	color: var(--color-primary);
}
.card p{
	padding: 0 var(--gap) var(--gap);
	margin: calc(var(--gap) / 2) 0 0;
	flex: 1;
}


/* ---------- typy bazénů ---------- */

.type-img{
	width: 100%;
	aspect-ratio: 3/2;
	object-fit: cover;
}
.type-img + h3{ margin-top: calc(var(--gap) / 2); }


/* ---------- výhody ---------- */

.benefit{
	border-top: 1px solid var(--color-line);
	padding-top: calc(var(--gap) / 2.5);
}
.benefit .num{
	display: block;
	font-size: 2.6em;
	font-weight: 400;
	line-height: .9;
	letter-spacing: -0.03em;
	margin-bottom: .15em;
	opacity: .3;
	color: var(--color-text);
}
.benefit h4{
	font-size: 1.45em;
	margin: 0 0 .35em;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .01em;
	text-transform: uppercase;
}
.benefit p{ margin: 0; font-size: .78em; }

/* kompaktní varianta bez popisků (úvodní stránka) */
.benefit.compact{ padding-bottom: calc(var(--gap) / 3); }
.benefit.compact h4{ margin: 0; }

.benefits{ grid-template-columns: repeat(2, 1fr); }
@media screen and (min-width: 1100px){
	.benefits{ grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 560px){
	.benefits{ grid-template-columns: 1fr; }
}


/* ---------- tabulka ---------- */

.table-wrap{ overflow-x: auto; }

table{
	border-collapse: collapse;
	width: 100%;
	max-width: 620px;
	font-size: .82em;
}
th, td{
	text-align: left;
	padding: .75em 1em .75em 0;
	border-bottom: 1px solid var(--color-line);
	color: var(--color-text);
}
th{
	font-weight: 600;
	color: var(--color-primary);
	font-size: .95em;
	letter-spacing: .04em;
	text-transform: uppercase;
}
td:last-child, th:last-child{ text-align: right; padding-right: 0; white-space: nowrap; }


/* ---------- seznamy ---------- */

ul.plain{ list-style: none; padding: 0; margin: calc(var(--gap) / 2) 0; }
ul.plain li{
	padding: .65em 0 .65em 1.6em;
	position: relative;
	font-size: .82em;
	line-height: 1.5;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-line);
	max-width: 74ch;
}
ul.plain li:before{
	content: "";
	position: absolute;
	left: 0;
	top: 1.4em;
	width: .7em;
	height: 1px;
	background: var(--color-primary);
}

.pros li:before{ background: #1a8f5f; }
.cons li:before{ background: #b4622a; }


/* ---------- galerie (blueimp) ---------- */

.bi-gallery{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.bi-gallery > a{
	display: block;
	overflow: hidden;
	position: relative;
	background-color: var(--color-primary);
	transition: all .2s ease-in;
	aspect-ratio: 3/2;
}
.bi-gallery > a img{
	transition: all .3s ease-in;
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.bi-gallery > a:hover img{ transform: scale(1.08); opacity: .55; }
.bi-gallery > a:after{ display: none; }

.blueimp-gallery > .close,
.blueimp-gallery > .title{ font-size: 2em; }
#blueimp-gallery a:after{ display: none; }


/* ---------- tlačítko ---------- */

.button{
	display: inline-block;
	background-color: var(--color-primary);
	color: #fff;
	padding: calc(var(--gap) / 2.5) var(--gap);
	text-align: center;
	margin: calc(var(--gap) / 2) 0;
	transition: all .3s ease-in;
	font-weight: 600;
	font-size: 1.05em;
}
.button:hover{ background-color: var(--color-secondary); color: var(--color-primary); }
.button:after{ display: none; }

.button-light{ background: #fff; color: var(--color-primary); }
.button-light:hover{ background: var(--color-secondary); }


/* ---------- kontaktní blok ---------- */

.contact-box{
	border-top: 1px solid var(--color-line);
	padding-top: calc(var(--gap) / 2);
}
.contact-box p{ font-size: .85em; }
.contact-box .big{
	font-family: var(--font-display);
	font-size: 1.6em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-primary);
	margin: .2em 0;
}


/* ---------- pomocné třídy ---------- */

small,
.caption{
	font-family: var(--font-text);
	font-size: .72em;
	color: #5b6675;
	display: block;
	margin-top: .5em;
}

.visually-hidden{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* dočasné místo pro text, který ještě dodá klient — po doplnění třídu smazat */
.todo,
.todo li{
	background: #fff6d8;
	box-shadow: 0 0 0 .35em #fff6d8;
	color: #7a5a00;
	padding: 0.5em 1em;
}
.todo li:before{ background: #c99a00; }


/* ---------- patička ---------- */

footer{
	border-top: 1px solid var(--color-line);
	padding-top: var(--gap);
	animation: load 1s .9s both;
	font-size: .95em;
	gap: var(--gap);
}
footer p{ margin: 0; font-family: var(--font-text); font-size: .8em; }
footer nav{ animation: none; font-size: .95em; gap: 1.2rem; }


/* ---------- zpět nahoru ---------- */

#backtop{
	position: fixed;
	bottom: 40px;
	right: 14px;
	background-color: var(--color-primary);
	color: #fff;
	text-align: center;
	transition: all .3s ease-in;
	z-index: 1000;
	border-radius: 200px;
	font-size: 2rem;
	aspect-ratio: 1/1;
	width: 2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, background-color .3s ease, color .3s ease;
}
#backtop:hover{ background-color: var(--color-secondary); color: var(--color-primary); }
#backtop:after{ display: none; }


/* =========================================================
   responsivita
   ========================================================= */

@media screen and (min-width: 600px){
	header, footer{ display: flex; justify-content: space-between; }
}

@media screen and (max-width: 900px){
	:root{
		--gap: calc(11px + 2vw);
		--font-size: calc(15px + 0.3vw);
		--margin: calc(var(--gap) * 1.5);
		--heroratio: 16/14;
	}

	h2, .item-caption h2{ font-size: 2.6em; max-width: 90%; }
	h3{ font-size: 2.2em; }
	h4{ font-size: 1.6em; }

	header{ display: block; }
	nav{ gap: 1rem; margin: 1rem 0; font-size: 1em; }

	.grid-2{ grid-template-columns: 1fr; }

	.item-caption{ padding: 0 var(--margin); }

	.services{ margin-top: calc(var(--gap) * -2); }

	#backtop{ bottom: 16px; font-size: 1.6rem; }
}

@media screen and (min-width: 1900px){
	:root{ --margin: calc(var(--gap) * 3); }
}

@media print{
	.hero, nav, #backtop, .owl-nav, .owl-dots{ display: none; }
	body{ background: #fff; }
}