/* Balón Kubo a jeho kamaráti — podstránka ku knihe
   Písané mobile-first, desktopové rozloženie sa zapína od 900 px. */

:root {
	--papier: #FCFAF6;
	--papier-tmavsi: #FFF0C9;
	--atrament: #1E1B18;
	--tyrkys: #1AA0C7;
	--tyrkys-tmavy: #14738F;
	--koral: #FF6B4A;
	--zlta: #FFC233;
	--okrova: #C9911B;
	--zelena: #3FA76A;
	--ruzova: #D4479A;
	--pas: 960px;
	--okraj: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--atrament);
	font-family: "Karla", "Segoe UI", system-ui, sans-serif;
	font-size: 20px;
	line-height: 1.65;
	text-wrap: pretty;
}

h1, h2, h3 {
	margin: 0;
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-weight: 700;
	line-height: 1.05;
	text-wrap: balance;
}

p, blockquote, dl { margin: 0; }

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

a { color: var(--tyrkys); text-decoration: none; }
a:hover { color: var(--tyrkys-tmavy); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--koral); outline-offset: 3px; }

/* odkaz pre klávesnicu, viditeľný až pri zameraní */
.preskoc {
	position: absolute;
	left: -9999px;
}
.preskoc:focus {
	left: 8px;
	top: 8px;
	z-index: 10;
	background: var(--atrament);
	color: var(--papier);
	padding: 10px 16px;
}

/* ---------- spoločné prvky ---------- */

.cislo {
	font-size: 15px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tyrkys);
}
.cislo--1 { color: var(--koral); }
.cislo--2 { color: var(--tyrkys); }
.cislo--3 { color: var(--okrova); }
.cislo--4 { color: var(--zelena); }
.cislo--5 { color: var(--ruzova); }

/* farebná linka pod nadpisom sekcie */
.linka {
	display: block;
	width: 48px;
	height: 6px;
	background: var(--tyrkys);
}
.linka--1 { background: var(--koral); }
.linka--2 { background: var(--tyrkys); }
.linka--3 { background: var(--okrova); }
.linka--4 { background: var(--zelena); }
.linka--5 { background: var(--ruzova); }
.linka--zlta { background: var(--zlta); }

.drobne { font-size: 17px; line-height: 1.6; color: rgba(30, 27, 24, .55); }
.citat { font-size: 17px; font-style: italic; line-height: 1.55; color: rgba(30, 27, 24, .6); }

.uvodzovka {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 27px;
	line-height: 1.5;
}

.tlacidlo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	background: var(--koral);
	color: #FFFFFF;
	font-size: 16px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.tlacidlo:hover { background: #E2543A; color: #FFFFFF; }

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

.hlavicka { border-bottom: 1px solid rgba(30, 27, 24, .18); }

.hlavicka__pas {
	max-width: var(--pas);
	margin: 0 auto;
	padding: 0 var(--okraj);
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.znacka {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 23px;
	font-weight: 700;
	color: var(--atrament);
}

.menu-prepinac {
	width: 44px;
	height: 44px;
	margin-right: -10px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--atrament);
	cursor: pointer;
}

.menu {
	display: none;
	width: 100%;
	flex-direction: column;
	padding-bottom: 12px;
}
.menu--otvorene { display: flex; }
.menu a {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--atrament);
	font-size: 19px;
}
.menu a:hover { color: var(--tyrkys); }

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

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

.hero__obsah {
	position: relative;
	max-width: var(--pas);
	margin: 0 auto;
	padding: 40px var(--okraj);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* balóny z detských kresieb; na mobile nad textom, na desktope vpravo vedľa nadpisu */
.hero__balony {
	position: relative;
	width: min(300px, 70%);
	aspect-ratio: 800 / 760;
	margin: 24px var(--okraj) -16px auto;
	background: url("img/iskry.webp?v=1c3b2d1b") 0 0 / 100% no-repeat;
}

/* každý balón sa vznáša a kolíše vlastným tempom; dve animácie s rôznou dĺžkou
   (translate a rotate sú samostatné vlastnosti) sa neopakujú v rovnakom rytme */
.balon {
	position: absolute;
	transform-origin: 50% 20%;
	animation:
		vznasanie var(--hore) ease-in-out var(--posun) infinite alternate,
		kolisanie var(--kyv) ease-in-out var(--posun) infinite alternate;
	will-change: translate, rotate;
}
.balon--gerda { left: 56.88%; top: 0; width: 22.88%; --hore: 4.3s; --kyv: 6.1s; --posun: -2s; }
.balon--duha { left: 5%; top: 3.95%; width: 50.88%; --hore: 5.2s; --kyv: 7.4s; --posun: 0s; }
.balon--sky { left: 63.12%; top: 41.45%; width: 33.38%; --hore: 4.7s; --kyv: 5.6s; --posun: -3.5s; }

@keyframes vznasanie {
	from { translate: 0 4px; }
	to { translate: 0 -8px; }
}

@keyframes kolisanie {
	from { rotate: -2deg; }
	to { rotate: 2deg; }
}

.stitok {
	font-size: 15px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--koral);
}

.hero h1 { font-size: clamp(62px, 10.5vw, 124px); letter-spacing: -.02em; }
.hero h1 em { font-style: italic; }

/* päťfarebný pás pod nadpisom */
.duha { display: flex; height: 8px; }
.duha i { flex-grow: 1; }
.duha i:nth-child(1) { background: var(--koral); }
.duha i:nth-child(2) { background: var(--zlta); }
.duha i:nth-child(3) { background: var(--tyrkys); }
.duha i:nth-child(4) { background: var(--zelena); }
.duha i:nth-child(5) { background: var(--ruzova); }

.perex {
	font-family: "Cormorant Garamond", Garamond, Georgia, serif;
	font-size: 27px;
	line-height: 1.45;
}

.hero__akcia { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero__akcia .tlacidlo { width: 100%; }

/* ---------- sekcie ---------- */

.sekcia { }

/* pás: obsah sekcie zarovnaný na stred, pozadie ide cez celé okno */
.pas {
	max-width: var(--pas);
	margin: 0 auto;
	padding: 40px var(--okraj);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.sekcia:not(.sekcia--zlta):not(.sekcia--tyrkys) .pas {
	border-top: 1px solid rgba(30, 27, 24, .18);
}

.sekcia__hlava { display: flex; flex-direction: column; gap: 14px; }
.sekcia__hlava h2 { font-size: 36px; }

.sekcia__telo { display: flex; flex-direction: column; gap: 18px; }
.sekcia__telo h3 { font-size: 33px; }

.sekcia--zlta { background: var(--papier-tmavsi); }
.sekcia--tyrkys { background: var(--tyrkys); color: var(--papier); }
.sekcia--tyrkys h2 { color: var(--papier); }
.sekcia--tyrkys .cislo { color: rgba(252, 250, 246, .7); }
.sekcia--tyrkys a { color: var(--papier); border-bottom: 1px solid rgba(252, 250, 246, .6); }
.sekcia--tyrkys a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.temy {
	list-style: none;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid rgba(30, 27, 24, .18);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	font-size: 18px;
	line-height: 1.45;
}

.postavy { list-style: none; margin: 0; padding: 0; }
.postavy li {
	padding: 18px 0;
	border-top: 1px solid rgba(30, 27, 24, .18);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.postavy h3 { font-size: 29px; }
.postavy p:last-child { font-size: 18px; line-height: 1.6; color: rgba(30, 27, 24, .72); }

.galeria { display: grid; gap: 12px; }
.galeria img { width: 100%; height: 220px; object-fit: cover; }
.galeria img:nth-child(n + 2) { height: 130px; }

.autorka__foto { width: 100%; }

.udaje { margin: 0; }
.udaje dt {
	padding-top: 16px;
	border-top: 1px solid rgba(252, 250, 246, .4);
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(252, 250, 246, .75);
}
.udaje dd {
	margin: 0;
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
}
.udaje dd a,
.udaje dd span {
	min-height: 44px;
	display: flex;
	align-items: center;
	align-self: flex-start;  /* aby sa podčiarknutie neťahalo cez celý stĺpec */
}
.udaje__hlavny { font-size: 23px; }
.udaje__odkazy { gap: 0; }

/* ---------- päta ---------- */

.pata {
	max-width: var(--pas);
	margin: 0 auto;
	padding: 28px var(--okraj) 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.pata img { width: 160px; height: auto; }
.pata p { font-size: 18px; line-height: 1.55; }

/* ---------- tablet ---------- */

@media (min-width: 600px) {
	:root { --okraj: 40px; }

	.galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.galeria img { height: 200px; }
	.galeria img:nth-child(n + 2) { height: 200px; }
	.galeria img:first-child { grid-column: 1 / -1; height: 280px; }

	.temy { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.autorka__foto { width: 320px; }

	.udaje {
		display: grid;
		grid-template-columns: 200px 1fr;
		column-gap: 28px;
	}
	.udaje dd {
		padding-top: 16px;
		border-top: 1px solid rgba(252, 250, 246, .4);
	}
}

/* ---------- desktop ---------- */

@media (min-width: 900px) {
	:root { --okraj: 72px; }


	.hlavicka__pas { min-height: 76px; flex-wrap: nowrap; }
	.znacka { font-size: 24px; }
	.menu-prepinac { display: none; }
	.menu {
		display: flex;
		flex-direction: row;
		gap: 30px;
		width: auto;
		padding: 0;
	}
	.menu a {
		min-height: 0;
		font-size: 15px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: rgba(30, 27, 24, .7);
	}

	.hero__obsah { padding-block: 56px; gap: 28px; }
	.hero__balony {
		position: absolute;
		top: 36px;
		right: max(16px, calc(50% - 700px));
		width: clamp(280px, 31vw, 400px);
		margin: 0;
	}
	.hero__spodok {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: 56px;
		align-items: end;
	}
	.perex { font-size: 29px; max-width: 34ch; }
	.hero__akcia { gap: 14px; }
	.hero__akcia .tlacidlo { width: auto; }

	.pas {
		padding-block: 56px;
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 56px;
		align-items: start;
	}
	.sekcia__hlava h2 { font-size: 34px; }
	.sekcia__telo { gap: 24px; }
	.sekcia--autorka .pas { grid-template-columns: 200px 215px 1fr; }

	.uvodzovka { font-size: 32px; }

	.postavy li {
		display: grid;
		grid-template-columns: 44px 280px 1fr;
		gap: 24px;
		align-items: baseline;
		padding: 22px 0;
	}
	.postavy h3 { font-size: 31px; }

	.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.galeria img,
	.galeria img:first-child,
	.galeria img:nth-child(n + 2) { height: 250px; grid-column: auto; }

	.sekcia--autorka { grid-template-columns: 200px 215px 1fr; }
	.autorka__foto { width: 100%; }

	.pata {
		flex-direction: row;
		align-items: center;
		gap: 28px;
		padding-block: 32px 48px;
	}
	.pata img { width: 176px; margin-inline: 16px; flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.balon { animation: none; }
}