/* ============================================================================
   Dimbo — oferta: TYLKO funkcjonalne reguły (scroll-snap, TOC layout, reset).
   Cała estetyka (kolory, fonty, paddingi, ramki, tła, cienie) — po stronie motywu.
   Klasy ustabilizowane jako API, motyw może bezpiecznie nadpisywać.

   Klasy do dyspozycji motywu:
     Hero              .dimbo-offer-hero  .dimbo-offer-hero-img  .dimbo-offer-hero-video  .dimbo-offer-hero-content  .dimbo-offer-hero-title
     Galeria (grid)    .dimbo-galeria  .dimbo-galeria-grid  .dimbo-galeria-item  .dimbo-galeria-img
     Galeria lightbox  .dimbo-galeria-lightbox  .dimbo-galeria-lightbox-figure  .dimbo-galeria-lightbox-img
                       .dimbo-galeria-lightbox-counter  .dimbo-galeria-lightbox-close
                       .dimbo-galeria-lightbox-prev  .dimbo-galeria-lightbox-next
     Cena              .dimbo-cena-od  .dimbo-cena-od-label  .dimbo-cena-od-val  .dimbo-cena-opis
     FAQ               .dimbo-faq  .dimbo-faq-item  .dimbo-faq-q  .dimbo-faq-a
     Korpus tekstowy   .dimbo-sec-body  .dimbo-sec-{slug}-body
     Sekcja generyczna .dimbo-offer-section
   ========================================================================= */

/* ----------------------------------------------------------------------------
   TOC + układ strony oferty (sticky TOC po prawej, sekcje po lewej).
   ---------------------------------------------------------------------------- */
.dimbo-offer-body {
	display: grid;
	grid-template-columns: 1fr 240px;
	gap: 2rem;
	align-items: start;
}
.dimbo-offer-body .dimbo-offer-sections { order: 1; min-width: 0; }
.dimbo-offer-body .dimbo-offer-toc {
	order: 2;
	position: sticky;
	top: 6rem;
	font-size: .95em;
}
.dimbo-offer-body .dimbo-offer-toc ul { list-style: none; padding: 0; margin: 0; }
.dimbo-offer-body .dimbo-offer-toc li { padding: .25rem 0; }
.dimbo-offer-section { scroll-margin-top: 5rem; }
html { scroll-behavior: smooth; }

@media (max-width: 900px) {
	.dimbo-offer-body { grid-template-columns: 1fr; }
	.dimbo-offer-body .dimbo-offer-toc { order: 0; position: static; }
}

/* ----------------------------------------------------------------------------
   Hero — pełnoekranowy (100vh), obraz cover + ciemny overlay,
   środek: tytuł + CTA „Zobacz ofertę", dół: meta (termin/osoby/cena) + button „Zarezerwuj pobyt".
   ---------------------------------------------------------------------------- */
.dimbo-offer-hero {
	position: relative;
	display: block;
	height: 100vh;
	min-height: 480px;
	overflow: hidden;
}
.dimbo-offer-hero-img,
.dimbo-offer-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
.dimbo-offer-hero-overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.3;
	pointer-events: none;
}
.dimbo-offer-hero-content {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 40px 24px;
	box-sizing: border-box;
	color: #fff;
}
.dimbo-offer-hero-center {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 32px;
}
.dimbo-offer-hero-title {
	color: #fff;
	font-size: clamp(28px, 5vw, 56px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
/* Buttony CTA — per spec (transparentne tło, biała ramka, biały tekst, hover scale) */
.dimbo-offer-hero-cta,
.dimbo-offer-hero-reserve {
	display: inline-block;
	background-color: #A77E9C00;
	color: #fff;
	border-radius: 58px;
	border: 1px solid #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.5px;
	padding: 14px 32px;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease;
}
.dimbo-offer-hero-cta:hover,
.dimbo-offer-hero-reserve:hover,
.dimbo-offer-hero-cta:focus,
.dimbo-offer-hero-reserve:focus {
	transform: scale(1.1);
	color: #fff;
	text-decoration: none;
}
/* Dolny rząd: meta + button Zarezerwuj */
.dimbo-offer-hero-meta {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
}
.dimbo-offer-hero-meta-item {
	display: flex;
	flex-direction: column;
	color: #fff;
}
.dimbo-offer-hero-meta-label {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
}
.dimbo-offer-hero-meta-val {
	font-size: 18px;
	font-weight: 600;
	margin-top: 2px;
}
.dimbo-offer-hero-meta-unit {
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.85;
	white-space: nowrap;
}
.dimbo-offer-hero-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 80px;
}
@media (max-width: 700px) {
	.dimbo-offer-hero-content { padding: 24px 16px; }
	.dimbo-offer-hero-meta { gap: 16px 24px; }
	.dimbo-offer-hero-meta-val { font-size: 15px; }
}
/* Uszanuj preferencję ograniczenia ruchu: nie odtwarzaj wideo tła — pokaż plakat.
   Przeglądarki honorujące tę preferencję wstrzymają autoplay; dodatkowo wyłączamy
   tu wszelkie animacje CSS na elemencie wideo. */
@media (prefers-reduced-motion: reduce) {
	.dimbo-offer-hero-video {
		animation: none !important;
		transition: none !important;
	}
}

/* ----------------------------------------------------------------------------
   Galeria (sekcja Galeria) — siatka równych kolumn (equal columns) + lightbox.
   FUNKCJONALNE: grid responsywny 2→3→4, kafelki 4:3 cover, natywny <dialog>.
   ---------------------------------------------------------------------------- */
.dimbo-galeria { position: relative; }
.dimbo-galeria-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (min-width: 640px)  { .dimbo-galeria-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dimbo-galeria-grid { grid-template-columns: repeat(4, 1fr); } }

.dimbo-galeria-item {
	margin: 0;
	padding: 0;
	border: 0;
	background: #f3f4f6;
	cursor: pointer;
	display: block;
	width: 100%;
	height: 250px;               /* równa wysokość wszystkich kafelków (equal heights) */
	overflow: hidden;
	border-radius: 8px;
	position: relative;
}
@media (max-width: 639px)  { .dimbo-galeria-item { height: 190px; } }
@media (min-width: 1400px) { .dimbo-galeria-item { height: 280px; } }
/* !important — pokonuje globalne `img { height: auto !important }` z motywu (BeTheme),
   które inaczej rozjeżdża wysokości kafelków. */
.dimbo-galeria-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0 !important;
	transition: transform .25s ease, opacity .25s ease;
}
.dimbo-galeria-item:hover .dimbo-galeria-img,
.dimbo-galeria-item:focus-visible .dimbo-galeria-img {
	transform: scale(1.05);
	opacity: .92;
}
.dimbo-galeria-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.dimbo-galeria-img { transition: none; }
	.dimbo-galeria-item:hover .dimbo-galeria-img,
	.dimbo-galeria-item:focus-visible .dimbo-galeria-img { transform: none; }
}

/* Lightbox galerii — pełnoekranowy <dialog>, środek = obraz, boki = przyciski. */
.dimbo-galeria-lightbox {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	width: 100vw;
	height: 100vh;
}
.dimbo-galeria-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.85);
}
.dimbo-galeria-lightbox[open] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: 2rem;
	box-sizing: border-box;
}
.dimbo-galeria-lightbox-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
}
.dimbo-galeria-lightbox-img {
	max-width: 100%;
	max-height: 85vh;
	display: block;
	object-fit: contain;
}
.dimbo-galeria-lightbox-counter {
	color: #fff;
	margin-top: .5rem;
	font-size: 14px;
	letter-spacing: 0.05em;
}
.dimbo-galeria-lightbox-close,
.dimbo-galeria-lightbox-prev,
.dimbo-galeria-lightbox-next {
	background: rgba(255,255,255,0.1);
	border: 0;
	color: #fff;
	cursor: pointer;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dimbo-galeria-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
}
.dimbo-galeria-lightbox-close:hover,
.dimbo-galeria-lightbox-prev:hover,
.dimbo-galeria-lightbox-next:hover {
	background: rgba(255,255,255,0.25);
}

/* ----------------------------------------------------------------------------
   FAQ — TYLKO reset domyślnych markerów <details>/<summary>.
   ---------------------------------------------------------------------------- */
.dimbo-faq-q { cursor: pointer; list-style: none; }
.dimbo-faq-q::-webkit-details-marker { display: none; }

/* ===========================================================================
   Ośrodek narciarski — tekst + opcjonalna rolka/zdjęcie obok (2 kol / 1 kol)
   =========================================================================== */
.dimbo-osrodek {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	flex-wrap: wrap;
}
.dimbo-osrodek--no-media .dimbo-osrodek-text { flex: 1 1 100%; }
.dimbo-osrodek--has-media .dimbo-osrodek-text { flex: 1 1 320px; min-width: 0; }
.dimbo-osrodek-media { flex: 0 1 340px; max-width: 100%; }
.dimbo-osrodek-rolka {
	width: 100%;
	height: auto;
	max-height: 70vh;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 16px;
	display: block;
	background: #000;
}
.dimbo-osrodek-foto {
	width: 100%;
	height: auto;
	border-radius: 16px;
	display: block;
}
@media (max-width: 700px) {
	.dimbo-osrodek { gap: 1rem; }
	.dimbo-osrodek--has-media .dimbo-osrodek-text,
	.dimbo-osrodek-media { flex: 1 1 100%; }
}

/* ===========================================================================
   Filmik promocyjny — Szkolenie narciarskie (sam filmik, wyśrodkowany)
   =========================================================================== */
.dimbo-filmik-szkolenie {
	display: flex;
	justify-content: center;
}
.dimbo-filmik-szkolenie-media {
	width: 100%; /* pełna szerokość kolumny — krawędzie równo z kafelkami */
}
/* Naturalne proporcje filmiku promocyjnego (bez wymuszania pionu 9:16). */
.dimbo-filmik-szkolenie .dimbo-osrodek-rolka {
	aspect-ratio: auto;
	max-height: none;
	object-fit: contain;
}

/* Kotwice menu (#faq, #pokoje, sec-…): nagłówek sekcji nie chowa się pod przyklejonym headerem. */
.mcb-wrap[id],
.mcb-section[id],
section[id^="sec-"],
[id^="sec-"] { scroll-margin-top: 90px; }

/* ===========================================================================
   Rozwijana galeria (header_gallery_acc) — <details>/<summary>
   =========================================================================== */
.dimbo-offer-acc { border: 0; }
.dimbo-offer-acc-summary {
	cursor: pointer;
	list-style: none;
	font-size: clamp(1.15rem, 2.4vw, 1.6rem);
	font-weight: 600;
	line-height: 1.2;
	padding: .35rem 0;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.dimbo-offer-acc-summary::-webkit-details-marker { display: none; }
.dimbo-offer-acc-summary::marker { content: ""; }
.dimbo-offer-acc-summary::after {
	content: "";
	width: .55em;
	height: .55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-left: auto;
}
.dimbo-offer-acc[open] .dimbo-offer-acc-summary::after { transform: rotate(-135deg); }
.dimbo-offer-acc-body { padding-top: .75rem; }

/* ===========================================================================
   Piktogramy atrakcji — siatka ikon + etykiet
   =========================================================================== */
.dimbo-piktogramy {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: .75rem;
}
.dimbo-piktogram {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .7rem .9rem;
	background: #fff;
	border: 1px solid rgba(28, 53, 40, 0.10);
	border-radius: 12px;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.dimbo-piktogram:hover {
	border-color: rgba(28, 53, 40, 0.22);
	box-shadow: 0 6px 18px rgba(28, 53, 40, 0.08);
	transform: translateY(-1px);
}
.dimbo-piktogram-ikona {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(28, 53, 40, 0.07);
	color: #1c3528;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dimbo-piktogram-ikona svg { width: 26px; height: 26px; display: block; }
.dimbo-piktogram-ikona img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; display: block; }
.dimbo-piktogram-ikona--empty { background: rgba(28, 53, 40, 0.04); }
.dimbo-piktogram-label {
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
}
@media (max-width: 600px) {
	.dimbo-piktogramy { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Kafelek sekcji (opcjonalny) — dopasowany do kolumn Buildera (post 1184).
   Dodawany klasą .dimbo-offer-section--tile (atrybut shortcode `tile`).
   Dzięki temu goły element Code z shortcodem wygląda jak kafelek bez
   klonowania stylowanych kolumn.
   =========================================================================== */
.dimbo-offer-section--tile {
	background: #FDFAF4;
	border: 1px solid rgba(28, 53, 40, 0.12);
	border-radius: 16px;
}
/* Podwójna klasa (0,2,0) — pobija inline `.dimbo-offer-section{padding:0 10px!important}` */
.dimbo-offer-section.dimbo-offer-section--tile {
	padding: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

/* Equal-height: gdy kafelki stoją obok siebie w wierszu buildera (kolumny mają
   align-items:flex-start → nie rozciągają się), wymuszamy rozciągnięcie kolumny
   z kafelkiem i wypełnienie karty na 100% wysokości → równe doły. */
.mcb-column:has(.dimbo-offer-section--tile) { align-self: stretch; }
.mcb-column:has(.dimbo-offer-section--tile) > .mcb-column-inner { height: 100%; }
.mcb-column:has(.dimbo-offer-section--tile) > .mcb-column-inner > .column_attr { height: 100%; }
.dimbo-offer-section--tile { height: 100%; box-sizing: border-box; }
.dimbo-offer-section--tile > :first-child,
.dimbo-offer-section--tile .dimbo-sec-body > :first-child { margin-top: 0; }
.dimbo-offer-section--tile > :last-child,
.dimbo-offer-section--tile .dimbo-sec-body > :last-child { margin-bottom: 0; }
/* Rozwijana galeria wewnątrz kafelka — nagłówek bez dodatkowego górnego odstępu */
.dimbo-offer-section--tile > .dimbo-offer-acc > .dimbo-offer-acc-summary { padding-top: 0; }

/* ===========================================================================
   Builder: element „Image" z dynamicznym źródłem ({postmeta:…}) bez zdjęcia —
   Betheme renderuje pusty <img src="">. Ukrywamy całą kolumnę, a karta poniżej
   (kolejny wrap) dostaje górną krawędź i zaokrąglenie, by nie była „otwarta".
   =========================================================================== */
.mcb-column.column_image:has(.image_frame img[src=""]),
.mcb-column.column_image:has(.image_frame img:not([src])) {
	display: none !important;
}
.mcb-section .mcb-wrap:has(> .mcb-wrap-inner > .mcb-column.column_image .image_frame img[src=""]) + .mcb-wrap > .mcb-wrap-inner {
	border-top: 1px solid #D6D6D6;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
}

/* ----------------------------------------------------------------------------
   Hero bez obrazu/wideo — prosty wariant: tło jednolite, wysokość wg treści.
   Tytuł (H1) i meta zostają; oferta zawsze ma nagłówek pierwszego poziomu.
   ---------------------------------------------------------------------------- */
.dimbo-offer-hero.dimbo-offer-hero--no-media {
	height: auto;
	min-height: 0;
	background: #1f2a37;
}
.dimbo-offer-hero--no-media .dimbo-offer-hero-content { height: auto; gap: 32px; padding: 64px 24px 40px; }
.dimbo-offer-hero--no-media .dimbo-offer-hero-title { text-shadow: none; }

/* Ograniczenie ruchu: bez płynnego przewijania (kotwice TOC / „Zobacz ofertę"). */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Builder (Betheme) owija shortcode w <p>: pusty/„techniczny" <p> obok kafelka
   dokładał marginesy i kafelek wystawał ~15 px poza kolumnę (equal height). */
.column_attr:has(> .dimbo-offer-section--tile) > p:empty { display: none; }

/* Brak piktogramów w ofercie — chowamy pustą kolumnę/wrap buildera (inaczej pusta karta z ramką). */
.dimbo-piktogramy-empty { display: none !important; }
.mcb-column:has(.dimbo-piktogramy-empty):not(:has(.dimbo-piktogramy)) { display: none !important; }
.mcb-wrap:has(> .mcb-wrap-inner > .mcb-column .dimbo-piktogramy-empty):not(:has(> .mcb-wrap-inner > .mcb-column ~ .mcb-column)):not(:has(.dimbo-piktogramy)) { display: none !important; }

/* Hero na telefonie: osoby / cena jedna pod drugą — stały układ niezależny od szerokości ceny
   z jednostką i podmiany czcionki (wcześniej część ofert „skakała” przy ładowaniu, CLS ~0,17). */
@media (max-width: 700px) {
	.dimbo-offer-hero .dimbo-offer-hero-meta {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
}

/* Punkty rozbite z importu (emoji na początku linii jest znacznikiem) — bez dodatkowej strzałki motywu. */
.dimbo-sec-body li.dimbo-emoji-li { list-style: none !important; padding-left: 0 !important; }
.dimbo-sec-body li.dimbo-emoji-li::before { content: none !important; display: none !important; }

/* =============================================================================
   Karuzela terminów w hero („Termin pobytu", ≥2 terminy) — 0.29.1, assets/hero-terminy.js.
   Wszystkie terminy w jednej komórce gridu (grid-area 1/1) → szerokość = najdłuższa
   etykieta, zmiana terminu nie przesuwa układu (CLS). Niewidoczne: opacity + visibility.
   ============================================================================= */
.dimbo-hero-terminy-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.dimbo-offer-hero .dimbo-hero-terminy-val {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 8px;
	max-width: 100%;
}
.dimbo-offer-hero .dimbo-hero-terminy-stack {
	display: inline-grid;
	min-width: 0;
}
.dimbo-offer-hero .dimbo-hero-termin {
	grid-area: 1 / 1;
	/* reset stylu przycisków motywu (Betheme) */
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	line-height: inherit !important;
	font: inherit !important;
	color: inherit !important;
	text-align: left;
	text-transform: none;
	letter-spacing: inherit;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 2px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility 0s linear .6s;
}
.dimbo-offer-hero .dimbo-hero-termin.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .6s ease, visibility 0s linear 0s;
}
.dimbo-offer-hero .dimbo-hero-termin:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dimbo-offer-hero .dimbo-hero-termin:focus { outline: none; }
.dimbo-offer-hero .dimbo-hero-termin:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.dimbo-offer-hero .dimbo-hero-terminy-licznik {
	font-size: 0.7em;
	font-weight: 400;
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.dimbo-offer-hero .dimbo-hero-terminy-wiecej {
	display: none;
	font-size: 0.75em;
	font-weight: 400;
	opacity: 0.85;
	white-space: nowrap;
}
/* Ograniczenie ruchu: bez rotacji — pierwszy termin + „· +N terminy", bez licznika. */
@media (prefers-reduced-motion: reduce) {
	.dimbo-offer-hero .dimbo-hero-termin { transition: none; display: none; }
	.dimbo-offer-hero .dimbo-hero-termin.is-active { display: block; }
	.dimbo-offer-hero .dimbo-hero-terminy-licznik { display: none; }
	.dimbo-offer-hero .dimbo-hero-terminy-wiecej { display: inline; }
}