/* ==========================================================================
   Pelopones, Tolo, Řecko - responzivní verze
   Zachovává původní vzhled (modrá hlavička, písková hnědá, serifové nadpisy),
   ale pružně se přizpůsobí šířce okna. Bez frameworku, bez Prototype/Scriptaculous.
   ========================================================================== */

/* ---------- základ ---------- */
*, *::before, *::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background: #dfedf7;
	color: #000;
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, Tahoma, Verdana, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-wrap: break-word;
}
[hidden] { display: none !important; }
hr { display: none; }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; }
li { list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
.end { clear: both; height: 1px; font-size: 1px; line-height: 1px; visibility: hidden; }

/* odkazy */
a { color: #1d6a9c; text-decoration: underline; text-underline-offset: .15em; }
a:hover { color: #c00000; }
/* odkazy mimo tento web jsou označené šipkou (čtečky šipku nečtou) */
a[href^="http://"]::after,
a[href^="https://"]::after {
	content: "\00a0\2197";
	content: "\00a0\2197" / "";
	display: inline-block;
	font-size: .85em;
	text-decoration: none;
}

/* odkaz tvořený jen obrázkem šipku nepotřebuje */
a[href^="http://"]:has(> img)::after,
a[href^="https://"]:has(> img)::after { content: none; }

/* viditelné zaměření z klávesnice */
a:focus-visible, button:focus-visible {
	outline: 3px solid #0b3b66;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
	border-radius: 3px;
}
#head a:focus-visible, #foot a:focus-visible, .lb button:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px #0b3b66;
}
main:focus { outline: none; }

/* odkaz „Přeskočit na obsah“ - viditelný až po zaměření klávesnicí */
.skip-link {
	position: absolute;
	left: .5rem;
	top: -4rem;
	z-index: 300;
	padding: .6rem 1rem;
	background: #fff;
	color: #0b3b66;
	font-weight: bold;
	border-radius: 0 0 6px 6px;
}
.skip-link:focus { top: 0; }

/* ---------- hlavička ---------- */
#head {
	/* tmavě modré moře: přechod + opakující se vlny (img/vlny.svg), ukotvené ke spodku */
	background:
		url("../img/vlny.svg") repeat-x center bottom / 600px 160px,
		linear-gradient(180deg, #06182b 0%, #0a3052 55%, #0f4a78 100%);
	color: #fff;
}
#head .in {
	max-width: 820px;
	margin: 0 auto;
	padding: 28px 25px 64px;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) 200px;
	grid-template-rows: auto minmax(62px, auto) auto;
	grid-template-areas:
		"logo title menu"
		"logo sub   menu"
		"note note  menu";
	column-gap: 22px;
	align-content: start;
}
/* bílé logo (ozdobné, proto jako pozadí, ne obrázek v HTML) */
#head .in::before {
	content: "";
	grid-area: logo;
	align-self: start;
	width: 112px;
	height: 112px;
	background: url("../img/logo-bile.png") no-repeat center / contain;
}
h1, .subtitle {
	font-family: Georgia, "New York CE", utopia, serif;
	font-weight: normal;
	text-align: left;
	line-height: 1.25;
}
h1 {
	grid-area: title;
	align-self: end;
	font-size: clamp(1.7rem, 5.5vw, 2.5rem);
	color: #fff;
}
h1 a:link, h1 a:visited, h1 a:hover {
	color: #fff;
	text-decoration: none;
}
h1 a:hover { text-decoration: underline; }
.subtitle {
	grid-area: sub;
	align-self: start;
	font-size: clamp(1.1rem, 3.6vw, 1.5rem);
	color: #cfe6f7;
	padding-top: .15rem;
	text-wrap: balance;
}
.note {
	grid-area: note;
	align-self: start;
	margin-top: .9rem;
	padding: .5rem .85rem;
	background: rgba(4, 22, 40, .55);
	border-radius: 6px;
	color: #fff;
	font-size: .9rem;
	line-height: 1.5;
}

/* hlavní menu: jen text se šipkami */
.menu { grid-area: menu; padding-top: .3rem; }
.menu ul { display: grid; gap: 2px; font-weight: bold; }
.menu li { background: url("../img/headlink.gif") no-repeat 4px center; }
.menu li.active { background-image: url("../img/strong.gif"); }
.menu a, .menu strong {
	display: block;
	min-height: 40px;
	padding: .55rem .5rem .55rem 2.6rem;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1.45;
}
.menu a:link, .menu a:visited { color: #cfe6f7; text-decoration: underline; text-underline-offset: .2em; }
.menu a:hover { color: #fff; text-decoration-thickness: 2px; }

/* ---------- obsah ---------- */
#main {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
}
#main .in {
	border: 5px solid #d3e7f3;
	border-top: none;
	border-bottom: none;
	padding: 25px 35px;
}
#main::after { content: ""; display: block; clear: both; }
#main p { padding: 0 0 .95rem; }
#main a { text-underline-offset: .15em; }
#main p em { color: #2a7a73; font-style: normal; }

/* nadpisy v obsahu */
h2, h3 { font-family: Georgia, "New York CE", utopia, serif; font-weight: normal; line-height: 1.3; }
h2 {
	font-size: 1.7rem;
	color: #9a6234;
	min-height: 45px;
	padding: .35rem 0 .35rem 55px;
	margin-bottom: .9rem;
	background: url("../img/h3.gif") no-repeat left center;
}
h3 {
	clear: left;
	font-size: 1.3rem;
	color: #2a7a73;
	padding: 0 0 .4rem;
}

/* obrázky s popiskem (vpravo od textu) */
.imgr {
	float: right;
	width: 250px;
	margin: .3rem 0 1rem 1.25rem;
	text-align: center;
	color: #1f5f8a;
	font-size: .95rem;
	line-height: 1.4;
}
.imgr.none { clear: right; }
.imgr a.thumb { display: block; position: relative; cursor: pointer; width: fit-content; max-width: 100%; margin: 0 auto; }
.imgr img {
	display: block;
	box-sizing: content-box;
	max-width: calc(100% - 20px);
	margin: 0 auto;
	border: 10px solid #e2eff7;
	transition: border-color .15s ease;
}
/* rámeček po najetí myší nebo při fokusu na popisek ztmavne */
.imgr:hover img, .imgr:focus-within img { border-color: #8fbad6; }
.imgr .zoom {
	position: absolute;
	right: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: url("../img/lupa.gif") no-repeat;
	pointer-events: none;
}
.imgr figcaption { padding: .25rem .6rem .5rem; }
.imgr figcaption a {
	color: #1f5f8a;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
.imgr:hover figcaption a, .imgr figcaption a:hover, .imgr figcaption a:focus-visible {
	color: #0b3a5c;
	text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.imgr img { transition: none; }
}

/* malé obrázky vlevo (poděkování) */
#main p.imgl { float: left; margin: 0 1rem .6rem 0; padding: 0; }
#main p.imgl img {
	display: block;
	box-sizing: content-box;
	border: 10px solid #e2eff7;
}

/* stránkování cestopisu i galerie */
.pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .35rem;
	color: #1d5f8f;
}
.pages.bottom { clear: both; margin-top: .5rem; padding-top: .4rem; margin-bottom: 1.2rem; }
nav.pages:not(.bottom) { float: right; margin: 0 0 .6rem 1rem; }
.pages-label { margin-right: .35rem; }
.pages b { color: #000; }
.pages a, .pages strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	min-height: 2.4rem;
	padding: 0 .65rem;
	border-radius: 6px;
	line-height: 1.2;
}
.pages a {
	background: #e9f3fa;
	border: 1px solid #bcd9ec;
	font-weight: 600;
	text-decoration: none;
}
.pages a:hover { background: #d3e7f3; text-decoration: underline; }
.pages strong { background: #256aa4; color: #fff; }

/* fotogalerie: mřížka náhledů */
#gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem 1rem;
	align-items: start;
}
#gallery .imgr { float: none; width: auto; margin: 0; }
#gallery .imgr figcaption { padding-top: .35rem; }

/* odkazy (stránka Odkazy) */
#links li {
	position: relative;
	margin: 0 0 .9rem;
	padding: 0 0 0 1.35rem;
}
#links li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .6em;
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: #bf8a63;
}
#links li > a:first-child { font-size: 1.08em; }

/* „Mé blogy“ pod textem */
#more {
	clear: both;
	margin-top: .5rem;
	padding-top: .6rem;
	border-top: 1px solid #cecece;
}
.blogy { display: flex; flex-wrap: wrap; gap: .1rem 1.6rem; padding: 0 0 .95rem; }
.blogy a { display: inline-block; padding: .2rem 0; }
#more h2 {
	min-height: 0;
	padding: 0 0 .35rem;
	background: none;
	font-size: 1.3rem;
	color: #2a7a73;
}

/* ---------- patička ---------- */
#fav { color: #000; }
#fav .in {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
}
#fav p {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0;
	padding: 0 35px .8rem;
	border: 5px solid #d3e7f3;
	border-top: none;
	border-bottom: none;
}
#fav a, .print-btn, .share-btn { display: inline-block; padding: .35rem 0; }
.print-btn, .share-btn {
	font: inherit;
	color: #1d6a9c;
	background: url("../img/print.gif") no-repeat left center;
	border: 0;
	padding-left: 22px;
	text-decoration: underline;
	text-underline-offset: .15em;
	cursor: pointer;
}
.share-btn {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6a9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E") no-repeat left center / 16px 16px;
	padding-left: 24px;
}
.print-btn:hover, .share-btn:hover { color: #c00000; }
.share-msg { order: -1; flex-basis: 100%; text-align: right; font-size: .9rem; color: #1b5e20; }
.share-msg:empty { display: none; }

/* patička: tmavě modré moře s vlnkami (img/vlny-patka.svg) */
#foot {
	padding-top: 100px;
	background:
		url("../img/vlny-patka.svg") repeat-x center top / 600px 100px,
		linear-gradient(180deg, #0f4a78 100px, #06182b 100%);
	color: #cfe6f7;
}
#foot .in { max-width: 820px; margin: 0 auto; }
#foot .in p {
	margin: 0;
	padding: .5rem 1rem 1.2rem;
	text-align: center;
	color: #cfe6f7;
	font-size: .9rem;
}
#foot a:link, #foot a:visited { color: #e4f1fa; }
#foot a:hover { color: #fff; }

/* ---------- zvětšování fotografií (dialog) ---------- */
html.lb-open { overflow: hidden; }
.lb {
	width: 100%;
	max-width: 100vw;
	height: 100%;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
}
.lb::backdrop { background: rgba(6, 28, 48, .9); }
.lb-box {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	height: 100%;
	padding: .75rem .75rem 1rem;
}
.lb-fig {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	touch-action: pan-y;
}
.lb-fig img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 8px solid #3177ab;
	background: #3177ab;
	transition: opacity .15s;
}
.lb-fig img.loading { opacity: .35; }
.lb-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem 1rem;
	padding-top: .75rem;
}
.lb-meta { flex: 1 1 14rem; text-align: center; line-height: 1.4; }
.lb-title { font-weight: bold; }
.lb-count { display: block; font-size: .9rem; color: #cfe3f2; }
.lb-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0 1rem;
	font: inherit;
	font-weight: bold;
	color: #fff;
	background: #24567c;
	border: 2px solid #7ab0d4;
	border-radius: 6px;
	cursor: pointer;
}
.lb-btn:hover { background: #3177ab; }
.lb-close { position: absolute; top: .75rem; right: .75rem; z-index: 2; }

/* ==========================================================================
   Responzivita
   ========================================================================== */

/* tablet a menší: hlavička se skládá pod sebe, menu do dvou sloupců */
@media (max-width: 760px) {
	#head .in {
		padding: 20px 16px 52px;
		grid-template-columns: 76px minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"logo title"
			"logo sub"
			"note note"
			"menu menu";
		column-gap: 14px;
	}
	#head .in::before { width: 76px; height: 76px; }
	.note { margin-top: .8rem; }
	.menu { padding-top: .9rem; }
	.menu ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.menu a, .menu strong { overflow-wrap: anywhere; }
	.menu a, .menu strong { min-height: 44px; padding-top: .65rem; padding-bottom: .65rem; }
}

/* telefony: obrázky nad text, menší okraje */
@media (max-width: 640px) {
	body { font-size: 1rem; }
	#main .in { border-width: 0; padding: 18px 16px; }
	#fav p { border-width: 0; padding: 0 16px .8rem; }
	h2 { font-size: 1.45rem; padding-left: 52px; }
	.imgr {
		float: none;
		width: auto;
		max-width: 100%;
		margin: .4rem auto 1.1rem;
	}
	.imgr.none { clear: none; }
	nav.pages:not(.bottom) { float: none; margin: 0 0 .8rem; justify-content: flex-start; }
	.pages.bottom { justify-content: flex-start; }
	#gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .6rem; }
	#gallery .imgr img { width: calc(100% - 20px); }
	#gallery .imgr figcaption { font-size: .85rem; padding-left: .2rem; padding-right: .2rem; }
	.lb-fig img { border-width: 4px; }
	.lb-meta { order: -1; flex-basis: 100%; }
	.lb-btn { flex: 1 1 8rem; }
}

@media (max-width: 480px) {
	.menu a, .menu strong { padding: .65rem .35rem .65rem 2.45rem; font-size: 1rem; }
	#main p.imgl { float: none; margin: 0 0 .5rem; }
	#head .in { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
	#head .in::before { width: 64px; height: 64px; }
}

/* dotykové ovládání: větší cíle */
@media (pointer: coarse) {
	.pages a, .pages strong { min-width: 2.75rem; min-height: 2.75rem; }
}