/* ============================================================
   Chalupy u Indrů — uindru.cz
   Identita: horský editorial. Papír, borovicová zeleň, jantar,
   hairline linky místo karet. Display: Fraunces (variabilní,
   optická velikost). Text: Schibsted Grotesk (variabilní).
   ============================================================ */

/* Fonty z Google Fonts rozdělené na latin + latin-ext (čeština je v latin-ext).
   Prohlížeč si díky unicode-range stáhne jen to, co stránka opravdu používá. */
@font-face {
	font-family:'Fraunces';
	src:url('../fonts/fraunces-latin.woff2') format('woff2');
	font-weight:300 700; font-style:normal; font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:'Fraunces';
	src:url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	font-weight:300 700; font-style:normal; font-display:swap;
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family:'Schibsted Grotesk';
	src:url('../fonts/schibsted-latin.woff2') format('woff2');
	font-weight:400 700; font-style:normal; font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family:'Schibsted Grotesk';
	src:url('../fonts/schibsted-latin-ext.woff2') format('woff2');
	font-weight:400 700; font-style:normal; font-display:swap;
	unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokeny ----------
   Barvy v OKLCH. Papír i inkoust drží jeden chladný odstín (240° / 250°) —
   je to podklad turistické mapy, ne krémový papír. Akcent je červená
   turistické značky KČT.

   Kontrasty proti papíru spočítané (oklch → sRGB → WCAG 2), ne odhadnuté:
   ink 15.6:1, ink-2 6.96:1, ink-3 4.94:1 (4.52:1 i na paper-2),
   pine 8.37:1, kct-text 6.13:1, kct s bílým textem 6.11:1. */
:root {
	--paper: oklch(0.977 0.005 240);
	--paper-2: oklch(0.947 0.007 240);
	--paper-3: oklch(0.912 0.009 240);
	--ink: oklch(0.235 0.014 250);
	--ink-2: oklch(0.45 0.014 250);
	--ink-3: oklch(0.53 0.012 250);
	--pine: oklch(0.4 0.058 168);
	--pine-deep: oklch(0.33 0.052 168);

	/* Červená KČT — jediný akcent na stránce. `kct` na plochy (bílý text),
	   `kct-text` na drobné popisky, `kct-light` na zelené sekci. */
	--kct: oklch(0.52 0.2 27);
	--kct-deep: oklch(0.45 0.19 27);
	--kct-text: oklch(0.5 0.17 27);
	--kct-light: oklch(0.86 0.08 30);

	--line: oklch(0.235 0.014 250 / 0.14);
	--line-soft: oklch(0.235 0.014 250 / 0.08);
	--ink-wash: oklch(0.235 0.014 250 / 0.04);

	/* kategorie aktivit — stejné barvy pro piny, legendu i karty */
	--c-turistika: var(--pine);
	--c-cyklo: oklch(0.5 0.08 240);
	--c-lyze: oklch(0.5 0.07 278);
	--c-kultura: oklch(0.5 0.09 335);
	--c-voda: oklch(0.52 0.09 200);
	--c-chalet: var(--kct);

	--sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--mono: ui-monospace, 'SF Mono', Menlo, monospace;

	--container: 1200px;
	--gutter: clamp(20px, 4vw, 48px);
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--r: 6px;
	--r-l: 10px;
	--ring: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html {
	scroll-behavior:smooth;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

body {
	font-family:var(--sans);
	font-size:16px;
	line-height:1.6;
	color:var(--ink);
	background:var(--paper);
	text-rendering:optimizeLegibility;
}

::selection { background:var(--pine); color:var(--paper); }

.container { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

h1, h2, h3, .serif {
	font-family:var(--serif);
	font-weight:400;
	line-height:1.05;
	letter-spacing:-0.01em;
	text-wrap:balance;
}

p { text-wrap:pretty; }
a { color:inherit; }
img { display:block; max-width:100%; }

a, button, summary, .filter {
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
}

/* Hover je na fotkách jediná afordance — klávesnice potřebuje vlastní */
:focus-visible {
	outline:2px solid var(--kct);
	outline-offset:3px;
	border-radius:2px;
}

/* Kotvy musí po doscrollování zůstat pod sticky navigací (~68 px) */
:target,
#chaty, #zalesi, #hyncice, #mapa, #aktivity, #kontakt { scroll-margin-top:84px; }

/* Přeskočení navigace — objeví se jen při ovládání klávesnicí */
.skip-link {
	position:fixed;
	top:10px; left:10px;
	z-index:200;
	padding:10px 14px;
	border-radius:var(--r);
	background:var(--pine);
	color:var(--paper);
	font-size:14px;
	font-weight:600;
	text-decoration:none;
	translate:0 calc(-100% - 20px);
	transition:translate 0.2s var(--ease);
}
.skip-link:focus-visible { translate:0; }

/* Drobné popisky: verzálky s prostrkáním. Číslo sekce je v serifu — jediný
   „ozdobný“ prvek popisku, jinak zůstává tichý. */
.label {
	display:flex; align-items:baseline; gap:10px;
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.12em;
	color:var(--ink-3);
}
.label-num {
	font-family:var(--serif);
	font-weight:500;
	font-size:14px;
	letter-spacing:0;
	color:var(--kct-text);
}
.eyebrow {
	font-size:13.5px;
	font-weight:500;
	letter-spacing:0.01em;
	color:var(--kct-text);
}

/* ---------- Tlačítka ---------- */

.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:46px;
	padding:0 22px;
	font-family:var(--sans);
	font-size:15px;
	font-weight:500;
	line-height:1;
	letter-spacing:-0.005em;
	white-space:nowrap;
	text-decoration:none;
	border:0;
	border-radius:var(--r);
	cursor:pointer;
	transition-property:background-color, color, box-shadow, scale;
	transition-duration:0.2s, 0.2s, 0.2s, 0.15s;
	transition-timing-function:var(--ease);
}
.btn:active { scale:0.96; }

.btn-primary { background:var(--pine); color:var(--paper); }
.btn-primary:hover { background:var(--pine-deep); }

.btn-outline { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn-outline:hover { background:var(--ink-wash); box-shadow:inset 0 0 0 1px oklch(0.235 0.014 250 / 0.3); }

/* Odesílací tlačítko sedí na zelené sekci. Papírové, ne červené: červená na
   zelené je nejsilnější možný střet a přebila by akcenty ve zbytku stránky. */
.btn-paper { background:var(--paper); color:var(--pine-deep); }
.btn-paper:hover { background:#fff; }

.btn-block { width:100%; }
.btn-sm { min-height:38px; padding:0 16px; font-size:14px; }

/* ---------- Navigace ---------- */

.nav {
	position:sticky; top:0; z-index:100;
	background:oklch(0.977 0.005 240 / 0.86);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
}
.nav::after {
	content:'';
	position:absolute; left:0; right:0; bottom:0;
	height:1px;
	background:var(--line);
	opacity:0;
	transition:opacity 0.3s var(--ease);
}
.nav.is-scrolled::after { opacity:1; }

.nav-inner {
	max-width:var(--container); margin:0 auto;
	padding:15px var(--gutter);
	display:flex; align-items:center; gap:28px;
}

.nav-logo {
	display:inline-flex; align-items:center; gap:10px;
	font-family:var(--serif);
	font-size:21px;
	font-weight:500;
	letter-spacing:-0.01em;
	line-height:1;
	text-decoration:none;
}
.nav-logo-mark { color:var(--pine); flex-shrink:0; }

.nav-links { display:flex; gap:2px; margin-left:auto; }
.nav-links a {
	padding:8px 12px;
	font-size:14.5px; font-weight:500;
	color:var(--ink-2);
	text-decoration:none;
	border-radius:4px;
	transition:color 0.15s var(--ease);
}
.nav-links a:hover { color:var(--ink); }

.nav-toggle { display:none; position:relative; width:44px; height:44px; margin-left:auto; background:none; border:0; cursor:pointer; }
.nav-toggle span { position:absolute; left:12px; width:20px; height:1.5px; background:var(--ink); transition:translate 0.25s var(--ease), rotate 0.25s var(--ease); }
.nav-toggle span:nth-child(1) { top:19px; }
.nav-toggle span:nth-child(2) { top:25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { translate:0 3px; rotate:45deg; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { translate:0 -3px; rotate:-45deg; }

.mobile-menu { display:none; flex-direction:column; padding:4px var(--gutter) 20px; border-top:1px solid var(--line-soft); }
.mobile-menu a { padding:13px 0; font-family:var(--serif); font-size:22px; text-decoration:none; border-bottom:1px solid var(--line-soft); }
.mobile-menu .btn { margin-top:16px; align-self:flex-start; font-family:var(--sans); font-size:15px; border-bottom:0; }

/* ---------- Hero ----------
   Dělený hero: text na papíru vlevo, fotka vpravo vytéká až k okraji okna.
   Levý odsazení sekce = levý okraj kontejneru, počítá se z šířky <body>
   (procenta v paddingu se vztahují k rodiči, proto je to na .hero, ne uvnitř gridu). */
.hero {
	display:grid;
	grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
	min-height:clamp(560px, 86vh, 800px);
	padding-inline-start:max(var(--gutter), calc((100% - var(--container)) / 2));
}

.hero-text {
	display:flex; flex-direction:column; justify-content:center;
	padding-block:clamp(40px, 7vh, 72px);
	padding-inline-end:clamp(32px, 5vw, 80px);
}
.hero-text h1 {
	margin-top:20px;
	max-width:12ch;
	font-size:clamp(46px, 5.4vw, 80px);
	letter-spacing:-0.02em;
	line-height:0.98;
}
.hero-sub {
	max-width:46ch;
	margin-top:24px;
	font-size:clamp(16.5px, 1.4vw, 18.5px);
	line-height:1.55;
	color:var(--ink-2);
}
.hero-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }

/* Rejstřík obou chalup — hairline řádky místo skleněných chipů */
.hero-index { list-style:none; margin-top:44px; border-top:1px solid var(--line); }
.hero-index a {
	display:grid;
	grid-template-columns:30px minmax(0, 1fr) 20px;
	align-items:center;
	gap:14px;
	padding:15px 0;
	border-bottom:1px solid var(--line);
	text-decoration:none;
}
.idx-num { font-family:var(--serif); font-size:14px; font-weight:500; color:var(--kct-text); }
.idx-body { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; min-width:0; }
.idx-name { font-family:var(--serif); font-size:20px; letter-spacing:-0.01em; line-height:1.2; }
.idx-meta { font-size:13.5px; color:var(--ink-2); }
.idx-arrow { color:var(--ink-3); text-align:right; transition:translate 0.25s var(--ease), color 0.2s var(--ease); }
.hero-index a:hover .idx-arrow { translate:4px 0; color:var(--ink); }
.hero-index a:hover .idx-name { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--ink-3); }

.hero-photo {
	position:relative;
	margin:0;
	overflow:hidden;
	background:var(--paper-3);
	border-radius:var(--r-l) 0 0 var(--r-l);
}
/* Fotka je na výšku (2:3) a horní polovina je obloha — na desktopu je proto
   o 30 % vyšší než buňka a kotvená ke spodnímu okraji, aby hřeben seděl
   ve střední třetině. Na mobilu (4:5) stačí object-position. */
.hero-photo img {
	position:absolute; left:0; bottom:0;
	width:100%; height:130%;
	object-fit:cover;
	object-position:center 70%;
}
.hero-photo::after {
	content:'';
	position:absolute; inset:0;
	border-radius:inherit;
	box-shadow:var(--ring);
	pointer-events:none;
}
.hero-photo figcaption {
	position:absolute; left:18px; bottom:14px;
	font-size:12px; letter-spacing:0.02em;
	color:#fff;
	opacity:0.85;
	text-shadow:0 1px 10px rgba(0,0,0,0.6);
}

/* ---------- Sekce ---------- */

.section { padding-block:clamp(72px, 11vh, 128px); }

/* Hlavička sekce: hairline přes celý kontejner, vlevo číslo + popisek,
   vpravo nadpis. Žádné centrování, žádná italika. */
.sec-head {
	display:grid;
	grid-template-columns:minmax(0, 220px) minmax(0, 1fr);
	gap:20px 48px;
	padding-top:26px;
	border-top:1px solid var(--line);
	margin-bottom:clamp(40px, 6vh, 64px);
}
.sec-head h2 {
	font-size:clamp(34px, 4.2vw, 56px);
	letter-spacing:-0.02em;
	max-width:18ch;
}
.sec-sub { margin-top:16px; font-size:17px; color:var(--ink-2); max-width:56ch; }

/* ---------- Chaty ---------- */

.chalets { display:flex; flex-direction:column; gap:clamp(56px, 9vh, 96px); }

.chalet {
	display:grid;
	grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap:clamp(28px, 4.5vw, 64px);
	align-items:start;
}
.chalet-reverse .chalet-photo { order:2; }

.chalet-photo { margin:0; }
.chalet-frame {
	position:relative;
	aspect-ratio:4 / 3;
	border-radius:var(--r-l);
	overflow:hidden;
	background:var(--paper-3);
}
.chalet-frame img { width:100%; height:100%; object-fit:cover; }
.chalet-frame::after {
	content:'';
	position:absolute; inset:0;
	border-radius:inherit;
	box-shadow:var(--ring);
	pointer-events:none;
}
.chalet-photo figcaption {
	display:flex; justify-content:space-between; gap:12px;
	margin-top:10px;
	font-size:13px;
	color:var(--ink-3);
}

.chalet-body h3 { margin-top:10px; font-size:clamp(30px, 3.4vw, 42px); letter-spacing:-0.02em; }
.chalet-body h3 small { display:block; margin-top:6px; font-size:0.55em; letter-spacing:-0.005em; color:var(--ink-3); }
.chalet-body > p { margin-top:16px; font-size:16px; color:var(--ink-2); max-width:52ch; }

/* Technický list chalupy — definiční seznam s hairline řádky */
.specs { margin:28px 0 30px; border-top:1px solid var(--line); }
.specs > div {
	display:grid;
	grid-template-columns:118px minmax(0, 1fr);
	gap:16px;
	padding:11px 0;
	border-bottom:1px solid var(--line-soft);
	font-size:15px;
}
.specs dt { padding-top:3px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); }
.specs dd { color:var(--ink); }

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

.section-map { background:var(--paper-2); }

.map-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.filter {
	min-height:38px; padding:0 16px;
	font-family:var(--sans); font-size:14px; font-weight:500;
	color:var(--ink-2);
	background:transparent;
	border:0; border-radius:999px;
	box-shadow:inset 0 0 0 1px var(--line);
	cursor:pointer;
	transition:color 0.15s var(--ease), background-color 0.15s var(--ease), box-shadow 0.15s var(--ease), scale 0.15s var(--ease);
}
.filter:hover { color:var(--ink); background:var(--ink-wash); }
.filter:active { scale:0.96; }
.filter.is-active { color:var(--paper); background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }

.map-layout { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:36px; align-items:stretch; }

.map-stage {
	position:relative;
	aspect-ratio:1000 / 680;
	min-height:340px;
	border-radius:var(--r-l);
	overflow:hidden;
	z-index:0;
	background:var(--paper-3);
}
/* Rámeček nad plátnem mapy (plátno je absolutně poloha­vané, inset stín by přebilo) */
.map-stage::after {
	content:'';
	position:absolute; inset:0; z-index:5;
	border-radius:inherit;
	box-shadow:var(--ring);
	pointer-events:none;
}

/* MapLibre piny — kapkovitá značka s ikonou.
   POZOR: na .map-pin nikdy nenastavuj `position` — je to kořen markeru a přebilo by
   to `.maplibregl-marker { position:absolute }` (stejná specificita, načítá se dřív).
   Výška elementu je taková, aby špička kapky ležela přesně na jeho spodní hraně
   (rotací -45° vyjede roh o poloměr*√2 pod střed) → anchor:'bottom' pak sedí na GPS. */
.map-pin {
	width:28px; height:32px;
	display:block;
	background:none; border:0; padding:0; cursor:pointer;
}
.map-pin::after { content:''; position:absolute; left:50%; top:13px; width:44px; height:44px; transform:translate(-50%,-50%); }
.map-pin-chalet { width:34px; height:40px; }
.map-pin.is-hidden { display:none; }

.map-pin-dot {
	position:absolute; top:0; left:1px;
	width:26px; height:26px;
	border-radius:50% 50% 50% 0;
	transform:rotate(-45deg);
	display:grid; place-items:center;
	background:var(--c-turistika);
	box-shadow:0 3px 8px rgba(0,0,0,0.32);
	transition:transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.map-pin-dot svg { transform:rotate(45deg); width:14px; height:14px; color:#fff; }
.map-pin:hover .map-pin-dot, .map-pin:focus-visible .map-pin-dot { transform:rotate(-45deg) scale(1.14); }
.map-pin.is-selected .map-pin-dot { transform:rotate(-45deg) scale(1.16); box-shadow:0 5px 14px rgba(0,0,0,0.4); }

.map-pin[data-cat="cyklo"] .map-pin-dot { background:var(--c-cyklo); }
.map-pin[data-cat="lyze"] .map-pin-dot { background:var(--c-lyze); }
.map-pin[data-cat="kultura"] .map-pin-dot { background:var(--c-kultura); }
.map-pin[data-cat="voda"] .map-pin-dot { background:var(--c-voda); }

/* Bílý prstenec, ne červený: podkladová mapa kreslí červené KČT trasy stejnou
   barvou jako pin, bez prstence by se pin na trase ztratil. */
.map-pin-chalet .map-pin-dot { width:32px; height:32px; background:var(--c-chalet); box-shadow:0 3px 10px rgba(0,0,0,0.34), 0 0 0 3px oklch(1 0 0 / 0.9); }
.map-pin-chalet .map-pin-dot svg { width:17px; height:17px; }
.map-pin-chalet:hover .map-pin-dot, .map-pin-chalet.is-selected .map-pin-dot { transform:rotate(-45deg) scale(1.12); }

/* Popisek nad pinem */
.map-pin-label {
	position:absolute; bottom:calc(100% + 7px); left:50%;
	transform:translateX(-50%);
	padding:3px 9px;
	font-size:12px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap;
	color:var(--paper); background:var(--ink);
	border-radius:4px;
	box-shadow:0 2px 8px rgba(0,0,0,0.25);
	opacity:0; pointer-events:none;
	transition:opacity 0.18s var(--ease);
}
.map-pin:hover .map-pin-label, .map-pin:focus-visible .map-pin-label,
.map-pin.is-selected .map-pin-label, .map-pin-chalet .map-pin-label { opacity:1; }

/* Ovládací prvky MapLibre sladěné s webem */
.maplibregl-map { font-family:var(--sans); }
.maplibregl-ctrl-group { border-radius:var(--r) !important; box-shadow:0 2px 10px rgba(0,0,0,0.14) !important; }
.maplibregl-ctrl-attrib { font-size:11px; }

/* Stav bez MapTiler klíče / bez WebGL */
.map-nokey { display:grid; place-items:center; padding:32px; text-align:center; }
.map-nokey-inner { max-width:38ch; }
.map-nokey-title { font-family:var(--serif); font-size:22px; margin-bottom:8px; }
.map-nokey p { font-size:14px; color:var(--ink-2); }
.map-nokey code { font-family:var(--mono); font-size:12.5px; background:rgba(0,0,0,0.06); padding:1px 5px; border-radius:4px; }

/* Panel s detailem značky — sloupec s hairline nahoře, žádná karta */
.map-panel {
	display:flex; flex-direction:column;
	padding-top:18px;
	border-top:1px solid var(--line);
	min-height:280px;
}
.panel-empty { margin:auto 0; }
.panel-hint { display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:22px; letter-spacing:-0.01em; }
.panel-hint::before { content:''; width:13px; height:13px; border-radius:50% 50% 50% 0; rotate:-45deg; background:var(--kct); flex-shrink:0; }
.panel-empty p { margin-top:10px; font-size:14.5px; color:var(--ink-2); max-width:36ch; }

.panel-cat { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); }
.panel-title { margin-top:12px; font-size:30px; letter-spacing:-0.02em; }
.panel-desc { margin-top:12px; font-size:15px; color:var(--ink-2); }
.panel-dist { margin-top:20px; border-top:1px solid var(--line); }
.panel-dist div { display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
.panel-dist span { color:var(--ink-3); }
.panel-dist strong { font-weight:600; font-variant-numeric:tabular-nums; }
.panel-link { margin-top:20px; }
.panel-link a { display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:500; color:var(--pine); text-decoration:none; }
.panel-link a:hover { text-decoration:underline; text-underline-offset:4px; }

.map-legend {
	display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
	margin-top:18px; font-size:13px; color:var(--ink-2);
}
.legend-title { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); }
.legend-item { display:inline-flex; align-items:center; gap:7px; }

/* Barevná tečka kategorie — sdílená mapou, legendou i kartami */
.cat-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--c-turistika); }
.cat-dot.cat-chalet { background:var(--c-chalet); }
.cat-dot.cat-cyklo { background:var(--c-cyklo); }
.cat-dot.cat-lyze { background:var(--c-lyze); }
.cat-dot.cat-kultura { background:var(--c-kultura); }
.cat-dot.cat-voda { background:var(--c-voda); }

.map-note { margin-top:12px; font-size:13px; color:var(--ink-3); max-width:80ch; }

/* ---------- Aktivity ----------
   Mřížka bez karet: fotka, drobný popisek, serifový titulek, text, hairline
   se vzdálenostmi. Rytmus dělají mezery, ne rámečky. */
.activities-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:48px 28px; align-items:start; }

.act { display:flex; flex-direction:column; }
.act.is-hidden { display:none; }

.act-media {
	position:relative;
	aspect-ratio:3 / 2;
	border-radius:var(--r-l);
	overflow:hidden;
	background:var(--paper-3);
}
.act-media img {
	width:100%; height:100%;
	object-fit:cover;
	transition:scale 0.6s var(--ease);
}
.act-media::after {
	content:'';
	position:absolute; inset:0;
	border-radius:inherit;
	box-shadow:var(--ring);
	pointer-events:none;
}
.act:hover .act-media img { scale:1.04; }

.act-meta {
	margin-top:14px;
	display:flex; align-items:center; gap:8px;
	font-size:12px; font-weight:600;
	text-transform:uppercase; letter-spacing:0.1em;
	color:var(--ink-3);
}
.act h3 { margin-top:8px; font-size:24px; letter-spacing:-0.015em; }
.act > p { margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-2); flex-grow:1; }
.act-dist {
	margin-top:14px; padding-top:10px;
	border-top:1px solid var(--line-soft);
	display:flex; gap:18px;
	font-size:13px; color:var(--ink-3);
	font-variant-numeric:tabular-nums;
}
.act-dist b { color:var(--ink); font-weight:600; }

/* Atribuce fotek (CC BY-SA vyžaduje uvést autora) */
.photo-credits { margin-top:56px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.photo-credits summary {
	display:flex; align-items:center; justify-content:space-between;
	padding:16px 0;
	font-size:14.5px; font-weight:500;
	cursor:pointer; list-style:none;
}
.photo-credits summary::-webkit-details-marker { display:none; }
.photo-credits summary:hover { color:var(--pine); }
.photo-credits .summary-icon { font-family:var(--serif); font-size:20px; line-height:1; color:var(--ink-3); transition:rotate 0.25s var(--ease); }
.photo-credits[open] .summary-icon { rotate:45deg; }
.credits-body { padding:0 0 22px; }
.credits-body p { font-size:13.5px; color:var(--ink-2); margin-bottom:12px; }
.credits-body ul { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 32px; }
.credits-body li { font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.credits-body a { color:var(--ink-2); text-underline-offset:2px; }
.credits-body a:hover { color:var(--pine); }

/* ---------- Kontakt ---------- */

.section-contact { background:var(--pine); color:var(--paper); }
.section-contact .label { color:oklch(0.977 0.005 240 / 0.6); }
.section-contact .label-num { color:var(--kct-light); }

.contact-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.contact-intro h2 { margin-top:22px; font-size:clamp(36px, 4.6vw, 60px); letter-spacing:-0.02em; max-width:12ch; }
.contact-intro .sec-sub { color:oklch(0.977 0.005 240 / 0.8); max-width:42ch; }

.contact-lines { margin-top:36px; border-top:1px solid oklch(1 0 0 / 0.18); }
.contact-line {
	display:grid; grid-template-columns:110px minmax(0, 1fr); gap:16px;
	padding:13px 0;
	border-bottom:1px solid oklch(1 0 0 / 0.12);
	font-size:16px;
	text-decoration:none;
}
.contact-line span { padding-top:3px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:oklch(0.977 0.005 240 / 0.55); }
.contact-line strong { font-weight:500; }
a.contact-line:hover strong { text-decoration:underline; text-underline-offset:4px; text-decoration-color:oklch(0.977 0.005 240 / 0.5); }

/* Formulář sedí přímo na zelené — žádná bílá karta se stínem */
.contact-form { color-scheme:dark; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label { font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:oklch(0.977 0.005 240 / 0.7); }
.field-opt { font-weight:500; text-transform:none; letter-spacing:0; color:oklch(0.977 0.005 240 / 0.45); }
.field input, .field select, .field textarea {
	font-family:var(--sans); font-size:15.5px; color:var(--paper);
	padding:12px 14px;
	background:oklch(1 0 0 / 0.07);
	border:0; border-radius:var(--r);
	box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.2);
	transition:box-shadow 0.15s var(--ease), background-color 0.15s var(--ease);
	resize:vertical;
}
.field input::placeholder, .field textarea::placeholder { color:oklch(0.977 0.005 240 / 0.42); }
.field select {
	appearance:none; -webkit-appearance:none;
	padding-right:38px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f5f8fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
}
.field input:hover, .field select:hover, .field textarea:hover { box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.32); }
.field input:focus, .field select:focus, .field textarea:focus { outline:0; background:oklch(1 0 0 / 0.1); box-shadow:inset 0 0 0 1.5px var(--kct-light); }
/* Chrome autofill by pole přebarvil na bílo */
.field input:-webkit-autofill { -webkit-box-shadow:inset 0 0 0 1px oklch(1 0 0 / 0.2), inset 0 0 0 1000px var(--pine-deep); -webkit-text-fill-color:var(--paper); }

/* Chybový stav vázaný na `.is-invalid` (nastaví JS), ne na :invalid — jinak by
   pole svítilo červeně, než do něj člověk vůbec začne psát. */
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { box-shadow:inset 0 0 0 1.5px oklch(0.82 0.14 27); }
.field-error { font-size:12.5px; color:oklch(0.87 0.11 27); }
.field:not(.is-invalid) .field-error { display:none; }

/* Honeypot — pro člověka neviditelný, pro čtečky skrytý, boti ho vyplní */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-form .btn { margin-top:8px; }
.contact-form .btn[aria-busy="true"] { opacity:0.72; pointer-events:none; }
.form-status { margin-top:14px; font-size:14px; color:oklch(0.977 0.005 240 / 0.8); min-height:1.2em; }
.form-status.is-error { color:oklch(0.87 0.11 27); }
.form-status.is-ok { color:var(--paper); font-weight:500; }

/* ---------- Patička ---------- */

.footer { padding:56px 0 36px; border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap:32px; }
.footer-brand p { margin-top:14px; font-size:14px; color:var(--ink-2); max-width:30ch; }
.footer-col h4 { margin-bottom:12px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-3); }
.footer-col p, .footer-col a { font-size:14.5px; color:var(--ink-2); line-height:1.6; text-decoration:none; }
.footer-col p strong { display:block; font-family:var(--serif); font-size:17px; font-weight:400; color:var(--ink); margin-bottom:2px; }
.footer-links { display:flex; flex-direction:column; gap:6px; }
.footer-links a:hover { color:var(--ink); }
.footer-bottom {
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
	margin-top:44px; padding-top:18px;
	border-top:1px solid var(--line-soft);
	font-size:13px; color:var(--ink-3);
}
.footer-bottom a { color:var(--ink-3); text-underline-offset:2px; }
.footer-bottom a:hover { color:var(--ink); }

/* ---------- Scroll reveal ---------- */

/* Obsah se skrývá jen když JS skutečně naběhl (třída `js` na <html>) — bez JS
   nebo při jeho chybě je celá stránka čitelná. */
.js .reveal { opacity:0; translate:0 14px; transition:opacity 0.7s var(--ease), translate 0.7s var(--ease); transition-delay:var(--reveal-delay, 0s); }
.js .reveal.is-visible { opacity:1; translate:0 0; }

/* Hero se NEskrývá (LCP, bez JS) — jen dojede zdola, čistě CSS. */
.rise { animation:rise 0.7s var(--ease) both; animation-delay:var(--rise-delay, 0s); }
@keyframes rise { from { translate:0 12px; opacity:0; } to { translate:0 0; opacity:1; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior:auto; }
	.js .reveal { opacity:1; translate:none; transition:none; }
	.rise { animation:none; }
	.skip-link { transition:none; }
	.btn:active, .filter:active { scale:1; }
	.act-media img, .act:hover .act-media img { transition:none; scale:1; }
	.hero-index a:hover .idx-arrow { translate:none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 940px) {
	.hero { grid-template-columns:1fr; min-height:0; padding-inline-start:0; }
	.hero-text { padding:44px var(--gutter) 40px; }
	.hero-photo { aspect-ratio:4 / 5; border-radius:0; }
	.hero-photo img { position:static; height:100%; }
	.hero-photo::after { box-shadow:none; }
	.map-panel { min-height:0; padding-top:16px; }
	.panel-empty { margin:0; }
	.chalet, .chalet-reverse { grid-template-columns:1fr; }
	.chalet-reverse .chalet-photo { order:0; }
	.map-layout { grid-template-columns:1fr; gap:24px; }
	.contact-layout { grid-template-columns:1fr; }
	.activities-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 24px; }
	.footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
	.sec-head { grid-template-columns:1fr; gap:14px; }
}

@media (max-width: 620px) {
	.nav-links, .btn-nav { display:none; }
	.nav-toggle { display:block; }
	.mobile-menu.is-open { display:flex; }
	.hero-photo { aspect-ratio:4 / 4.6; }
	.idx-body { flex-direction:column; align-items:flex-start; gap:2px; }
	.activities-grid { grid-template-columns:1fr; gap:40px; }
	.field-row { grid-template-columns:1fr; gap:0; }
	.specs > div { grid-template-columns:96px minmax(0, 1fr); }
	.credits-body ul { grid-template-columns:1fr; }
	.map-stage { aspect-ratio:4 / 5; }
	.footer-grid { grid-template-columns:1fr; gap:28px; }
}