/* =========================================================
   panevnicyklotrasa.css — Pánevní cyklotrasa (Route 66)
   Kompletní komponentní styly (struktura z ohre.css) + antracit/oranžová paleta.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
:root{
  --pn-bg:#0f1011; --pn-bg-alt:#17191c; --pn-bg-light:#f6f4ef;
  --pn-text:#14161a; --pn-text-inv:#f6f4ef; --pn-muted:#6b6f76; --pn-line:#d9d6cf;
  --pn-accent:#ff8a1f; --pn-accent-2:#ffc24a; --pn-accent-dk:#c25b00;
  --pn-f-display:'Bebas Neue','Barlow Condensed',sans-serif;
  --pn-f-text:'Inter','Open Sans',system-ui,sans-serif;
  --pn-f-mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ============================================================
   Pánevní cyklotrasa — komponentní styly
   Antracit #0f1011 / oranžová #ff8a1f, struktura převzatá z ohre.css.
   Pozn.: na tomhle místě byl zbytek po rozkopírovaném @import
   ("400;500;...&display=swap");"), což je invalidní token — CSS parser
   kvůli němu spolkl celé následující pravidlo `body`. Tím se ztratilo
   line-height, font-size i flex layout držící patičku dole.
   ============================================================ */

/* ---- Typografie ------------------------------------------- */

body {
  line-height: 1.6;
  font-family: var(--pn-f-text) !important;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  color: #818385;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
footer {
  margin-top: auto;
}

* {
  font-family: var(--pn-f-text);
}

p, .paragraph, li, td, th, span, div, a, input, textarea, select, label {
  font-weight: 400;
  font-family: var(--pn-f-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.section-title {
  color: #172231;
  font-family: var(--pn-f-text) !important;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.15;
  transition: 0.2s ease;
  letter-spacing: 0.02em;
}

/* Fluid typografie */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 22px; }
h4, .h4, .subtitle { font-size: 19px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; }

h1, .h1 { font-size: clamp(26px, 5vw,   76px); }
h2, .h2 { font-size: clamp(22px, 3.8vw, 52px); }
h3, .h3 { font-size: clamp(18px, 2.8vw, 34px); }
h4, .h4, .subtitle { font-size: clamp(16px, 2vw, 28px); }
h5, .h5 { font-size: clamp(14px, 1.5vw, 19px); }
h6, .h6 { font-size: clamp(13px, 1.2vw, 16px); }

.section-title  { font-size: clamp(22px, 3.8vw, 52px); }
.sekce-titulni  { font-size: clamp(20px, 3vw,   44px); }
.swiper-caption { font-size: clamp(1rem, 3vw, 3rem); }
.card-title-main { font-size: clamp(14px, 1.5vw, 19px); }

.font-secondary {
  font-family: var(--pn-f-text) !important;
}

.subtitle {
  font-family: var(--pn-f-text);
  font-weight: 700;
  color: white;
}

/* ---- Logo & brand ----------------------------------------- */

.brand { height: 80px; }

@media only screen and (max-width: 576px) {
  .brand { height: 60px; }
}

/* Nápis vedle loga */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-label {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  padding-top: 10px;
  gap: 2px;
}
.brand-label-top {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.brand-label-main {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 2.6rem;
  color: #c25b00;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
html[lang="de"] .brand-label-main {
  font-size: 1.82rem;
}
@media (max-width: 576px) {
  .brand-label { display: none; }
}



/* ---- Swiper caption --------------------------------------- */

.varex {
  bottom: 60px;
  background: rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  color: white;
  font-family: var(--pn-f-text);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.03em;
  z-index: 1;
  pointer-events: none;
}

/* ---- Anotace ---------------------------------------------- */

.anotace {
  color: #c25b00;
  font-size: 1.3em;
}

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

#map {
  width: 100%;
  height: 300px;
}
@media only screen and (max-width: 768px) { #map { height: 300px; } }
@media only screen and (max-width: 576px) { #map { height: 200px; } }

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

.btn {
  font-size: 15px;
  font-family: var(--pn-f-text);
  text-transform: uppercase;
  padding: 15.5px 28px;
  border-radius: 35px;
  font-weight: 700;
  border: 1px solid;
  position: relative;
  z-index: 1;
  transition: 0.3s ease-in;
  white-space: nowrap;
}
.btn:focus  { outline: 0; box-shadow: none !important; }
.btn:active { box-shadow: none; }
.btn-lg { font-size: 20px; padding: 19px 35px; }
.btn-md { font-size: 18px; padding: 17px 30px; }
.btn-sm { font-size: 12px; padding: 5px 20px; }

.btn-primary {
  background: #c25b00;
  color: #fff;
  border-color: #a34d00;
}
.btn-primary:active { background: #c25b00; border-color: #a34d00; }
.btn-primary:hover  { background: #ffb84a; border-color: #ffb84a; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #c25b00;
  border-color: #a34d00;
}

.btn-gray {
  background: #f5f6fa;
  color: #172231;
  border-color: #f5f6fa;
}
.btn-gray:active { background: #c25b00 !important; border-color: #c25b00; color: #fff; }
.btn-gray:hover  { background: #c25b00;              border-color: #c25b00; color: #fff; }
.btn-gray:not(:disabled):not(.disabled).active,
.btn-gray:not(:disabled):not(.disabled):active,
.show > .btn-gray.dropdown-toggle {
  color: #fff; background-color: #c25b00; border-color: #c25b00;
}

.btn-secondary {
  background: transparent;
  color: #172231;
  padding-left: 0;
  border: 0;
}
.btn-secondary:active { background: transparent !important; color: #c25b00; }
.btn-secondary:hover  { background: transparent;              color: #c25b00; }
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  color: #c25b00; background-color: transparent; border: 0;
}

.btn-primary-outline {
  background: transparent;
  color: #172231;
  border: 2px solid #172231;
}
.btn-primary-outline:active { background: #c25b00; border-color: #c25b00; color: #fff; }
.btn-primary-outline:hover  { background: #c25b00; border-color: #c25b00; color: #fff; }

.btn-light {
  background: #fff; color: #172231; border-color: #e7e7e7;
}
.btn-light:active { background: transparent !important; border-color: #fff; color: #fff; }
.btn-light:hover  { background: transparent;              border-color: #fff; color: #fff; }
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
  background: transparent; border-color: #fff; color: #fff;
}

.btn-light-alt:active { background: #c25b00 !important; border-color: #c25b00; color: #fff; }
.btn-light-alt:hover  { background: #c25b00;              border-color: #c25b00; color: #fff; }

.btn-light-outline {
  background: transparent; color: #fff; border: 2px solid #fff;
}
.btn-light-outline:active { background: #a34d00 !important; border-color: #a34d00; color: #fff; }
.btn-light-outline:hover  { background: #a34d00;              border-color: #a34d00; color: #fff; }

.btn-arrow { transition: 0.2s ease; }
.btn-arrow::before {
  position: absolute; content: ""; height: 8px; width: 8px;
  background: transparent; top: 50%; transform: translateY(-50%) rotate(-45deg);
  border-right: 2px solid #000; border-bottom: 2px solid #000;
  left: calc(85% + 5px); transition: 0.2s ease;
}
.btn-arrow::after {
  position: absolute; content: ""; height: 2px; width: 15px;
  top: 50%; transform: translateY(-50%); background: #000;
  transition: 0.2s ease; left: 85%;
}
.btn-arrow:hover::before { left: calc(85% + 10px); border-color: #c25b00; }
.btn-arrow:hover::after  { width: 20px; background: #c25b00; }

/* ---- Hover ripple ----------------------------------------- */

.hover-ripple { transition: 0.2s ease-in; }
.hover-ripple:hover { transform: scale(0.97); }
.hover-ripple:hover::after { animation: sonarEffect 1s ease-out 50ms; }
.hover-ripple::after {
  pointer-events: none; position: absolute; width: 100%; height: 100%;
  content: ""; top: 0; left: 0; padding: 0; z-index: -1; opacity: 0;
  transform: scale(0.9); border-radius: inherit;
}
.hover-ripple.ripple-white:hover::after { animation: sonarEffectWhite 1s ease-out 50ms; }

@keyframes sonarEffect {
  0%   { opacity: 0.1; }
  40%  { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #c25b00, 0 0 0 10px rgba(255,255,255,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #c25b00, 0 0 0 10px rgba(255,255,255,0.2); transform: scale(1.2); opacity: 0; }
}
@keyframes sonarEffectWhite {
  0%   { opacity: 0.1; }
  40%  { opacity: 0.3; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.2); }
  100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.2); transform: scale(1.2); opacity: 0; }
}

/* ---- Obecné barvy & třídy --------------------------------- */

body { background-color: #fff; overflow-x: hidden; }

::-moz-selection { background: #c25b00; color: #fff; }
::selection      { background: #c25b00; color: #fff; }

/* Preloader */
.preloader {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #fff; z-index: 999;
  display: flex; align-items: center; justify-content: center;
}
.spin {
  height: 50px; width: 50px; border-width: 5px; border-style: solid;
  border-color: #c25b00 #c25b00 rgba(79, 168, 255, 0.25) rgba(79, 168, 255, 0.25);
  border-radius: 100%; animation: clockwise 1s linear infinite;
}
@keyframes clockwise { to { transform: rotate(360deg) translatez(0); } }

ol, ul { list-style-type: none; margin: 0; }

a, a:hover, a:focus { text-decoration: none; }
a, button, select  { cursor: pointer; transition: 0.2s ease; }
a:focus, button:focus, select:focus { outline: 0; }
a:hover { color: #c25b00; }
a.text-white:hover, a.text-light:hover, a.text-dark:hover { color: white !important; }

/* Sekce */
.section { padding-top: 150px; padding-bottom: 150px; }
@media (max-width: 767px) { .section { padding-top: 100px;  padding-bottom: 100px; } }
@media (max-width: 575px) { .section { padding-top: 80px;   padding-bottom: 80px;  } }
.section-sm { padding-top: 70px; padding-bottom: 70px; }
.section-title { margin-bottom: 40px; }
.section-bottom-lg { padding-bottom: 240px; }

/* Section title border — zelená */
.section-title-border {
  position: relative; height: 5px; width: 30px;
  background: #c25b00; border-radius: 10px;
  margin-bottom: 20px; display: block;
}
.section-title-border::before {
  position: absolute; content: ""; height: 100%; width: 50%;
  background: #c25b00; border-radius: 10px; right: -60%; top: 0;
}
.section-title-border::after {
  position: absolute; content: ""; height: 100%; width: 25%;
  background: #c25b00; border-radius: 10px; right: -100%; top: 0;
}
.section-title-border.border-center   { margin-left: calc(50% - 27px); }
.section-title-border.border-white    { background: #fff; }
.section-title-border.border-white::before { background: #fff; }
.section-title-border.border-white::after  { background: #fff; }
.section-title-border.border-inline   { display: inline-block; margin-bottom: 5px; }

/* Section title border white */
.section-title-border-white {
  position: relative; height: 5px; width: 30px;
  background: #fff; border-radius: 10px;
  margin-bottom: 20px; display: block;
}
.section-title-border-white::before {
  position: absolute; content: ""; height: 100%; width: 50%;
  background: #fff; border-radius: 10px; right: -60%; top: 0;
}
.section-title-border-white::after {
  position: absolute; content: ""; height: 100%; width: 25%;
  background: #fff; border-radius: 10px; right: -100%; top: 0;
}
.section-title-border-white.border-center { margin-left: calc(50% - 27px); }
.section-title-border-white.border-inline { display: inline-block; margin-bottom: 5px; }

/* Overlay — zelená */
.overlay { position: relative; padding-top: 2em; padding-bottom: 1.5em; }
.overlay::before {
  position: absolute; content: ""; height: 100%; width: 100%;
  top: 0; left: 0; background: #c25b00;
}
.overlay-secondary { position: relative; }
.overlay-secondary::before {
  position: absolute; content: ""; height: 100%; width: 100%;
  top: 0; left: 0; background: #252d39; opacity: 0.85;
}

/* Pozadí — primární a sekundární = zelená */
.bg-primary   { background: #c25b00 !important; }
.bg-secondary { background: #c25b00 !important; }
.bg-minus     { background: rgb(245, 246, 250) !important; }
.bg-secondary-darken { background: #1f2630 !important; }
.bg-gray       { background: #f5f6fa !important; }
.bg-gray-white { background-image: linear-gradient(to right, #f5f6fa 45%, #fff 0%); }
.bg-white-gray { background-image: linear-gradient(to right, #fff 45%, #f5f6fa 0%); }
.bg-white2-gray{ background-image: linear-gradient(to right, #fff 70%, #f5f6fa 0%); }

.text-primary { color: #fff !important; }
.text-color   { color: #818385; }
.text-light   { color: #fff !important; }
.text-dark    { color: #172231; }

/* Ostatní utility */
.outline-0        { outline: 0 !important; }
.d-unset          { display: unset !important; }
.hilighted        { background: #252d39; padding: 0 5px; border-radius: 2px; color: #fff; }
.letter-spacing   { letter-spacing: 2px; }
.mb-50  { margin-bottom: 50px !important; }
.mb-60  { margin-bottom: 60px !important; }
.mb-70  { margin-bottom: 70px !important; }
.mb-80  { margin-bottom: 80px !important; }
.mb-90  { margin-bottom: 90px !important; }
.mb-100 { margin-bottom: 100px !important; }
.zindex-1     { z-index: 1; }
.zindex-0     { z-index: 0; }
.overflow-hidden  { overflow: hidden; }
.min-height-400   { min-height: 400px; }
.border-color     { border-color: #e7e7e7 !important; }
.border-muted     { border-color: #404751 !important; }
.rounded-top-0    { border-top-left-radius: 0; border-top-right-radius: 0; }
.flex-basis-33    { flex-basis: 33.333333%; }
.icon    { font-size: 40px; }
.icon-sm { font-size: 34px; }
.icon-xs { font-size: 22px; }
.icon-lg { font-size: 56px; }
.box-shadow { box-shadow: 0px 15px 39px 0px rgba(8, 18, 109, 0.1); }
.translate-top { transform: translateY(-100px); }
.service-wrapper { transform: translateY(-200px); }
.transition    { transition: 0.2s ease; }
.font-size-30  { font-size: 30px; }
.fw-semebold   { font-weight: 600 !important; }
.text-decoration-none        { text-decoration: none !important; }
.text-decoration-none:hover  { text-decoration: none !important; }
.border-md-end { border-right: 1px solid; }
@media (max-width: 767px) { .border-md-end { border: 0; } }
.media { display: flex; align-items: start; }
.media > div:nth-child(1) { flex-shrink: 0; }
.media > div:nth-child(2) { flex: 1; }
.card-title { color: #172231; }

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

.navigation {
  box-shadow: 0px 9px 20px 0px rgba(0, 0, 0, 0.09);
  position: relative; z-index: 1;
}
@media (min-width: 992px) {
  .navigation { height: 130px; display: flex; align-items: center; }
}
.navbar { padding: 0; }
.navbar-collapse { padding-bottom: 10px; transition: 0.2s ease; }
.navbar, .navbar-collapse { z-index: 9999; }
.navbar .nav-item .nav-link { text-transform: uppercase; font-weight: 600; font-size: 1.1em; font-family: var(--pn-f-text); }
.navbar .dropdown:hover .dropdown-menu { visibility: visible; opacity: 1; transform: scaleX(1); }
.navbar .dropdown-menu {
  box-shadow: 0px 3px 9px 0px rgba(0,0,0,0.12); padding: 15px; border: 0;
  top: 100px; left: -25px; border-radius: 0; display: block;
  visibility: hidden; transition: 0.3s ease; opacity: 0;
  transform: scale(0.8); background: #fff;
}
@media (max-width: 991px) {
  .navbar .dropdown-menu { display: none; opacity: 1; visibility: visible; transform: scale(1); transform-origin: unset; }
}
.navbar .dropdown-menu.show { visibility: hidden; }
@media (max-width: 991px) {
  .navbar .dropdown-menu.show { visibility: visible; display: block; }
}
.navbar .dropdown-item {
  position: relative; color: #172231;
  transition: 0.2s ease; font-family: var(--pn-f-text);
}
@media (max-width: 991px) { .navbar .dropdown-item { text-align: center; } }
.navbar .dropdown-item:not(:last-child) { margin-bottom: 10px; }
.navbar .dropdown-item:hover { color: #c25b00; background: transparent; }
.navbar-light .navbar-nav .nav-link { color: #172231; }
.navbar-light .navbar-nav .nav-link:hover { color: #c25b00; }
.navbar-expand-lg .navbar-nav .nav-link { padding: 40px 15px; }
@media (max-width: 1200px) { .navbar-expand-lg .navbar-nav .nav-link { padding: 40px 10px; } }
@media (max-width: 991px)  { .navbar-expand-lg .navbar-nav .nav-link { padding: 10px; } }
.navbar-nav .dropdown-menu { z-index: 9999; }

/* ---- Hover bg dark ---------------------------------------- */

.hover-bg-dark:hover, .hover-bg-dark.active {
  background: linear-gradient(180deg, #a34d00 0%, #c25b00 100%);
}
.hover-bg-dark:hover *, .hover-bg-dark.active * { color: #fff !important; }

.hover-bg-dark-2 { border: 4px solid #ffffff !important; }
.hover-bg-dark-2:hover, .hover-bg-dark-2.active { background: #c25b00; }
.hover-bg-dark-2:hover *, .hover-bg-dark-2.active * { color: #fff !important; }

/* ---- Karty etap ------------------------------------------- */

.card-icon {
  position: absolute; height: 60px; width: 60px; border-radius: 50%;
  background: #c25b00; text-align: center; line-height: 60px;
  color: #fff; font-size: 32px; left: 15px; top: -90px;
}

/* Karty etap Ohře — vlastní design */
.hover-bg-dark-2 {
  border-radius: 12px !important;
  overflow: visible !important;
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  padding: 12px !important;
}
.hover-bg-dark-2:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.16) !important;
  background: #fff !important;
}
.hover-bg-dark-2 .card-img-top {
  border-radius: 8px !important;
  overflow: hidden;
  display: block;
}
.hover-bg-dark-2 img {
  border-radius: 8px !important;
  transition: transform 0.35s ease;
}
.hover-bg-dark-2:hover img {
  transform: scale(1.03);
}
.hover-bg-dark-2 .card-body {
  padding: 14px 4px 4px 4px !important;
  border-top: none !important;
}
.hover-bg-dark-2:hover * {
  color: inherit !important;
}
.hover-bg-dark-2:hover h4 {
  color: #c25b00 !important;
}

/* ---- Hover overlay ---------------------------------------- */

.hover-overlay {
  position: absolute; height: 100%; width: 100%; top: 0; left: 0;
  text-align: center; background: #c25b00; transition: 0.4s ease; opacity: 0;
}
.hover-overlay a {
  position: relative; font-size: 46px; color: #fff;
  top: 50%; transform: translateY(-50%) scale(0);
  transition: 0.4s ease; display: inline-block;
}

/* ---- Hover icon ------------------------------------------- */

.hover-icon {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #c25b00; transition: 0.2s ease; transform: scale(0.8); z-index: 3; opacity: 0;
}
.hover-icon .social-icon a { transform: scale(0); }

/* ---- Sociální ikony --------------------------------------- */

.social-icon li a {
  display: inline-block; height: 45px; width: 45px; border-radius: 50%;
  color: #fff; border: 1px solid #fff; background: transparent;
  line-height: 45px; text-align: center;
}
.social-icon li a:hover { color: #c25b00; background: #fff; }

.social-icon-alt li a {
  display: inline-block; height: 80px; width: 80px; border-radius: 50%;
  color: #fff; border: 1px solid #fff; background: transparent;
  line-height: 80px; text-align: center; font-size: 2em;
}
.social-icon-alt li a:hover { color: #c25b00; background: #fff; border-color: #fff; }

/* ---- Breadcrumb ------------------------------------------- */
.breadcrumb-item + .breadcrumb-item::before { color: #fff; }

/* ---- Formuláře -------------------------------------------- */
.form-control { height: 55px; padding: 0 30px; }
.form-control-sm { height: 45px; }
.form-control:focus { box-shadow: 0px 15px 39px 0px rgba(8,18,109,0.1); border-color: #c25b00 !important; }
.focus-shadow-none { box-shadow: none !important; }
textarea.form-control { height: 150px; }
textarea.form-control-sm { height: 100px; }

/* ---- Footer — list styled --------------------------------- */
.list-styled { padding-left: 0; }
.list-styled li {
  position: relative; padding-left: 20px;
  font-size: 1.5em; font-family: var(--pn-f-text) !important; color: black !important;
}
.list-styled li::before {
  position: absolute; content: "\f105"; font-family: "FontAwesome";
  font-size: 15px; left: 0; top: 6px; color: #c25b00; transition: 0.3s ease;
}
.list-styled li:hover::before { color: #c25b00 !important; }
.list-styled li:hover a { text-decoration: underline !important; }
.list-styled li.text-light::before { color: #fff; }
.list-styled.style-circle li::before { content: "\f10c"; }

/* ---- Výškový profil (leaflet-elevation) ------------------- */

/* Plocha pod profilem */
.steelblue-theme .area {
  fill: rgba(194, 91, 0, 0.55) !important;
  stroke: none !important;
}

/* Linie profilu */
.steelblue-theme .line {
  stroke: #8a3f00 !important;
  stroke-width: 3px !important;
  fill: none !important;
}

/* Křížek / bod při hover */
.steelblue-theme .mouse-focus-line,
.steelblue-theme .elevation-polyline {
  stroke: #c25b00 !important;
}

/* Tečka na profilu při hover */
.steelblue-theme circle.mouse-focus-location {
  fill: #c25b00 !important;
  stroke: #fff !important;
  stroke-width: 2px !important;
}

/* Osa X a Y — tick čáry */
.steelblue-theme .axis line,
.steelblue-theme .axis path {
  stroke: #aaa !important;
}

/* Text os — bílý, bez bílého obtahu z knihovny (viz .elevation-control
   .axis text níž, kde je to řešené kompletně) */
.steelblue-theme .axis text {
  fill: #fff !important;
  font-family: var(--pn-f-text) !important;
  font-size: 11px !important;
  stroke: none !important;
  paint-order: normal !important;
}

/* Kontejner profilu */
.leaflet-control-elevation {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10) !important;
  border: none !important;
  padding: 10px 14px 6px !important;
}

/* Summary statistiky pod grafem */
.steelblue-theme .elevation-summary {
  font-family: var(--pn-f-text) !important;
  font-size: 12px !important;
  color: #555 !important;
}
.steelblue-theme .elevation-summary span {
  color: #c25b00 !important;
  font-weight: 700 !important;
}

/* Mřížka v grafu */
.steelblue-theme .grid line {
  stroke: #e8e8e8 !important;
}

/* ---- Ostatní ---------------------------------------------- */

.section-title-border.border-center { margin-left: calc(50% - 27px); }

.icos {
  max-width: 68px !important;
  color: #c25b00 !important;
}

/* Výběr textu */
::-moz-selection { background: #c25b00; color: #fff; }
::selection      { background: #c25b00; color: #fff; }

/* ============================================================
   RESPONSIVE OPTIMIZATIONS — Mobile & Tablet
   ============================================================ */

/* Section bottom lg — menší odsazení na mobilech */
@media (max-width: 767px) {
  .section-bottom-lg { padding-bottom: 80px; }
}
@media (max-width: 575px) {
  .section-bottom-lg { padding-bottom: 40px; }
}

/* Service wrapper — eliminace přetékání na mobilech */
@media (max-width: 991px) {
  .service-wrapper { transform: translateY(-80px); }
}
@media (max-width: 767px) {
  .service-wrapper { transform: none; }
}

/* Translate-top — deaktivace na mobilech */
@media (max-width: 767px) {
  .translate-top { transform: none; }
}

/* Banner feature wrapper */
@media (max-width: 991px) {
  .banner-feature-wrapper { transform: translateY(-60px); }
}
@media (max-width: 767px) {
  .banner-feature-wrapper { transform: none; }
}

/* Formulářová pole — menší výška na mobilech */
@media (max-width: 575px) {
  .form-control    { height: 48px; padding: 0 16px; }
  .form-control-sm { height: 40px; }
  textarea.form-control    { height: 120px; }
  textarea.form-control-sm { height: 90px; }
}

/* Tlačítka — přirozená velikost na mobilech */
@media (max-width: 575px) {
  .btn    { font-size: 13px; padding: 12px 20px; }
  .btn-lg { font-size: 16px; padding: 14px 26px; }
  .btn-md { font-size: 14px; padding: 13px 22px; }
}

/* Navigace — touch-friendly tap targets */
@media (max-width: 991px) {
  .navbar .nav-item .nav-link { min-height: 44px; display: flex; align-items: center; }
  .navigation { padding: 10px 0; }
}

/* Varex caption — pozice na malých obrazovkách */
@media (max-width: 575px) {
  .varex { bottom: 20px; }
}

/* Bg split-gradient — deaktivace na mobilech */
@media (max-width: 767px) {
  .bg-gray-white  { background-image: none; background: #f5f6fa; }
  .bg-white-gray  { background-image: none; background: #f5f6fa; }
  .bg-white2-gray { background-image: none; background: #f5f6fa; }
}

/* Social icon alt — menší na mobilech */
@media (max-width: 575px) {
  .social-icon-alt li a { height: 60px; width: 60px; line-height: 60px; font-size: 1.5em; }
}

/* Tag list — kompaktnější na mobilech */
@media (max-width: 575px) {
  .tag-list a { padding: 8px 16px; margin-bottom: 8px; font-size: 13px; }
}

/* Mapa #map_canvas — pokud by se používala */
@media (max-width: 767px) {
  #map_canvas { height: 350px; }
}
@media (max-width: 575px) {
  #map_canvas { height: 250px; }
}

/* Výškový profil — responzivní */
@media (max-width: 575px) {
  .leaflet-control-elevation { padding: 8px 10px 4px !important; }
}

/* =================================================================
   PÁNEVNÍ CYKLOTRASA — „ASFALT"
   Kompletní vizuální systém, 08/2026. Nahrazuje veškeré dřívější
   vrstvy nad komponentní základnou.

   Východisko: hornická pánev, dopravní značení, těžká technika.
   Celý web je tmavý — žádné světlé sekce, žádné bílé karty.
   Barevný akcent je dvojí: oranžová (značení, stroje) a tyrkysová
   (jezera Most a Milada, tedy „krajina po těžbě").

   Písmo: Archivo Black (displej) + Archivo (UI) + Manrope (text).
   ================================================================= */

:root{
  --c-void:#08090a;      /* hlavička, patička */
  --c-bg:#0b0c0e;        /* stránka */
  --c-panel:#111316;     /* sekce o stupeň výš */
  --c-panel-2:#171a1e;   /* karty */
  --c-line:#23272d;      /* vlasové linky */
  --c-line-soft:#191c21;

  --c-text:#e9eaec;
  --c-text-dim:#b4b9c0;
  --c-muted:#868d96;

  --c-orange:#ff7a00;
  --c-amber:#ffb43c;
  --c-lake:#2fd3c3;      /* tyrkysová jezera */

  --f-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --f-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --f-text:'Manrope',system-ui,-apple-system,sans-serif;

  --head-h:118px;
  --gap:clamp(56px,7vw,120px);

  /* Základní vrstva sahá po --pn-f-* (Anton / Barlow / IBM Plex) přes
     univerzální selektor `*`, takže jinak prosákne i tam, kde nemá.
     Přesměrováno na novou sadu, ať existuje jediný zdroj pravdy. */
  --pn-f-display:'Archivo Black','Arial Black',Impact,sans-serif;
  --pn-f-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --pn-f-text:'Manrope',system-ui,-apple-system,sans-serif;
}

/* ---- Reset nad šablonou ------------------------------------------ */

html{ scroll-behavior:smooth; background:var(--c-bg); }
body{
  background:var(--c-bg) !important;
  color:var(--c-text-dim);
  font-family:var(--f-text) !important;
  font-size:17px; line-height:1.68; letter-spacing:0;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body, p, li, td, th, span, div, a, input, textarea, select, label,
.paragraph, .font-secondary{ font-family:var(--f-text) !important; }

h1,h2,h3,.h1,.h2,.h3,.section-title{
  font-family:var(--f-display) !important;
  font-weight:400 !important;
  text-transform:uppercase;
  letter-spacing:-.018em !important;
  line-height:.92 !important;
  color:#fff;
  text-wrap:balance;
}
h4,h5,h6,.h4,.h5,.h6,.card-title,.card-title-main,.subtitle{
  font-family:var(--f-ui) !important;
  font-weight:700 !important;
  text-transform:none;
  letter-spacing:-.005em !important;
  line-height:1.22 !important;
  color:#fff;
}
/* Nadpisy v redakčním obsahu jsou často zabalené do <strong>/<span>,
   které si přes `*` bralo textové písmo — dovnitř nadpisu se nesahá. */
h1 *, h2 *, h3 *, .h1 *, .h2 *, .h3 *, .section-title *,
h4 *, h5 *, h6 *, .card-title *{
  font-family:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  color:inherit !important;
}
p{ margin-bottom:1.15rem; }
a{ color:var(--c-lake); text-decoration:none; }
a:hover{ color:var(--c-amber); }
strong,b{ color:#fff; font-weight:700; }
hr{ border-color:var(--c-line); opacity:1; }

::selection{ background:var(--c-orange); color:#08090a; }
::-moz-selection{ background:var(--c-orange); color:#08090a; }
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--c-lake); outline-offset:3px; border-radius:0;
}

/* Šablona rozdává bootstrapí pozadí, která v tmavém webu nemají co dělat */
.bg-white, section.bg-white, .bg-light, .bg-body, .bg-gray, .section.bg-gray{
  background:var(--c-bg) !important;
}
/* .bg-minus nese boční panely (Občerstvení / Ubytování na trase). Zůstávalo
   světle šedé, zatímco nadpis i položky jsou v tmavém tématu bílé — panel byl
   prakticky nečitelný (připomínka M. H. 7. 8. 2026). */
.bg-minus{
  background:var(--c-panel-2) !important;
  border:1px solid var(--c-line);
}
.bg-minus .border-bottom{ border-color:var(--c-line) !important; }
/* Bootstrapí .card si drží bílé pozadí, jenže nadpis (.card-title) i tlačítko
   .btn-primary-outline jsou v tmavém tématu bílé → na kartách "Zajímavosti na
   trase" nebylo vidět ani nadpis, ani "Zobrazit více" (připomínka M. H.
   7. 8. 2026). Karty proto ladí s podkladem. Dlaždice etap (.hover-bg-dark-2)
   mají vlastní průhledné pozadí s vyšší specificitou — ty se nemění. */
.card{
  background:var(--c-panel-2) !important;
  border:1px solid var(--c-line) !important;
  color:var(--c-text-dim);
}
.card .card-text,.card .card-text p{ color:var(--c-text-dim); }
/* Nadpisy karet (turistické cíle na trase) brala globální velikost h3
   — clamp(18px,2.8vw,34px) → na desktopu 30px, tedy skoro stejně velké jako
   nadpis celé sekce (32px). "Chomutov", "Zoopark Chomutov" apod. tak křičely
   víc než sekce, do které patří. Poloviční velikost, sjednoceno s dlaždicemi
   etap (.hover-bg-dark-2 .card-title = 17px). */
.card .card-title{
  font-size:clamp(14px,1.4vw,17px) !important;
  line-height:1.3 !important;
}
/* Bootstrapí .text-muted (#6c757d) je na tmavém podkladu na hraně čitelnosti —
   používá se u adresy v závorce za názvem podniku. */
.text-muted{ color:var(--c-muted) !important; }
/* .bg-secondary nese pruh s nadpisem sekce i blok patičky. O odstín
   světlejší pozadí tam dělalo viditelný schod přesně tam, kde
   začínají dlaždice — pruh proto splývá s podkladem. */
.bg-secondary{ background:transparent !important; }
.bg-primary{ background:var(--c-orange) !important; }
section[style*="C3D7DB"]{ background:var(--c-bg) !important; }
.box-shadow{ box-shadow:none !important; }

/* ---- Mikro-popisek (opakovaný prvek celého designu) --------------- */
/* Malé verzálky s velkým prostrkáním — používá se v hlavičce,
   u faktů, nad nadpisy sekcí i v patičce. */
.section-title-border,
.section-title-border-white{
  display:block; height:1px !important; width:56px !important;
  background:var(--c-orange) !important;
  border-radius:0 !important; margin-bottom:20px !important;
}
.section-title-border::before,.section-title-border::after,
.section-title-border-white::before,.section-title-border-white::after{ display:none !important; }
.section-title-border.border-center,
.section-title-border-white.border-center{ margin-left:auto !important; margin-right:auto !important; }

/* =================================================================
   HLAVIČKA
   ================================================================= */

header{
  position:sticky !important; top:0; z-index:1030 !important;
  background:rgba(8,9,10,.94) !important;
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--c-line);
  box-shadow:none;
}
header .navigation, header .navigation.bg-white,
header .navbar, header .navbar.bg-white,
header .top-header, header .top-header.bg-secondary{ background:transparent !important; }
header .navigation{ position:static !important; }

/* horní mikro-lišta */
header .top-header{
  padding:.42rem 0 !important;
  border-bottom:1px solid var(--c-line-soft);
}
header .top-header li{
  color:var(--c-muted) !important;
  font-family:var(--f-ui) !important;
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
}
header .top-header .list-inline{ margin:0; }
header .top-header .list-inline-item{ margin-right:.35rem !important; }
header .top-header .list-inline-item:last-child{ margin-right:0 !important; }
header .top-header img[alt*="Flag"]{
  width:26px !important; height:17px !important; margin:0 !important; display:block;
  filter:grayscale(.85); opacity:.62;
  transition:filter .15s ease, opacity .15s ease;
}
header .top-header a:hover img[alt*="Flag"]{ filter:none; opacity:1; }

/* Přepínač jazyků v rozbaleném menu (jen pod 992 px, kde je hamburger).
   Nad tou hranicí je menu trvale rozbalené, takže by se vlaječky
   zdvojily s horní lištou. */
.pn-lang-mobile{ display:none; }
@media (max-width:991.98px){
  /* horní lišta na mobilu nemá co nést — text trasy je v pásu pod
     sliderem, vlaječky se přestěhovaly do hamburgeru */
  header .top-header{ display:none !important; }

  .pn-lang-mobile{
    display:block; text-align:center;
    margin-top:.9rem; padding-top:1rem;
    border-top:1px solid var(--c-line);
  }
  .pn-lang-mobile ul{ margin:0; padding:0; }
  .pn-lang-mobile .list-inline-item{ margin:0 .45rem !important; }
  .pn-lang-mobile img[alt*="Flag"]{
    width:34px !important; height:23px !important; margin:0 !important;
    display:inline-block; vertical-align:middle;
    border:0; opacity:.8;
    transition:opacity .15s ease, border-color .15s ease;
  }
  .pn-lang-mobile a:hover img[alt*="Flag"],
  .pn-lang-mobile a:focus img[alt*="Flag"]{ opacity:1; }
}

/* hlavní pruh */
header .navbar{ padding:0 !important; min-height:var(--head-h); }
/* Logo (varianta 02) nese identitu celého webu — dostává v hlavičce
   maximum prostoru, jaký snese, aniž by rozhodilo výšku pruhu. */
header .navbar-brand{ padding:.85rem 0 !important; margin-right:2.5rem; }
header .navbar-brand img.brand{
  height:86px !important; max-height:86px !important; width:auto !important; display:block;
}
@media (max-width:1199.98px){ header .navbar-brand img.brand{ height:70px !important; max-height:70px !important; } }
@media (max-width:575px){ header .navbar-brand img.brand{ height:52px !important; max-height:52px !important; } }

header .navbar-nav{ align-items:center; }
header .navbar .nav-item .nav-link,
header .navbar-light .navbar-nav .nav-link{
  position:relative;
  color:var(--c-text-dim) !important;
  font-family:var(--f-ui) !important;
  font-weight:600 !important; font-size:13px;
  text-transform:uppercase; letter-spacing:.18em !important;
  padding:1.5rem 1.1rem !important;
  opacity:1 !important; transition:color .16s ease;
}
header .navbar .nav-item .nav-link::after{
  content:""; position:absolute; left:1.1rem; right:1.1rem; bottom:22px;
  height:2px; background:var(--c-orange);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
header .navbar .nav-link.dropdown-toggle::after{
  position:static; content:""; display:inline-block;
  width:0; height:0; margin-left:.5rem; vertical-align:.16em;
  border:.3em solid transparent; border-top-color:currentColor; border-bottom:0;
  background:none; transform:none; transition:none;
}
header .navbar .nav-item:not(.dropdown) .nav-link:hover::after,
header .navbar .nav-item .nav-link.active::after{ transform:scaleX(1); }
header .navbar .nav-item .nav-link:hover,
header .navbar .nav-item.show .nav-link{ color:#fff !important; }
/* aktivní položka — oranžová a s trvalým podtržením, ať je poznat,
   kde se návštěvník nachází */
header .navbar .nav-item .nav-link.active{ color:var(--c-orange) !important; }
header .navbar .nav-item .nav-link.active::after{ transform:scaleX(1) !important; }
/* ---- rozbalovací menu -------------------------------------------
   Panel navazuje přímo na položku (v mezeře pod ní myš ztrácela :hover
   a menu se zavíralo), sjíždí shora a drží oranžovou hranu hlavičky. */
header .navbar .dropdown-menu{
  margin-top:0; padding:.35rem 0; left:auto; right:0;
  min-width:15rem; max-width:calc(100vw - 24px);
  background:var(--c-void);
  border:1px solid var(--c-line); border-top:2px solid var(--c-orange);
  border-radius:0;
  box-shadow:0 26px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4);
  transform-origin:top right; transform:translateY(-8px);
}
@supports (backdrop-filter:blur(6px)){
  header .navbar .dropdown-menu{
    background:rgba(8,9,10,.92); backdrop-filter:blur(12px) saturate(1.3);
  }
}
header .navbar .dropdown:hover .dropdown-menu,
header .navbar .dropdown-menu.show{ transform:translateY(0); }

header .navbar .dropdown-item{
  position:relative;
  color:var(--c-text-dim) !important;
  font-family:var(--f-ui) !important;
  font-weight:600; font-size:13.5px; letter-spacing:.04em;
  padding:.72rem 2.4rem .72rem 1.4rem;
  border-left:2px solid transparent;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease;
}
/* vlasová linka mezi položkami — ať je seznam čitelný i bez odsazení */
header .navbar .dropdown-item + .dropdown-item{ box-shadow:inset 0 1px 0 var(--c-line-soft); }
/* šipka vyjíždí zprava při najetí */
header .navbar .dropdown-item::after{
  content:"\2192"; position:absolute; right:1.15rem; top:50%;
  transform:translate(-6px,-50%); opacity:0;
  color:var(--c-orange); font-size:13px; line-height:1;
  transition:transform .18s ease, opacity .18s ease;
}
header .navbar .dropdown-item:hover,
header .navbar .dropdown-item:focus-visible{
  background:rgba(255,122,0,.09); color:#fff !important;
  border-left-color:var(--c-orange);
}
header .navbar .dropdown-item:hover::after,
header .navbar .dropdown-item:focus-visible::after{ transform:translate(0,-50%); opacity:1; }
header .navbar .dropdown-item.active{
  background:rgba(255,122,0,.06); color:var(--c-orange) !important;
  border-left-color:var(--c-orange);
}
header .navbar .dropdown-item.active::after{ transform:translate(0,-50%); opacity:.75; }

@media (min-width:992px){
  header .navbar .nav-item.dropdown{ position:relative; }
  /* bez tohohle zůstane zděděné top:100px a pod položkou vznikne mezera */
  header .navbar .dropdown-menu{ top:100%; }
  /* rezerva proti sub-pixelovým mezerám při dojezdu myši */
  header .navbar .nav-item.dropdown .dropdown-menu::before{
    content:""; position:absolute; left:0; right:0; bottom:100%; height:6px;
  }
}
@media (prefers-reduced-motion:reduce){
  header .navbar .dropdown-menu,
  header .navbar .dropdown-item,
  header .navbar .dropdown-item::after{ transition:none; }
}

header .navbar-toggler{ padding:.45rem .6rem; border:1px solid var(--c-line) !important; border-radius:0; }
header .navbar-toggler-icon{ filter:invert(1) brightness(2); }

@media (max-width:991.98px){
  header .navbar-collapse{ border-top:1px solid var(--c-line-soft); margin-top:.2rem; padding:.4rem 0 1rem; }
  header .navbar .nav-item .nav-link{ padding:.85rem .5rem !important; }
  header .navbar .nav-item .nav-link::after{ display:none; }
  header .navbar .dropdown-menu{
    right:auto; left:0; width:100%; min-width:0; box-shadow:none;
    border:0; border-left:2px solid var(--c-orange);
    background:rgba(255,255,255,.03); text-align:center;
    backdrop-filter:none; transform:none;
  }
  header .navbar .dropdown-item{ border-left:0; padding:.72rem 1rem; }
  header .navbar .dropdown-item::after{ display:none; }
}

/* =================================================================
   HERO
   ================================================================= */

.swiper{ background:var(--c-void); }
.swiper-slide{ background:var(--c-void) !important; }
.swiper-slide img{ filter:saturate(.82) contrast(1.06) brightness(.92); }
/* horní i spodní stínování — nahoře kvůli plovoucí hlavičce */
.swiper-slide.position-relative::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to bottom, rgba(8,9,10,.65) 0%, rgba(8,9,10,0) 22%),
    linear-gradient(to top, rgba(8,9,10,.94) 0%, rgba(8,9,10,.45) 34%, rgba(8,9,10,0) 68%);
}

.varex, .swiper-caption{
  position:absolute !important; z-index:2;
  left:50% !important; right:auto !important;
  bottom:clamp(44px,7vh,104px) !important; top:auto !important;
  transform:translateX(-50%);
  width:min(1320px, calc(100% - 48px)) !important; max-width:none;
  padding:0 !important; background:transparent !important; border:0 !important;
  text-align:left !important; white-space:normal !important; overflow:visible;
  font-family:var(--f-display) !important;
  font-size:clamp(28px,4.2vw,70px) !important;
  line-height:.9; letter-spacing:-.025em;
  text-transform:uppercase; color:#fff !important;
  text-shadow:0 6px 40px rgba(0,0,0,.55);
}
.varex::before, .swiper-caption::before{
  content:""; display:block; width:56px; height:2px;
  background:var(--c-orange); margin-bottom:22px;
}

.swiper-button-next, .swiper-button-prev{
  width:56px !important; height:56px !important; margin-top:-28px !important;
  border-radius:0; background:transparent;
  border:0; color:#fff !important;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.swiper-button-next{ right:28px !important; } .swiper-button-prev{ left:28px !important; }
.swiper-button-next:hover, .swiper-button-prev:hover{
  background:transparent; color:var(--c-orange) !important;
}
.swiper-button-next::after, .swiper-button-prev::after{ font-size:15px !important; font-weight:700; }

.swiper-pagination{ bottom:18px !important; z-index:3; }
.swiper-pagination-bullet{
  width:22px !important; height:2px !important; border-radius:0 !important;
  background:rgba(255,255,255,.3) !important; opacity:1 !important;
  transition:background .18s ease;
}
.swiper-pagination-bullet-active{ background:var(--c-orange) !important; }

@media (max-width:991.98px){
  .swiper-button-next, .swiper-button-prev{ width:42px !important; height:42px !important; margin-top:-21px !important; }
  .swiper-button-next{ right:12px !important; } .swiper-button-prev{ left:12px !important; }
}
@media (max-width:576px){
  .swiper{ height:340px !important; }
  .varex, .swiper-caption{
    display:block !important; bottom:52px !important; width:calc(100% - 32px) !important;
    font-size:clamp(24px,7.6vw,34px) !important;
  }
  .varex::before, .swiper-caption::before{ width:40px; margin-bottom:12px; }
}

/* =================================================================
   PÁS S TRASOU (pod sliderem)
   Obce jako body na lince — trasa sama místo čtyř nesourodých čísel.
   ================================================================= */

.pn-route{
  background:var(--c-void);
  border-bottom:1px solid var(--c-line);
  padding:30px 0 34px;
}
.pn-route__meta{
  margin:0 0 26px;
  font-family:var(--f-ui) !important; font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.22em; color:var(--c-muted);
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
}
.pn-route__meta i{
  display:inline-block; width:26px; height:1px;
  background:var(--c-line); margin:0 14px;
}

.pn-route__line{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  position:relative;
}
/* linka vedená středem teček */
.pn-route__line::before{
  content:""; position:absolute; left:0; right:0; top:5px; height:1px;
  background:linear-gradient(to right,
    var(--c-orange) 0 12%, var(--c-line) 12% 88%, var(--c-orange) 88% 100%);
}
.pn-route__line li{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  flex:1 1 0; min-width:0;
  padding-top:20px;
  font-family:var(--f-ui) !important; font-weight:600; font-size:13px;
  letter-spacing:.06em; color:var(--c-muted);
  text-align:center;
}
.pn-route__line li:first-child{ align-items:flex-start; text-align:left; }
.pn-route__line li:last-child{ align-items:flex-end; text-align:right; }
.pn-route__line li::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--c-void); border:2px solid var(--c-line);
}
.pn-route__line li:first-child::before{ left:5px; }
.pn-route__line li:last-child::before{ left:auto; right:0; transform:none; }
/* koncové obce nesou trasu — dostávají barvu i váhu */
.pn-route__line li.is-end{
  color:#fff; font-family:var(--f-display) !important; font-weight:400;
  font-size:clamp(15px,1.5vw,21px); letter-spacing:-.01em; text-transform:uppercase;
}
.pn-route__line li.is-end::before{
  background:var(--c-orange); border-color:var(--c-orange);
  width:13px; height:13px; top:-1px;
}

/* Na úzkém displeji nemá pět názvů vedle sebe šanci — z linky se stane
   jednoduchý řetěz se šipkami. */
@media (max-width:767.98px){
  .pn-route{ padding:22px 0 24px; }
  .pn-route__meta{ margin-bottom:14px; font-size:10.5px; letter-spacing:.18em; }
  .pn-route__meta i{ width:16px; margin:0 9px; }
  .pn-route__line{ display:block; }
  .pn-route__line::before{ display:none; }
  .pn-route__line li{
    display:inline; padding:0; text-align:left;
    font-size:13px; line-height:1.9;
  }
  .pn-route__line li::before{ display:none; }
  .pn-route__line li.is-end{ font-size:15px; }
  .pn-route__line li + li::before{
    content:"→"; display:inline; position:static;
    margin:0 8px; color:var(--c-orange); font-family:var(--f-text);
    width:auto; height:auto; border:0; background:none; transform:none;
  }
  /* koncové body mají vlastní (specifičtější) pravidlo pro tečku, které by
     jinak šipce u poslední obce přimalovalo oranžový puntík */
  .pn-route__line li.is-end::before{
    background:none; border:0; width:auto; height:auto;
    top:auto; left:auto; right:auto; border-radius:0;
  }
}

/* =================================================================
   SEKCE A NADPISY
   ================================================================= */

.section{ padding-top:var(--gap); padding-bottom:var(--gap); }
.section-bottom-lg{ padding-bottom:0 !important; }
.section-title{
  margin-bottom:0 !important;
  font-size:clamp(34px,4.6vw,68px);
  color:#fff !important;
}
.bg-secondary .section-title,.bg-secondary h1,.bg-secondary h2,.bg-secondary h3,.bg-secondary h4,
.bg-gray .section-title,.bg-gray h1,.bg-gray h2,.bg-gray h3,.bg-gray h4{ color:#fff !important; }
.bg-secondary p,.bg-secondary li,.bg-gray p,.bg-gray li,.bg-gray .card-text{ color:var(--c-text-dim) !important; }

/* ---- Úvodní blok na homepage ------------------------------------- */
/* Šablona ho má v col-sm-6 (na tabletu půlka šířky). Přepínám na plnou
   šířku; text zůstává v jednom bloku (dvousloupcová sazba se neosvědčila,
   viz připomínka M. H. 18. 8. 2026). */
section.pt-1 .row.justify-content-center{ padding-top:var(--gap) !important; padding-bottom:var(--gap) !important; }
section.pt-1 .row.justify-content-center > [class*="col-"]{
  width:100% !important; max-width:1180px; flex:0 0 auto;
}
section.pt-1 h3{
  font-family:var(--f-display) !important; font-weight:400 !important;
  text-transform:uppercase; font-size:clamp(30px,4vw,58px);
  line-height:.92 !important; letter-spacing:-.025em;
  color:#fff; margin:0 0 34px; max-width:20ch;
}
section.pt-1 h3 strong{ font-weight:400 !important; color:inherit; }
section.pt-1 .row.justify-content-center p{
  font-size:1.02rem; color:var(--c-text-dim); max-width:none;
  columns:auto;   /* jeden blok přes celou šířku, žádná dvousloupcová sazba */
}
section.pt-1 .btn{ margin-top:14px; }

/* =================================================================
   TLAČÍTKA
   ================================================================= */

.btn{
  border-radius:0 !important;
  font-family:var(--f-ui) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.16em !important; font-size:12px;
  padding:1.05rem 2.2rem; border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover{ transform:none; }
.btn-primary{ background:var(--c-orange) !important; border-color:var(--c-orange) !important; color:#08090a !important; }
.btn-primary:hover{ background:var(--c-amber) !important; border-color:var(--c-amber) !important; color:#08090a !important; }
.btn-primary-outline,
.bg-secondary .btn-primary-outline,.bg-gray .btn-primary-outline{
  background:transparent; border:1px solid var(--c-line) !important; color:#fff !important;
}
.btn-primary-outline:hover,.btn-primary-outline:active{
  background:#fff !important; border-color:#fff !important; color:#08090a !important;
}

/* Bootstrapí outline-secondary (odkaz „Trasa na Mapy.cz“ a spol.) měl šedý
   text i rámeček — na tmavém podkladu sotva vidět. */
.btn.btn-outline-secondary:not(.places-more){
  background:transparent !important; border-color:var(--c-line) !important; color:#fff !important;
}
.btn.btn-outline-secondary:not(.places-more):hover{
  background:#fff !important; border-color:#fff !important; color:#08090a !important;
}

/* "Zobrazit dalších X" pod výpisem služeb — bootstrapí outline-secondary byl
   na světlém panelu skoro neviditelný, tady dostane plnou oranžovou. */
.btn.places-more{
  background:var(--c-orange) !important; border-color:var(--c-orange) !important;
  color:#08090a !important; padding:.85rem 1.4rem; font-size:11.5px;
}
.btn.places-more:hover,.btn.places-more:focus{
  background:var(--c-amber) !important; border-color:var(--c-amber) !important; color:#08090a !important;
}
/* Po rozbalení šipka nahoru — ať je vidět, že se dá zase sbalit. */
.btn.places-more:not(.collapsed) .bi-chevron-down{ transform:rotate(180deg); }
.btn.places-more .bi-chevron-down{ display:inline-block; transition:transform .16s ease; }

/* =================================================================
   ETAPY — dlaždice s velkým číslem
   ================================================================= */

section.bg-white:has(> .service-wrapper){ background:var(--c-bg) !important; }
.service-wrapper{
  transform:none !important;
  padding-top:clamp(40px,5vw,76px);
  padding-bottom:var(--gap);
}

/* Nadpisy sekcí šly na střed, karty a text vlevo — sjednoceno na
   levý praporek, ať grid drží jednu osu. */
.section.bg-secondary .col-12.text-center,
.section.bg-gray .col-12.text-center,
section.bg-gray .col-12.text-center{ text-align:left !important; }
.section.bg-secondary .border-center,
.section.bg-gray .border-center,
section.bg-gray .border-center{ margin-left:0 !important; margin-right:0 !important; }
.service-wrapper .container > .row{ counter-reset:etapa; }
.service-wrapper [class*="col-lg-3"]{ counter-increment:etapa; }

.card.hover-bg-dark-2, .hover-bg-dark-2{
  display:block; position:relative; height:100%;
  background:transparent !important;
  border:0 !important; border-top:1px solid var(--c-line) !important;
  border-radius:0 !important; overflow:visible !important;
  box-shadow:none !important;
  padding-top:22px;
  transition:border-color .2s ease;
}
.hover-bg-dark-2:hover{ transform:none; background:transparent !important; border-top-color:var(--c-orange) !important; }

.hover-bg-dark-2 .card-img-top, .hover-bg-dark-2 img{
  border-radius:0 !important;
  width:100%; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:grayscale(.72) contrast(1.12) brightness(.82);
  transition:filter .45s ease, transform .6s ease;
}
.hover-bg-dark-2:hover img{ filter:grayscale(0) contrast(1.04) brightness(.96); }

/* pořadové číslo etapy — v toku nad fotkou, ne přes ni (přes fotku
   se překrývalo s nadpisem sekce a v difference režimu bylo špinavé) */
.hover-bg-dark-2::before{
  content:counter(etapa,decimal-leading-zero);
  content:attr(data-num); /* skutečné číslo etapy, ne pořadí karty (25. 9. 2026) */
  display:block; margin:0 0 18px;
  font-family:var(--f-display); font-size:clamp(30px,2.6vw,46px);
  line-height:.82; letter-spacing:-.045em; color:var(--c-orange);
  transition:color .16s ease;
}
.hover-bg-dark-2:hover::before{ color:#fff; }

.hover-bg-dark-2 .card-body{ padding:20px 0 0 !important; }
.hover-bg-dark-2 h4, .hover-bg-dark-2 .card-title{
  font-family:var(--f-ui) !important; font-weight:700 !important;
  font-size:17px; letter-spacing:-.005em !important; line-height:1.25 !important;
  color:#fff !important; margin-bottom:.7rem;
  transition:color .16s ease;
}
.hover-bg-dark-2:hover h4{ color:var(--c-orange) !important; }
.hover-bg-dark-2 .card-text{
  color:var(--c-muted) !important; font-size:.92rem; line-height:1.62; margin:0;
}
.hover-bg-dark-2:hover *{ color:inherit; }
.service-wrapper [class*="col-lg-3"]{ margin-bottom:2.5rem !important; }

/* =================================================================
   MAPA A VÝŠKOVÝ PROFIL
   Leaflet vozí světlé dlaždice — invertujeme je do tmavého podkladu,
   ať mapa nesvítí uprostřed černé stránky.
   ================================================================= */

#map, .map-responsive{ border:1px solid var(--c-line); overflow:hidden; max-width:100%; }
#map .leaflet-tile-pane{ filter:invert(1) hue-rotate(180deg) saturate(.62) brightness(.92) contrast(1.04); }
#map .leaflet-control-container .leaflet-control{ filter:none; }
.leaflet-control-zoom a{ background:var(--c-panel) !important; color:#fff !important; border-color:var(--c-line) !important; }
.leaflet-control-attribution{ background:rgba(8,9,10,.7) !important; color:var(--c-muted) !important; }
.leaflet-control-attribution a{ color:var(--c-muted) !important; }
/* Mřížka „čtverečků" přes mapu: Leaflet pokládá dlaždice na zlomky
   pixelu, takže mezi nimi zůstane subpixelový šev. Prosvítalo jím
   výchozí pozadí .leaflet-container (#ddd z leaflet.css, které se
   v šabloně načítá až ZA portálovým CSS, takže vyhrávalo). Na světlé
   mapě to nikdo nevidí, na tmavé je z toho pravítko — pozadí proto
   ladíme na tón invertovaných dlaždic a bereme si ho !important. */
#map, #map_canvas, .leaflet-container{
  max-width:100%; overflow:hidden;
  background:#1b2023 !important;
}
/* Mřížka „čtverečků" přes mapu byla domácí výroba: každá dlaždice je
   <img>, takže si vzala rámeček z pravidla pro obrázky v textu níž.
   Mapové <img> nejsou obsahové obrázky — žádné rámečky. */
.leaflet-container img,
.leaflet-pane img,
#map img, #map_canvas img{
  border:0 !important; outline:0 !important; box-shadow:none !important;
}
/* Popisek „Trasa v mapě". Je to <h5>, a h4–h6 v tomhle systému běží
   UI písmem (viz pravidlo u h4,h5,h6 výš) — vedle nadpisů sekcí, které
   jedou displejovým písmem, to působilo jako cizí prvek. Sjednoceno na
   displejové písmo ve velikosti h3 a odsazeno od mapy. */
.map-title{
  font-family:var(--f-display) !important;
  font-weight:400 !important;
  font-size:clamp(18px,2.8vw,34px) !important;
  text-transform:uppercase;
  letter-spacing:-.018em !important;
  line-height:.92 !important;
  color:#fff !important;
  margin-bottom:1.75rem !important;
}

#elevation-profile{ border:1px solid var(--c-line); border-top:0; background:var(--c-panel); }

/* Výškový profil vozí leaflet-elevation ve světlém „steelblue" tématu —
   pod tmavou mapou svítil jako bílý obdélník. */
.leaflet-control-elevation{
  background:var(--c-panel) !important;
  border-radius:0 !important; box-shadow:none !important;
  border:0 !important; padding:14px 16px 8px !important;
}
/* Bílý obdélník nedělala jedna vlastnost, ale tři vrstvy najednou:
   .elevation-control { background-color:#fff } z inline <style> šablony,
   .leaflet-control-elevation { background:#fff } ze základní vrstvy a
   hlavně vnitřní <svg class="background">, které si samo kreslí
   --ele-bg (defaultně steelblue 20 %). Knihovna je celá řízená přes
   custom properties, takže je přebíjím u zdroje. */
#elevation-profile, .elevation-control, .steelblue-theme,
.leaflet-control-elevation{
  --ele-bg:transparent;
  --ele-area:#ff7a00;
  --ele-stroke:transparent;
  --ele-line:#ff7a00;
  --ele-poly:#ff7a00;
  --ele-axis:#3a4048;
  --ele-grid:#1b1f24;
  --ele-brush:rgba(255,122,0,.22);
  --ele-circle:#2fd3c3;
  --ele-alpha:.42;
}
.elevation-control, .elevation-control.elevation{ background-color:var(--c-panel) !important; }
.elevation-control .background{
  background-color:transparent !important;
  border-radius:0 !important;
}
.elevation-control .area{
  fill:var(--c-orange) !important; fill-opacity:.42 !important;
  stroke:var(--c-orange) !important; stroke-width:2px !important;
  paint-order:fill stroke !important;
}
.elevation-control .mouse-focus-line,
.elevation-control .height-focus.line{ stroke:var(--c-lake) !important; }
.elevation-control circle.height-focus,
.elevation-control circle.mouse-focus-location{
  fill:var(--c-lake) !important; stroke:#08090a !important; stroke-width:2px !important;
}
.elevation-control .axis line,
.elevation-control .axis path{ stroke:#3a4048 !important; }
/* Popisky stupnic. Knihovna je kreslí černě a obtahuje je bílým 2px
   strokem (paint-order:stroke fill) — na tmavém panelu z toho byly
   orámované cedulky. Čistě bílý text bez obtahu. */
.elevation-control .axis text,
.elevation-control .legend text,
.elevation-control .point text{
  fill:#fff !important; font-family:var(--f-ui) !important; font-size:11px !important;
  font-weight:500 !important;
  stroke:none !important; stroke-width:0 !important; paint-order:normal !important;
}
.elevation-control .grid line,
.elevation-control .grid .tick line{ stroke:#1b1f24 !important; }
.elevation-control .elevation-summary,
.elevation-summary{ color:var(--c-muted) !important; font-family:var(--f-ui) !important; }
.elevation-summary .summaryvalue,
.elevation-control .elevation-summary span{ color:var(--c-orange) !important; }
.elevation-toggle-icon{ background-color:var(--c-panel) !important; box-shadow:none !important; border-radius:0 !important; }

/* =================================================================
   PODSTRÁNKY
   ================================================================= */

section.overlay{ padding-top:clamp(56px,7vw,104px); padding-bottom:clamp(36px,4vw,60px); background:var(--c-void); }
section.overlay::before{ background:var(--c-void) !important; }
section.overlay h2{ font-size:clamp(32px,4.8vw,66px); margin-bottom:1rem !important; color:#fff !important; }
section.overlay .breadcrumb{ margin-bottom:0; }
section.overlay .breadcrumb-item,
section.overlay .breadcrumb-item a{
  color:var(--c-muted) !important;
  font-family:var(--f-ui) !important; font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.18em;
}
section.overlay .breadcrumb-item a:hover{ color:var(--c-orange) !important; }
section.overlay .breadcrumb-item.active{ color:#fff !important; }
section.overlay .breadcrumb-item + .breadcrumb-item::before{ color:var(--c-line); }

/* měřítko řádku — text šel přes celých 1320 px */
section.pt-1 .col-lg-12 > p,
section.pt-1 .col-lg-12 > h2,
section.pt-1 .col-lg-12 > h3,
section.pt-1 .col-lg-12 > h4,
section.pt-1 .col-lg-12 > ul,
section.pt-1 .col-lg-12 > ol,
section.pt-1 .col-lg-12 > blockquote{ max-width:74ch; }
section.pt-1 .col-lg-12 > h3{
  font-size:clamp(26px,3vw,44px); margin:2.4rem 0 1.1rem; color:#fff;
}
section.pt-1 .col-lg-12 > h3:first-child{ margin-top:0; }
/* Obrázky v textu bez rámečku. Navíc: ikonky mají filter invert(),
   který obracel i barvu rámečku — z tmavé linky se stal svítivý bílý
   obdélníček kolem každé ikony. */
section.pt-1 .col-lg-12 img{ border:0; }
section.pt-1 .col-lg-12 > p > img[alt*="icon"]{ border:0; opacity:.9; filter:invert(1) brightness(1.6); }
blockquote{ border-left:2px solid var(--c-orange); padding-left:1.4rem; color:#fff; }

/* prázdná sekce (Aktuality, Výlety, Ke stažení, dokud nemají obsah) */
.pn-empty{
  margin:0; padding:26px 0 0;
  border-top:1px solid var(--c-line);
  color:var(--c-muted); font-size:1.02rem;
}

/* formuláře */
.form-control,.form-select,input[type=text],input[type=email],input[type=search],textarea,select{
  background:var(--c-panel) !important; border:1px solid var(--c-line) !important;
  color:#fff !important; border-radius:0 !important;
}
.form-control::placeholder{ color:var(--c-muted) !important; }
.form-control:focus,.form-select:focus{ border-color:var(--c-orange) !important; box-shadow:none !important; }

/* =================================================================
   PATIČKA
   ================================================================= */

footer{ background:var(--c-void) !important; border-top:1px solid var(--c-line); margin-top:auto; }
footer .section{ padding-top:clamp(56px,6vw,92px); padding-bottom:clamp(40px,4vw,64px); }
footer img{ height:92px !important; width:auto; max-width:100%; }
footer h4{
  color:var(--c-muted) !important;
  font-family:var(--f-ui) !important; font-weight:600 !important;
  font-size:11px; text-transform:uppercase; letter-spacing:.22em !important;
  margin-bottom:1.6rem !important;
}
footer p, footer li, footer .text-light{ color:var(--c-muted) !important; font-size:.94rem; }
footer a, footer .list-styled li a, footer .text-light.d-block{
  color:var(--c-text-dim) !important; text-decoration:none;
  transition:color .15s ease;
}
footer a:hover, footer .list-styled li a:hover{ color:var(--c-orange) !important; }
footer .list-styled{ padding-left:0; list-style:none; }
footer .list-styled li{ position:relative; padding-left:0; margin-bottom:.75rem !important; }
footer .list-styled li::before{ content:none; }
footer .cc-link, footer .text-white{ color:var(--c-muted) !important; font-weight:400 !important; }
footer .cc-link:hover{ color:var(--c-orange) !important; }
footer h4.text-white{ color:var(--c-muted) !important; }

/* =================================================================
   DROBNOSTI
   ================================================================= */

.icos{ color:var(--c-orange) !important; }
.text-primary{ color:var(--c-orange) !important; }
html body .cm.cm--box, html body .cm--box{
  max-width:calc(100vw - 16px) !important; width:auto !important; box-sizing:border-box !important;
}
:target{ scroll-margin-top:calc(var(--head-h) + 48px); }

/* uživatel preferující omezený pohyb */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* Vlaječky ani šipky karuselu nemají mít rámeček — orámování na malé
   ploše působí jako chyba renderu. */
header img[alt*="Flag"], .pn-lang-mobile img[alt*="Flag"]{
  border:0 !important; outline:0 !important; box-shadow:none !important;
}
.swiper-button-next, .swiper-button-prev{ border:0 !important; }

/* Trasa v mapě. leaflet-gpx nastavuje barvu prezentačním atributem
   stroke="#ffffff", jenže CSS pravidlo (z knihovny) ho přebíjí — výsledná
   barva vycházela černá. Proto natvrdo tady; markery i výškový profil
   mají vlastní pravidla výš. */
#map .leaflet-overlay-pane path{
  stroke:#ffffff !important;
  stroke-width:4px !important;
  stroke-opacity:1 !important;
}

/* =================================================================
   SCROLL EFEKTY
   Tři vrstvy, všechny běží na transform/opacity (nikdy na top/height),
   aby zůstaly na kompozitoru a nešlapaly po layoutu. Skript, který je
   pohání, je v index.php pod podmínkou $_pn.
   Uživatel s prefers-reduced-motion nedostane nic — JS se vypne sám a
   globální pravidlo výš navíc zkrátí přechody na 0.
   ================================================================= */

/* 1. Ukazatel projeté trasy — 3px pásek v horní hraně, nad sticky
      hlavičkou (ta má z-index 1030). scaleX řídí JS přes --pn-p. */
.pn-progress{
  position:fixed; left:0; top:0; z-index:1040;
  width:100%; height:3px; pointer-events:none;
  background:linear-gradient(90deg, var(--c-orange, #ff7a00), var(--pn-accent-2, #ffc24a));
  transform:scaleX(var(--pn-p, 0)); transform-origin:0 50%;
}

/* 2. Paralaxa v úvodním slideru. Obrázek je zvětšený o 20 %, takže se
      smí posouvat o ±10 % výšky a pořád vyplní slide. Posun v --pn-par
      počítá JS z pozice slideru ve viewportu. */
.pn-parallax .swiper-slide{ overflow:hidden; }
.pn-parallax .swiper-slide img{
  transform:translate3d(0, var(--pn-par, 0px), 0) scale(1.2);
  will-change:transform;
}

/* 3. Nabíhání obsahu při vjezdu do viewportu. Atribut i --pn-d
      (stagger) rozdává JS, aby se nemusela sahat do šablon. */
[data-pn-reveal]{
  opacity:0; transform:translate3d(0, 26px, 0);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--pn-d, 0s),
             transform .7s cubic-bezier(.22,.61,.36,1) var(--pn-d, 0s);
}
[data-pn-reveal].is-in{ opacity:1; transform:none; }

/* Systémové „omezit pohyb" efekty vypíná — na Windows to bývá zaplé i bez
   vědomí uživatele (Nastavení → Usnadnění přístupu → Zobrazovat animace).
   Kvůli náhledu jde přebít adresou s ?motion=1, což skript překlopí do
   data-pn-motion="force" na <html>. Běžný návštěvník tím nedotčený. */
@media (prefers-reduced-motion:reduce){
  html:not([data-pn-motion="force"]) .pn-parallax .swiper-slide img{ transform:none; }
  html:not([data-pn-motion="force"]) [data-pn-reveal]{ opacity:1; transform:none; }
  /* globální pravidlo výš zkracuje všechny přechody na 0,1 ms — při
     vynuceném náhledu je musíme vrátit, jinak obsah jen probleskne */
  html[data-pn-motion="force"] [data-pn-reveal]{ transition-duration:.7s !important; }
}

/* =================================================================
   ZÁHLAVÍ — jedna lišta
   Navazuje na systém „ASFALT" (jeho proměnné i písmo), jen mění
   strukturu: dvě tmavé lišty nad sebou nahrazuje jeden pruh.
   Horní lišta se pro tenhle web už nevykresluje (index.php), její
   obsah je tady: podtitul pod logem, jazyky jako textové kódy.
   ================================================================= */
header.pn-header{ --head-h: 100px; }
header.pn-header .navbar{ padding:0 !important; min-height:var(--head-h); }

/* Logo. Podtitul „105 km · Kadaň → Ústí nad Labem" byl z brandu
   odstraněn (index.php), takže výška lišty patří celá logu.
   --head-h musí sedět na logo + 2×.5rem padding, jinak sticky offsety
   a scroll-margin kotev počítají se starou výškou. */
header.pn-header .navbar-brand{
  display:flex; align-items:center;
  padding:.5rem 0 !important; margin-right:2.2rem;
}
header.pn-header .navbar-brand img.brand{
  height:84px !important; max-height:84px !important; width:auto !important;
}
@media (max-width:1199.98px){ header.pn-header .navbar-brand img.brand{ height:72px !important; max-height:72px !important; } }
@media (max-width:575px){  header.pn-header .navbar-brand img.brand{ height:54px !important; max-height:54px !important; } }

/* menu vpravo */
header.pn-header .navbar-collapse{ justify-content:flex-end; }
header.pn-header .navbar-nav{ align-items:center; }

/* jazyky jako textové kódy místo drobných vlajek */
header.pn-header .pn-lang-desktop{
  display:flex; align-items:center; gap:.15rem;
  margin-left:1.2rem; padding-left:1.2rem;
  border-left:1px solid var(--c-line, #23272d);
}
header.pn-header .pn-lang-code{
  font-family:var(--f-ui, 'Archivo', system-ui, sans-serif);
  font-weight:700; font-size:.78rem; letter-spacing:1.3px;
  color:var(--c-muted, #868d96) !important; text-decoration:none;
  padding:.3rem .42rem; border-radius:2px; line-height:1;
}
header.pn-header .pn-lang-code:hover{
  color:var(--c-orange, #ff7a00) !important; background:rgba(255,255,255,.06);
}
@media (max-width:991.98px){
  header.pn-header .pn-lang-desktop{ display:none; }
  header.pn-header .navbar-brand{ margin-right:0; }
}

/* Obrázky vložené do textu z editoru (25. 9. 2026) — nikdy nepřetečou šířku. */
section.pt-1 p img, section.pt-1 figure img { max-width: 100%; height: auto !important; }
section.pt-1 p img { border-radius: 8px; margin: 6px 0; }


/* ── Foto z fotobanky v textu (13. 10. 2026) ─────────────────────────────
   Vkládá admin (CKEditor tlačítka „Foto z fotobanky“ a „Pruh fotek“).
   .fbf = jedna fotka, šířka v % z adminu (30/50/75/100), .fbf-left/right
   obtékaná textem, .fbf-center na střed. .fbg = vodorovný posuvný pruh.
   Tablet: malé fotky aspoň polovina; mobil: vždy celá šířka bez obtékání. */
:where(div, section, article):has(> .fbf-left, > .fbf-right) { display: flow-root; }
.fbf { margin: .35rem 0 1.1rem; max-width: 100%; min-width: min(100%, 240px); }
.fbf a, .fbf img { display: block; }
.fbf img { width: 100% !important; max-width: 100%; height: auto !important; border-radius: 6px; margin: 0; }
.fbf a { cursor: zoom-in; }
.fbf figcaption { font-size: .875em; opacity: .75; margin-top: .4rem; line-height: 1.4; }
.fbf-left { float: left; margin-right: 1.5rem; }
.fbf-right { float: right; margin-left: 1.5rem; }
.fbf-center { clear: both; margin-left: auto; margin-right: auto; }
.fbg { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0 1.5rem; padding-bottom: 8px; clear: both; scrollbar-width: thin; }
.fbg a { flex: 0 0 auto; display: block; scroll-snap-align: start; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.fbg img { display: block; width: auto !important; height: 240px; max-width: none; margin: 0; border-radius: 6px; transition: transform .25s, opacity .25s; }
.fbg a:hover img { transform: scale(1.03); opacity: .92; }
.fbg-s img { height: 160px; }
.fbg-l img { height: 320px; }
@media (max-width: 992px) {
  .fbf { min-width: min(100%, 50%); }
}
@media (max-width: 576px) {
  .fbf { float: none; width: 100% !important; margin-left: 0; margin-right: 0; }
  .fbg { gap: 8px; }
  .fbg img { height: 180px; }
  .fbg-s img { height: 140px; }
  .fbg-l img { height: 230px; }
}
@media (prefers-reduced-motion: reduce) {
  .fbg img { transition: none; }
  .fbg a:hover img { transform: none; }
}