/* ============================================================
   shared.css — STATE-ONLY (nie layout)
   Klasy stanów dla interactive.js. Layout/sizing = compiled.css lub inline.
   Reguły: 1) tylko stan, nie position/display/width/height na layout
           2) class selectors, nigdy attribute selectors
           3) .bg-video TYLKO border + pointer-events (sizing inline z helpera)
   ============================================================ */

/* ====== Zapobieganie poziomemu przewijaniu na mobile ======
   AOS (fade-left/right) przesuwa elementy poza krawędź przed animacją → poziomy scroll.
   overflow-x: clip tnie nadmiar BEZ tworzenia kontenera przewijania (nie psuje sticky nav, w odróżnieniu od hidden). */
html, body { overflow-x: clip; max-width: 100%; }

/* ====== Accordion ====== */
.js-accordion-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
    max-height: 0;
}

/* ====== Body scroll lock ====== */
body.mobile-menu-open,
body.modal-open { overflow: hidden; }

/* ====== Mobile menu ====== */
.js-mobile-menu { display: none; }
.js-mobile-menu.is-open { display: flex; }

/* Hamburger → X (React: isMenuOpen toggles rotate/opacity on 3 spans) */
.js-mobile-menu-toggle.is-active .js-burger-1 { transform: rotate(45deg) translateY(8px); }
.js-mobile-menu-toggle.is-active .js-burger-2 { opacity: 0; }
.js-mobile-menu-toggle.is-active .js-burger-3 { transform: rotate(-45deg) translateY(-8px); }

/* ====== Hero slideshow (cross-fade + ciągły powolny ken-burns zoom; opacity 0.6 → czarne tło prześwituje) ====== */
.js-hero-slide {
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.5s ease;
    pointer-events: none;
}
.js-hero-slide.is-active {
    opacity: 0.6;
    pointer-events: auto;
    z-index: 1;
    animation: va-kenburns 9s linear forwards;
}
@keyframes va-kenburns {
    from { transform: scale(1.05); }
    to   { transform: scale(1.22); }
}

/* Galeria pokoju (i lightbox) — to też .js-hero-slideshow, ale BEZ przyciemnienia i zoomu */
.va-gallery .js-hero-slide {
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.7s ease;
    animation: none;
}
.va-gallery .js-hero-slide.is-active {
    opacity: 1;
    animation: none;
}

/* Kropki slideshow (galeria pokoju) */
.js-slide-dot.is-active { width: 1.5rem; background-color: #ffffff; }

/* Boczne przyciemnienie (vignette po bokach) — hero + sekcja końcowa */
.va-side-darken {
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,0.65) 100%);
}

/* ====== Modal / Lightbox (płynne otwieranie) ====== */
.js-modal {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.js-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.js-modal .modal-content-item {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(0.96) translateY(12px);
}
.js-modal.is-open .modal-content-item {
    transform: scale(1) translateY(0);
}

/* ====== Tabs ====== */
.js-tab-content { display: none; }
.js-tab-content.is-active { display: block; }

/* ====== Back to top ====== */
.js-back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.js-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ====== Header scroll ====== */
.js-scroll-header {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ====== Sticky panel (DesktopApartmentSidebar) — collapse/expand ====== */
.js-sticky-panel { transition: width 0.5s ease, padding 0.5s ease; }
.js-sticky-panel.is-collapsed { width: 4rem; padding-left: 1rem; padding-right: 0.5rem; }
.js-sticky-panel .va-sidebar-collapsed { display: none; }
.js-sticky-panel.is-collapsed .va-sidebar-open { display: none; }
.js-sticky-panel.is-collapsed .va-sidebar-collapsed { display: flex; }
.js-sticky-panel .va-toggle-collapsed { display: none; }
.js-sticky-panel.is-collapsed .va-toggle-open { display: none; }
.js-sticky-panel.is-collapsed .va-toggle-collapsed { display: block; }

/* ====== iframe responsive ====== */
iframe:not(.bg-video):not([data-bg-video]) { max-width: 100%; }

/* ====== .bg-video FIX ======
   object-fit NIE DZIAŁA na iframe. Sizing = inline style z theme_youtube_embed(bg=true).
   Tu TYLKO border + interactivity blocking. */
.bg-video, [data-bg-video] {
    border: 0;
    pointer-events: none;
}

/* ====== Cover video (StayScenario) — minimalny zoom usuwający letterbox 16:9 w boksie 4:3 (+ kontrolki ukryte przez controls=0) ====== */
.va-cover-video { transform: scale(1.4); }

/* ====== Strony treściowe (Polityka, Regulamin, blog) — max-width + typografia ======
   Niezależne od compiled.css (klasy arbitrary jak max-w-[900px] oraz plugin `prose` nie są w buildzie JIT). */
.va-page-narrow { max-width: 860px; margin-left: auto; margin-right: auto; }
.va-prose { color: #4b5563; font-weight: 300; line-height: 1.8; font-size: 1rem; }
.va-prose > * + * { margin-top: 1em; }
.va-prose h1, .va-prose h2, .va-prose h3, .va-prose h4 { color: #1a1a1a; font-family: "Playfair Display", Georgia, serif; font-weight: 500; line-height: 1.3; margin-top: 1.6em; margin-bottom: 0.5em; }
.va-prose h2 { font-size: 1.6rem; }
.va-prose h3 { font-size: 1.3rem; }
.va-prose h4 { font-size: 1.1rem; }
.va-prose p { margin: 0 0 1em; }
.va-prose ul, .va-prose ol { margin: 0 0 1em; padding-left: 1.5rem; }
.va-prose ul { list-style: disc; }
.va-prose ol { list-style: decimal; }
.va-prose li { margin: 0.35em 0; }
.va-prose a { color: #C5A059; text-decoration: underline; }
.va-prose a:hover { color: #A88746; }
.va-prose strong { font-weight: 600; color: #1a1a1a; }
.va-prose blockquote { border-left: 3px solid #C5A059; padding-left: 1rem; font-style: italic; color: #6b7280; }
.va-prose img { max-width: 100%; height: auto; border-radius: 0.75rem; }

/* ====== Icon SVG ====== */
.icon-svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ====== Hide scrollbar (React no-scrollbar utility — fallback if not in compiled) ====== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }