/* ==========================================================================
   Ostoja Rakówiec — arkusz główny.
   Odwzorowanie 1:1 zaakceptowanego wyglądu. Nagłówki Alice (serif),
   tekst Nunito, menu Open Sans. Akcenty: zieleń #188038, pomarańcz #fb8e28.
   ========================================================================== */

:root {

	/* ---------- CIENIE: jedna skala, światło z góry (14.08) ----------
	   Było dziewięć różnych cieni pisanych wprost w regułach. Każdy z innym
	   rozmyciem i innym kierunkiem, więc kafle sąsiadujące ze sobą wyglądały,
	   jakby leżały w dwóch różnych scenach. */
	--cien-sm: 0 1px 3px rgba(20, 34, 0, .07);
	--cien-md: 0 6px 20px rgba(20, 34, 0, .10);
	--cien-lg: 0 14px 34px rgba(20, 34, 0, .14);
	--cien-xl: 0 24px 60px rgba(20, 34, 0, .22);

	/* ---------- CZASY PRZEJŚĆ: cztery, każdy z zadaniem ----------
	   Było sześć. Różnica między 400 a 500 ms nie niesie żadnej informacji,
	   a sprawia, że dwie sąsiednie animacje nie trzymają rytmu. */
	--t-szybko: 150ms;   /* podświetlenie, obramowanie pola */
	--t-zwykle: 200ms;   /* najechanie, zmiana barwy */
	--t-panel:  320ms;   /* wjazd menu, pasek ciasteczek */
	--t-obraz:  600ms;   /* powolny ruch zdjęcia w kadrze */


	/* ---------- SKALA PISMA (dodana 14.08, patrz migracja_tokenow.py) ----------
	   Sześć rozmiarów akapitu w jednym motywie to nie skala, tylko zbiór
	   przypadków. Poniżej pięć stopni i jedna zasada: akapit nie schodzi
	   poniżej 16 px, bo tam zaczyna się nieczytelność na telefonie. */
	--fs-xs:   0.8125rem;   /* 13 px — plakietki, wersaliki, podpisy */
	--fs-sm:   0.9375rem;   /* 15 px — tekst drugorzędny */
	--fs-base: 1rem;        /* 16 px — akapit */
	--fs-md:   1.125rem;    /* 18 px — lead */
	--fs-lg:   1.375rem;    /* 22 px — H3 */

	/* ---------- KOLORY ---------- */
	--c-brand:       #188038;   /* zieleń: pasek górny, menu w stopce */
	--c-accent:      #fb8e28;   /* pomarańcz: CTA, gwiazdki opinii */
	--c-accent-dark: #e07a15;   /* hover CTA (ciemniejszy wariant) */
	--c-text:        #333;
	--c-heading:     #3e3e3e;   /* nagłówki serif */
	--c-muted:       #6b6b6b;   /* etykiety, podpisy: 5.33:1 na białym, 5.02:1 na kremie */
	--c-bg:          #fff;
	--c-surface:     #f9f8f6;   /* kremowe tło nagłówka i sekcji */
	--c-dark:        #1a1a1a;   /* stopka */
	--c-border:      #ccc;
	--c-error:       #c0392b;   /* stan błędu pola formularza */
	--c-border-light: rgba(0,0,0,.1);
	--c-on-dark:     rgba(255,255,255,.8);
	--c-scrim:       linear-gradient(to top, rgba(20,40,30,.85) 0%, rgba(20,40,30,.35) 60%, rgba(20,40,30,.15) 100%);
	--c-scrim-flat:  rgba(0,0,0,.35);

	/* ---------- ODSTĘPY: skala 4px ---------- */
	--space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
	--space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;  --space-10: 2.5rem;
	--space-12: 3rem;  --space-16: 4rem;
	--sekcja-y: clamp(2.5rem, 6vw, 4.5rem);
	--gutter:   clamp(1rem, 5vw, 3rem);

	/* ---------- TYPOGRAFIA ---------- */
	--serif: Alice, Georgia, "Times New Roman", serif;
	--sans:  Nunito, Helvetica, Arial, sans-serif;
	--menu:  "Open Sans", Nunito, Helvetica, Arial, sans-serif;
	--fs-h1:    clamp(2rem, 1.5rem + 1.8vw, 3rem);
	--fs-h2:    clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
	--fs-h3:    clamp(1.3rem, 1.1rem + .8vw, 1.8rem);
	--fs-body:  1rem;
	--fs-small: .9375rem;
	--fs-label: .82rem;
	--lh-tight: 1.2;
	--lh-body:  1.65;
	--lh-proza: 1.8;

	/* ---------- PROMIENIE: jeden system (były 3px/4px/6px losowo) ---------- */
	--radius:    4px;
	--radius-sm: var(--radius);   /* było 3 px obok 4 px: różnica niewidoczna, wartość zbędna */
	--radius-full: 50%;

	/* ---------- CIENIE: skala zamiast 7 różnych ---------- */
	--shadow-sm: var(--cien-sm);
	--shadow-md: var(--cien-md);
	--shadow-lg: var(--cien-lg);

	/* ---------- RUCH ---------- */
	--ease: cubic-bezier(.25,1,.5,1);
	--t-fast: 150ms;
	--t-base: 200ms;

	--kontener: 1160px;

	/* zgodność wstecz */
	--ziel: var(--c-brand);
	--pomar: var(--c-accent);
	--tekst: var(--c-text);
	--tekst-cd: var(--c-heading);
	--krem: var(--c-surface);
	--ciemny: var(--c-dark);
	--biel: var(--c-bg);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin:0; font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--tekst); background: var(--biel); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin:0 0 1rem; }

.or-container { width: 100%; max-width: var(--kontener); margin:0 auto; padding-inline:var(--gutter); }

.or-h2 { font-family: var(--serif); font-size: var(--fs-h1); font-weight: 500; color: var(--c-heading); line-height: var(--lh-tight); margin:0 0 1.25rem; }
.or-h3 { font-family: var(--serif); font-weight: 500; color: var(--tekst-cd); margin:0 0 .75rem; }
.or-icon { display: inline-block; vertical-align: middle; }

.or-btn { display: inline-flex; align-items: center; gap:.5rem; padding:0.75rem 1.5rem; border-radius: var(--radius); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .03em; line-height: 1; cursor: pointer; min-height: 44px; transition: opacity var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
/* Wzorzec Divi: przycisk rezerwacji BIAŁY z ciemnym tekstem i cieniem */
.or-btn--rez { background: var(--biel); color: var(--tekst-cd); box-shadow: var(--shadow-md); }
@media (hover: hover) { .or-btn--rez:hover { box-shadow: var(--shadow-lg); } }

/* ---------- pasek górny ---------- */
.or-topbar { background: var(--ziel); color: var(--biel); font-size: var(--fs-xs); }
.or-topbar__in { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap:1rem; }
.or-topbar__kontakt { display: flex; gap:1.5rem; }
.or-topbar__kontakt a { display: inline-flex; align-items: center; gap:0.5rem; }
.or-topbar__social { display: flex; gap:.75rem; }

/* ---------- nagłówek ---------- */
.or-header { background: var(--krem); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.or-header__in { display: flex; align-items: center; min-height: 72px; gap:1.5rem; }
.or-logo img { width: 110px; height: auto; }
.or-nav { margin-left:auto; }
.or-nav ul { display: flex; gap:1.5rem; list-style: none; margin:0; padding:0; }
.or-nav a { font-family: "Open Sans", var(--sans); color: var(--c-text); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; }
.or-nav a { position: relative; padding-block:0.25rem; }
.or-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--pomar); transition: right var(--t-base) var(--ease); }
@media (hover: hover) {
	.or-nav a:hover { color: var(--ziel); }
	.or-nav a:hover::after { right: 0; }
}
.or-burger { display: none; }

/* ---------- hero ---------- */
/* Wzorzec: pełnoszerokie zdjęcie bramy, 548 px wysokości przy 1440 px. */
.or-hero { line-height: 0; }
.or-hero img { width: 100%; height: clamp(300px, 38vw, 548px); object-fit: cover; }

/* ---------- wstęp ---------- */
/* Wzorzec: górna część strony na BIELI (krem zostaje w nagłówku i FAQ). */
.or-wstep { background: var(--biel); padding-block:var(--sekcja-y); text-align: center; }
.or-wstep__tytul { text-align: center; }
/* Szerokość i rozmiar akapitu jak we wzorcu (~800 px, drobniejszy tekst) */
.or-wstep__tekst { margin:0; color: var(--tekst); line-height: 1.8; font-size: var(--fs-sm); text-wrap: pretty; }

/* ---------- do dyspozycji ---------- */
/* Sekcja miała zero odstępu u góry i 16 px u dołu, przez co przyklejała się
   do poprzedniej. Wchodzi we wspólny rytm; u dołu połowa, bo pod spodem
   stoi przycisk wezwania, który ma własny margines. */
.or-dysp { background: var(--biel); padding-block: var(--sekcja-y) calc(var(--sekcja-y) / 2); }
.or-dysp__in { display: grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items: stretch; }
.or-dysp__box { background: var(--biel); border-radius: var(--radius); padding:2rem; box-shadow: var(--shadow-md); }
.or-dysp__tytul { font-size: var(--fs-lg); }
.or-dysp__lista { margin:0; padding-left:1rem; }
.or-dysp__lista li { margin-bottom:.5rem; font-size: var(--fs-sm); }
/* Zdjęcie huśtawki wypełnia wysokość kolumny listy; cień jak w Divi.
   Obrazek jest pozycjonowany absolutnie, żeby jego naturalna wysokość
   (pionowy kadr 1709×2560) nie rozpychała wiersza ponad wysokość karty. */
.or-dysp__foto { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--cien-lg); min-height: 320px; }
.or-dysp__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.or-dysp__cta { text-align: center; padding-block:2rem; }

/* ---------- opinie ---------- */
.or-opinie { background: var(--biel); padding-bottom:2.5rem; }
/* Wzorzec: awatar po lewej, kolumna z nazwą/gwiazdkami/„powered by",
   a przycisk oceny POD tekstem — nie obok. */

.or-opinie__tresc strong { font-size: var(--fs-sm); }
.or-opinie__gwiazdki { color: var(--c-accent); font-weight: 700; font-size: var(--fs-sm); }
.or-opinie__liczba { font-size: var(--fs-xs); color: var(--c-muted); }
.or-opinie__google { font-size: var(--fs-xs); color: var(--c-muted); }
.or-opinie__google b { font-weight: 700; }
.or-opinie__przycisk { display: inline-flex; align-items: center; gap:0.25rem; background: #3c6df0; color: var(--biel); font-size: var(--fs-xs); font-weight: 700; padding:0.5rem 1rem; border-radius: var(--radius-full-pill); min-height: 44px; transition: opacity var(--t-base) var(--ease); width: max-content; }
@media (hover: hover) { .or-opinie__przycisk:hover { opacity: .9; } }

/* ---------- trzy kolumny ---------- */
/* Wzorzec Divi: zdjęcie + linear-gradient(180deg, transparent 49%, #000 100%)
   zmieszane background-blend-mode: overlay (oba obrazy ustawia szablon PHP),
   kolumny wysokie ~865 px przy 1440, tekst na dole. */
.or-kol__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.or-kol__poz { position: relative; min-height: clamp(420px, 60vw, 865px); background-size: cover; background-position: center; background-blend-mode: overlay; display: flex; align-items: flex-end; }
/* ⚠️ PRZESŁONA MUSI SIĘGAĆ TAM, GDZIE STOI TEKST.
   Zaczynała się dopiero od 42 % wysokości kadru, a na telefonie akapit
   ma pięć do siedmiu wierszy i wychodzi znacznie wyżej. Zmierzone na
   pikselach zrzutu: 1,99 / 2,10 / 2,22 / 2,63 : 1 przy progach 3,0 i 4,5.
   Zwykły audyt kontrastu tego nie widzi, bo tłem jest zdjęcie, a nie kolor.
   Przesłona rośnie teraz od góry, więc czytelność nie zależy od tego,
   ile wierszy ma akapit. */
.or-kol__poz::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .58) 24%, rgba(0, 0, 0, .86) 54%, rgba(0, 0, 0, .93) 100%); }
.or-kol__nakladka { position: relative; color: var(--biel); padding:2rem; }
.or-kol__tytul { color: var(--biel); font-size: 1.8rem; letter-spacing: .04em; margin-bottom:1rem; }
/* Bez `opacity`. Biel przygaszona do 95 % to biel 242 zamiast 255, czyli
   oddany kontrast tam, gdzie i tak go brakowało. Efekt „miękkiego" tekstu
   daje tu przesłona pod spodem, nie osłabianie liter. */
.or-kol__tekst { font-size: var(--fs-sm); line-height: 1.7; }

/* ---------- akapit całoroczny ---------- */
.or-caloroczne { padding-block:var(--sekcja-y); text-align: center; }
.or-caloroczne p { margin:0; line-height: 1.8; text-wrap: pretty; }

/* ---------- położenie ---------- */
/* Wzorzec: sekcja na bieli, pionowe zdjęcie lasu ~330 px szerokości. */
.or-poloz { background: var(--biel); padding-block:var(--sekcja-y); }
.or-poloz__in { display: grid; grid-template-columns: minmax(0, 330px) 1fr; gap:2rem; align-items: center; }
.or-poloz__foto img { border-radius: var(--radius); width: 100%; }
.or-poloz__box { background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius); padding:2rem; box-shadow: var(--shadow-md); }
.or-poloz__box p { color: var(--tekst); }

/* ---------- FAQ ---------- */
/* Wzorzec: pytania na kremowym pasie. */
.or-faq { background: var(--krem); padding-block:var(--sekcja-y); }
.or-faq__tytul { font-size: 2rem; }
.or-faq__poz { border-bottom: 1px solid var(--c-border-light); }
.or-faq__q { cursor: pointer; list-style: none; padding:1rem 2.5rem 1rem 0; position: relative; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.or-faq__q::-webkit-details-marker { display: none; }
.or-faq__q::after { content: ""; position: absolute; right: .75rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform var(--t-fast) var(--ease); opacity: .5; }
.or-faq__poz[open] .or-faq__q::after { transform: translateY(-20%) rotate(-135deg); }
.or-faq__a { padding:0 2.5rem 1rem 0; color: var(--tekst-cd); font-size: var(--fs-sm); }
.or-faq__a p { margin:0; }

/* ---------- podstrona ---------- */
.or-strona { padding-block:var(--sekcja-y); }
.or-strona__tytul { text-align: left; }

/* ---------- stopka ---------- */


/* ---------- responsywność ---------- */
@media (max-width: 980px) {
	.or-dysp__in, .or-poloz__in { grid-template-columns: 1fr; }
	.or-kol__grid { grid-template-columns: 1fr; }
	.or-kol__poz { min-height: 340px; }
	.or-nav { position: fixed; inset: 0 0 0 auto; width: min(80vw, 300px); background: var(--krem); transform: translateX(100%); visibility: hidden; transition: transform var(--t-base) var(--ease), visibility 0s var(--t-base); z-index: 200; padding-top:4rem; overflow-y: auto; }
	body.or-menu-open .or-nav { transform: translateX(0); visibility: visible; transition-delay: 0s; box-shadow: var(--shadow-lg); }
	.or-nav ul { flex-direction: column; gap:1rem; padding:1.5rem; }
	.or-burger { display: inline-flex; flex-direction: column; justify-content: center; gap:0.25rem; width: 44px; height: 44px; margin-left:auto; background: none; border: none; cursor: pointer; z-index: 210; }
	.or-burger span { display: block; width: 26px; height: 2px; background: var(--tekst-cd); transition: .3s; }
	body.or-menu-open .or-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.or-menu-open .or-burger span:nth-child(2) { opacity: 0; }
	body.or-menu-open .or-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 600px) {
	.or-footer__in { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   PODSTRONY
   ========================================================================== */
.or-podhero { min-height: clamp(220px, 26vw, 340px); background-size: cover; background-position: center; display: flex; align-items: center; position: relative; }
.or-podhero::before { content: ""; position: absolute; inset: 0; background: var(--c-scrim-flat); }
.or-podhero__tekst { position: relative; color: var(--biel); font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.2rem); line-height: 1.35; margin:0; text-wrap: balance; }

.or-galeria { background: var(--krem); padding-block:var(--sekcja-y); }
.or-galeria__tytul { text-align: center; margin-bottom:2rem; }
.or-galeria__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap:1.25rem; }
.or-galeria__item { display: block; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--t-base) var(--ease); }
.or-galeria__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 400/284; }
@media (hover: hover) { .or-galeria__item:hover { transform: translateY(-4px); } }
@media (max-width: 900px) { .or-galeria__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .or-galeria__grid { grid-template-columns: repeat(2, 1fr); gap:0.75rem; } }

/* podstrona ogólna (regulamin, polityka) */
.or-strona { padding-block:var(--sekcja-y); }
.or-strona__tresc { line-height: 1.8; }
.or-strona__tresc h2 { font-family: var(--serif); color: var(--tekst-cd); font-size: var(--fs-lg); margin-top:2rem; }

/* cennik / kalendarz podstrony */
.or-cennik { padding-block:var(--sekcja-y); text-align: center; }
.or-cennik__tytul { text-align: center; }
.or-cennik__tresc { margin:0 0 2rem; line-height: 2; color: var(--tekst-cd); }
.or-cennik__tresc p { margin:0; }
.or-cennik__cta .or-btn { box-shadow: var(--shadow-md); }
.or-kalendarz { padding-block:var(--sekcja-y); text-align: center; }
.or-kalendarz__tytul { text-align: center; }
.or-kalendarz__widget { max-width: 62rem; margin:0 auto; min-height: 480px; }

/* kontakt podstrona */
.or-kontakt-str { padding-top:3rem; }
.or-kontakt-str__in { display: grid; grid-template-columns: 1.4fr 1fr; gap:3rem; align-items: start; padding-bottom:3rem; }
.or-form label { display: block; margin-bottom:1.25rem; color: var(--c-muted); font-size: var(--fs-xs); }
.or-form__row { display: grid; grid-template-columns: 1fr 1fr; gap:1.5rem; }
.or-form input, .or-form textarea { display: block; width: 100%; margin-top:0.25rem; border: none; border-bottom: 1px solid var(--c-border); padding:.5rem 0; font-family: inherit; font-size: var(--fs-base); background: transparent; color: var(--tekst); }
.or-form input:focus, .or-form textarea:focus { outline: none; border-bottom-color: var(--ziel); }
.or-btn--ciemny { background: var(--ciemny); color: var(--biel); }
@media (hover: hover) { .or-btn--ciemny:hover { opacity: .88; } }
.or-kontakt-str__box { background: var(--biel); border-radius: var(--radius); padding:2rem; text-align: center; box-shadow: var(--shadow-md); margin-bottom:1.5rem; }
.or-kontakt-str__etyk { display: block; color: var(--tekst-cd); margin-bottom:.5rem; }
.or-kontakt-str__box strong { font-size: var(--fs-md); }
.or-kontakt-str__box a { color: var(--tekst-cd); }
.or-kontakt-str__mapa iframe { display: block; width: 100%; }
@media (max-width: 900px) { .or-kontakt-str__in { grid-template-columns: 1fr; } .or-form__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   STANY KOMPONENTÓW — brief pkt 5
   ========================================================================== */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}
.or-btn:active { transform: translateY(1px); }
.or-btn[disabled], .or-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Audyt: logo, odnośniki paska górnego i pływająca ikona FB (wtyczka fuse)
   nie reagowały na najechanie. */
@media (hover: hover) {
	.or-logo:hover, .or-logo:hover img { opacity: .8; }
	.or-topbar__kontakt a:hover, .or-topbar__social a:hover { opacity: .8; text-decoration: underline; text-underline-offset: .2em; }
	.fuse_social_icons_links:hover { opacity: .85; }
}
.or-logo img, .or-topbar__kontakt a, .or-topbar__social a, .fuse_social_icons_links { transition: opacity var(--t-base) var(--ease); }

/* pola formularza: stany focus i error, etykiety zawsze widoczne */
.or-form input:focus, .or-form textarea:focus { border-bottom-color: var(--c-accent); outline: none; }
.or-form input[aria-invalid="true"], .or-form textarea[aria-invalid="true"] { border-bottom-color: var(--c-error); }
.or-form ::placeholder { color: var(--c-muted); opacity: .7; }

/* linki w treści odróżnialne */
.or-strona__tresc a, .or-faq__a a {
	color: var(--c-brand); text-decoration: underline; text-underline-offset: .18em;
	transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .or-strona__tresc a:hover, .or-faq__a a:hover { color: var(--c-accent); } }

/* ==========================================================================
   RUCH — brief pkt 8
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   DETALE (polish) — brief pkt 9
   ========================================================================== */
::selection { background: var(--c-accent); color: var(--c-bg); }
h1, h2, h3, .or-h2, .or-h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.or-topbar__kontakt a, .or-kontakt-str__box a { overflow-wrap: anywhere; }

/* karty równej wysokości w rzędzie */
.or-kol__grid { align-items: stretch; }
.or-galeria__grid { align-items: stretch; }

/* ramki bez wysokości: zarezerwowane miejsce (zero CLS) */
iframe:not([height]):not([style*="height"]) { width: 100%; aspect-ratio: 16/10; min-height: 16rem; border: 0; }

/* ==========================================================================
   TELEFON — brief pkt 7
   ========================================================================== */
@media (max-width: 767px) {
	.or-wstep__tekst, .or-caloroczne p, .or-dysp__lista li,
	.or-kol__tekst, .or-poloz__box p, .or-faq__a,
	.or-opinie__liczba, .or-opinie__google { font-size: max(0.9375rem, var(--fs-small)); }
	/* audyt: telefon i e-mail w pasku górnym oraz przycisk rezerwacji
	   miały 12–13 px na telefonie — poniżej progu czytelności 15 px */
	.or-topbar__kontakt a, .or-btn { font-size: var(--fs-sm); }
	.or-footer__nav a, .or-nav a, .or-topbar__kontakt a { min-height: 44px; display: inline-flex; align-items: center; }
	input, textarea, select { font-size: var(--fs-base); }
	/* hero podstron niższe na telefonie — nie zjada ekranu */
	.or-podhero { min-height: 180px; }
}

/* ==========================================================================
   NAPRAWY Z AUDYTU POMIAROWEGO (320–1440 px)
   ========================================================================== */

/* 1) CELE DOTYKOWE — ikony social w pasku górnym miały 15×22 px,
      odnośniki menu w stopce 46×18. Powiększone pole dotyku, wygląd bez zmian. */
.or-topbar__social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.or-topbar__kontakt a { min-height: 44px; display: inline-flex; align-items: center; }
.or-footer__nav a, .or-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.or-logo { display: inline-flex; align-items: center; min-height: 44px; }

/* 2) KOLUMNY STREFA/DOM/OGRÓD — wysokość jak we wzorcu Divi (~865 px przy
      1440). Ta reguła jest później w kaskadzie niż definicja bazowa, więc
      MUSI powtarzać tę samą wartość — wcześniej stała tu mniejsza i po
      cichu wygrywała. */
.or-kol__grid > * { height: 100%; }
.or-kol__poz { min-height: clamp(420px, 60vw, 865px); }

/* 3) Pasek górny na wąskim ekranie: nie zjada wysokości, zachowuje 44 px
      pola dotyku, ale kompaktowo. */
@media (max-width: 767px) {
	/* ⚠️ Rozmiar czcionki USTAWIA wcześniejszy blok mobilny (≥15 px).
	   Stała tu reguła .75rem i wygrywała kaskadą — audyt mierzył 12 px. */
}

/* ==========================================================================
   NAPRAWY — DRUGA TURA, po diagnozie
   ========================================================================== */

/* KOLUMNY 388/388/443 — `min-height` ustawia DOLNĄ granicę, nie wyrównuje
   rzędu. Trzecia kolumna ma dłuższy opis i rośnie. Grid z jednakowym
   rzędem (`grid-auto-rows: 1fr`) wyrównuje wszystkie do najwyższej. */
.or-kol__grid { grid-auto-rows: 1fr; }
.or-kol__poz { height: 100%; }

/* Podpis „Wykonanie: Arlek.pl" — odnośnik w zdaniu, powiększamy pole
   dotyku w pionie bez rozbijania wiersza. */
.or-footer__wyk a { padding-block:var(--space-3); display: inline-block; }

/* Pola formularza kontaktu miały 39 px wysokości — poniżej progu 44 px
   wygodnego dotknięcia kciukiem (brief pkt 7). Powiększamy pole, nie krój. */
.or-form input, .or-form select { min-height: 44px; padding-block:var(--space-2); }
.or-form textarea { min-height: 132px; padding-block:var(--space-2); }
.or-form button { min-height: 48px; }

/* Odnośniki telefonu i e-maila w boxach kontaktu miały 26 px wysokości.
   To odnośniki blokowe w karcie — powiększamy pole dotyku. */
.or-kontakt-str__box a, .or-topbar__kontakt a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }


/* Pasek ciasteczek (wtyczka Cookie Notice) — 13 px na telefonie */
@media (max-width: 767px) {
	#cookie-notice .cn-text-container, #cookie-notice .cn-button { font-size: var(--fs-sm); }
}


/* Pasek Poradnik/Polityka z mu-pluginu — stopka ma te odnośniki natywnie */
/* Ramki roomadmin rosną płynnie, gdy widget nadaje wysokość */
iframe[src*="roomadmin"] { transition: height .25s ease; }


/* ==========================================================================
   PREMIUM — komponenty dodane 13.08.2026
   Wszystko na tokenach z :root. Ruch delikatny i wyłączany preferencją
   systemową (blok `prefers-reduced-motion` niżej obejmuje też te reguły).
   ========================================================================== */

/* ---------- delikatne pojawianie się sekcji ---------- */
/* ⚠️ Animacja wejścia NIE MOŻE chować treści. Ukrywamy tylko wtedy, gdy
   skrypt faktycznie działa (klasa `or-js` na <html> ustawiana w nagłówku),
   a i tak skrypt po 2,5 s odsłania wszystko awaryjnie. Bez JavaScriptu
   albo przy jego błędzie treść jest widoczna od pierwszej klatki. */
.or-js .or-anim {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--t-obraz) var(--ease), transform var(--t-obraz) var(--ease);
	transition-delay: var(--opoznienie, 0ms);
}
.or-js .or-anim--widoczny { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.or-js .or-anim { opacity: 1; transform: none; transition: none; }
}

/* ---------- NAGŁÓWEK: zwężenie po przewinięciu ---------- */
.or-header { transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.or-header--zwiniety { box-shadow: var(--cien-md); background: rgba(249, 248, 246, .96); -webkit-backdrop-filter: saturate(1.2) blur(6px);
	backdrop-filter: saturate(1.2) blur(6px); }
/* pozycja bieżąca w menu — stała kreska, nie tylko na najechanie */
.or-nav a[aria-current="page"] { color: var(--ziel); }
.or-nav a[aria-current="page"]::after { right: 0; background: var(--ziel); }

/* ---------- KARUZELA OPINII ---------- */
.or-opinie { background: var(--krem); padding-block:var(--sekcja-y); }
.or-opinie__glowa {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap:0.5rem 1.25rem;
	align-items: center;
	background: var(--biel);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding:1.5rem 1.5rem;
}
.or-opinie__avatar { width: 56px; height: 56px; border-radius: var(--radius-full); grid-row: 1 / 3; }
.or-opinie__tytul { margin:0; font-size: var(--fs-md); }
.or-opinie__ocena { display: flex; align-items: center; gap:.5rem; flex-wrap: wrap; margin:0.25rem 0 0; }
.or-opinie__ocena strong { font-size: var(--fs-lg); color: var(--tekst-cd); font-variant-numeric: tabular-nums; }
.or-gwiazdki { color: var(--c-accent); letter-spacing: .05em; }
.or-opinie__liczba { color: var(--c-muted); font-size: var(--fs-xs); }
.or-opinie__zrodlo { grid-column: 2; margin:0.25rem 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.or-opinie__akcje { grid-row: 1 / 3; grid-column: 3; display: flex; flex-direction: column; gap:.5rem; }
.or-btn--google { background: #3c6df0; color: var(--biel); box-shadow: none; }
.or-btn--kontur-ciemny { background: transparent; color: var(--tekst-cd); border: 1px solid var(--c-border); }
@media (hover: hover) {
	.or-btn--google:hover { background: #2f5ad4; }
	.or-btn--kontur-ciemny:hover { border-color: var(--tekst-cd); background: rgba(0, 0, 0, .03); }
}

.or-opinie-karuzela { position: relative; margin-top:1.5rem; }
.or-opinie-karuzela__tor {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(100%, 22rem), 1fr);
	gap:1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom:0.5rem;
}
.or-opinie-karuzela__tor::-webkit-scrollbar { display: none; }
.or-opinia {
	scroll-snap-align: start;
	background: var(--biel);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding:1.5rem;
	margin:0;
	display: flex;
	flex-direction: column;
	gap:0.75rem;
}
.or-opinia__tekst { margin:0; font-size: var(--fs-sm); line-height: 1.7; color: var(--tekst); quotes: "\201E" "\201D"; }
.or-opinia__tekst::before { content: open-quote; color: var(--c-accent); font-family: var(--serif); font-size: var(--fs-lg); line-height: 0; vertical-align: -.35rem; margin-right:0.25rem; }
.or-opinia__stopka { margin-top:auto; display: flex; gap:0.5rem; align-items: baseline; flex-wrap: wrap; }
.or-opinia__autor { font-weight: 700; color: var(--tekst-cd); }
.or-opinia__kiedy { font-size: var(--fs-xs); color: var(--c-muted); }
.or-opinie-karuzela__strzalka {
	position: absolute; top: 45%; z-index: 2;
	width: 44px; height: 44px; border-radius: var(--radius-full);
	border: 1px solid var(--c-border); background: var(--biel); color: var(--tekst-cd);
	font-size: var(--fs-lg); line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.or-opinie-karuzela__strzalka[data-krok="-1"] { left: -10px; }
.or-opinie-karuzela__strzalka[data-krok="1"] { right: -10px; }
@media (hover: hover) { .or-opinie-karuzela__strzalka:hover { box-shadow: var(--shadow-md); transform: scale(1.06); } }
.or-opinie-karuzela__kropki { display: flex; justify-content: center; gap:0.5rem; margin-top:1rem; }
.or-opinie-karuzela__kropka {
	width: 10px; height: 10px; padding:0; border: none; border-radius: 50%;
	background: var(--c-border); cursor: pointer; transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.or-opinie-karuzela__kropka.is-teraz { background: var(--c-accent); transform: scale(1.25); }
@media (max-width: 900px) {
	.or-opinie__glowa { grid-template-columns: auto 1fr; }
	.or-opinie__akcje { grid-row: auto; grid-column: 1 / -1; flex-direction: row; }
	.or-opinie__akcje .or-btn { flex: 1 1 auto; justify-content: center; }
	.or-opinie-karuzela__strzalka { display: none; }
}

/* ---------- GALERIA: siatka + powiększanie ---------- */
.or-galeria__wstep { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); margin-bottom:1.5rem; }
.or-galeria__item { position: relative; }
.or-galeria__lupa {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(20, 30, 20, .35); color: var(--biel);
	opacity: 0; transition: opacity var(--t-base) var(--ease);
	border-radius: var(--radius-sm);
}
@media (hover: hover) {
	.or-galeria__item:hover .or-galeria__lupa,
	.or-galeria__item:focus-visible .or-galeria__lupa { opacity: 1; }
}
.or-galeria__item:focus-visible .or-galeria__lupa { opacity: 1; }

.or-lightbox {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(12, 16, 12, .94);
	display: none; align-items: center; justify-content: center;
	padding:clamp(.5rem, 3vw, 2.5rem);
}
.or-lightbox.is-otwarte { display: flex; animation: or-zjaw .2s var(--ease); }
@keyframes or-zjaw { from { opacity: 0; } to { opacity: 1; } }
.or-lightbox__scena { margin:0; max-width: min(100%, 1400px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap:0.75rem; }
.or-lightbox__scena img { max-width: 100%; max-height: calc(100dvh - 7rem);   /* `dvh`, nie `vh`: na iOS pasek adresu chowa sie i `100vh` jest wieksze niz widoczny ekran, wiec zdjecie wychodzilo poza kadr */ width: auto; height: auto; border-radius: var(--radius); box-shadow: var(--cien-xl); }
.or-lightbox__licznik { color: rgba(255, 255, 255, .75); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.or-lightbox__zamknij,
.or-lightbox__strzalka {
	position: absolute; z-index: 2;
	width: 52px; height: 52px; border: none; border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .12); color: var(--biel);
	font-size: 2rem; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background var(--t-base) var(--ease);
}
.or-lightbox__zamknij { top: 1rem; right: 1rem; font-size: 2.2rem; }
.or-lightbox__strzalka--wstecz { left: 1rem; top: 50%; transform: translateY(-50%); }
.or-lightbox__strzalka--dalej { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (hover: hover) {
	.or-lightbox__zamknij:hover, .or-lightbox__strzalka:hover { background: rgba(255, 255, 255, .24); }
}
body.or-blokada-przewijania { overflow: hidden; }

/* ---------- FAQ: dwie kolumny, pełna szerokość ---------- */
.or-faq__kolumny {
	column-count: 2;
	column-gap:2.5rem;
}
.or-faq__kolumny .or-faq__poz {
	break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	margin-bottom:0.25rem;
}
@media (max-width: 900px) { .or-faq__kolumny { column-count: 1; } }

/* ---------- CENNIK: karty stawek ---------- */
/* Zdanie nad kartami wyśrodkowane (uwaga Pawła 13.08). Sekcja ma
   `text-align: center`, ale reguła niżej ustawiała je do lewej i wychodziło
   jedno zdanie przyklejone do krawędzi nad symetrycznymi kartami.
   `text-wrap: balance` rozkłada je na dwie równe linie zamiast długiej
   i krótkiego ogona. */
.or-cennik__wstep { color: var(--tekst); margin-bottom:2rem; text-align: center; text-wrap: balance; }
.or-cennik__karty { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem; align-items: stretch; }
.or-cennik__karta {
	position: relative; background: var(--biel); border: 1px solid var(--c-border-light);
	border-radius: var(--radius); padding:1.5rem; box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column; gap:0.25rem;
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
@media (hover: hover) { .or-cennik__karta:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } }
.or-cennik__karta--wyroz { border-color: var(--c-accent); box-shadow: var(--shadow-md); }
.or-cennik__znacznik {
	position: absolute; top: -.7rem; left: 1.4rem;
	/* Biały napis na pomarańczu dawał 2,33:1. Pomarańcz zostaje (to akcent
	   Rakówca), napis w ciemnej stopce karty: 7,7:1 i wciąż wygląda jak
	   plakietka, nie ostrzeżenie. */
	background: var(--c-accent); color: #1a1a1a;
	font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding:0.25rem 0.75rem; border-radius: var(--radius-full-pill);
}
.or-cennik__nazwa { font-family: var(--serif); font-size: var(--fs-md); font-weight: 500; color: var(--tekst-cd); margin:0; }
.or-cennik__opis { color: var(--c-muted); font-size: var(--fs-sm); margin:0; }
.or-cennik__kwota { margin:.5rem 0 0; display: flex; align-items: baseline; gap:0.5rem; }
.or-cennik__kwota strong { font-size: 1.7rem; color: var(--ziel); font-variant-numeric: tabular-nums; }
.or-cennik__kwota span { color: var(--c-muted); font-size: var(--fs-xs); }
.or-cennik__dodatk { margin:0.25rem 0 0; font-size: var(--fs-sm); color: var(--tekst); }
.or-cennik__dol { display: grid; grid-template-columns: 1fr 1fr; gap:1.25rem; margin-top:1.5rem; }
.or-cennik__oplaty, .or-cennik__warunki { background: var(--krem); border-radius: var(--radius); padding:1.5rem; }
.or-cennik__oplata { display: flex; justify-content: space-between; align-items: baseline; gap:1rem; padding-block:0.5rem; border-bottom: 1px solid var(--c-border-light); margin:0; }
.or-cennik__oplata:last-child { border-bottom: none; }
.or-cennik__oplata em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--c-muted); }
.or-cennik__oplata strong { color: var(--ziel); font-variant-numeric: tabular-nums; }
.or-cennik__warunki ul { list-style: none; margin:0; padding:0; display: flex; flex-direction: column; gap:0.75rem; }
.or-cennik__warunki li { display: flex; gap:0.75rem; align-items: flex-start; font-size: var(--fs-sm); }
.or-cennik__warunki .or-icon { color: var(--ziel); flex-shrink: 0; margin-top:0.25rem; }
.or-cennik__cta { margin-top:2rem; text-align: center; }
.or-cennik__cta p { color: var(--c-muted); }
.or-cennik__przyciski { display: flex; gap:0.75rem; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
	.or-cennik__karty { grid-template-columns: 1fr; }
	.or-cennik__dol { grid-template-columns: 1fr; }
}

/* ---------- REZERWACJE ---------- */
.or-rez { padding-block:var(--sekcja-y); }
.or-rez__in { display: grid; grid-template-columns: 1.25fr .85fr; gap:1.5rem; align-items: start; }
.or-rez__panel { background: var(--biel); border-radius: var(--radius); box-shadow: var(--shadow-md); padding:1.75rem; }
.or-rez__tytul { margin-bottom:0.25rem; }
.or-rez__pod { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom:1.25rem; }
.or-rez__widget { min-height: 110px; }
.or-rez__nota { margin-top:1rem; font-size: var(--fs-xs); color: var(--c-muted); }
.or-rez__bok { display: flex; flex-direction: column; gap:1.25rem; }
.or-rez__kroki { background: var(--krem); border-radius: var(--radius); padding:1.5rem; }
.or-rez__krok { display: flex; gap:1rem; align-items: flex-start; padding-block:0.75rem; border-bottom: 1px solid var(--c-border-light); }
.or-rez__krok:last-child { border-bottom: none; }
.or-rez__krok p { margin:0.25rem 0 0; font-size: var(--fs-sm); color: var(--tekst); }
.or-rez__nr {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
	background: var(--ziel); color: var(--biel);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: var(--fs-sm);
}
.or-rez__kontakt { background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius); padding:1.5rem; display: flex; flex-direction: column; gap:0.75rem; }
.or-rez__kontakt-tytul { margin:0; font-weight: 700; color: var(--tekst-cd); }
.or-rez__mail, .or-rez__kalendarz { display: inline-flex; align-items: center; gap:.5rem; color: var(--tekst-cd); font-size: var(--fs-sm); min-height: 44px; }
.or-rez__mail .or-icon { color: var(--ziel); }
.or-rez__kalendarz { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 900px) { .or-rez__in { grid-template-columns: 1fr; } }

/* ---------- KALENDARZ ---------- */
.or-kalendarz__glowa { text-align: left; display: flex; justify-content: space-between; gap:1.5rem; align-items: flex-start; flex-wrap: wrap; margin-bottom:1.25rem; }
.or-kalendarz__wstep { color: var(--tekst); margin:0; text-wrap: pretty; }
.or-kalendarz__legenda { list-style: none; margin:0; padding:0; display: flex; flex-direction: column; gap:0.5rem; font-size: var(--fs-xs); color: var(--c-muted); }
.or-kalendarz__legenda li { display: flex; align-items: center; gap:.5rem; }
.or-kalendarz__probka { width: 18px; height: 18px; border-radius: var(--radius); border: 1px solid var(--c-border-light); flex-shrink: 0; }
.or-kalendarz__probka--wolne { background: var(--biel); }
.or-kalendarz__probka--zajete { background: #E5726B; border-color: #E5726B; }
.or-kalendarz__probka--polowa { background: linear-gradient(135deg, var(--biel) 50%, #E5726B 50%); }
.or-kalendarz__karta { background: var(--biel); border-radius: var(--radius); box-shadow: var(--shadow-md); padding:1.25rem; }
/* Bez suwaka wewnątrz ramki: wysokość ustawia skrypt z komunikatu widgetu. */
.or-kalendarz__widget { overflow: visible; }
.or-kalendarz__widget iframe { display: block; width: 100%; border: 0; }
.or-kalendarz__cta { display: flex; gap:0.75rem; justify-content: center; flex-wrap: wrap; margin-top:1.5rem; }

/* ---------- KONTAKT ---------- */
.or-kontakt-str__karty { display: grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem; margin-bottom:2rem; }
.or-kontakt-karta {
	display: flex; flex-direction: column; gap:.25rem;
	background: var(--biel); border: 1px solid var(--c-border-light); border-radius: var(--radius);
	padding:1.5rem; box-shadow: var(--shadow-sm); min-height: 44px;
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (hover: hover) { .or-kontakt-karta:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--ziel); } }
.or-kontakt-karta__ikona { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--ziel); color: var(--biel); margin-bottom:0.5rem; }
.or-kontakt-karta__etyk { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.or-kontakt-karta__tresc { font-size: var(--fs-base); color: var(--tekst-cd); overflow-wrap: anywhere; }
.or-kontakt-karta__pod { font-size: var(--fs-xs); color: var(--c-muted); }
.or-kontakt-str__in { display: grid; grid-template-columns: 1.3fr .8fr; gap:1.5rem; align-items: start; padding-bottom:2.5rem; }
.or-kontakt-str__pod { color: var(--c-muted); font-size: var(--fs-sm); }
.or-kontakt-str__bok { background: var(--krem); border-radius: var(--radius); padding:1.5rem; }
.or-kontakt-str__odleglosci { list-style: none; margin:0 0 1rem; padding:0; }
.or-kontakt-str__odleglosci li { display: flex; justify-content: space-between; gap:1rem; padding-block:.5rem; border-bottom: 1px solid var(--c-border-light); }
.or-kontakt-str__odleglosci li:last-child { border-bottom: none; }
.or-kontakt-str__odleglosci strong { color: var(--ziel); font-variant-numeric: tabular-nums; }
.or-kontakt-str__uwaga { font-size: var(--fs-sm); color: var(--c-muted); }
@media (max-width: 900px) {
	.or-kontakt-str__karty { grid-template-columns: 1fr; }
	.or-kontakt-str__in { grid-template-columns: 1fr; }
}

/* ---------- FORMULARZ: stany i komunikaty ---------- */
.or-form__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.or-form__zgoda { display: flex; gap:0.5rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom:1.25rem; }
.or-form__zgoda input { width: 20px; height: 20px; margin:0; flex-shrink: 0; accent-color: var(--ziel); }
.or-form__zgoda a { color: var(--ziel); text-decoration: underline; text-underline-offset: .2em; }
.or-form__odp { padding:1rem 1rem; border-radius: var(--radius); margin-bottom:1.25rem; font-size: var(--fs-sm); }
.or-form__odp--ok { background: rgba(24, 128, 56, .10); color: #14682e; border: 1px solid rgba(24, 128, 56, .3); }
.or-form__odp--blad { background: rgba(192, 57, 43, .08); color: var(--c-error); border: 1px solid rgba(192, 57, 43, .3); }
.or-form__nota { font-size: var(--fs-sm); color: var(--c-muted); margin-top:0.75rem; }

/* ---------- REGULAMIN i podstrony tekstowe ---------- */
.or-strona__tresc { font-size: var(--fs-base); line-height: var(--lh-proza); }
.or-strona__tresc h2 { margin-top:2.25rem; padding-top:1.25rem; border-top: 1px solid var(--c-border-light); }
.or-strona__tresc h3 { font-family: var(--serif); font-weight: 500; color: var(--tekst-cd); font-size: var(--fs-md); margin-top:1.5rem; }
.or-strona__tresc ul, .or-strona__tresc ol { padding-left:1.25rem; }
.or-strona__tresc li { margin-bottom:.5rem; }
.or-strona__tresc li::marker { color: var(--ziel); }
.or-strona__tresc p + p { margin-top:1rem; }
.or-strona__tresc strong { color: var(--tekst-cd); }

/* ---------- STOPKA: cztery kolumny ---------- */
.or-footer { background: var(--ciemny); color: rgba(255, 255, 255, .78); }
.or-footer__gora { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1.1fr; gap:2rem; padding-block:3rem 2.25rem; }
.or-footer__logo { width: 140px; height: auto; margin-bottom:1rem; }
.or-footer__opis { font-size: var(--fs-sm); line-height: 1.7; }
.or-footer__tytul { color: var(--biel); font-weight: 700; font-size: var(--fs-sm); margin:0 0 1rem; letter-spacing: .02em; }
.or-footer__kol ul { list-style: none; margin:0; padding:0; display: flex; flex-direction: column; gap:0.5rem; }
.or-footer__kol a { color: rgba(255, 255, 255, .78); font-size: var(--fs-sm); transition: color var(--t-base) var(--ease); }
@media (hover: hover) { .or-footer__kol a:hover { color: var(--biel); } }
/* ⚠️ `center`, nie `flex-start`. Ten sam błąd co na Boruczy: odnośnik obok
   ma 44 px wysokości (pole dotyku) i tekst wyśrodkowany w tym polu,
   a ikona wisiała przyklejona do góry stałym marginesem. Rozjazd 8 px
   przy każdej z trzech pozycji kontaktowych. */
.or-footer__dana { display: flex; gap:0.5rem; align-items: center; font-size: var(--fs-sm); margin:0 0 0.75rem; }
.or-footer__dana .or-icon { color: var(--ziel); flex-shrink: 0; }
.or-footer__dana a { overflow-wrap: anywhere; }
.or-footer__cta { margin-top:0.5rem; }
.or-footer__social { display: flex; gap:0.5rem; margin-top:1rem; }
.or-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255, 255, 255, .10); color: var(--biel);
	transition: background var(--t-base) var(--ease);
}
@media (hover: hover) { .or-footer__social a:hover { background: var(--ziel); } }
.or-footer__dol { border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-xs); }
.or-footer__dol-in { display: flex; justify-content: space-between; align-items: center; gap:1rem; flex-wrap: wrap; padding-block:1rem; }
.or-footer__prawne { display: flex; gap:1.25rem; flex-wrap: wrap; }
.or-footer__prawne a, .or-footer__wyk a { color: rgba(255, 255, 255, .85); }
.or-footer__wyk a { font-weight: 700; color: var(--biel); }
@media (hover: hover) { .or-footer__prawne a:hover { color: var(--biel); } }
@media (max-width: 900px) {
	.or-footer__gora { grid-template-columns: 1fr 1fr; }
	.or-footer__kol--marka { grid-column: 1 / -1; }
	.or-footer__dol-in { flex-direction: column; align-items: flex-start; gap:.5rem; }
}
@media (max-width: 560px) {
	.or-footer__gora { grid-template-columns: 1fr; }
}

/* ---------- PODSTRONY: hero z tytułem ---------- */
.or-podhero__tekst { color: var(--biel); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }


/* Cele dotykowe w pasku prawnym stopki i w pasku ciasteczek (wtyczka
   Cookie Notice rysuje własne przyciski 30 px — podnosimy do 44). */
.or-footer__prawne a { display: inline-flex; align-items: center; min-height: 44px; }
#cookie-notice .cn-button,
#cookie-notice .cn-set-cookie,
#cookie-notice .cn-close-icon {
	min-height: 44px;
	min-width: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}
#cookie-notice .cn-close-icon { padding:12px; }


/* Przycisk w stopce: na ciemnym tle biały przycisk z białym tekstem
   był nieczytelny (zmierzone na zrzucie). Zielony z białym napisem. */
.or-footer__cta.or-btn--rez { background: var(--ziel); color: var(--biel); box-shadow: none; }
@media (hover: hover) { .or-footer__cta.or-btn--rez:hover { background: #12692e; box-shadow: var(--shadow-md); } }


/* Telefon: opis marki i e-mail w stopce miały 14 px (pomiar) */
@media (max-width: 767px) {
	.or-footer__opis, .or-footer__dana, .or-footer__dana a { font-size: var(--fs-sm); }
}


/* Karuzela opinii: strzałki nachodziły na tekst kart (zmierzone na zrzucie).
   Wsuwamy je poza tor, a na wąskim ekranie chowamy — tam przewija się palcem. */
.or-opinie-karuzela { padding-inline:2rem; }
.or-opinie-karuzela__strzalka[data-krok="-1"] { left: 0; }
.or-opinie-karuzela__strzalka[data-krok="1"] { right: 0; }
/* Karty równej wysokości w rzędzie */
.or-opinie-karuzela__tor { align-items: stretch; }
.or-opinia { height: 100%; }
@media (max-width: 900px) { .or-opinie-karuzela { padding-inline:0; } }


/* Kropki karuzeli: kropka ma 10 px, ale palec potrzebuje 44 px.
   Powiększamy POLE DOTYKU przezroczystą obwódką — kropka wygląda
   tak samo, a trafia się w nią bez celowania. */
.or-opinie-karuzela__kropka {
	width: 44px;
	height: 44px;
	background: transparent;
	position: relative;
	transform: none;
}
.or-opinie-karuzela__kropka::before {
	content: "";
	position: absolute;
	inset: 17px;
	border-radius: 50%;
	background: var(--c-border);
	transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.or-opinie-karuzela__kropka.is-teraz { background: transparent; transform: none; }
.or-opinie-karuzela__kropka.is-teraz::before { background: var(--pomar); transform: scale(1.3); }
.or-opinie-karuzela__kropki { gap:0; }


/* ⚠️ SKACZĄCY NAGŁÓWEK — USUNIĘTA PRZYCZYNA: przyklejony nagłówek nie
   zmienia już wysokości po przewinięciu (to przesuwało treść pod nim
   i wpadało w pętlę na progu). Zostaje sam cień i przygaszone tło. */


/* ==========================================================================
   TELEFON: stopka kompaktowa, menu dopracowane
   ========================================================================== */
@media (max-width: 700px) {
	.or-footer__gora { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1.25rem 1rem; padding-block:2rem 1.5rem; }
	/* Marka i kontakt na całą szerokość, dwie listy odnośników obok siebie.
	   Dzieci siatki NIE reagują na inline-block/width — kolumny ustawia się
	   wyłącznie w grid-template-columns rodzica. */
	.or-footer__kol--marka, .or-footer__kol--kontakt { grid-column: 1 / -1; }
	.or-footer__logo { width: 120px; margin-bottom:.75rem; }
	.or-footer__opis { font-size: var(--fs-sm);   /* 13 px to plakietka, nie akapit */ line-height: 1.6; margin-bottom:0; }
	.or-footer__kol ul { gap:0.5rem; }
	/* 44 px, nie 40: reguła celuje w każde `a` w kolumnie, więc przykrywała
	   też przycisk CTA (.or-btn ma 44). Pole dotykowe trzyma standard,
	   zbitość robi mniejszy odstęp listy, nie niższe pola. */
	.or-footer__kol a { font-size: var(--fs-xs); min-height: 44px; display: inline-flex; align-items: center; }
	.or-footer__tytul { margin-bottom:0.5rem; font-size: var(--fs-sm); }
	.or-footer__dana { margin-bottom:.5rem; font-size: var(--fs-xs); }
	.or-footer__dol-in { flex-direction: column; align-items: flex-start; gap:0.5rem; padding-block:1rem; font-size: var(--fs-xs); }
	.or-footer__prawne { gap:1rem; }
}

@media (max-width: 980px) {
	.or-nav { width: min(86vw, 340px); padding-top:5rem; }
	.or-nav ul { gap:.25rem; padding:1.25rem 1.5rem 2rem; }
	.or-nav li { width: 100%; border-bottom: 1px solid var(--c-border-light); }
	.or-nav li:last-child { border-bottom: none; }
	.or-nav a { width: 100%; min-height: 52px; font-size: var(--fs-base); }
	.or-nav a::after { display: none; }
	body.or-menu-open { overflow: hidden; }
	.or-nav { z-index: 200; }
	.or-burger { z-index: 210; }
}


/* ==========================================================================
   PŁYWAJĄCY PASEK SPOŁECZNOŚCIOWY (zastępuje wtyczkę fuse social sidebar)
   Lewa krawędź, dokładnie tam, gdzie stał do tej pory. Pole dotykowe 48 px,
   pod paskiem ciasteczek (z-index 80 < 90), więc niczego nie zasłania.
   ========================================================================== */
.or-rail {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	border-radius: 0 var(--radius) var(--radius) 0;
	overflow: hidden;
	box-shadow: var(--cien-md);
}
.or-rail__poz {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: var(--c-brand);
	color: #fff;
	transition: background var(--t-base) var(--ease);
}
.or-rail__poz + .or-rail__poz { border-top: 1px solid rgba(255, 255, 255, .25); }
@media (hover: hover) { .or-rail__poz:hover { background: #0f5f27; } }
.or-rail__poz:focus-visible { outline: 3px solid #0f5f27; outline-offset: -3px; }
/* Na telefonie pasek zakrywał początek odnośników w stopce (pełna
   szerokość tekstu = każda pozycja pionowa koliduje z czymś dotykowym).
   Ikony społecznościowe są w nagłówku i stopce, pasek to dodatek na
   szerokie ekrany. */
@media (max-width: 1023px) { .or-rail { display: none; } }
@media print { .or-rail { display: none; } }


/* ==========================================================================
   PASEK GÓRNY NA TELEFONIE: jeden rząd zamiast trzech pięter
   Uwaga Pawła 13.08: „header mobilny na Rakowiec jest fatalny". Pomiar:
   telefon, e-mail i dwie ikony ustawiały się jedno pod drugim i zjadały
   215 px, zanim gość zobaczył logo. Na 375 px zostaje sam numer telefonu,
   czyli jedyna rzecz, którą z paska naprawdę się klika. Adres e-mail
   i media społecznościowe są w menu, w sekcji kontaktu i w stopce.
   ========================================================================== */
@media (max-width: 700px) {
	.or-topbar__in { min-height: 0; padding-block:0; gap:0; }
	.or-topbar__kontakt { flex-direction: row; gap:0; width: 100%; }
	/* e-mail i ikony schowane, nie usunięte — wracają od tabletu */
	.or-topbar__kontakt a[href^="mailto"], .or-topbar__social { display: none; }
	.or-topbar__kontakt a[href^="tel"] {
		width: 100%;
		justify-content: center;
		min-height: 44px;   /* pole dotykowe, nie 40 */
		font-size: var(--fs-xs);
		font-weight: 600;
		letter-spacing: .01em;
	}
	/* logo mniejsze: nagłówek 72 px to na telefonie sporo jak na pasek stały */
	.or-header__in { min-height: 60px; gap:.75rem; }
	.or-logo img { width: 92px; }
}


/* ==========================================================================
   MENU MOBILNE OD NOWA (uwagi Pawła 13.08)
   Było: wąska szuflada z prawej + ciemna nakładka na resztę strony.
   Jest: panel na cały ekran w barwach strony, bez przyciemniania niczego
   pod spodem. Pozycje jako duże wiersze na liniach włosowych, numer
   telefonu jako pełny przycisk, media społecznościowe na dole.
   Wjeżdża od prawej, pozycje pojawiają się kolejno z niewielkim opóźnieniem.
   ========================================================================== */
@media (max-width: 980px) {
	.or-nav {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		background: var(--krem);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--t-panel) var(--ease), visibility 0s var(--t-panel);
		z-index: 300;
		padding:0;
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
		border: 0;
		box-shadow: none;
	}
	body.or-menu-open .or-nav {
		transform: translateX(0);
		visibility: visible;
		transition-delay: 0s;
		box-shadow: none;
	}
	body.or-menu-open { overflow: hidden; }

	/* pasek panelu: logo po lewej, krzyżyk po prawej — ten sam co w nagłówku,
	   więc przycisk nie „przeskakuje" przy otwarciu */
	.or-nav::before {
		content: "";
		display: block;
		height: 60px;
		flex-shrink: 0;
	}

	.or-nav ul {
		flex-direction: column;
		gap:0;
		padding:.5rem 0 0;
		margin:0;
		list-style: none;
	}
	.or-nav li { border-top: 1px solid var(--c-border-light); }
	.or-nav li:first-child { border-top: 0; }
	.or-nav li a {
		display: flex;
		align-items: center;
		min-height: 60px;
		padding-inline:var(--gutter);
		font-size: var(--fs-base);
		font-weight: 700;
		letter-spacing: .02em;
		width: 100%;
		opacity: 0;
		transform: translateY(6px);
	}
	body.or-menu-open .or-nav li a {
		animation: or-poz var(--t-panel) var(--ease) forwards;
		animation-delay: calc(60ms + var(--i, 0) * 45ms);
	}
	/* strzałka na prawym końcu wiersza: czytelny sygnał „to jest do kliknięcia" */
	.or-nav li a::after {
		content: "";
		margin-left:auto;
		width: .45rem; height: .45rem;
		border-right: 2px solid currentColor;
		border-top: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .35;
	}
	/* podkreślenie z wersji na biurko nie ma tu sensu */
	.or-nav a::before { display: none; }

	@keyframes or-poz { to { opacity: 1; transform: none; } }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
	.or-nav { transition: none; }
	body.or-menu-open .or-nav li a { animation: none; opacity: 1; transform: none; }
}

/* Krzyżyk: ten sam przycisk co hamburger, tylko nad panelem i przemieniony
   w X. Dzięki temu palec trafia w to samo miejsce przy otwieraniu
   i zamykaniu, zamiast szukać drugiego przycisku w innym rogu. */
@media (max-width: 980px) {
	.or-burger { position: relative; z-index: 320; }
	body.or-menu-open .or-burger span { background: var(--tekst); }
}


/* Stopka panelu mobilnego Rakowca: telefon i media społecznościowe. */
.or-nav__dol { display: none; }
@media (max-width: 980px) {
	.or-nav__dol {
		display: flex;
		flex-direction: column;
		gap:1rem;
		margin-top:auto;
		padding:1.5rem var(--gutter) 2rem;
		border-top: 1px solid var(--c-border-light);
	}
	.or-nav__tel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap:0.5rem;
		min-height: 52px;
		border-radius: var(--radius);
		background: var(--c-brand);
		color: #fff;
		font-weight: 800;
		font-size: var(--fs-base);
		letter-spacing: .01em;
	}
	.or-nav__social { display: flex; gap:.75rem; justify-content: center; }
	.or-nav__social a {
		width: 46px; height: 46px;
		display: inline-flex; align-items: center; justify-content: center;
		border-radius: var(--radius-full);
		border: 1px solid var(--c-border-light);
		color: var(--c-brand);
	}
}


/* ==========================================================================
   PRZYKLEJONY NAGŁÓWEK A SKOK DO ELEMENTU
   Nagłówek stoi na wierzchu, więc gdy przeglądarka przewija do kotwicy albo
   do pola formularza, ląduje ono DOKŁADNIE pod paskiem i jest zasłonięte.
   Widać to i na skokach z menu, i przy poprawianiu błędnie wypełnionego pola.
   `scroll-margin-top` mówi przeglądarce, żeby zostawiła nad elementem tyle
   miejsca, ile zajmuje pasek.
   ========================================================================== */
[id], input, textarea, select, summary, label, button, a[href^="#"] { scroll-margin-top:clamp(72px, 12vw, 120px); }

/* ==========================================================================
   SZLIF 14.08: cztery drobiazgi, które składają się na wrażenie dopracowania
   ========================================================================== */

/* 1. Przyciski dziedziczą krój pisma.
   `<button>` bez `font-family` bierze systemowy, czyli Arial. Pomiar wykrył
   go na strzałkach karuzeli opinii: na całej stronie dwa kroje, a tam nagle
   trzeci. `font: inherit` naprawia to raz dla wszystkich przycisków. */
button, input, select, textarea { font: inherit; }

/* 2. Zaznaczenie tekstu w barwie marki, zamiast domyślnego niebieskiego. */
::selection { background: rgba(251,142,40,.30); color: #fff; }

/* 3. Widoczne obramowanie przy nawigacji klawiaturą, jednakowe wszędzie.
   `:focus-visible`, nie `:focus`, więc kliknięcie myszą nie rysuje ramki. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid var(--c-brand);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 4. Lekki docisk przy kliknięciu: przycisk ma reagować na naciśnięcie,
   nie tylko na najechanie. Na dotyku to jedyna informacja zwrotna. */
@media (prefers-reduced-motion: no-preference) {
	.or-btn:active { transform: translateY(1px); }
}

/* Pola formularza na telefonie: iOS powiększa stronę, gdy pole ma mniej
   niż 16 px. Wymuszamy próg niezależnie od reszty skali. */
@media (max-width: 700px) {
	input, textarea, select { font-size: 1rem; }
}


/* ==========================================================================
   STANY NAJECHANIA, KTÓRYCH BRAKOWAŁO (pomiar 14.08)
   Sprawdzenie: najechać na każdy element klikalny i porównać styl przed i po.
   Pięć rodzajów nie zmieniało niczego: strzałki i kropki karuzeli opinii,
   wiersze pytań, numer telefonu w karcie rezerwacji i odnośniki w treści
   regulaminu. Element, który wygląda na klikalny, ale nie odpowiada na kursor,
   czyta się jak zepsuty.
   ========================================================================== */
@media (hover: hover) {
	/* Pasek prawny w stopce: „Polityka prywatności", „Regulamin", „Wykonanie".
	   Jedyne odnośniki na stronie, które nie reagowały na kursor. */
	.or-footer__dol a:hover, .or-footer__prawne a:hover, .or-footer__wyk a:hover {
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	/* karuzela opinii */
	.or-opinie-karuzela__strzalka:hover { background: var(--c-brand); color: #fff; border-color: var(--c-brand); }
	.or-opinie-karuzela__kropka:hover { background: var(--c-brand); transform: scale(1.35); }

	/* wiersz pytania: całe pytanie jest polem kliknięcia, więc całe ma reagować */
	.or-faq__q:hover { color: var(--c-brand); }
	.or-faq__q:hover::after { opacity: 1; }

	/* numer telefonu w karcie rezerwacji */
	.or-rezerwacja__tel:hover, .or-rez__mail:hover { text-decoration: underline; text-underline-offset: .2em; }

	/* odnośniki w treści podstron: regulamin, polityka, poradnik */
	.or-strona__tresc a:hover, .or-faq__a a:hover { text-decoration-thickness: 2px; }
}

/* Przejście, żeby zmiana nie następowała skokiem. */
.or-opinie-karuzela__strzalka, .or-opinie-karuzela__kropka,
.or-faq__q, .or-rezerwacja__tel {
	transition: background var(--t-zwykle) var(--ease), color var(--t-zwykle) var(--ease),
	            transform var(--t-zwykle) var(--ease), border-color var(--t-zwykle) var(--ease);
}


/* ==========================================================================
   DŁUGI TEKST NIE MA BYĆ WYŚRODKOWANY (pomiar 14.08)
   Na telefonie akapit wstępu Rakowca zajmował PIĘTNAŚCIE linii, każda
   wyśrodkowana. Oko przy takim układzie za każdym razem szuka początku
   następnej linii w innym miejscu, więc czytanie męczy, choć nikt nie
   powie, że „coś jest nie tak z tekstem".
   Nagłówki i krótkie hasła zostają na środku. Akapity idą do lewej,
   zgodnie z resztą strony.
   ========================================================================== */
.or-wstep__tekst,
.or-caloroczne p,
.or-budynki__stopka {
	text-align: left;
	text-wrap: pretty;
}


/* Wskaźnik wczytywania w podglądzie (15.08). Zdjęcie odsłania się dopiero,
   gdy jest gotowe, więc bez tego przez chwilę widać samą ciemność. */
.or-lightbox__scena { position: relative; }
.or-lightbox__scena img { opacity: 0; transition: opacity var(--t-base) var(--ease); background: rgba(255, 255, 255, .06); }
.or-lightbox__scena img.jest { opacity: 1; }
.or-lightbox__czekaj {
	position: absolute; top: 50%; left: 50%;
	width: 38px; height: 38px; margin: -19px 0 0 -19px;
	border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--biel);
	border-radius: var(--radius-full); animation: or-kreci .8s linear infinite;
}
.or-lightbox__czekaj[hidden] { display: none; }
@keyframes or-kreci { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.or-lightbox__czekaj { animation-duration: 2.4s; }
	.or-lightbox__scena img { transition: none; }
}


/* Treść widoczna od pierwszej klatki nie przechodzi rozjaśnienia: pojawianie
   się jest dla tego, do czego gość przewija. Powód i pomiar: komentarz
   w `assets/js/main.js`, sekcja o pojawianiu się sekcji. */
.or-anim--natychmiast { transition: none !important; }

/* ---------------------------------------------------------------------------
   PRZYCISK Z TELEFONEM NA WĄSKIM EKRANIE (15.08)
   ---------------------------------------------------------------------------
   Napis „Rezerwacje i informacja: 570 108 540" nie mieścił się w jednym
   wierszu przy 390 px i łamał się W ŚRODKU NUMERU: „570 108" zostawało
   u góry, „540" spadało niżej. Numer telefonu rozcięty na pół to nie jest
   drobiazg estetyczny, tylko treść, której nie da się przeczytać jednym
   rzutem oka. Przy okazji ikona siadała między dwoma wierszami, bo przycisk
   ma `align-items: center`.

   Przyczyna: odstęp poziomy 1,5 rem z każdej strony zjadał 48 px z 342 px
   dostępnej szerokości. Zabrakło kilku pikseli. Na wąskim ekranie odstęp
   schodzi do 1 rem i napis mieści się w jednej linii.

   `nowrap` na całości jest zabezpieczeniem: gdyby klient wpisał dłuższy
   tekst, przycisk będzie się skalował, a nie rozcinał numer.
   --------------------------------------------------------------------------- */
@media (max-width: 460px) {
	.or-btn { padding-inline: 1rem; letter-spacing: .02em; }
	.or-btn--rez { white-space: nowrap; }
}

/* Najwezszy realny telefon (320 px, iPhone SE pierwszej generacji). Przycisk
   wystawal o 4 px poza ekran i strona dawala sie przewijac w bok. Przyczyna,
   nie plaster: mniejszy odstep i stopien pisma nizej, zamiast `overflow-x`. */
@media (max-width: 360px) {
	.or-btn { padding-inline: .75rem; font-size: var(--fs-xs); }
	.or-btn--rez { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   IKONA W DANYCH KONTAKTOWYCH STOPKI (15.08, druga podejscie)
   ---------------------------------------------------------------------------
   `align-items: center` naprawilo telefon i e-mail, ale zepsulo ADRES:
   na biurku kolumna jest wezsza, adres lamie sie na dwa wiersze i ikona
   siadala miedzy nimi (10,4 px od srodka pierwszego wiersza).

   Rozwiazanie dziala w obu przypadkach: pole dotyku 44 px bierze na siebie
   CALY WIERSZ, a nie sam odnosnik. Dzieki temu odnosnik jest zwyklym
   tekstem o przewidywalnej wysokosci wiersza, a ikone mozna wyrownac
   do srodka PIERWSZEGO wiersza jednym wyliczeniem.
   --------------------------------------------------------------------------- */
.or-footer__dana {
	align-items: flex-start;
	min-height: 44px;
}

.or-footer__dana a {
	min-height: 0;
	display: inline;
	align-items: initial;
}

.or-footer__dana .or-icon {
	margin-top: calc((1.65em - 18px) / 2);
}

/* ---------------------------------------------------------------------------
   POLA DOTYKU: DECYDUJE URZĄDZENIE, NIE SZEROKOŚĆ OKNA (16.08)
   ---------------------------------------------------------------------------
   Reguła 44 px siedziała w zapytaniu o szerokość ekranu, więc tablet
   trzymany w ręku przy 1024 px dostawał odnośniki wysokie na 20 px.
   Szerokość okna nie mówi nic o tym, czy ktoś celuje myszą, czy palcem.
   `(hover: none)` mówi to wprost.

   Odnośniki kontaktowe w stopce zostają w wierszu (inaczej ikona nie da się
   wyrównać do pierwszego wiersza), ale dostają odstęp wewnętrzny w pionie.
   Na elemencie liniowym `padding-block` NIE zmienia wysokości wiersza,
   a powiększa obszar, w który da się trafić: 21 px rośnie do 45 px.
   --------------------------------------------------------------------------- */
@media (hover: none) {
	.or-footer__kol a,
	.or-nav a,
	.or-footer__prawne a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.or-footer__dana a {
		padding-block: .75rem;
	}
}

/* ---------------------------------------------------------------------------
   WIDGET REZERWACJI: STAN WCZYTYWANIA I AWARII (16.08)
   ---------------------------------------------------------------------------
   Ramka należy do roomadmin.pl i leży w innej domenie, więc nie da się jej
   ostylować od środka. Po naszej stronie zostaje to, co widać ZANIM widget
   się odezwie i CO SIĘ STANIE, gdy nie odezwie się wcale.

   Szkielet pulsuje delikatnie, żeby było widać, że coś się dzieje. Przy
   ograniczeniu animacji w systemie zostaje sam spokojny prostokąt.
   --------------------------------------------------------------------------- */
.or-rezerwacja__widget.is-wczytywanie,
.or-rez__widget.is-wczytywanie,
.or-kalendarz__widget.is-wczytywanie {
	position: relative;
	min-height: 241px;
	border-radius: var(--radius-md);
	background: linear-gradient(100deg,
		rgba(0, 0, 0, .04) 30%, rgba(0, 0, 0, .07) 50%, rgba(0, 0, 0, .04) 70%);
	background-size: 220% 100%;
	animation: arlek-szkielet 1.4s ease-in-out infinite;
}

.or-rezerwacja__widget.is-wczytywanie iframe,
.or-rez__widget.is-wczytywanie iframe,
.or-kalendarz__widget.is-wczytywanie iframe { opacity: 0; }

@keyframes arlek-szkielet { to { background-position: -120% 0; } }

@media (prefers-reduced-motion: reduce) {
	.or-rezerwacja__widget.is-wczytywanie,
	.or-rez__widget.is-wczytywanie,
	.or-kalendarz__widget.is-wczytywanie { animation: none; }
}

/* Gdy dostawca nie odpowie: ramka znika, zostaje zdanie i telefon. */
.is-blad iframe { display: none; }

.arlek-rez-awaria {
	margin: 0;
	padding: var(--space-5, 1.25rem);
	border: 1px solid var(--c-border, rgba(0, 0, 0, .12));
	border-radius: var(--radius-md);
	background: var(--c-surface-alt, #f4f6f1);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.arlek-rez-awaria a {
	display: inline-block;
	margin-top: .25rem;
	font-weight: 700;
	white-space: nowrap;
}

/* ===========================================================================
   ZAMKNIĘTE MENU NIE MOŻE POWIĘKSZAĆ OBSZARU PRZEWIJANIA (16.08)
   ---------------------------------------------------------------------------
   Zgłoszenie Pawła: „na Rakowiec jadę w dół, pasek cookies robi się taki
   długi poziomy, to rozwala stronę".

   Zmierzony łańcuch przyczyn, od skutku do źródła:

   1. Pasek ciasteczek ma `left: 12px; right: 12px`, więc jego szerokość
      wynika z LAYOUTOWEGO okna. Rozciągał się do 756 px przy ekranie 390.
   2. Layoutowe okno miało 780 px, bo `document.scrollWidth` wynosił 780.
   3. Za 780 odpowiadał ZAMKNIĘTY panel menu: jest `position: fixed`,
      ma pełną szerokość ekranu i stoi odsunięty `translateX(100%)`,
      czyli jego prawa krawędź wypada na 780.
   4. `visibility: hidden` tego NIE ZAŁATWIA. Element ukryty tą własnością
      nadal zajmuje miejsce i nadal powiększa obszar przewijania.

   Borucza miała ten sam błąd, tylko niewidoczny: `overflow-x: clip` na
   `body` przycinał skutek. Rakówiec tej reguły nie miał, więc było widać.

   Rozwiązanie na OBU: przycięcie na `html`, czyli na tym elemencie, wobec
   którego zaczepia się `position: fixed`. Przycięcie na `body` nie jest
   właściwym miejscem, bo panel nie jest jego potomkiem w sensie układu.

   `clip`, nie `hidden`: `clip` nie tworzy kontenera przewijania, więc
   przyklejony nagłówek i płynne przewijanie do kotwic działają dalej.
   Sprawdzone po zmianie: 18/18 w teście menu i przejścia z menu do sekcji.
   =========================================================================== */
html,
body { overflow-x: clip; }

/* ⚠️ POTRZEBNE SĄ OBA, sprawdzone pomiarem.
   Samo `html` zatrzymuje przesuwanie strony palcem, ale NIE zmniejsza
   layoutowego okna: `window.innerWidth` zostawało 780 przy ekranie 390,
   a pasek ciasteczek z `left/right` liczy szerokość właśnie z niego
   i rozciągał się do 756 px. Dopiero przycięcie na `body` sprowadza
   layoutowe okno do szerokości ekranu. Borucza miała tę regułę od dawna
   i dlatego u niej objawu nie było widać. */