/* ============================================================
   shared.css — STATE-ONLY (zastępuje React useState/AnimatePresence)
   Reguły: 1) STATE not LAYOUT  2) class selectors only  3) .bg-video bez sizing
   ============================================================ */

/* ====== Accordion (FAQ) ====== */
.js-accordion-content {
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.3s ease;
	max-height: 0;
	opacity: 0;
}
.js-accordion-item.is-open .js-accordion-content {
	opacity: 1;
}

/* accordion icon swap (item .is-open) */
.js-accordion-item.is-open .js-icon-closed { display: none; }
.js-accordion-item.is-open .js-icon-opened { display: inline-block; }

/* ====== Marquee (HP.14 — zastępuje motion x:0→-50%) ====== */
.js-marquee-left  { animation: hm-marquee-left  40s linear infinite; }
.js-marquee-right { animation: hm-marquee-right 45s linear infinite; }
@keyframes hm-marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes hm-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

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

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

/* ====== Modal (MapModal, Package modal, Lightbox) ====== */
.js-modal { display: none; }
.js-modal.is-open { display: flex; }

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

/* ====== Sidebar (Nasze Pokoje) — wysuwanie (slide-in) ====== */
/* zawsze w DOM; zamknięty = niewidoczny + nieinteraktywny; panel zsunięty w prawo */
.js-sidebar {
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.js-sidebar.is-open {
	opacity: 1;
	pointer-events: auto;
}
.js-sidebar-panel {
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.js-sidebar.is-open .js-sidebar-panel {
	transform: translateX(0);
}
/* sticky toggle button hidden when sidebar open */
.js-sidebar-trigger.is-hidden { display: none; }

/* ====== 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 (zmiana koloru po przewinięciu) ====== */
.js-scroll-header {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/* stan .is-scrolled (z React: bg-ink shadow-lg -translate-y-10 sm:-translate-y-12) */
.js-scroll-header.is-scrolled {
	background-color: var(--color-ink, #232323);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transform: translateY(-2.5rem);
}
.js-scroll-header.is-scrolled .js-navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.js-scroll-header.is-scrolled .js-logo { height: 1.5rem; }
@media (min-width: 640px) {
	.js-scroll-header.is-scrolled { transform: translateY(-3rem); }
	.js-scroll-header.is-scrolled .js-navbar { padding-top: 1rem; padding-bottom: 1rem; }
	.js-scroll-header.is-scrolled .js-logo { height: 2rem; }
}

/* ====== Mobile menu toggle — swap ikon menu/x ====== */
.js-mobile-menu-toggle[aria-expanded="true"] .js-icon-menu { display: none; }
.js-mobile-menu-toggle[aria-expanded="true"] .js-icon-close { display: inline-block; }

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

/* ====== Slider (ApartmentPage AP.3) ====== */
.js-slide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
}
.js-slide.is-active { opacity: 1; pointer-events: auto; }
.js-slider-dot { background-color: rgba(255, 255, 255, 0.5); }
.js-slider-dot:hover { background-color: rgba(255, 255, 255, 0.8); }
.js-slider-dot.is-active { width: 1.5rem; background-color: #fff; }
.js-slider-thumb.is-active { outline: 2px solid var(--color-ink, #232323); outline-offset: 2px; opacity: 1; }

/* ====== Lightbox image fade ====== */
.js-lightbox-image { transition: opacity 0.2s ease; }

/* ====== 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 inline w theme_youtube_embed(bg=true).
   Tu TYLKO border + interactivity blocking. */
.bg-video, [data-bg-video] {
	border: 0;
	pointer-events: none;
}

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