@import url('fonts.css');

/* ==========================================================================
   Tanečná škola Poprocký — child šablona nad Cassiopeiou
   Barvy a typografie převzaté z původní šablony rsconstruction (preset1).
   ========================================================================== */

:root {
    --pp-gold: #fbc02d;
    --pp-gold-dark: #f0ad05;
    --pp-dark: #363636;
    --pp-darker: #101010;
    --pp-grey: #efefef;
    --pp-text: #505050;
    --pp-white: #fff;
    --pp-font: 'Play', 'Trebuchet MS', sans-serif;
    --pp-maxw: 1170px;
}

/* --- základ ------------------------------------------------------------- */

/* Typografie je 1:1 z původní šablony rsconstruction: 15/26 px, nadpisy 700,
   sekční titulek 30/34 px. Dřív tu bylo 17 px / 1.75, což celý web nafouklo —
   texty přerostly obrázky vedle sebe a stránka byla o třetinu vyšší. */
body.pp-site {
    margin: 0;
    font-family: var(--pp-font);
    font-size: 15px;
    line-height: 26px;
    color: var(--pp-text);
    background: var(--pp-white);
    -webkit-font-smoothing: antialiased;
}

.pp-site p {
    margin: 0 0 26px;
}

.pp-site h1,
.pp-site h2,
.pp-site h3,
.pp-site h4 {
    font-family: var(--pp-font);
    font-weight: 700;
    color: var(--pp-dark);
    line-height: 1.2;
    margin: 0 0 16px;
}

/* Velikosti nadpisů odpovídají původní šabloně rsconstruction: `.sp-page-title h2`
   36/1.1, Bootstrap h2 30/1.1 a vlastní pravidla `article.item-page h3` 20/1.1
   a `h4` 18/1.1. Sekční titulek na domovské má vlastní 30/35 (viz `.pp-section__title`). */
.pp-site h1 { font-size: 36px; line-height: 1.1; }
.pp-site h2 { font-size: 30px; line-height: 1.1; }
.pp-site h3 { font-size: 20px; line-height: 1.1; margin-bottom: 10px; }
.pp-site h4 { font-size: 18px; line-height: 1.1; }

/* Odrážky v textu článku: 15/30 jako `article.item-page ul li` na originále.
   `:where()` drží specificitu na nule, aby si komponenty (cenník, zápatí,
   galerie) svoje řádkování přebily samy. */
:where(.pp-site .com-content-article) li {
    font-size: 15px;
    line-height: 30px;
}

.pp-site a {
    color: var(--pp-gold-dark);
    text-decoration: none;
}

.pp-site a:hover,
.pp-site a:focus-visible {
    color: var(--pp-dark);
    text-decoration: underline;
}

.pp-site img {
    max-width: 100%;
    height: auto;
}

.pp-site :focus-visible {
    outline: 3px solid var(--pp-gold);
    outline-offset: 2px;
}

.pp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--pp-dark);
    color: var(--pp-white);
    padding: .75rem 1.25rem;
}

.pp-skip:focus {
    left: 0;
}

/* --- horní lišta -------------------------------------------------------- */

/* Původní web: nárok v levém rohu 15/26 obyčejně, běžící akce 16/26 tučně. */
.pp-topbar {
    background: var(--pp-dark);
    color: var(--pp-white);
    font-size: 15px;
    line-height: 26px;
}

.pp-topbar__inner {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 2.5rem;
}

.pp-topbar__claim {
    font-size: 15px;
    line-height: 26px;
    white-space: nowrap;
}

.pp-topbar p { margin: 0; }

/* Běžící text s akčními nabídkami. Respektuje prefers-reduced-motion. */
.pp-ticker {
    flex: 1;
    overflow: hidden;
    color: var(--pp-gold);
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
}

.pp-ticker .pp-ticker__track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: pp-marquee 28s linear infinite;
}

.pp-ticker:hover .pp-ticker__track,
.pp-ticker:focus-within .pp-ticker__track {
    animation-play-state: paused;
}

@keyframes pp-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .pp-ticker .pp-ticker__track {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }
}

/* --- logo --------------------------------------------------------------- */

/* Naměřeno na běžícím původním webu (`#sp-logo-section`, 1440 px):
   pruh 105 px = 31 px nad logem, 5 px pod ním, logo 260×69 v původní velikosti. */
.pp-logobar {
    background: var(--pp-white);
    padding: 31px 1rem 5px;
}

/* Logo vlevo, kontaktní údaje vpravo — jako na původním webu. */
.pp-logobar__inner {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* `display: block` je tu kvůli výšce pruhu — jako řádkový prvek by si obrázek
   pod sebe přibral ~8 px na dotažení účaří a pruh by nesedl na naměřených 105. */
.pp-logobar__link {
    display: block;
}

.pp-logo {
    display: block;
    max-height: 110px;
    width: auto;
}

/* --- kontakty v záhlaví -------------------------------------------------- */

/* Rozměry naměřené na běžícím původním webu (`.sp-contact-info`, 1440 px):
   bloky 30 px od sebe, ikona v poli 35×26 zarovnaná k hornímu okraji,
   popisek 15/15 tučně, hodnota 15/26 — celý blok je pak 41 px vysoký.
   Písmo bylo správně už předtím (15 px), lišila se jen výška ikon a řádkování.
   mod_custom se renderuje ve vlastním obalu, flex proto patří až na něj. */
.pp-headinfo,
.pp-headinfo > .mod-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.pp-headinfo__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pp-headinfo__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 26px;
    color: var(--pp-gold);
}

.pp-headinfo__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-headinfo__label {
    display: block;
    font-weight: 700;
    color: var(--pp-dark);
    line-height: 15px;
}

.pp-headinfo__value {
    display: block;
    color: var(--pp-text);
    line-height: 26px;
}

.pp-headinfo a {
    color: var(--pp-text);
}

.pp-headinfo a:hover {
    color: var(--pp-gold-dark);
}

@media (max-width: 900px) {
    /* Ve stohu pod sebou by 5px spodní odsazení z desktopu lepilo kontakty
       na tmavou lištu — tam se odsazení vrací. */
    .pp-logobar { padding-bottom: 1.5rem; }
    .pp-logobar__inner { justify-content: center; }
    .pp-headinfo { gap: 1.5rem; justify-content: center; }
}

/* --- navigace ----------------------------------------------------------- */

/* Tmavý pruh je vsazený do kontejneru šířky obsahu jako na původním webu,
   bílé okraje po stranách zůstávají. */
.pp-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pp-white);
}

/* Po odscrollování se tmavá plocha roztáhne do obou krajů na plnou šířku
   (na originále to dělal `#sp-header.menu-fixed`, včetně toho stínu).
   Třídu přidává `poprocky.js`, čistě v CSS se přilepení nedá zachytit. */
.pp-nav.is-stuck {
    background: var(--pp-dark);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
}

.pp-nav__bar {
    position: relative;   /* kotva pro širokou rozbalovací nabídku */
    max-width: var(--pp-maxw);
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    background: var(--pp-dark);
    min-height: 64px;
}

.pp-nav__cta {
    display: flex;
    align-items: center;
    padding: 0 2.5rem;
    background: var(--pp-gold);
    color: var(--pp-dark) !important;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none !important;
}

.pp-nav__cta:hover,
.pp-nav__cta:focus-visible {
    background: var(--pp-gold-dark);
}

/* `align-items: stretch` (ne center) je tu podstatné: položky menu musí být
   vysoké přes celou lištu, jinak mezi spodkem textu a rozbalovacím panelem
   vznikne mezera, ve které se ztratí :hover — viz komentář u `.mod-menu > li`. */
.pp-nav__inline {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 0 .625rem;
    /* Bez `overflow: visible` by lišta ořízla rozbalovací nabídky. */
    overflow: visible;
}

/* Hamburger patří jen do mobilu — na desktopu je vidět celé menu. */
.pp-nav__toggle {
    width: 72px;
    border: 0;
    background: var(--pp-gold);
    cursor: pointer;
    display: none;
    place-items: center;
}

.pp-nav__toggle:hover {
    background: var(--pp-gold-dark);
}

.pp-nav__bars,
.pp-nav__bars::before,
.pp-nav__bars::after {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--pp-dark);
    border-radius: 2px;
}

.pp-nav__bars {
    position: relative;
}

.pp-nav__bars::before,
.pp-nav__bars::after {
    content: '';
    position: absolute;
    left: 0;
}

.pp-nav__bars::before { top: -8px; }
.pp-nav__bars::after  { top: 8px; }

/* Vodorovné menu v liště. Cassiopeia dává .mod-menu globálně column
   a Bootstrap .nav taky — obojí je tu potřeba přebít (viz kb). */
.pp-nav__inline .mod-menu {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Původní `.sp-megamenu-parent > li > a`: 16 px, váha 400 (ne 700 — proto
   naše lišta působila těžší než předloha), verzálky. */
.pp-nav__inline .mod-menu a,
.pp-nav__inline .mod-menu > li > span {
    color: var(--pp-white);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
}

.pp-nav__inline .mod-menu a:hover,
.pp-nav__inline .mod-menu .current > a {
    color: var(--pp-gold);
    text-decoration: none;
}

/* --- rozbalovací nabídky v liště --------------------------------------- */

.pp-nav__inline .mod-menu li {
    position: relative;
}

/* Položky nejvyšší úrovně sahají přes celou výšku lišty a doléhají na sebe —
   vodorovný odstup dělá padding, ne `gap`. Kdyby byly vysoké jen jako text,
   zůstane mezi jejich spodkem a panelem (ten se otvírá až pod lištou) ~19 px
   mezera, ve které se ztratí :hover a do nabídky se nedá najet. Přesně tohle
   dělala Galéria; Chorvátsko problém nemělo jen proto, že se mu panel věší
   na vlastní `li`, ne na lištu. Původní web to má stejně — `line-height: 70px`
   přes celou výšku odkazu. */
.pp-nav__inline .mod-menu > li {
    display: flex;
    align-items: center;
    padding: 0 .875rem;
}

.pp-nav__inline .mod-menu > li > a,
.pp-nav__inline .mod-menu > li > span,
.pp-nav__inline .mod-menu > li > .mod-menu__toggle-sub {
    display: flex;
    align-items: center;
    align-self: stretch;
}

/* mod_menu dává rozbalovacím položkám tlačítko `mod-menu__toggle-sub`.
   U položky s odkazem (Chorvátsko) nese jen popisek „Viac o: …" a zbude z něj
   šipka; u položky typu heading (Galéria) je v něm **název sám**, takže se
   text schovává jen v prvním případě. */
.pp-nav__inline .mod-menu__toggle-sub {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: none;
    border: 0;
    padding: 0;
    color: var(--pp-white);
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1;
    cursor: pointer;
}

/* Joomla dává do tlačítka vlastní ikonu; kreslíme si šipku sami (viz níž). */
.pp-nav__inline .mod-menu__toggle-sub .icon-chevron-down {
    display: none;
}

.pp-nav__inline .mod-menu a + .mod-menu__toggle-sub {
    font-size: 0;
}

/* Šipka jako chevron ze dvou okrajů, ne znak „⌄" — ten v Play sedí hluboko
   pod osou písma a v liště visel pod textem. Otočený čtverec se dá zarovnat
   přesně: `align-items: center` ho posadí do osy řádku, `translateY` doladí
   těžiště inkoustu, které je u „V" níž než střed rámečku. */
.pp-nav__inline .mod-menu__toggle-sub::after {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.pp-nav__inline .mod-menu > li:hover > .mod-menu__toggle-sub,
.pp-nav__inline .mod-menu > li:focus-within > .mod-menu__toggle-sub {
    color: var(--pp-gold);
}

/* Heading (Galéria) není odkaz — Cassiopeia mu dává vlastní barvu. */
.pp-nav__inline .mod-menu > li > .mod-menu__heading {
    color: var(--pp-white);
    margin: 0;
    font-size: 16px;
    cursor: default;
}

.pp-nav__inline .mod-menu > li:hover > .mod-menu__heading {
    color: var(--pp-gold);
}

/* Panel: bílý, zlatá linka nahoře. Zůstává schovaný, dokud na položku
   nenajedeš myší nebo se do ní neposuneš tabulátorem. */
.pp-nav__inline .mod-menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    min-width: 260px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--pp-white);
    border-top: 4px solid var(--pp-gold);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.pp-nav__inline .mod-menu li:hover > ul,
.pp-nav__inline .mod-menu li:focus-within > ul,
.pp-nav__inline .mod-menu__toggle-sub[aria-expanded="true"] + ul {
    display: block;
}

.pp-nav__inline .mod-menu ul li {
    border-bottom: 1px solid #ededed;
}

.pp-nav__inline .mod-menu ul li:last-child {
    border-bottom: 0;
}

/* Rozbalená nabídka: 14 px jako `.sp-dropdown li.sp-menu-item > a` na originále. */
.pp-nav__inline .mod-menu ul a,
.pp-nav__inline .mod-menu ul span {
    display: block;
    padding: 14px 20px;
    color: var(--pp-dark);
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    white-space: normal;
}

.pp-nav__inline .mod-menu ul a:hover,
.pp-nav__inline .mod-menu ul li:hover > span {
    color: var(--pp-gold-dark);
    background: #fafafa;
}

/* Položka s další úrovní (ročník galerií) — šipka doprava a vysunutí vedle. */
.pp-nav__inline .mod-menu ul li.parent > a,
.pp-nav__inline .mod-menu ul li.parent > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: default;
}

.pp-nav__inline .mod-menu ul li.parent > a::after,
.pp-nav__inline .mod-menu ul li.parent > span::after {
    content: '›';
    color: var(--pp-gold-dark);
    font-size: 1.3em;
    line-height: 1;
}

.pp-nav__inline .mod-menu ul ul {
    top: -4px;             /* zarovnat se zlatou linkou rodiče */
    left: 100%;
    max-height: 70vh;
    overflow-y: auto;
}

/* Široká nabídka: co má deset a víc položek (strom Galérie s 18 ročníky),
   rozloží se do sloupců po pěti — jako na původním webu. Krátká nabídka
   (Chorvátsko, 4 apartmány) zůstane úzkým seznamem. Podmínka je na počtu
   položek, ne na ID, aby to platilo i po přibytí dalšího ročníku. */
/* Panel se roztáhne přes celou lištu — proto `position: static` na položce,
   aby se absolutní pozice počítala vůči `.pp-nav__bar`, ne vůči „Galérii". */
.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)) {
    position: static;
}

.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)) > ul {
    left: 0;
    right: 0;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    padding: .5rem 0;
}

.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)):hover > ul,
.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)):focus-within > ul,
.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)) > .mod-menu__toggle-sub[aria-expanded="true"] + ul {
    display: grid;
}

.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)) > ul > li {
    border-bottom: 0;
    min-width: 210px;
}

/* Od třetího sloupce se třetí úroveň vysouvá doleva, jinak by přetekla
   z obrazovky (5 řádků na sloupec → 11. položka už je ve třetím). */
.pp-nav__inline .mod-menu > li:has(> ul > li:nth-child(10)) > ul > li:nth-child(n+11) > ul {
    left: auto;
    right: 100%;
}

@media (max-width: 991px) {
    .pp-nav__inline { display: none; }
    .pp-nav__toggle { display: grid; }
    .pp-nav__cta { flex: 1; justify-content: center; }
}

@media (max-width: 575px) {
    .pp-nav__cta { padding: 0 1.25rem; font-size: .9rem; }
    .pp-nav__toggle { width: 60px; }
}

/* Záhlaví zabíralo na telefonu 451 px, tedy 53 % obrazovky 390×844 — samotné
   kontakty pod sebou 183 px. Popisek nese ikona, takže odpadá, a hodnoty se
   vejdou do jednoho až dvou řádků. */
@media (max-width: 767px) {
    .pp-logobar { padding-top: 1rem; padding-bottom: .75rem; }
    .pp-logobar__inner { gap: .75rem; }
    .pp-logobar__link img { max-width: 200px; height: auto; }

    .pp-headinfo,
    .pp-headinfo > .mod-custom { gap: .35rem 1.25rem; justify-content: center; }

    .pp-headinfo__item { align-items: center; gap: 6px; }
    .pp-headinfo__icon { width: 22px; height: 22px; }
    .pp-headinfo__icon svg { width: 18px; height: 18px; }
    .pp-headinfo__label { display: none; }
    .pp-headinfo__value { font-size: 13px; line-height: 22px; }
}

/* Na nejužších displejích se otevírací doba do řádku nevejde. Je v zápatí
   i na /kontakt, takže se z hlavičky vypouští jako poslední z trojice —
   pořadí položek drží obsah modulu `headinfo` (mod_custom). */
@media (max-width: 480px) {
    .pp-headinfo > .mod-custom > .pp-headinfo__item:nth-child(3) { display: none; }
}

/* --- offcanvas ---------------------------------------------------------- */

.pp-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .6);
}

.pp-offcanvas[hidden] {
    display: none;
}

/* Panel je ukotvený vpravo, u palce. Měl `min(420px, 90vw)`, což je na telefonu
   351 z 390 px — levý okraj skončil deset procent od kraje a působilo to, že
   nabídka přijela zleva a zakryla celý web. Užší panel nechá kus stránky vidět,
   takže je směr i způsob zavření zřejmý. */
.pp-offcanvas__panel {
    position: absolute;
    top: 0;
    right: 0;
    /* `box-sizing` tu není globálně, takže odsazení se k šířce přičítalo:
       původních `min(420px, 90vw)` + 2×2rem dalo na 390px displeji 415 px,
       tedy panel širší než obrazovka. */
    box-sizing: border-box;
    width: min(340px, 80vw);
    height: 100%;
    overflow-y: auto;
    background: var(--pp-dark);
    color: var(--pp-white);
    padding: 4rem 1.5rem 2rem;
}

/* Zasouvací animace tu byla a je schválně pryč. Rozjížděla se z
   `translateX(100%)`, takže dokud neproběhla, byl panel mimo obrazovku —
   a v neaktivní kartě prohlížeč animace nedoručuje, takže tam nabídka
   zůstala neviditelná a vypadalo to, že se menu neotevírá. */

.pp-offcanvas__close {
    position: absolute;
    top: .5rem;
    right: 1rem;
    background: none;
    border: 0;
    color: var(--pp-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

.pp-offcanvas .mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pp-offcanvas .mod-menu a,
.pp-offcanvas .mod-menu > li > span {
    display: block;
    padding: .5rem 0;
    color: var(--pp-white);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
    text-decoration: none;
}

.pp-offcanvas .mod-menu a:hover {
    color: var(--pp-gold);
}

/* Rozbalovací tlačítko dávalo mod_menu 51×16 px, což se na dotyk trefuje
   špatně. Řádek je proto flex: odkaz vede na stránku, tlačítko sedí vpravo
   a má plnou dotykovou plochu. Podnabídka se láme pod ně přes celou šířku. */
.pp-offcanvas .mod-menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.pp-offcanvas .mod-menu > li > a,
.pp-offcanvas .mod-menu > li > span {
    flex: 1 1 auto;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.pp-offcanvas .mod-menu__toggle-sub {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pp-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Joomla dává do tlačítka vlastní ikonu a k ní popisek „Viac o: …" pro
   odečítače. Ikonu kreslíme sami a popisek u tlačítka vedle odkazu schováme
   nulovou velikostí písma — stejně jako v desktopové liště. Zůstává čitelný
   pro odečítače, jen se nevykreslí. */
.pp-offcanvas .mod-menu__toggle-sub .icon-chevron-down {
    display: none;
}

.pp-offcanvas .mod-menu a + .mod-menu__toggle-sub {
    font-size: 0;
}

.pp-offcanvas .mod-menu__toggle-sub::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
}

.pp-offcanvas .mod-menu__toggle-sub[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Galéria je `heading` bez odkazu — mod_menu z ní udělá samotné tlačítko,
   takže by se popisek mačkal do 44 px. Tam, kde tlačítko není doplňkem
   odkazu, zabírá řádek celý a šipka jde na konec. */
.pp-offcanvas .mod-menu > li > .mod-menu__toggle-sub:first-child {
    flex: 1 1 auto;
    width: auto;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 16px;
}

.pp-offcanvas .mod-menu > li > ul {
    flex: 1 0 100%;
}

.pp-offcanvas .mod-menu ul {
    list-style: none;
    margin: 0 0 .5rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, .15);
}

.pp-offcanvas .mod-menu ul a {
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

/* --- hero --------------------------------------------------------------- */

.pp-hero {
    position: relative;
    background: var(--pp-darker);
}

.pp-hero__slide {
    position: relative;
    min-height: clamp(340px, 52vw, 620px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}

/* Přechod drží text čitelný i nad světlejší částí fotky — na původním webu
   se druhý řádek nadpisu ztrácel v obrázku. */
.pp-hero__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .15) 80%, rgba(0, 0, 0, 0) 100%);
}

@media (max-width: 767px) {
    .pp-hero__slide::after {
        background: rgba(0, 0, 0, .6);
    }
}

.pp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--pp-maxw);
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 100%;
}

/* Titulek 60/70 jako na původním webu. `.pp-site` v selektoru je nutné —
   bez něj pravidlo přebije obecné `.pp-site h1` a titulek zůstal na 38 px.
   Zmenšování na úzkých displejích kopíruje původní `responsive.css`
   (≤767 px → 35 px, ≤480 px → 24 px). */
.pp-site .pp-hero__title {
    color: var(--pp-white);
    font-size: 60px;
    line-height: 70px;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

@media (max-width: 767px) {
    .pp-site .pp-hero__title { font-size: 35px; line-height: 42px; }
}

@media (max-width: 480px) {
    .pp-site .pp-hero__title { font-size: 24px; line-height: 30px; }
}

.pp-hero__title em {
    color: var(--pp-gold);
    font-style: normal;
}

.pp-hero__text {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 24px;
    font-weight: 300;
    max-width: 34rem;
    margin: 0 0 1.75rem;
}

/* --- tlačítka ----------------------------------------------------------- */

/* Naměřeno na originále: běžné tlačítko 20/34 s odsazením 10/20 (celková
   výška 54 px), tlačítko v cenníku 20/56 bez svislého odsazení. */
.pp-btn {
    display: inline-block;
    padding: 10px 20px;
    background: var(--pp-gold);
    color: var(--pp-dark) !important;
    font-size: 20px;
    line-height: 34px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    text-decoration: none !important;
}

.pp-btn:hover,
.pp-btn:focus-visible {
    background: var(--pp-gold-dark);
}

/* Tlačítko v cenníku má za textem šipku, jako mělo „OBJEDNAŤ »" na starém webu. */
.pp-btn--arrow::after {
    content: '»';
    margin-left: 1.5rem;
    font-weight: 400;
}

.pp-btn--dark {
    background: var(--pp-dark);
    color: var(--pp-white) !important;
}

.pp-btn--dark:hover {
    background: var(--pp-darker);
}

/* --- obsahové sekce ----------------------------------------------------- */

.pp-body {
    /* Cassiopeia dává .site-grid margin-bottom:auto — tady se mřížka nepoužívá */
    margin: 0;
}

/* Původní web měl sekce 92–100 px shora, 95–100 px zdola. */
.pp-section {
    padding: clamp(3rem, 6vw, 100px) 1rem;
}

.pp-section--grey {
    background: var(--pp-grey);
}

.pp-section--dark {
    background: var(--pp-dark);
    color: rgba(255, 255, 255, .85);
}

.pp-section--dark h2,
.pp-section--dark h3 {
    color: var(--pp-white);
}

.pp-section__inner {
    max-width: var(--pp-maxw);
    margin: 0 auto;
}

/* Nadpis sekce se zlatým podtržením — 30/34 px, prostrkání 2 px a podtržítko
   100 × 5 px stejně jako `.sppb-title-heading` na původním webu. */
/* `.pp-site` v selektoru je nutné, jinak pravidlo prohraje s obecným
   `.pp-site h2` (stejná specificita, ale h2 je v souboru dřív) a řádkování
   spadne na 33 px. */
.pp-site .pp-section__title {
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pp-darker);
    margin-bottom: 40px;
    padding-bottom: 18px;
    position: relative;
}

.pp-section__title::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100px;
    height: 5px;
    background: var(--pp-gold);
}

.pp-section__title--center {
    text-align: center;
}

.pp-section__title--center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* --- accordion ---------------------------------------------------------- */

.pp-accordion {
    margin-top: 26px;
}

.pp-accordion__item {
    border: 1px solid #e2e2e2;
    border-bottom: 0;
    background: var(--pp-white);
}

.pp-accordion__item:last-child {
    border-bottom: 1px solid #e2e2e2;
}

.pp-accordion__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* 20/51 jako nadpisy bloků „Naša história / Náš cieľ" na originále —
       řádkování 51 px tam dělalo celou výšku řádku, proto tu není svislý padding. */
    padding: 0 18px;
    font-size: 20px;
    line-height: 51px;
    font-weight: 700;
    color: var(--pp-dark);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pp-accordion__item summary::-webkit-details-marker {
    display: none;
}

.pp-accordion__item summary::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--pp-gold-dark);
}

.pp-accordion__item[open] summary::after {
    content: '−';
}

.pp-accordion__item[open] summary {
    color: var(--pp-gold-dark);
}

.pp-accordion__item summary:hover {
    background: #f7f7f7;
}

.pp-accordion__item > p {
    margin: 0;
    padding: 0 18px 16px;
}

/* --- mřížky ------------------------------------------------------------- */

.pp-grid {
    display: grid;
    gap: 2rem;
}

.pp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --- karta kurzu -------------------------------------------------------- */

.pp-card {
    background: var(--pp-white);
    padding: 2rem;
    border-bottom: 4px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}

.pp-card:hover {
    border-bottom-color: var(--pp-gold);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

/* Titulek dlaždice 20/20 jako `.sp-simpleportfolio … h3 a` na originále. */
.pp-card h3 {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: .5rem;
}

.pp-card__price {
    display: block;
    margin-top: 1rem;
    font-weight: 700;
    color: var(--pp-gold-dark);
}

/* Karta s vlastním článkem je celá klikatelná (stejně jako dlaždice v Našej
   ponuke). Karty bez článku zůstávají <div> a chovají se jako dřív. */
a.pp-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.pp-card__more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--pp-gold-dark);
}

.pp-card__more::after {
    content: " →";
    transition: transform .2s;
}

a.pp-card--link:hover .pp-card__more,
a.pp-card--link:focus-visible .pp-card__more {
    text-decoration: underline;
}

a.pp-card--link:focus-visible {
    outline: 2px solid var(--pp-gold-dark);
    outline-offset: 3px;
}

/* --- cenník ------------------------------------------------------------- */

/* Dlaždice má šedou hlavičku s cenou a bílou spodní část s podmínkami
   a tlačítkem; zvýrazněná varianta má hlavičku zlatou (viz `cenník.png`). */
.pp-price {
    border: 1px solid #e6e6e6;
    background: var(--pp-white);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.pp-price__head {
    background: var(--pp-grey);
    padding: 2rem 1.5rem 2.25rem;
}

/* Cenník podle originálu: hlavička 20/normal, částka 60/60 v tenkém řezu,
   „€" 20 px, jednotka 20/22 v polotučném, řádky podmínek 15/24. */
.pp-price__head h3 {
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pp-darker);
    margin: 0 0 1.5rem;
}

.pp-price--featured .pp-price__head {
    background: var(--pp-gold);
}

.pp-price--featured .pp-price__head h3,
.pp-price--featured .pp-price__amount {
    color: var(--pp-white);
}

.pp-price__amount {
    font-size: 60px;
    font-weight: 300;
    color: var(--pp-darker);
    line-height: 60px;
    margin: 0;
}

.pp-price__amount sup {
    font-size: 20px;
    vertical-align: super;
}

.pp-price__unit {
    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
}

.pp-price__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 2rem;
}

.pp-price ul {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.pp-price li {
    font-size: 15px;
    line-height: 24px;
    padding: .45rem 0;
}

.pp-price .pp-btn {
    line-height: 56px;
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
    margin-top: auto;
}

/* --- dlaždice ponuky ---------------------------------------------------- */

.pp-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--pp-darker);
}

.pp-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.pp-tile:hover img {
    transform: scale(1.06);
}

.pp-tile__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    color: var(--pp-white);
    font-weight: 700;
    text-transform: uppercase;
}

/* --- reference ---------------------------------------------------------- */

/* Karta s tenkým rámečkem a kruhovým portrétem, který přesahuje horní hranu
   (viz `co-hovoria-nasi-zakaznici.png`). */
.pp-quotes {
    padding-top: 45px;   /* místo pro přesahující portréty */
}

/* Bez JS zůstane mřížka; slider se zapne až přidáním `pp-slider--on`
   (viz `poprocky.js`, § slider referencí). Originál jel na slicku:
   3 karty vedle sebe, mezera 30 px, pod 768 dvě, pod 480 jedna. */
.pp-slider {
    --pp-slider-gap: 30px;
    --pp-slider-per: 3;   /* přepisuje JS podle šířky okna */
}

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

.pp-slider__clone {
    display: none;
}

.pp-slider--on {
    padding-top: 0;   /* místo pro portréty si dělá viewport sám */
}

/* Ořez musí být jen vodorovný, jenže `overflow: hidden` ořezává obě osy —
   proto odsazení nahoře, aby se přesahující portrét vešel dovnitř. */
.pp-slider--on .pp-slider__viewport {
    overflow: hidden;
    padding: 50px 0 10px;
    margin-bottom: -10px;
}

.pp-slider--on .pp-slider__track {
    position: relative;   /* aby `offsetLeft` slidů měřil vůči dráze */
    display: flex;
    align-items: flex-start;
    gap: var(--pp-slider-gap);
    transition: transform .5s ease;
    will-change: transform;
}

.pp-slider--on .pp-slider__track > * {
    /* `.pp-quote` počítá šířku bez rámečku a odsazení — bez `border-box`
       by tři karty přetekly o svých 3 × 58 px. */
    box-sizing: border-box;
    flex: 0 0 calc((100% - (var(--pp-slider-per) - 1) * var(--pp-slider-gap)) / var(--pp-slider-per));
}

.pp-slider--on .pp-slider__clone {
    display: block;
}

/* Tečky jako na originále: zlaté sloupečky zarovnané dolů,
   aktivní vyšší a širší (6 × 8 px → 8 × 20 px). */
.pp-slider__dots {
    display: none;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    /* originál: `.slick-dots { bottom: -50px }` nad seznamem s 10px odsazením
       slidů, tj. spodní hrana teček 60 px pod nejvyšší kartou */
    margin-top: 40px;
}

.pp-slider--on .pp-slider__dots {
    display: flex;
}

.pp-slider__dot {
    width: 6px;
    height: 8px;
    padding: 0;
    border: 0;
    background: var(--pp-gold);
    cursor: pointer;
}

.pp-slider__dot.is-active {
    width: 8px;
    height: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .pp-slider--on .pp-slider__track {
        transition: none;
    }

}

.pp-quote {
    position: relative;
    margin: 0;
    padding: 62px 1.75rem 2rem;
    border: 1px solid #dcdcdc;
    text-align: center;
}

.pp-quote__avatar {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--pp-white);
}

/* Reference na originále: nadpis 15/26 tučně, text 15/26 v polotučném,
   jméno 14/26 obyčejně. */
.pp-quote__title {
    font-size: 15px;
    line-height: 26px;
    font-weight: 700;
    color: var(--pp-dark);
    margin: 0 0 10px;
}

.pp-quote__text {
    font-size: 15px;
    line-height: 26px;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.pp-quote__author {
    display: block;
}

.pp-quote__verdict {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--pp-dark);
    margin-bottom: 4px;
}

.pp-quote__name {
    display: block;
    font-size: 14px;
    line-height: 26px;
}

/* --- kontakty ----------------------------------------------------------- */

/* Tři šedé boxy se zlatým kolečkem, pod nimi mapa a fotka sály
   (viz `naše kontakty.png`). */
.pp-contactbox {
    background: #dedede;
    text-align: center;
    padding: 2rem 1.5rem;
}

.pp-contactbox__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--pp-gold);
    margin-bottom: 1.25rem;
}

.pp-contactbox__icon svg {
    width: 26px;
    height: 26px;
    fill: var(--pp-darker);
}

.pp-contactbox p {
    margin: 0;
}

.pp-contactbox a {
    color: var(--pp-text);
}

.pp-contactbox a:hover {
    color: var(--pp-gold-dark);
}

.pp-contact-detail {
    margin-top: 3rem;
    align-items: start;
}

.pp-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

.pp-map > a {
    display: inline-block;
    margin-top: .5rem;
    font-size: 14px;
}

.pp-contact dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .35rem 1rem;
    margin: 0;
}

.pp-contact dt {
    font-weight: 700;
    color: var(--pp-dark);
}

.pp-contact dd {
    margin: 0;
}

/* --- Chorvátsko: bloky, fotomřížka, ceník ------------------------------- */

.pp-block {
    margin-bottom: 2.5rem;
}

.pp-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.pp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 2.5rem;
}

.pp-photo {
    display: block;
    overflow: hidden;
    background: var(--pp-grey);
}

.pp-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
}

.pp-photo:hover img {
    transform: scale(1.05);
}

/* Ceník apartmánu — na úzkém displeji se posouvá vodorovně místo přetékání. */
.pp-table-wrap {
    overflow-x: auto;
}

.pp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
}

.pp-table th,
.pp-table td {
    border: 1px solid #dcdcdc;
    padding: 8px 12px;
    text-align: left;
}

.pp-table th {
    background: var(--pp-grey);
    color: var(--pp-dark);
    font-weight: 700;
}

.pp-table tbody tr:nth-child(even) {
    background: #fafafa;
}

/* --- zápatí ------------------------------------------------------------- */

/* Zápatí kopíruje původní web: tmavá fotka banner10.jpg pod antracitem,
   nadpisy sloupců 15 px se zlatou linkou, text #afb0b2. */
.pp-footer {
    position: relative;
    background: #252525 url('../../../../../images/banner10.jpg') center / cover no-repeat;
    color: #afb0b2;
    padding: clamp(2.5rem, 5vw, 70px) 1rem 60px;
}

.pp-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, .88);
}

.pp-footer__grid {
    position: relative;
    max-width: var(--pp-maxw);
    margin: 0 auto;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.pp-footer h3,
.pp-footer .card-header,
.pp-footer .mod-title {
    color: var(--pp-white);
    /* `.rs-footer .footer-title` na originále: 15 px, řádkování 1.1 → 16,5. */
    font-size: 15px;
    line-height: 16.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 26px;
    padding: 0 0 12px;
    background: none;
    border: 0;
    position: relative;
}

.pp-footer h3::after,
.pp-footer .card-header::after,
.pp-footer .mod-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: var(--pp-gold);
}

.pp-footer p {
    margin: 0 0 20px;
}

/* Tlačítko v zápatí je doplněk sloupce, ne hlavní výzva — nechodí na 20/34
   jako tlačítka v obsahu, drží velikost okolního textu. */
.pp-footer .pp-btn {
    font-size: 15px;
    line-height: 26px;
    padding: 6px 18px;
    letter-spacing: .04em;
}

.pp-footer a {
    color: #afb0b2;
}

.pp-footer a:hover {
    color: var(--pp-gold);
}

/* mod_menu ve sloupci zápatí — Bootstrap .nav by ho nechal svisle, což tu chceme,
   ale bez odrážek a odsazení. Položky mají šipku a oddělovací linku jako dřív. */
.pp-footer .mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column !important;
}

.pp-footer .mod-menu li {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pp-footer .mod-menu li:last-child {
    border-bottom: 0;
}

/* Sevřenější řádkování než ve zbytku zápatí — do sloupce Informácie se musí
   vejít šest odkazů (od 2026-07-31 je mezi nimi i Admin). */
.pp-footer .mod-menu li a {
    display: block;
    padding: 5px 0 5px 18px;
    line-height: 22px;
    position: relative;
}

.pp-footer .mod-menu li a::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--pp-gold);
}

/* „Follow us" + odkazy na sociální sítě v prvním sloupci */
.pp-footer__social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.pp-footer__social-label {
    font-size: 15px;
}

.pp-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    transition: background .2s, border-color .2s, color .2s;
}

.pp-footer__social a:hover {
    background: var(--pp-gold);
    border-color: var(--pp-gold);
    color: var(--pp-dark);
}

.pp-footer__social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.pp-copyright {
    background: var(--pp-darker);
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
    line-height: 26px;
}

.pp-copyright__inner {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    padding: 1.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pp-copyright a {
    color: rgba(255, 255, 255, .7);
}

/* --- zpět nahoru -------------------------------------------------------- */

.pp-back-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    width: 46px;
    height: 46px;
    display: none;
    place-items: center;
    background: var(--pp-gold);
    color: var(--pp-dark) !important;
    font-size: 1.3rem;
    text-decoration: none !important;
    border-radius: 2px;
}

.pp-back-top.is-visible {
    display: grid;
}

/* --- vnitřní stránky ---------------------------------------------------- */

.pp-site:not(.pp-home) main {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
}

/* Navigace předchozí/následující článek na galerijních stránkách ruší */
.pp-site nav.pagenavigation {
    display: none;
}

.pp-site .breadcrumb {
    max-width: var(--pp-maxw);
    margin: 1.5rem auto 0;
    padding: 0 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    /* `.rs-breadcrumbs ul li` na originále: 14 px. */
    font-size: 14px;
    line-height: 26px;
}

/* --- formuláře ---------------------------------------------------------- */

.pp-form {
    max-width: 720px;
}

.pp-form__row {
    margin-bottom: 1.25rem;
}

.pp-form label {
    display: block;
    font-weight: 700;
    color: var(--pp-dark);
    margin-bottom: .35rem;
}

.pp-form .pp-form__req {
    color: #c0392b;
}

.pp-form input[type="text"],
.pp-form input[type="email"],
.pp-form input[type="tel"],
.pp-form input[type="number"],
.pp-form select,
.pp-form textarea {
    /* `width: 100%` a k tomu odsazení a rámeček — bez `border-box` se sečtou
       a pole je širší než sloupec. Na 390px displeji tím stránka přetékala
       vodorovně o 15 px. Šablona globální `border-box` nemá, viz i panel
       vysouvací nabídky. */
    box-sizing: border-box;
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--pp-white);
    color: var(--pp-text);
}

.pp-form input:focus,
.pp-form select:focus,
.pp-form textarea:focus {
    border-color: var(--pp-gold);
    outline: 2px solid var(--pp-gold);
    outline-offset: 0;
}

.pp-form textarea {
    min-height: 8rem;
    resize: vertical;
}

.pp-form__consent {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.pp-form__consent label {
    font-weight: 400;
    margin: 0;
}

/* Honeypot — pro člověka neviditelný, pro čtečku skrytý, pro bota lákavý */
.pp-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pp-form__status {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border-left: 4px solid transparent;
    font-weight: 700;
}

.pp-form__status:empty {
    display: none;
}

.pp-form__status.is-ok {
    background: #eaf6ea;
    border-left-color: #2e7d32;
    color: #2e7d32;
}

.pp-form__status.is-error {
    background: #fdecea;
    border-left-color: #c0392b;
    color: #c0392b;
    white-space: pre-line;
}

/* --- rezervačný plán sály ----------------------------------------------- */

/* Systémové hlášky Joomly („Najprv sa prihláste", chyba přihlášení). Vykreslují
   se v `pp-body` nad `main`, takže je kontejner z `.pp-site:not(.pp-home) main`
   míjí a bez tohohle pravidla se táhnou přes celou šířku okna mimo obsah. */
.pp-site joomla-alert {
    display: block;
    box-sizing: border-box;
    max-width: var(--pp-maxw);
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.pp-site joomla-alert .alert-wrapper {
    padding: .8rem 1rem;
    border: 1px solid #e0e0e0;
    border-left: 3px solid var(--pp-gold);
    border-radius: 2px;
    background: #fffdf3;
}

/* --- používateľská sekcia (com_users) ----------------------------------- */

/* Prihlásenie, profil, vynútená zmena hesla a obnova hesla renderuje Joomla
   s bootstrapovými triedami (`control-group`, `form-control`, `input-group`,
   `list-group`, `card`, `btn`). Šablona bootstrap nenačítava — bez týchto
   pravidiel je z celej sekcie holý výpis polí. Preto je tu len tá podmnožina
   tried, ktorú pohľady com_users naozaj používajú. */

.pp-site .com-users-login,
.pp-site .com-users-profile,
.pp-site .com-users-profile__edit,
.pp-site .com-users-remind,
.pp-site .com-users-reset {
    max-width: 720px;
}

.pp-site .com-users-login__form,
.pp-site .com-users-profile__edit-form {
    /* .well je bootstrapový pozostatok, sám o sebe nič nekreslí */
    margin: 0;
}

/* Prehliadač kreslí okolo `fieldset` vlastný rámček — obnova hesla aj profil
   by inak mali formulár v šedom boxe, ktorý sa nikde inde na webe nevyskytuje. */
.pp-site [class*="com-users-"] fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.pp-site [class*="com-users-"] legend {
    font-size: 22px;
    font-weight: 700;
    color: var(--pp-dark);
    padding: 0;
    margin: 0 0 1rem;
}

.pp-site .control-group {
    margin-bottom: 1.25rem;
}

.pp-site .control-label label,
.pp-site .controls > label {
    display: block;
    font-weight: 700;
    color: var(--pp-dark);
    margin-bottom: .35rem;
}

.pp-site .control-label .star {
    color: #c0392b;
}

.pp-site .form-control {
    box-sizing: border-box;
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #ccc;
    border-radius: 2px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--pp-white);
    color: var(--pp-text);
}

.pp-site .form-control:focus {
    border-color: var(--pp-gold);
    outline: 2px solid var(--pp-gold);
    outline-offset: 0;
}

.pp-site .form-control[readonly] {
    background: #f2f2f2;
    color: #666;
}

/* Pole s tlačidlom „Zobraziť heslo“ */
.pp-site .input-group {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}

.pp-site .input-group .form-control {
    flex: 1 1 auto;
}

.pp-site .form-text,
.pp-site .text-muted {
    display: block;
    margin-top: .35rem;
    font-size: 13px;
    color: #666;
}

/* Tlačidlá: primárne zlaté ako zvyšok webu, sekundárne šedé, mazacie červené */
.pp-site .btn {
    display: inline-block;
    padding: .7rem 1.2rem;
    border: 0;
    border-radius: 2px;
    background: var(--pp-gold);
    color: var(--pp-dark);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    text-decoration: none;
}

.pp-site .btn:hover,
.pp-site .btn:focus-visible {
    background: var(--pp-gold-dark);
}

.pp-site .btn-secondary {
    background: #e4e4e4;
    color: var(--pp-dark);
}

.pp-site .btn-secondary:hover {
    background: #d5d5d5;
}

.pp-site .btn-danger {
    background: #c62828;
    color: var(--pp-white);
}

.pp-site .btn-danger:hover {
    background: #a01f1f;
}

.pp-site .btn-outline-primary {
    background: transparent;
    color: var(--pp-dark);
    box-shadow: inset 0 0 0 2px var(--pp-gold);
}

/* Odkazy pod prihlasovacím formulárom (zabudnuté heslo / meno) */
.pp-site .list-group {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    border-top: 1px solid #e0e0e0;
}

.pp-site .list-group-item {
    display: block;
    padding: .6rem 0;
    border-bottom: 1px solid #e0e0e0;
}

/* Karty viacfaktorového overenia */
.pp-site .card {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    margin: 0 0 1rem;
    background: var(--pp-white);
}

.pp-site .card-header {
    padding: .8rem 1rem;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    font-weight: 700;
}

.pp-site .card-body {
    padding: 1rem;
}

/* Lišta „Upraviť profil“ je `ul`, takže bez pravidla svieti pred tlačidlom odrážka */
.pp-site .btn-toolbar {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0 0 1.5rem;
}

.pp-site .btn-toolbar .btn-group {
    list-style: none;
}

/* Výpis údajov profilu — rovnaká mriežka ako formuláre, aby to sedelo k sebe */
.pp-site [class*="com-users-"] dl {
    margin: 0 0 1.5rem;
}

.pp-site [class*="com-users-"] dt {
    font-weight: 700;
    color: var(--pp-dark);
}

.pp-site [class*="com-users-"] dd {
    margin: 0 0 .8rem;
}

@media (min-width: 700px) {
    .pp-site [class*="com-users-"] dl {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: .4rem 1.5rem;
    }

    .pp-site [class*="com-users-"] dd {
        margin: 0;
    }
}

/* Zaškrtávacie pole „Pamätaj si ma“ */
.pp-site .form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
}

.pp-site .form-check-input {
    width: auto;
    margin: 0;
}

.pp-site .form-check-label {
    font-weight: 400;
    margin: 0;
}

/* Šablona nenačítava ikonový font, takže `.icon-eye` nevykreslí nič a tlačidlo
   pri hesle by ostalo prázdny sivý štvorec. Ikonu preto skryjeme a namiesto nej
   ukážeme jeho vlastný popis, ktorý Joomla drží ako `.visually-hidden`
   (a pri prepnutí ho sama mení na „Skryť heslo“). */
.pp-site .input-password-toggle {
    white-space: nowrap;
    font-size: 13px;
}

.pp-site .input-password-toggle [class*="icon-"] {
    display: none;
}

.pp-site .input-password-toggle .visually-hidden {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
}

/* Prihlásenie prístupovým kľúčom (plg_system_webauthn). Tlačidlo má vlastné SVG
   bez rozmerov — s `.btn` a `w-100` z neho bol čierny blok cez celý stĺpec, ikona
   182 px a popisok na štyri riadky. Widget je len na HTTPS, takže na localhoste
   ho nevidno; ladiť ho treba na produkci. */
.pp-site .plg_system_webauthn_login_button {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
}

.pp-site .plg_system_webauthn_login_button svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* Bootstrapové pomocné triedy, ktoré tieto pohľady používajú */
.pp-site .w-100 { width: 100%; }
.pp-site .d-flex { display: flex; }
.pp-site .flex-column { flex-direction: column; }
.pp-site .flex-wrap { flex-wrap: wrap; }
.pp-site .align-items-center { align-items: center; }
.pp-site .flex-grow-1 { flex-grow: 1; }
.pp-site .gap-2 { gap: .5rem; }
.pp-site .bg-light { background: #fafafa; }
.pp-site .rounded-2,
.pp-site .rounded-3 { border-radius: 3px; }
.pp-site .border { border: 1px solid #e0e0e0; }
.pp-site .border-top { border-top: 1px solid #e0e0e0; }
.pp-site .small { font-size: 13px; }
.pp-site .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (min-width: 700px) {
    /* Popisky vedľa polí, ako to má bootstrapový `form-horizontal` */
    .pp-site .form-horizontal .control-group {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 0 1.5rem;
        align-items: start;
    }

    .pp-site .form-horizontal .control-label label {
        margin-top: .8rem;
    }

    /* Riadok bez popisku (tlačidlo prihlásenia, prístupový kľúč) nemá dôvod
       tlačiť sa do úzkeho prvého stĺpca */
    .pp-site .form-horizontal .control-group > .controls:only-child {
        grid-column: 1 / -1;
    }
}

.pp-seats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.pp-seats__table {
    text-align: center;
}

.pp-seats__caption {
    font-weight: 700;
    color: var(--pp-dark);
    margin-bottom: .5rem;
}

.pp-seats__grid {
    display: grid;
    grid-template-columns: repeat(3, 46px);
    grid-auto-rows: 46px;
    gap: 4px;
    background: #ffeca0;
    padding: 5px;
    border-radius: 4px;
}

.pp-seats__seat {
    display: grid;
    place-items: center;
    border: 1px solid #000;
    border-radius: 4px;
    font-weight: 700;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
}

button.pp-seats__seat {
    cursor: pointer;
}

.pp-seats__seat[data-status="free"]     { background: #2e7d32; }
.pp-seats__seat[data-status="reserved"] { background: #ef8f00; }
.pp-seats__seat[data-status="sold"]     { background: #c62828; }

.pp-seats__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.pp-seats__legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pp-seats__legend i {
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    border-radius: 3px;
}

/* Řádek tlačítek pod plánkem (jen na admin stránce). Vymazání celého plánu
   je červené a odděluje se mezerou, aby se nespletlo s uložením. */
.pp-seats__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.pp-seats__actions .pp-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
}

.pp-btn--danger {
    margin-left: auto;
    background: #c62828;
    color: var(--pp-white) !important;
}

.pp-btn--danger:hover,
.pp-btn--danger:focus-visible {
    background: #a01f1f;
}

/* Odjištěné tlačítko — druhý klik už maže. */
.pp-btn--danger.is-armed {
    background: #8e1f1f;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, .35);
}

@media (max-width: 600px) {
    .pp-btn--danger {
        margin-left: 0;
    }
}

/* --- videá z akcií ------------------------------------------------------ */

.pp-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 2rem;
}

.pp-video {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.pp-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
    transition: opacity .2s;
}

.pp-video:hover video {
    opacity: 1;
}

.pp-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--pp-white);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6));
    pointer-events: none;
}

.pp-video-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .92);
}

.pp-video-lightbox[hidden] {
    display: none;
}

.pp-video-lightbox video {
    max-width: 90vw;
    max-height: 85vh;
}

.pp-video-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: 0;
    color: var(--pp-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}

/* Fotolightbox (galerie apartmánů) sdílí vzhled s videolightboxem. */
.pp-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .92);
}

.pp-photo-lightbox[hidden] {
    display: none;
}

.pp-photo-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
}

.pp-photo-lightbox__close,
.pp-photo-lightbox__nav {
    position: absolute;
    background: none;
    border: 0;
    color: var(--pp-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    padding: .5rem 1rem;
}

.pp-photo-lightbox__close {
    top: 1rem;
    right: 1.5rem;
}

.pp-photo-lightbox__nav--prev { left: .5rem; }
.pp-photo-lightbox__nav--next { right: .5rem; }

.pp-photo-lightbox__count {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.pp-embed {
    position: relative;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    margin: 0 0 2rem;
}

.pp-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}