/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka 91: portfolio. Miami noc s dohasínajícím západem slunce
   stojí za obsahem (palmy a slunce jako v patičce webu). Složky jsou desky:
   záda s ouškem, tři fotky, které z nich koukají, a skleněná přední strana
   s neonovou hranou. Najetí desky pootevře a fotky vysune, kliknutí složku
   otevře: nebe potemní a fotky jdou v řádcích stejné výšky. Prohlížeč fotek
   leží nad filmovým filtrem webu, aby fotky ukazoval v pravých barvách. */
/* Zlatá hodinka 173: hladký roh, násobek --roh-hladky drží zh-plast. */
body.zh .zh-port {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-top: clamp(78px, 12vh, 120px);
}
/* ─────────────────────────────  nebe  ────────────────────────────── */
.zh-port__nebe {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #080410;
}
.zh-port__zare {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #080410 0%, #120818 34%, #2A1233 60%, #50234F 80%, #8E3F77 100%);
  transition: opacity 1s ease;
}
.zh-port__slunce {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(300px, 44vw, 640px);
  aspect-ratio: 1;
  translate: -50% 56%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 224, 181, 0.92) 0%, rgba(250, 176, 142, 0.6) 32%, rgba(250, 129, 185, 0.24) 54%, transparent 71%);
  opacity: 0.8;
  transition: opacity 1s ease;
}
.zh-port .zh-port__palma {
  position: absolute;
  bottom: -3%;
  width: auto;
  max-width: none;
  height: min(80vh, 64vw);
  transform-origin: 50% 100%;
  animation: zh-port-vitr 9s ease-in-out infinite;
  transition: opacity 1s ease;
}
.zh-port .zh-port__palma--vlevo {
  left: -9%;
}
.zh-port .zh-port__palma--vpravo {
  right: -10%;
  animation-delay: -3.4s;
}
.zh-port .zh-port__palma--daleka {
  left: 74%;
  height: min(44vh, 32vw);
  opacity: 0.5;
  animation-delay: -5.8s;
}
.zh-port__opar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14%;
  background: linear-gradient(0deg, rgba(250, 129, 185, 0.22), transparent);
  transition: opacity 1s ease;
}
/* Otevřená složka: slunce zapadne, ať fotky nesoupeří s nebem. */
.zh-port--slozka .zh-port__zare {
  opacity: 0.32;
}
.zh-port--slozka .zh-port__slunce,
.zh-port--slozka .zh-port__opar {
  opacity: 0.18;
}
.zh-port--slozka .zh-port__palma {
  opacity: 0.35;
}
.zh-port--slozka .zh-port__palma--daleka {
  opacity: 0.15;
}
@keyframes zh-port-vitr {
  0%,
  100% {
    rotate: -0.5deg;
  }
  50% {
    rotate: 0.7deg;
  }
}
/* ─────────────────────────────  hlavička  ────────────────────────── */
.zh-port__hlava {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(26px, 5vh, 50px);
  text-align: center;
}
.zh-port h1.zh-port__titul {
  max-width: 15ch;
  margin-bottom: 0.32em;
  background: linear-gradient(96deg, #FDE0B5 0%, #FAB08E 42%, #FA81B9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.zh-port p.zh-port__perex {
  max-width: 44ch;
  margin: 0 auto;
  font-size: var(--zh-pismo-perex);
  text-wrap: balance;
}
.zh-port p.zh-port__prazdne {
  max-width: none;
  padding: 40px 0 120px;
  text-align: center;
  color: #C9A6BC;
}
/* ─────────────────────────────  složky  ──────────────────────────── */
.zh-port__slozky {
  --zh-port-mezera: clamp(12px, 2.4vw, 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 44px) var(--zh-port-mezera);
  padding-top: clamp(14px, 2vw, 24px);
}
/* Zlatá hodinka 123: na telefonu dvě desky v řadě vyplní šířku obsahu,
   takže okraje sedí s nadpisem i s fotkami otevřené složky. Desku samotnou
   (záda, fotky, přední strana, najetí) kreslí jádro, .zh-deska v zh-plast
   (Zlatá hodinka 124), stejně jako ve správě složek ve WordPressu. */
.zh-port__slozka {
  flex: 0 1 clamp(150px, calc((100% - var(--zh-port-mezera)) / 2), 264px);
  animation: zh-port-prichod 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--zh-i, 0) * 80ms + 0.12s);
}
@keyframes zh-port-prichod {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}
/* Kliknutí: fotky vylétnou ze složky, pak se složka otevře (001-slozky.js). */
.zh-port .zh-deska.zh-port__slozka--otevira {
  --zh-vysun: 4;
}
.zh-port .zh-port__slozka--otevira .zh-deska__list {
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.45, 0, 0.7, 0.4), opacity 0.45s ease 0.05s, filter 0.4s ease;
}
.zh-port .zh-port__slozka--otevira .zh-deska__predek {
  transition-duration: 0.5s;
}
/* ─────────────────────────────  otevřená složka  ─────────────────── */
.zh-port__panel-hlava {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(20px, 4vh, 38px);
  text-align: center;
}
/* Zlatá hodinka 128: stín skla pod tlačítkem sahá skoro 28 px, na nízkém
   okně (telefon na šířku) by padl do nadpisu složky. */
.zh-port .zh-port__vsechny {
  margin-bottom: clamp(28px, 3vh, 36px);
}
.zh-port h2.zh-port__nadpis {
  margin-bottom: 0.18em;
  outline: none;
  text-wrap: balance;
}
.zh-port p.zh-port__udaj {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  max-width: none;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A6BC;
}
.zh-port__tecka {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FA81B9;
  box-shadow: 0 0 8px rgba(250, 129, 185, 0.8);
}
/* Řádky stejné výšky: fotka roste podle svého poměru stran, poslední řádek
   se nenatahuje (výplň ::after). */
.zh-port__mrizka {
  --zh-radek: clamp(104px, 18.75vw, 250px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.9vw, 12px);
}
.zh-port__mrizka::after {
  content: '';
  flex-grow: 1000000;
}
.zh-port__foto {
  position: relative;
  display: block;
  flex: var(--zh-p) 1 calc(var(--zh-p) * var(--zh-radek));
  overflow: hidden;
  border-radius: calc(8px * var(--roh-hladky, 1));
  corner-shape: squircle;
  outline: none;
  background: rgba(87, 51, 91, 0.45);
  animation: zh-port-foto 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--zh-k, 0) * 45ms + 0.05s);
}
@keyframes zh-port-foto {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}
.zh-port__vyplnka {
  display: block;
  padding-bottom: calc(100% / var(--zh-p));
}
.zh-port .zh-port__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}
.zh-port__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 144, 182, 0.1);
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}
@media (hover: hover) {
  .zh-port .zh-port__foto:hover img {
    transform: scale(1.045);
    filter: saturate(1.08) brightness(1.05);
  }
  .zh-port__foto:hover::after {
    box-shadow: inset 0 0 0 2px rgba(250, 129, 185, 0.75), inset 0 0 26px rgba(250, 129, 185, 0.22);
  }
}
.zh-port__foto:focus-visible::after {
  box-shadow: inset 0 0 0 2px rgba(250, 129, 185, 0.9), inset 0 0 26px rgba(250, 129, 185, 0.22);
}
/* Další složka: malé desky s náhledy a jménem. */
.zh-port__dalsi {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  width: min(640px, 100%);
  margin: clamp(30px, 6vh, 56px) auto 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.4vw, 28px) clamp(14px, 1.8vw, 20px) clamp(20px, 2.4vw, 30px);
  border-radius: calc(18px * var(--roh-hladky, 1));
  corner-shape: squircle;
  outline: none;
  background: linear-gradient(120deg, rgba(62, 27, 70, 0.88), rgba(28, 11, 34, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 144, 182, 0.18), var(--zh-stin-karta);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.zh-port__dalsi:focus-visible {
  background: linear-gradient(120deg, rgba(75, 33, 84, 0.92), rgba(36, 14, 43, 0.9399999999999999));
  box-shadow: inset 0 0 0 1px rgba(250, 129, 185, 0.6), var(--zh-stin-karta-vybrana);
}
@media (hover: hover) {
  .zh-port__dalsi:hover {
    background: linear-gradient(120deg, rgba(75, 33, 84, 0.92), rgba(36, 14, 43, 0.9399999999999999));
    box-shadow: inset 0 0 0 1px rgba(250, 129, 185, 0.6), var(--zh-stin-karta-vybrana);
  }
}
.zh-port__dalsi-fotky {
  position: relative;
  flex: none;
  width: clamp(86px, 11vw, 120px);
  aspect-ratio: 4 / 3;
}
.zh-port .zh-port__dalsi-fotky img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: calc(6px * var(--roh-hladky, 1));
  corner-shape: squircle;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.9);
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.12);
}
.zh-port .zh-port__dalsi-fotky img:nth-child(1) {
  transform: translateX(-10%) rotate(-9deg);
  filter: brightness(0.75);
}
.zh-port .zh-port__dalsi-fotky img:nth-child(2) {
  transform: translateX(10%) rotate(8deg);
  filter: brightness(0.75);
}
.zh-port .zh-port__dalsi-fotky img:nth-child(3) {
  transform: rotate(-1deg);
}
@media (hover: hover) {
  .zh-port__dalsi:hover .zh-port__dalsi-fotky img:nth-child(1) {
    transform: translateX(-22%) rotate(-15deg);
  }
  .zh-port__dalsi:hover .zh-port__dalsi-fotky img:nth-child(2) {
    transform: translateX(22%) rotate(13deg);
  }
}
.zh-port__dalsi-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.zh-port__dalsi-text .zh-stitek {
  margin-bottom: 6px;
}
.zh-port__dalsi-jmeno {
  font-size: clamp(18px, calc(1.1vw + 12px), 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FDE0B5;
}
.zh-port__dalsi-sipka {
  color: #FA81B9;
  transition: translate 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.12);
}
@media (hover: hover) {
  .zh-port__dalsi:hover .zh-port__dalsi-sipka {
    translate: 6px 0;
  }
}
/* ─────────────────────────────  výzva  ───────────────────────────── */
.zh-port__vyzva {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(56px, 10vh, 110px) 0 clamp(150px, 26vh, 260px);
  text-align: center;
}
.zh-port h2.zh-port__vyzva-nadpis {
  font-size: var(--zh-pismo-h3);
  text-wrap: balance;
}
.zh-port__vyzva p {
  margin: 0 auto 1.5em;
  text-wrap: balance;
}
.zh-port__vyzva-tl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* ─────────────────────────────  prohlížeč fotek  ─────────────────── */
/* Skript prohlížeč přesune do body, ven z izolované sekce: jen tak leží nad
   filmovým filtrem (9000), zvukem a posuvníkem a pod kurzorem (9500).
   Tažení fotky dolů pozadí zprůhledňuje (--zh-lb-tma). */
.zh-port__lb {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: rgba(8, 4, 16, var(--zh-lb-tma, 0.95));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.zh-port__lb[hidden],
.zh-port__lb [hidden] {
  display: none !important;
}
.zh-port__lb--zobrazeno {
  opacity: 1;
}
.zh-port__lb-lista {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 12px clamp(14px, 3vw, 28px) 10px;
}
.zh-port__lb-nazev {
  overflow: hidden;
  font-size: clamp(13px, calc(0.4vw + 11px), 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FDE0B5;
}
.zh-port__lb-pocet {
  flex: none;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #FA81B9;
}
.zh-port__lb-zavrit {
  flex: none;
  margin-left: auto;
}
.zh-port__lb-scena {
  position: relative;
  overflow: hidden;
  margin: 0 clamp(10px, 2vw, 28px);
  touch-action: none;
  cursor: grab;
}
.zh-port__lb-scena:active {
  cursor: grabbing;
}
.zh-port__lb .zh-port__lb-foto {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  border-radius: calc(6px * var(--roh-hladky, 1));
  corner-shape: squircle;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
  background: rgba(87, 51, 91, 0.35);
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform, opacity;
}
/* Fotka, která letí z mřížky do prohlížeče a zpátky (001-slozky.js). */
.zh-port__letec {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9401;
  max-width: none;
  margin: 0;
  border-radius: calc(6px * var(--roh-hladky, 1));
  corner-shape: squircle;
  object-fit: cover;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
  transform-origin: 0 0;
  pointer-events: none;
}
/* Šipky kousek od kraje fotky a v její půlce výšky (polohu počítá skript):
   vedle fotky, když je místo, jinak kousek dovnitř od jejího kraje. */
.zh-port__lb-sipka.zh-tl-sipka {
  position: absolute;
  top: var(--zh-lb-y, 50%);
  z-index: 2;
  translate: 0 -50%;
  opacity: 0;
  transition: box-shadow 0.25s ease, background 0.25s ease, scale 0.2s ease, opacity 0.35s ease, left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), right 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zh-port__lb--zobrazeno .zh-port__lb-sipka.zh-tl-sipka {
  opacity: 1;
}
.zh-port__lb-sipka--vlevo {
  left: var(--zh-lb-vlevo, 16px);
}
.zh-port__lb-sipka--vpravo {
  right: var(--zh-lb-vpravo, 16px);
}
/* Zlatá hodinka 128: při otevření prohlížeče stojí šipky hned na místě
   (001-slozky.js), kloužou jen při listování mezi fotkami jiného tvaru. */
.zh-port__lb--na-miste .zh-port__lb-sipka.zh-tl-sipka {
  transition: opacity 0.35s ease;
}
/* Filmový pás: náhledy všech fotek složky s perforací nahoře a dole. */
.zh-port__lb-pas {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 16px clamp(14px, 3vw, 28px) 18px;
  background-color: rgba(0, 0, 0, 0.35);
  background-image: radial-gradient(circle, rgba(253, 224, 181, 0.22) 1.4px, transparent 1.9px), radial-gradient(circle, rgba(253, 224, 181, 0.22) 1.4px, transparent 1.9px);
  background-position: 0 5px, 0 calc(100% - 5px);
  background-size: 11px 6px;
  background-repeat: repeat-x;
  scrollbar-width: none;
}
.zh-port__lb-pas::-webkit-scrollbar {
  display: none;
}
.zh-port__lb-snimek {
  flex: none;
  width: 60px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: calc(4px * var(--roh-hladky, 1));
  corner-shape: squircle;
  outline: none;
  overflow: hidden;
  background: rgba(87, 51, 91, 0.6);
  opacity: 0.42;
  cursor: pointer;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}
.zh-port__lb-snimek:first-child {
  margin-left: auto;
}
.zh-port__lb-snimek:last-child {
  margin-right: auto;
}
.zh-port__lb .zh-port__lb-snimek img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.zh-port__lb-snimek:focus-visible {
  opacity: 0.8;
}
@media (hover: hover) {
  .zh-port__lb-snimek:hover {
    opacity: 0.8;
  }
}
.zh-port__lb-snimek--ted,
.zh-port__lb-snimek--ted:hover {
  opacity: 1;
  box-shadow: 0 0 0 2px #FA81B9, 0 0 14px rgba(250, 129, 185, 0.6);
}
/* ─────────────────────────────  telefon  ─────────────────────────── */
@media (max-width: 767px) {
  .zh-port .zh-port__palma {
    height: min(62vh, 92vw);
  }
  .zh-port .zh-port__palma--vlevo {
    left: -30%;
  }
  .zh-port .zh-port__palma--vpravo {
    right: -32%;
  }
  .zh-port .zh-port__palma--daleka {
    left: 62%;
    height: min(34vh, 48vw);
  }
  .zh-port__mrizka {
    --zh-radek: 104px;
  }
  .zh-port__foto {
    border-radius: calc(6px * var(--roh-hladky, 1));
    corner-shape: squircle;
  }
  .zh-port__lb-lista {
    padding: 10px 12px 8px 16px;
  }
  .zh-port__lb-scena {
    margin: 0;
  }
  .zh-port__lb .zh-port__lb-foto {
    border-radius: 0;
  }
  .zh-port__lb-sipka.zh-tl-sipka {
    --zh-sipka: 44px;
  }
  .zh-port__lb-pas {
    gap: 5px;
    padding: 13px 12px calc(15px + env(safe-area-inset-bottom));
  }
  .zh-port__lb-snimek {
    width: 56px;
    height: 42px;
  }
  /* Zlatá hodinka 128: dvě desky v řadě vyplní šířku obsahu; kde by byla
     deska užší než 150 px (telefon 320 px), leží jedna přes celou šířku,
     ne úzký sloupec uprostřed s prázdnými okraji. */
  .zh-port__slozky {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - var(--zh-port-mezera)) / 2 - 1px)), 1fr));
    row-gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .zh-port .zh-port__palma,
  .zh-port__slozka,
  .zh-port__foto {
    animation: none;
  }
}