/* ═══════════════════════════════════════════════════════════════════════════
   AGROTURYSTYKA MOSTKI — v2 (2026-10-22, docs/analiza-v2.md). Ładowany po sekcje.css.
   Hero na zdjęciu (przenikanie), przezroczyste menu nad zdjęciem, przeplatane tła (biel / mgła / jedna ciemna),
   kafle ze zdjęciem, tekst + zdjęcie, udogodnienia, fakty, mozaika, subtelne pojawianie się (v2.js).
   Bez zoomu na hover. Tokeny kolorów i krojów w style.css (:root).
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: #fff; }
/* Wspólny lewy brzeg dla nagłówka i hero (tekst hero bliżej krawędzi ekranu, prośba 2026-10-22). */
:root { --brzeg: clamp(1.25rem, 7vw, 10rem); }
.naglowek__wnetrze { width: 100%; max-width: none; padding-inline: var(--brzeg); }

/* ── Znak szlaku: tylko w logo i stopce (tło SVG, nie znak w `content`) ── */
.znak-szlaku {
	display: inline-block; flex: 0 0 auto; width: 0.62em; height: 0.9em; margin-right: 0.5em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20'%3E%3Crect width='14' height='20' fill='%23fff'/%3E%3Crect y='6.5' width='14' height='7' fill='%23BE2B22'/%3E%3Crect x='.5' y='.5' width='13' height='19' fill='none' stroke='%2318211E' stroke-opacity='.35'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ═══ NAGŁÓWEK ═══════════════════════════════════════════════════════════ */
.naglowek { background: #fff; box-shadow: 0 1px 0 var(--c-linia); }
.marka__wordmark { display: flex; align-items: center; font-size: var(--t-l); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ciemne-tlo); }
.nawigacja__lista a { font-size: 1.0625rem; letter-spacing: 0.06em; }
.nawigacja__lista li.current-menu-item > a,
.nawigacja__lista li.current_page_item > a,
.nawigacja__lista li.current-menu-ancestor > a { text-decoration: underline; text-underline-offset: 0.5em; text-decoration-color: var(--c-akcent); text-decoration-thickness: 2px; }
.naglowek__telefony { display: flex; align-items: center; gap: 0.25rem 1.25rem; }
.naglowek__telefon { font-size: var(--t-s); color: var(--c-ciemne-tlo); }
@media (max-width: 960px) { .naglowek__telefon + .naglowek__telefon { display: none; } }
@media (min-width: 961px) and (max-width: 1180px) { .naglowek__telefony { flex-direction: column; align-items: flex-start; gap: 0; } .naglowek__telefon { min-height: 26px; } }
.naglowek a:focus-visible, .menu-przycisk:focus-visible { outline: 2px solid var(--c-akcent); outline-offset: 2px; }

/* Pasek menu na zdjęciu hero: przezroczysty z białym napisem, biały po przewinięciu, najechaniu, fokusie
   i z otwartym menu mobilnym (wzór: hermetsystem). Pasek fixed, hero ma u góry miejsce na jego wysokość. */
.naglowek-na-zdjeciu .naglowek { position: fixed; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; transition: background-color .25s, box-shadow .25s; }
.admin-bar.naglowek-na-zdjeciu .naglowek { top: 32px; }
@media (max-width: 782px) { .admin-bar.naglowek-na-zdjeciu .naglowek { top: 0; } }
.naglowek-na-zdjeciu .naglowek:is(.jest-przewiniety, :hover, :focus-within, :has(.jest-otwarte)) { background: #fff; box-shadow: 0 6px 24px rgb(24 33 30 / 0.1); }
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) :is(.marka__wordmark, .nawigacja__lista > li > a, .naglowek__telefon, .menu-przycisk) { color: #fff; text-shadow: 0 1px 14px rgb(16 26 36 / 0.5); }
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) .naglowek__telefon { border-color: rgb(255 255 255 / 0.7); }
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) .menu-przycisk__kreski,
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) .menu-przycisk__kreski::before,
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) .menu-przycisk__kreski::after { background: #fff; }
.naglowek-na-zdjeciu .naglowek:not(.jest-przewiniety):not(:hover):not(:focus-within):not(:has(.jest-otwarte)) .nawigacja__lista li.current-menu-item > a { text-decoration-color: #fff; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════ */
.hero, .sekcja--hero.hero {
	position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center;
	align-items: stretch; min-height: 0; gap: 0; grid-template-columns: none; color: #fff; background: var(--c-ciemne-tlo);
}
.hero.hero--na-zdjeciu { min-height: max(460px, 64vh); min-height: max(460px, 64svh); padding: calc(var(--wys-naglowka) + 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero.hero--pelne { min-height: max(580px, 100vh); min-height: max(580px, 100svh); padding-bottom: clamp(4rem, 8vw, 6rem); }
.hero.hero--bez-zdjecia { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-ciemne-tlo); }
.hero__obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero__obraz.jest-aktywne { opacity: 1; }
.hero__tlo::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgb(16 28 40 / 0.55) 0, rgb(16 28 40 / 0) 200px),
		linear-gradient(90deg, rgb(16 28 40 / 0.78) 0%, rgb(16 28 40 / 0.55) 38%, rgb(16 28 40 / 0.12) 68%, rgb(16 28 40 / 0) 100%);
}
/* Tekst bliżej lewej krawędzi ekranu niż kontener (prośba użytkownika 2026-10-22), na środku wysokości. */
.hero__ramka { width: 100%; max-width: 78rem; margin: 0; padding-inline: var(--brzeg); }
.hero.hero--bez-zdjecia .hero__ramka { max-width: none; }
.hero__tytul {
	margin: 0; color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem); font-weight: 700;
	line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
}
.hero--pelne .hero__tytul { font-size: clamp(2.8rem, 1.4rem + 6vw, 7rem); line-height: 0.92; }
.hero__lead { max-width: 40rem; margin: clamp(1rem, 2vw, 1.5rem) 0 0; color: rgb(255 255 255 / 0.92); font-size: clamp(1.08rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.55; }
.hero__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.hero .przycisk { min-height: 54px; padding-inline: 1.75rem; }
.hero__telefon { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; color: #fff; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); font-weight: 600; letter-spacing: 0.03em; text-decoration: none; }
.hero__telefon:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.hero__telefon .ikona { width: 1.1em; height: 1.1em; color: var(--c-lampa); }
.hero .okruszki { background: none; margin-bottom: 1rem; }
.hero .okruszki .kontener { width: auto; max-width: none; padding: 0; margin: 0; }
.hero .okruszki__lista { padding: 0; color: rgb(255 255 255 / 0.75); }
.hero .okruszki__lista a { color: #fff; }
.hero .okruszki__pozycja + .okruszki__pozycja::before { color: rgb(255 255 255 / 0.5); }
.hero__dalej {
	position: absolute; left: 50%; bottom: clamp(1rem, 2.5vw, 1.75rem); translate: -50% 0; display: grid; place-items: center;
	width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / 0.6); border-radius: 50%; color: #fff;
}
.hero__dalej .ikona { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
	.hero__dalej .ikona { animation: hero-dalej 2.4s ease-in-out infinite; }
	@keyframes hero-dalej { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
}
.kotwica-tresci { display: block; scroll-margin-top: var(--wys-naglowka); }
@media (max-width: 640px) {
	.hero.hero--pelne { min-height: 88vh; min-height: 88svh; }
	.hero__tlo::after { background: linear-gradient(180deg, rgb(16 28 40 / 0.55) 0%, rgb(16 28 40 / 0.5) 50%, rgb(16 28 40 / 0.7) 100%); }
	.hero__akcje { gap: 0.5rem 1.25rem; }
	.hero__akcje .przycisk { width: 100%; }
}

/* ═══ SEKCJE — tła i nagłówki ════════════════════════════════════════════ */
.sekcja > .kontener > h2, .sekcja h2 { text-align: left; margin-inline: 0; font-weight: 700; }
.sekcja > .kontener > .lead-sekcji { text-align: left; margin-inline: 0; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); color: var(--c-tekst-slaby); font-size: var(--t-l); line-height: 1.5; }
.sekcja { background: transparent; }
.wariant--jasny { background: #fff; }
.wariant--mgla { background: var(--c-tlo); }
.sekcja.wariant--mgla + .sekcja.wariant--mgla { padding-top: 0; }
.wariant--ciemny { background: var(--c-ciemne-tlo); color: var(--c-ciemne-tekst); }
.wariant--ciemny :is(h2, h3, strong) { color: #fff; }
.wariant--ciemny .tresc a, .wariant--ciemny a:not(.przycisk) { color: var(--c-lampa); }
.wariant--ciemny .lead-sekcji, .sekcja.wariant--ciemny > .kontener > .lead-sekcji { color: var(--c-ciemne-tekst-slaby); }
.wariant--ciemny .tresc li::marker { color: var(--c-lampa); }
.sekcja--hero + .sekcja, .kotwica-tresci + .sekcja { padding-top: var(--rytm-sekcji); }
.tresc li::marker { color: var(--c-akcent); }
.tresc ul { padding-left: 1.2em; }

/* ── TEKST + ZDJĘCIE ── */
.tekst-uklad--z-obrazem { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 960px) {
	.tekst-uklad--z-obrazem { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
	.tekst-uklad--obraz-lewa { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
	.tekst-uklad--obraz-lewa .tekst-uklad__media { order: -1; }
}
@media (max-width: 959px) { .tekst-uklad--z-obrazem .tekst-uklad__media { order: -1; } }
.tekst-uklad__media { margin: 0; position: relative; }
.tekst-uklad__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) {
	/* Przesunięty czerwony prostokąt pod zdjęciem — echo znaku szlaku, jedyny akcent na zdjęciach. */
	.tekst-uklad__media::before { content: ""; position: absolute; z-index: -1; width: 38%; height: 38%; right: -14px; bottom: -14px; background: var(--c-akcent); }
	.tekst-uklad--obraz-lewa .tekst-uklad__media::before { right: auto; left: -14px; }
	.tekst-uklad__media { isolation: isolate; }
}
.tekst-uklad__akcja { margin: var(--s-6) 0 0; }

/* ── KAFLE ── */
.kafle { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
	.kafle--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kafle--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kafel { min-width: 0; }
.kafel__wnetrze { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.kafel__media { position: relative; overflow: hidden; background: var(--c-tlo-alt); }
.kafel__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kafle--na_zdjeciu .kafel__obraz { aspect-ratio: 4 / 5; }
.kafle--na_zdjeciu.kafle--2 .kafel__obraz, .kafle--na_zdjeciu.kafle--4 .kafel__obraz { aspect-ratio: 4 / 3; }
@media (max-width: 559px) { .kafle--na_zdjeciu .kafel__obraz { aspect-ratio: 4 / 3; } }
.kafel__napis {
	position: absolute; inset: auto 0 0 0; padding: clamp(1rem, 2vw, 1.5rem); color: #fff;
	background: linear-gradient(0deg, rgb(16 26 36 / 0.88) 0%, rgb(16 26 36 / 0.5) 60%, rgb(16 26 36 / 0) 100%);
}
.kafel__napis .kafel__tytul { color: #fff; margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.kafel__napis .kafel__meta { color: var(--c-lampa); margin: 0.35rem 0 0; }
.kafel__meta { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; color: var(--c-akcent-tekst-kontrast); margin: 0.25rem 0 0; }
.kafel__tresc { position: relative; flex: 1; padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.4rem) clamp(1.25rem, 2.4vw, 1.6rem); background: #fff; border: 1px solid var(--c-linia); border-top: 0; }
.wariant--jasny .kafel__tresc { background: var(--c-tlo); border-color: transparent; }
.wariant--ciemny .kafel__tresc { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.12); }
.kafel__tresc .kafel__tytul { margin: 0; font-size: var(--t-l); }
.kafel__opis { margin: 0.5rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); line-height: 1.6; }
.wariant--ciemny .kafel__opis { color: var(--c-ciemne-tekst-slaby); }
.kafel__wiecej { position: absolute; right: 1rem; bottom: 1rem; color: var(--c-akcent); }
/* Hover bez przesunięć i bez zoomu (transformacje odbierane jako drganie — koha): tylko cień i podkreślenie. */
a.kafel__wnetrze { transition: box-shadow .25s ease; }
a.kafel__wnetrze:hover { box-shadow: 0 18px 40px rgb(16 26 36 / 0.16); }
a.kafel__wnetrze:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 3px; }
a.kafel__wnetrze:hover .kafel__tytul { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

/* ── UDOGODNIENIA ── */
.udogodnienia { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.udogodnienie { display: flex; gap: 1rem; align-items: flex-start; }
.udogodnienie__ikona { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--c-niebo-jasne); color: var(--c-niebo); }
.wariant--mgla .udogodnienie__ikona { background: #fff; }
.wariant--ciemny .udogodnienie__ikona { background: rgb(255 255 255 / 0.1); color: var(--c-lampa); }
.udogodnienie__ikona .ikona { width: 26px; height: 26px; }
.udogodnienie--wyroznione .udogodnienie__ikona { background: var(--c-akcent); color: var(--c-akcent-tekst); }
.udogodnienie__tytul { margin: 0.2rem 0 0; font-size: var(--t-l); }
.udogodnienie__opis { margin: 0.35rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); line-height: 1.6; }
.wariant--ciemny .udogodnienie__opis { color: var(--c-ciemne-tekst-slaby); }
.udogodnienie__etykieta { margin: 0; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-akcent-tekst-kontrast); }
.wariant--ciemny .udogodnienie__etykieta { color: var(--c-lampa); }

/* ── FAKTY ── */
.sekcja--fakty { padding-block: clamp(2rem, 4vw, 3rem); }
.fakty { margin: 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.fakt { margin: 0; padding-left: 1rem; border-left: 4px solid var(--c-akcent); }
.fakt__wartosc { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 700; line-height: 1; color: var(--c-ciemne-tlo); }
.fakt__etykieta { margin: 0.4rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); }
.wariant--ciemny .fakt__wartosc { color: var(--c-lampa); }
.wariant--ciemny .fakt__etykieta { color: var(--c-ciemne-tekst-slaby); }

/* ── GALERIA: mozaika (pierwsze zdjęcie duże), bez przyciemniania na hover ── */
.galeria { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.galeria__przycisk:hover .galeria__obraz { opacity: 1; }
.galeria--mozaika { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(130px, 34vw, 200px); grid-auto-flow: dense; gap: 0.6rem; }
@media (min-width: 900px) { .galeria--mozaika { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 240px); gap: 0.75rem; } }
.galeria--mozaika .galeria__pozycja:first-child { grid-column: span 2; grid-row: span 2; }
.galeria--mozaika .galeria__figura, .galeria--mozaika .galeria__przycisk { height: 100%; }
.galeria--mozaika .galeria__obraz { height: 100%; aspect-ratio: auto; object-fit: cover; }
.galeria__przycisk:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 2px; }

/* ── CENNIK (tabela) ── */
.tabela th, .tabela td { border-bottom: 1px dotted var(--c-tekst-slaby); }
.tabela thead th { font-size: var(--t-s); color: var(--c-tekst-slaby); border-bottom: 1px solid var(--c-tekst); background: none; }
.tabela tbody th { font-family: var(--font-display); font-size: var(--t-l); font-weight: 600; }
.tabela td { font-family: var(--font-display); font-size: var(--t-l); font-variant-numeric: tabular-nums lining-nums; color: var(--c-tekst); }
.tabela-przewijana { border: 0; background: none; }

/* ── CTA: pas Świerk, opcjonalnie ze zdjęciem w tle ── */
.sekcja--cta { position: relative; isolation: isolate; background: var(--c-ciemne-tlo); color: var(--c-ciemne-tekst); }
.sekcja--cta-zdjecie { padding-block: clamp(4rem, 9vw, 7rem); }
.cta__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cta__obraz { width: 100%; height: 100%; object-fit: cover; }
.cta__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(22 36 50 / 0.9) 0%, rgb(22 36 50 / 0.7) 55%, rgb(22 36 50 / 0.35) 100%); }
.cta { justify-items: start; text-align: left; }
.cta__tekst { justify-items: start; }
.cta__tytul { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }
.cta__lead { color: var(--c-ciemne-tekst-slaby); font-size: var(--t-l); }
.cta__akcja { justify-content: flex-start; }
.sekcja--cta .cta__telefon { color: var(--c-lampa); font-family: var(--font-display); font-size: var(--t-l); letter-spacing: 0.04em; }

/* ── KONTAKT ── */
.salon__dane { margin: var(--s-6) 0 0; gap: var(--s-6); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.salon__telefon { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em; }
.salon__adres { font-size: 1.5rem; font-weight: 600; }
.salon__przyciski { margin: var(--s-6) 0 0; }
.salon__mapa { margin-top: var(--s-8); min-height: 24rem; }
.salon__mapa iframe { min-height: 24rem; }

/* ── LISTA WPISÓW I WPIS ── */
.wpisy__wszystkie { margin: var(--s-8) 0 0; }
.karta { border: 0; background: var(--c-tlo); }
.wariant--mgla .karta { background: #fff; }
.wpis__naglowek h1 { font-size: var(--t-xxl); }
.wpis__obraz { width: 100%; max-height: 70vh; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--s-8); }
.wpis__kontakt { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); margin: var(--s-8) 0 0; }
.wpis__kontakt .cta__telefon { font-family: var(--font-display); font-size: var(--t-l); }

/* ── STOPKA: zdjęcie w tle, zaproszenie z dużymi telefonami, karta z adresem; pas z marką na dole ── */
.stopka { position: relative; isolation: isolate; margin-top: 0; background: var(--c-ciemne-tlo); color: var(--c-ciemne-tekst); }
.stopka__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.stopka__obraz { width: 100%; height: 100%; object-fit: cover; }
.stopka__tlo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 34 48 / 0.9) 0%, rgb(20 34 48 / 0.72) 55%, rgb(20 34 48 / 0.5) 100%), linear-gradient(0deg, rgb(20 34 48 / 0.6) 0%, rgb(20 34 48 / 0) 40%); }
.stopka__gora { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) { .stopka__gora { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.stopka__naglowek { margin: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); font-weight: 700; line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; color: #fff; }
.stopka__tagline { margin: 0.9rem 0 0; color: var(--c-ciemne-tekst-slaby); font-size: var(--t-l); max-width: none; }
.stopka__telefony { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
.stopka .stopka__telefon {
	display: inline-flex; align-items: center; gap: 0.6rem; min-height: 56px; padding: 0 1.4rem;
	background: var(--c-akcent); color: var(--c-akcent-tekst); font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); font-weight: 700; letter-spacing: 0.03em; text-decoration: none;
}
.stopka .stopka__telefon:hover { background: var(--c-lampa); color: var(--c-akcent-tekst); }
.stopka__telefon .ikona { color: var(--c-akcent-tekst); }
.stopka__karta { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.18); backdrop-filter: blur(6px); }
.stopka__pozycja { display: flex; gap: 1rem; align-items: flex-start; font-size: var(--t-m); }
.stopka__pozycja address { font-style: normal; line-height: 1.55; }
.stopka__ikona { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-niebo-jasne); color: var(--c-niebo); }
.stopka a { color: #fff; }
.stopka .stopka__trasa { display: inline-block; margin-top: 0.4rem; color: var(--c-lampa); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--t-s); }
.stopka a:focus-visible { outline: 2px solid var(--c-lampa); outline-offset: 2px; }
.stopka__dol { padding: 0; }
.stopka__dol-wnetrze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.25rem 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.18); font-size: var(--t-s); color: var(--c-ciemne-tekst-slaby); }
.stopka__dol-wnetrze p { margin: 0; }
.stopka__linki-dol ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.stopka .stopka__linki-dol a { color: var(--c-ciemne-tekst-slaby); }

/* ── FAQ ── */
.faq { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.faq__pytanie h3 { font-size: var(--t-l); font-family: var(--font-display); font-weight: 600; }

/* ── Przyciski ── */
.przycisk { font-size: var(--t-s); letter-spacing: 0.08em; }
.wariant--ciemny .przycisk--obrys, .sekcja--cta .przycisk--obrys { color: #fff; border-color: rgb(255 255 255 / 0.6); }

/* ═══ POJAWIANIE SIĘ PRZY PRZEWIJANIU (v2.js dodaje .ma-pojawianie) ══════ */
.ma-pojawianie [data-pojaw] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ma-pojawianie [data-pojaw].jest-widoczne { opacity: 1; transform: none; }
@media print { .ma-pojawianie [data-pojaw] { opacity: 1; transform: none; } }

/* ═══ KAFLE: MOZAIKA (pierwszy duży, opis na zdjęciu) — jedna spójna siatka bez pustych pól ═ */
.kafle--mozaika { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.kafle--mozaika .kafel__media { height: 100%; }
.kafle--mozaika .kafel__obraz { aspect-ratio: 4 / 3; }
@media (max-width: 759px) { .kafle--mozaika .kafel__media { background: #1A2D3D; } .kafle--mozaika .kafel__napis { position: static; background: #1A2D3D; } }
.kafle--mozaika .kafel__napis { padding: clamp(1rem, 2vw, 1.6rem); }
.kafle--mozaika .kafel__opis { margin: 0.5rem 0 0; color: rgb(255 255 255 / 0.9); font-size: var(--t-s); line-height: 1.5; max-width: 36rem; }
@media (min-width: 760px) {
	.kafle--mozaika { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 21vw, 300px); }
	.kafle--mozaika .kafel:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.kafle--mozaika .kafel:nth-child(4) { grid-column: span 2; }
	.kafle--mozaika .kafel__obraz { height: 100%; aspect-ratio: auto; }
	.kafle--mozaika .kafel:nth-child(1) .kafel__tytul { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); }
}

/* ═══ KARUZELA (atrakcje regionu): taśma przesuwa się sama, stop po najechaniu ═══ */
.sekcja--karuzela { overflow: hidden; }
.pasaz { --szer: clamp(250px, 24vw, 320px); --odstep: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-block: 1rem; }
.pasaz__tasma { display: flex; gap: var(--odstep); width: max-content; list-style: none; margin: 0; padding: 0 0 0 var(--margines-boczny); }
.pasaz__bloczek {
	position: relative; flex: 0 0 var(--szer); display: flex; flex-direction: column; gap: 0.35rem; min-height: 230px;
	padding: 1.5rem 1.4rem 1.6rem; background: #fff; border-top: 5px solid var(--c-akcent); box-shadow: 0 10px 30px rgb(20 40 60 / 0.1);
	transition: transform .35s ease, box-shadow .35s ease;
}
.pasaz__bloczek:nth-child(3n+2) { border-top-color: var(--c-niebo); }
.pasaz__bloczek:nth-child(3n) { border-top-color: var(--c-ciemne-tlo); }
.wariant--jasny .pasaz__bloczek { background: var(--c-tlo); box-shadow: none; }
.pasaz__ikona { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 0.5rem; border-radius: 50%; background: var(--c-niebo-jasne); color: var(--c-niebo); }
.pasaz__ikona .ikona { width: 26px; height: 26px; }
.pasaz__miejsce { margin: 0; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-akcent-tekst-kontrast); }
.pasaz__tytul { margin: 0; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--c-tekst); }
.pasaz__opis { margin: 0.25rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); line-height: 1.55; }
/* Powiększenie po najechaniu — świadoma prośba użytkownika (2026-10-22), wyjątek od „bez zoomu na hover”. */
.pasaz__bloczek:hover { transform: scale(1.04); box-shadow: 0 18px 40px rgb(20 40 60 / 0.18); z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
	.pasaz__tasma { animation: karuzela-przesun calc(var(--ile) * 6s) linear infinite; }
	.pasaz:hover .pasaz__tasma, .pasaz:focus-within .pasaz__tasma { animation-play-state: paused; }
	@keyframes karuzela-przesun { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--odstep) / 2)); } }
}
@media (prefers-reduced-motion: reduce) {
	.pasaz { overflow-x: auto; }
	.pasaz__bloczek[aria-hidden="true"] { display: none; }
	.pasaz__bloczek:hover { transform: none; }
}

/* ═══ Kolory v2b: żywsze akcenty ═══ */
.naglowek__telefon .ikona { color: var(--c-akcent-tekst-kontrast); }
.tekst-uklad__media::before { background: var(--c-akcent); }
.stopka__linki-dol { margin-left: auto; }

/* ═══ KARTY NOCLEGÓW (wzór: bakunowka.pl) ═══════════════════════════════ */
.pokoje { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .pokoje { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pokoje { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pokoj { position: relative; display: flex; flex-direction: column; background: #fff; box-shadow: 0 10px 30px rgb(20 40 60 / 0.08); transition: box-shadow .25s ease; }
.wariant--jasny .pokoj { background: var(--c-tlo); box-shadow: none; }
.pokoj:hover { box-shadow: 0 18px 40px rgb(20 40 60 / 0.16); }
.pokoj__media { position: relative; background: var(--c-tlo-alt); }
.pokoj__obraz { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pokoj__pasek { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(0deg, rgb(16 26 36 / 0.85) 0%, rgb(16 26 36 / 0) 100%); }
.pokoj__tytul { margin: 0; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.pokoj__tytul, .pokoj__link { color: #fff; text-decoration: none; }
/* Cała karta klikalna przez rozciągnięty link w nagłówku (jeden link na kartę). */
.pokoj__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pokoj__link:focus-visible { outline: none; }
.pokoj:has(.pokoj__link:focus-visible) { outline: 3px solid var(--c-akcent); outline-offset: 3px; }
.pokoj__osoby { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; padding: 0.3rem 0.6rem; background: var(--c-akcent); color: var(--c-akcent-tekst); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; }
.pokoj__osoby .ikona { width: 1em; height: 1em; }
.pokoj__tresc { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: 1.25rem 1.25rem 1.4rem; }
.pokoj__cena { margin: 0; color: var(--c-tekst-slaby); }
.pokoj__cena strong { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.3rem); font-weight: 700; line-height: 1; color: var(--c-akcent-tekst-kontrast); }
.pokoj__cena2 { margin: -0.3rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); }
.pokoj__wiecej { display: inline-flex; align-items: center; gap: 0.4rem; margin: auto 0 0; padding-top: 0.5rem; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; color: var(--c-akcent-tekst-kontrast); }
.pokoj:hover .pokoj__wiecej { text-decoration: underline; text-underline-offset: 0.25em; }
.pokoje__uwaga { margin: 1.25rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); }

/* Etykiety wyposażenia (karty i panel) */
.cechy { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.cechy li { margin: 0; padding: 0.3rem 0.65rem; border: 1px solid var(--c-linia); background: #fff; color: var(--c-tekst-tresc); font-size: 0.85rem; line-height: 1.3; }
.wariant--jasny .pokoj .cechy li { background: #fff; }
.tresc .cechy li + li { margin-top: 0; }

/* ═══ OPIS Z PANELEM ════════════════════════════════════════════════════ */
.opis { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .opis { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); } .opis__panel { position: sticky; top: calc(var(--wys-naglowka) + 1.5rem); } }
.opis__panel { display: grid; gap: 0.9rem; padding: 1.5rem; background: var(--c-tlo); border-top: 5px solid var(--c-akcent); }
.wariant--mgla .opis__panel { background: #fff; }
.opis__panel-tytul { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--c-tekst); }
.opis__panel-tekst { margin: 0.4rem 0 0; color: var(--c-tekst-slaby); font-size: var(--t-s); }
.opis__telefon { gap: 0.5rem; justify-content: flex-start; font-size: 1.15rem; }
.opis__telefon .ikona { width: 1.1em; height: 1.1em; }

/* Mozaika bez pustych pól: ostatnie zdjęcia rozciągają się zależnie od liczby zdjęć (pierwsze zajmuje 2×2). */
@media (max-width: 899px) {
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(even):last-child) > .galeria__pozycja:last-child { grid-column: span 2; }
}
@media (min-width: 900px) {
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(2):last-child) > .galeria__pozycja:last-child { grid-column: span 2; grid-row: span 2; }
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(3):last-child) > .galeria__pozycja:not(:first-child) { grid-row: span 2; }
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(4):last-child) > .galeria__pozycja:last-child { grid-column: span 2; }
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(4n+2):last-child):not(:has(> .galeria__pozycja:nth-child(2):last-child)) > .galeria__pozycja:last-child { grid-column: span 4; }
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(4n+3):last-child):not(:has(> .galeria__pozycja:nth-child(3):last-child)) > .galeria__pozycja:nth-last-child(-n+2) { grid-column: span 2; }
	.galeria--mozaika:has(> .galeria__pozycja:nth-child(4n):last-child):not(:has(> .galeria__pozycja:nth-child(4):last-child)) > .galeria__pozycja:last-child { grid-column: span 2; }
}

/* ═══ ATRAKCJE: tekst + slajder wyróżnionych (u góry), karuzela pozostałych (na dole) ═══ */
.atrakcje { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .atrakcje { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.slajder { position: relative; }
.slajder__okno { position: relative; display: grid; gap: 1rem; }
.slajder.jest-gotowy .slajder__okno { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(0 0 0 / 0.2); }
.slajder__slajd { position: relative; margin: 0; }
.slajder.jest-gotowy .slajder__slajd { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.slajder.jest-gotowy .slajder__slajd.jest-aktywny { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.slajder__obraz { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.slajder__podpis { position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 3vw, 2rem); color: #fff; background: linear-gradient(0deg, rgb(16 26 36 / 0.9) 0%, rgb(16 26 36 / 0.55) 60%, rgb(16 26 36 / 0) 100%); }
.slajder__tytul { margin: 0; color: #fff; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; }
.slajder__meta { margin: 0.4rem 0 0; color: var(--c-lampa); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
.slajder__opis { margin: 0.5rem 0 0; color: rgb(255 255 255 / 0.9); font-size: var(--t-s); line-height: 1.5; max-width: 38rem; }
.slajder__sterowanie { display: none; }
.slajder.jest-gotowy .slajder__sterowanie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.slajder__strzalka { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: var(--c-akcent); color: var(--c-akcent-tekst); cursor: pointer; }
.slajder__strzalka:hover { background: var(--c-lampa); }
.slajder__strzalka .ikona { width: 24px; height: 24px; }
.slajder__kropki { display: flex; gap: 0.25rem; }
.slajder__kropka { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.slajder__kropka::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: rgb(255 255 255 / 0.45); transition: background .2s, width .2s; }
.wariant--jasny .slajder__kropka::after, .wariant--mgla .slajder__kropka::after { background: var(--c-linia); }
.slajder__kropka.jest-aktywna::after { width: 28px; border-radius: 5px; background: var(--c-akcent); }
.slajder__strzalka:focus-visible, .slajder__kropka:focus-visible { outline: 2px solid var(--c-lampa); outline-offset: 2px; }
.sekcja--karuzela .pasaz { margin-top: clamp(2rem, 4vw, 3.25rem); }
.wariant--ciemny .pasaz__bloczek { box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
.wariant--ciemny .pasaz__tytul { color: var(--c-tekst); }

.slajder.jest-gotowy .slajder__sterowanie { justify-content: center; margin-top: 0.75rem; }
.sekcja--karuzela .pasaz__naglowek { margin: clamp(2.25rem, 4.5vw, 3.5rem) 0 0; font-size: var(--t-l); text-transform: uppercase; letter-spacing: 0.06em; }
.sekcja--karuzela .pasaz__naglowek + * { margin-top: 0; }
.sekcja--karuzela .kontener:has(.pasaz__naglowek) + .pasaz { margin-top: 1rem; }

/* ═══ WPIS: hero ze zdjęciem, treść + panel boczny ═══════════════════════ */
.hero.hero--wpis { min-height: max(400px, 56vh); min-height: max(400px, 56svh); }
.hero__tytul--wpis { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.8rem); text-transform: none; letter-spacing: 0; line-height: 1.05; }
.hero .wpis__data { margin: 0 0 0.6rem; color: var(--c-lampa); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--t-s); }
.hero--bez-zdjecia .okruszki { margin-bottom: 1rem; }
.sekcja--wpis { padding-top: clamp(2.5rem, 5vw, 4rem); }
.wpis-uklad { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 960px) { .wpis-uklad { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); } .wpis-uklad__panel { position: sticky; top: calc(var(--wys-naglowka) + 1.5rem); } }
.wpis-uklad__tresc .tresc { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); }
.wpis-uklad__tresc .tresc h2 { font-size: var(--t-xl); margin-top: var(--s-8); }
.wpis-uklad__panel { display: grid; gap: 1.25rem; }
.panel-wpisu { padding: 1.4rem; background: var(--c-tlo); border-top: 5px solid var(--c-akcent); }
.panel-wpisu--kontakt { display: grid; gap: 0.7rem; border-top-color: var(--c-niebo); }
.panel-wpisu__tytul { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--c-tekst); }
.panel-wpisu--kontakt .panel-wpisu__tytul { margin-bottom: 0.2rem; }
.panel-wpisu__tekst { margin: 0; color: var(--c-tekst-slaby); font-size: var(--t-s); }
.panel-wpisu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.panel-wpisu__wpis { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.8rem; align-items: center; color: var(--c-tekst); text-decoration: none; }
.panel-wpisu__obraz { width: 72px; height: 72px; object-fit: cover; }
.panel-wpisu__nazwa { display: block; font-weight: 600; line-height: 1.3; }
.panel-wpisu__wpis:hover .panel-wpisu__nazwa { text-decoration: underline; text-underline-offset: 0.2em; }
.panel-wpisu__data { display: block; margin-top: 0.2rem; color: var(--c-tekst-slaby); font-size: 0.85rem; }
.panel-wpisu__telefon { justify-content: flex-start; gap: 0.5rem; font-size: 1.15rem; }
.panel-wpisu__telefon .ikona { width: 1.1em; height: 1.1em; }
.panel-wpisu__email { margin: 0.2rem 0 0; }
.panel-wpisu__email a { color: var(--c-niebo); }
.panel-wpisu__oferta { margin-top: 0.3rem; }
.wpis__powrot { margin-top: var(--s-8); }

/* ═══ GALERIA Z FILTRAMI ════════════════════════════════════════════════ */
.filtry { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: clamp(1rem, 2vw, 1.5rem) 0 0; }
.filtry__przycisk {
	min-height: 44px; padding: 0.4rem 1.1rem; border: 1px solid var(--c-linia); background: #fff; color: var(--c-tekst);
	font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.filtry__przycisk:hover { border-color: var(--c-akcent); }
.filtry__przycisk[aria-pressed="true"] { background: var(--c-akcent); border-color: var(--c-akcent); color: var(--c-akcent-tekst); }
.filtry__przycisk:focus-visible { outline: 2px solid var(--c-niebo); outline-offset: 2px; }
.galeria--filtry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 900px) { .galeria--filtry { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } }
.galeria--filtry .galeria__obraz { aspect-ratio: 4 / 3; height: auto; }
.galeria__pozycja[hidden] { display: none; }

/* Atrakcje: tekst wyśrodkowany względem zdjęć slajdera — kropki poza wysokością kolumny (prośba 2026-10-22). */
.slajder.jest-gotowy .slajder__sterowanie { position: absolute; top: 100%; left: 0; right: 0; }
.atrakcje { padding-bottom: 3.5rem; }
.atrakcje__tekst > :last-child, .atrakcje__tekst .tresc > :last-child { margin-bottom: 0; }
.atrakcje__tekst h2 { margin-top: 0; }