/* ============================================================
   shared.css — STATE-ONLY styles (zastępują React useState).
   Class selectors only. Brak position/layout w hookach .js-*.
   Layout/sizing pochodzi z compiled.css (Tailwind) lub inline.
   ============================================================ */

/* ====== Accordion (FAQ) ====== */
.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; }

/* ====== Hero slideshow ====== */
.js-hero-slide {
    opacity: 0;
    transition: opacity 1.8s ease-in-out;
    pointer-events: none;
}
.js-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* ====== Modal (Map / Lightbox / Attractions / Mobile menu) ====== */
.js-modal { display: none; }
.js-modal.is-open { display: flex; }

/* ====== 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.5s ease, box-shadow 0.5s ease, color 0.5s ease, padding 0.5s ease;
}
/* Navbar — stan domyślny vs przewinięty (App.tsx isScrolled, l.115) */
.kdp-navbar {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease,
                padding 0.5s ease, box-shadow 0.5s ease;
}
.js-scroll-header.is-scrolled .kdp-navbar {
    background-color: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: #1e293b;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}
/* CTA — link z podkreśleniem (domyślnie) → biały przycisk (po scroll) */
.kdp-cta::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease;
}
.kdp-cta:hover::after { background: #fff; }
.js-scroll-header.is-scrolled .kdp-cta {
    background: #fff;
    color: #0f172a;
    padding: 0.625rem 1rem;
    border-radius: 2px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
    .js-scroll-header.is-scrolled .kdp-cta { padding: 0.75rem 1.5rem; }
}
.js-scroll-header.is-scrolled .kdp-cta:hover { background: #f1f5f9; }
.js-scroll-header.is-scrolled .kdp-cta::after { display: none; }

/* ====== Sticky panel ====== */
.js-sticky-panel { transition: transform 0.3s ease; }
.js-sticky-panel.is-collapsed { transform: translateX(calc(100% - 40px)); }

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

/* ====== .bg-video FIX ======
   object-fit NIE działa na iframe. Sizing wstawiamy jako inline style
   w theme_youtube_embed(bg=true). Tu TYLKO border + interactivity blocking. */
.bg-video, [data-bg-video] {
    border: 0;
    pointer-events: none;
}

/* ====== Logo (rozmiary niezależne od Tailwind JIT) ====== */
.kdp-logo, .kdp-logo--footer, .kdp-logo--table { display: block; width: auto; }
.kdp-logo--inline { display: inline-block; width: auto; vertical-align: middle; }
.kdp-logo { height: 40px; }
@media (min-width: 640px)  { .kdp-logo { height: 44px; } }
@media (min-width: 1024px) { .kdp-logo { height: 48px; } }
.kdp-logo--footer { height: 26px; }
@media (min-width: 640px)  { .kdp-logo--footer { height: 30px; } }
.kdp-logo--table { height: 36px; }
@media (min-width: 1024px) { .kdp-logo--table { height: 44px; } }
.kdp-logo--inline { height: 22px; }

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

/* ====== Lightbox ====== */
.js-lightbox { display: none; }
.js-lightbox.is-open { display: flex; }
.js-lightbox-slide { display: none; }
.js-lightbox-slide.is-active { display: flex; }

/* ====== Attractions category modal content ====== */
.js-cat-content { display: none; }
.js-cat-content.is-active { display: block; }

/* ====== Hero slide indicators (active dot) ====== */
.js-hero-dot.is-active .kdp-dot { width: 3rem; background: #fff; }

/* ====== FAQ accordion open state (App.tsx 882-886) ====== */
.js-accordion-trigger.is-open h3 { color: #2563eb; }
.js-accordion-trigger.is-open .kdp-faq-toggle { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
.js-accordion-trigger.is-open .kdp-faq-chevron { transform: rotate(180deg); }

/* ====== Reservation slider slide state ====== */
.js-res-slide { display: none; }
.js-res-slide.is-active { display: block; }
.js-res-thumb { opacity: 0.5; transition: opacity 0.2s ease; }
.js-res-thumb:hover { opacity: 1; }
.js-res-thumb.is-active { opacity: 1; box-shadow: 0 0 0 2px #3b82f6; }