/* ==========================================================================
   Onepage prezentace nemovitosti (šablona projekt.html).
   Načítá se jen na těchto stránkách, aby hlavní site.css nebobtnal.
   ========================================================================== */

/* ==================================================================== hero = */

/* Split hero: text vlevo, fotka v rámu vpravo. Fotky z inzerce mají 1024 px –
   přes celou obrazovku by se rozmazaly, v rámu jsou ostré. */
.pj__hero {
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(1rem, 2vw, 2rem);
}

.pj__hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pj__tag {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .4rem .95rem;
  background: var(--paper-settled);
  border: 1px solid rgba(106, 206, 250, .5);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-ink);
}

.pj__hero h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  letter-spacing: -.04em;
}

.pj__hero-sub {
  margin: .9rem 0 0;
  font-size: 1.05rem;
  color: var(--ink-muted);
}

.pj__hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.1rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.pj__price {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.pj__hero-meta { font-size: .92rem; color: var(--ink-faint); }

.pj__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.5rem;
  margin-top: 1.5rem;
}

/* ---- fotka v rámu + pás náhledů ---- */

.pj__hero-media { display: grid; gap: .6rem; }

.pj__hero-main {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.pj__hero-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pj__hero-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
}

.pj__hero-thumbs .pj__shot { border-radius: var(--r-sm); }

.pj__hero-thumbs .pj__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Vidět jsou jen tři náhledy; ostatní zůstávají v DOM kvůli lightboxu. */
.pj__hero-thumbs .pj__shot:nth-of-type(n + 4) { display: none; }

.pj__hero-main {
  cursor: zoom-in;
  border: 0;
  padding: 0;
}

.pj__hero-more {
  order: 9;
  border: 0;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: .1rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
  transition: background-color .25s var(--ease);
}

.pj__hero-more span {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

.pj__hero-more:hover { background: var(--sky-ink); }

/* =================================================================== fakta = */

.pj__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.pj__facts li {
  display: grid;
  justify-items: center;
  gap: .3rem;
  padding: 1.25rem .9rem;
  background: var(--white);
  text-align: center;
}

.pj__facts svg { width: 20px; height: 20px; color: var(--sky-ink); }

.pj__facts span {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pj__facts strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--navy);
}

/* ================================================================== o domě = */

.pj__intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pj__points {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pj__points li {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.pj__point-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--paper-settled);
  color: var(--sky-ink);
}

.pj__point-icon svg { width: 20px; height: 20px; }

.pj__points h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.pj__points p { margin: 0; font-size: .92rem; color: var(--ink-muted); }

/* ================================================================ galerie = */

.pj__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
}

.pj__shot {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--paper-settled);
  cursor: zoom-in;
}

.pj__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.pj__shot:hover img { transform: scale(1.05); }

/* Vizualizace jsou na výšku – jiný poměr, ať se neořezávají do pruhu. */
.pj__grid--vis .pj__shot img { aspect-ratio: 3 / 4; }

.pj__caption {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  padding: .28rem .65rem;
  border-radius: var(--r-pill);
  background: rgba(13, 19, 36, .72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
}

/* ============================================================ vizualizace = */

.pj__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: 62ch;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  padding: .85rem 1.1rem;
  background: var(--paper-settled);
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.pj__disclaimer svg { width: 18px; height: 18px; flex: none; margin-top: .1em; color: var(--sky-ink); }

.pj__visgroup + .pj__visgroup { margin-top: clamp(2rem, 4vw, 3rem); }

.pj__visgroup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  margin-bottom: 1rem;
}

.pj__visgroup-head h3 { margin: 0; font-size: 1.3rem; }
.pj__visgroup-head p { margin: 0; font-size: .92rem; color: var(--ink-muted); }

/* ================================================================= dotace = */

.pj__grants {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pj__grantlist {
  display: grid;
  gap: .7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pj__grantlist li {
  padding-left: 1.9rem;
  position: relative;
}

.pj__grantlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(106, 206, 250, .16)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ACEFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}

.pj__grantlist strong { display: block; font-size: .98rem; color: #fff; }
.pj__grantlist span { font-size: .89rem; color: #b9c2d6; }

.pj__grantnote {
  margin: 1.4rem 0 0;
  max-width: 60ch;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}

.pj__grantcta {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.75rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r);
  text-align: center;
}

.pj__roof { width: 8rem; color: var(--sky); }
.pj__grantcta p { margin: 0; font-size: .95rem; color: #d7deec; }

/* =============================================================== půdorysy = */

.pj__plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pj__plans figure { margin: 0; }

.pj__shot--plan {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.pj__shot--plan img {
  /* Jednotný poměr rámu: panely půdorysů jsou stejně velké i když se
     poměry podkladů liší (2D výkres 1.41, 3D render 1.33). Contain nechá
     obrázek celý, zbytek dolije bílé pozadí. */
  aspect-ratio: 1.414;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--white);
}

.pj__plans figcaption {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}

/* =============================================================== lokalita = */

.pj__area {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pj__arealist {
  display: grid;
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.pj__arealist li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--sky);
}

.pj__arealist strong { display: block; font-size: 1rem; color: var(--navy); }
.pj__arealist span { font-size: .92rem; color: var(--ink-muted); }

.pj__map {
  display: block;
  width: 100%;
  height: clamp(320px, 34vw, 440px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-settled);
}

/* =============================================================== lightbox = */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Flex místo gridu: grid řádek s výškou auto nechal vysokou fotku
     přerůst obrazovku a byla vidět jen její horní polovina. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 4vw, 3rem);
  background: rgba(8, 12, 24, .94);
  backdrop-filter: blur(4px);
  /* Prst listuje fotky, ne stránkou pod nimi. */
  touch-action: pan-y;
}

.lb[hidden] { display: none; }

.lb__img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  user-select: none;
  -webkit-user-drag: none;
}

/* Šipky leží PŘES obrázek u okrajů – ve flexu vedle něj se na mobilu
   vytlačily mimo obrazovku a nešlo listovat. */
.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.lb__nav--prev { left: clamp(.5rem, 2vw, 2rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 2rem); }

.lb__nav,
.lb__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(13, 19, 36, .72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}

.lb__nav[hidden] { display: none; }

.lb__nav:hover,
.lb__close:hover { background: rgba(13, 19, 36, .92); }

.lb__close {
  position: absolute;
  top: clamp(.75rem, 3vw, 2rem);
  right: clamp(.75rem, 3vw, 2rem);
  z-index: 3;
  font-size: 1.6rem;
  line-height: 1;
}

/* Kolikátá fotka z kolika – na mobilu jediné vodítko. */
.lb__count {
  position: absolute;
  bottom: clamp(.75rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .35rem .9rem;
  background: rgba(13, 19, 36, .72);
  backdrop-filter: blur(6px);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ============================================================== responzivní */

@media (max-width: 900px) {
  .pj__intro-grid,
  .pj__grants,
  .pj__area,
  .pj__hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pj__grid { grid-template-columns: 1fr 1fr; }
  /* Na mobilu se náhledy vejdou dva vedle sebe + dlaždice „+N". */
  .pj__hero-thumbs { grid-template-columns: repeat(3, 1fr); }
  .pj__hero-thumbs .pj__shot:nth-of-type(n + 3) { display: none; }
}

/* ================================================================== video = */

.pj__videosec { padding-block: clamp(2rem, 5vw, 4rem); }

.pj__video-grid {
  display: grid;
  grid-template-columns: 1fr 344px;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}

.pj__eyebrow {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky-ink);
}

/* ---- vlastní reel (video na výšku) ---- */

/* Poměr 9:16 drží tvar reelu bez ohledu na to, kdy se video načte – jinak by
   sekce po dotažení metadat poskočila. */
.pj__reel {
  margin: 0;
  width: 100%;
  max-width: 344px;
  justify-self: center;
}

.pj__reel-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 28px;
  background: #000;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .1);
  cursor: pointer;
}

.pj__reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hlavička ve stylu reelu – jen značka, žádné lajky. */
.pj__reel-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem .95rem 1.6rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
  pointer-events: none;
  z-index: 2;
}

.pj__reel-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(120deg, #F5D090, #E4657A 42%, #B33CC4 78%, #6A4BE0);
}

.pj__reel-avatar svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #0B0F1C;
}

.pj__reel-handle {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* Play přes celou plochu – klikat jde kamkoli, tlačítko je jen terč pro oko. */
.pj__reel-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 45%, rgba(0, 0, 0, .3));
  color: var(--ink);
  cursor: pointer;
  transition: opacity .3s var(--ease-out);
  z-index: 3;
}

.pj__reel-play::before {
  content: '';
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease-out);
}

.pj__reel-play svg {
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left: 4px;
}

.pj__reel-frame:hover .pj__reel-play::before { transform: scale(1.08); }

.pj__reel-mute {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 12, 24, .55);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  z-index: 4;
}

.pj__reel-mute:hover { background: rgba(8, 12, 24, .8); }
.pj__reel-mute svg { width: 20px; height: 20px; }

/* Přepínání ikon zvuku – bez druhého tlačítka, ať zůstane focus na místě. */
.pj__reel-mute .pj__reel-on { display: none; }
.pj__reel-mute[data-on] .pj__reel-off { display: none; }
.pj__reel-mute[data-on] .pj__reel-on { display: block; }

.pj__reel figcaption {
  margin-top: 1rem;
  text-align: center;
}

/* Atribut hidden musí přebít display z pravidel výše. */
.pj__reel [hidden] { display: none; }

/* Rámeček telefonu. Embed Instagramu se maskuje: iframe je vyšší než okno
   a posunutý, takže z něj zůstane jen video – hlavička s avatarem a spodní
   lišta s lajky se schovají za okraj. */
.pj__phone {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 344px;
  justify-self: center;
  padding: 12px;
  background: linear-gradient(165deg, #2A3160, #12172E 60%);
  border-radius: 40px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.pj__phone::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  z-index: 2;
}

.pj__phone-screen {
  position: relative;
  /* Výška odpovídá videu v embedu při šířce 320 px – níž už začíná
     instagramová lišta s lajky, kterou nechceme. */
  height: 396px;
  overflow: hidden;
  border-radius: 30px;
  background: #000;
}

.pj__phone-screen iframe {
  position: absolute;
  /* -58 px odřízne hlavičku embedu, zbytek přeteče pod spodní hranu. */
  top: -58px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 720px;
  border: 0;
}

/* Proužek přes spodek – překryje začátek instagramové lišty a nese odkaz. */
.pj__phone-link {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 0 0 30px 30px;
  background: linear-gradient(to top, rgba(8, 12, 24, .96), rgba(8, 12, 24, .75));
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 2;
}

.pj__phone-link:hover { color: var(--sky); }

/* ---- odkaz na profil ---- */

.pj__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.pj__igbtn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.2rem .7rem .9rem;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, #F5D090, #E4657A 42%, #B33CC4 78%, #6A4BE0);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(180, 60, 150, .9);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}

.pj__igbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgba(180, 60, 150, .95);
}

.pj__igbtn svg { width: 26px; height: 26px; flex: none; }
.pj__igbtn span { display: grid; line-height: 1.25; }
.pj__igbtn strong { font-family: var(--font-display); font-size: .95rem; }
.pj__igbtn em { font-style: normal; font-size: .74rem; opacity: .85; }

@media (max-width: 860px) {
  .pj__video-grid { grid-template-columns: 1fr; }
  .pj__phone { justify-self: start; }
}

/* ============================================================== před a po = */

.pj__cmpsec { padding-block: clamp(2rem, 5vw, 4rem); }

.pj__cmpgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Posuvník před/po: spodní vrstva je vizualizace, horní ořezaná fotka dneška.
   Ovládá se nativním rangem, který leží průhledně přes celý obrázek – funguje
   tak myší, prstem i klávesnicí. */
.cmp {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-settled);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.cmp img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Obě vrstvy leží přesně na sobě a mají stejný ořez; posuvník mění jen
   ořezovou masku. Zúžení šířkou by fotku na výšku deformovalo. */
/* Vrstva „dnes" smí sahat jen přes fotku, ne přes popisek pod ní. */
.cmp__before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 4 / 3;
  clip-path: inset(0 50% 0 0);
}

.cmp__before::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: rgba(255, 255, 255, .9);
}

.cmp__before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmp__label {
  position: absolute;
  top: .7rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(13, 19, 36, .75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  z-index: 2;
  pointer-events: none;
}

.cmp__label--before { left: .7rem; }
.cmp__label--after { right: .7rem; background: rgba(106, 206, 250, .9); color: var(--navy); }

.cmp__handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: auto;
  aspect-ratio: auto;
  bottom: 3.1rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.cmp__handle i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(13, 19, 36, .45);
  position: relative;
}

.cmp__handle i::before,
.cmp__handle i::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
}

.cmp__handle i::before {
  left: 9px;
  transform: translateY(-50%);
  border-right: 7px solid var(--navy);
}

.cmp__handle i::after {
  right: 9px;
  transform: translateY(-50%);
  border-left: 7px solid var(--navy);
}

/* Neviditelný ovladač přes celou plochu. */
.cmp__range {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 3.1rem;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 3;
}

.cmp figcaption {
  padding: .7rem 1rem;
  background: var(--white);
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}

/* Exkluzivní projekt – zlatý štítek místo modrého. */
.pj__tag--excl {
  background: linear-gradient(120deg, #F3E0B5, #E8C77A);
  border-color: #D8B25C;
  color: #6B4E12;
}