/* Fonty ładuje assets/css/fonts.css (self-host) — wpięte w inc/enqueue.php
   PRZED tym plikiem. Nie przywracaj tu @import z Google Fonts:
   RODO, wydajność i praca offline. */

:root {
  --paper: #fffdfb;
  --paper-2: #fff8f7;
  --paper-3: #f8f3ef;
  --ink: #171c19;
  --muted: #626a65;
  --green: #274a39;
  --green-deep: #17362b;
  --green-soft: #edf2ee;
  --berry: #b21f57;
  --berry-dark: #971746;
  --berry-soft: #fbecf1;
  --rose-line: #e58aaa;
  --gold: #e4a31d;
  --line: #e9e3df;
  --white: #fff;
  --shadow-sm: 0 8px 24px rgba(41, 35, 31, 0.07);
  --shadow-md: 0 18px 48px rgba(41, 35, 31, 0.11);
  --shadow-lg: 0 28px 80px rgba(41, 35, 31, 0.16);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --container: 1480px;
  --header-h: 80px;
  --focus: #d72b69;
  --motion-fast: 180ms;
  --motion-base: 260ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --type-xs: 0.75rem;
  --type-sm: 0.875rem;
  --type-ui: 0.9375rem;
  --type-body: 1rem;
  --type-md: 1.0625rem;
  --type-lg: 1.125rem;
  --type-xl: 1.375rem;
  --tracking-label: 0.105em;

  /* Aliasy dla nazw uzywanych w pozniejszych warstwach pliku. Bez nich
     `var()` nie ma czym sie rozwinac, a cala deklaracja jest odrzucana —
     `.cta-inline h2` tracilo przez to grubosc, interlinie i krój szeryfowy
     (skrot `font:` unieważnia sie w całości). */
  --font-display: var(--serif);
  --shadow-soft: var(--shadow-sm);
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.menu-open,
body.lightbox-open {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

p,
li,
h1,
h2,
h3 {
  overflow-wrap: break-word;
}
a {
  color: inherit;
  text-decoration: none;
}
a[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  color: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
svg {
  display: block;
}
::selection {
  background: #f6d8e3;
  color: var(--green-deep);
}

.container {
  width: min(calc(100% - 80px), var(--container));
  margin-inline: auto;
}
.section {
  position: relative;
  padding: 68px 0;
}
.section-compact {
  padding: 54px 0;
}
.section-soft {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
}
.section-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.section-title {
  margin: 0;
  font: 600 clamp(2.25rem, 3.8vw, 3.65rem) / 1.02 var(--serif);
  letter-spacing: -0.026em;
  text-wrap: balance;
}
.section-kicker,
.eyebrow {
  margin: 0 0 10px;
  color: var(--berry);
  font-size: var(--type-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.section-intro {
  max-width: 660px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: var(--type-md);
  line-height: 1.68;
  text-wrap: pretty;
}
.center {
  text-align: center;
}
.center .section-intro {
  margin-inline: auto;
}
.home-section-heading {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}
.home-section-heading h2 {
  max-width: 980px;
  margin: 0 auto;
  font: 600 clamp(2.65rem, 5vw, 5rem) / 0.96 var(--serif);
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.home-section-heading > p:not(.section-kicker),
.home-section-heading > div > p:not(.section-kicker) {
  max-width: 700px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: var(--type-md);
  line-height: 1.7;
  text-wrap: pretty;
}
.home-heading-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.section-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(178, 31, 87, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-sm), var(--edge-highlight);
  color: var(--berry);
  font-size: var(--type-xs);
  font-weight: 900;
  letter-spacing: 0.11em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}
.section-cta-link span {
  transform: translateY(-1px);
  transition: transform var(--motion-fast) var(--ease-out);
}
.section-cta-link:hover {
  transform: translateY(-2px);
  border-color: rgba(178, 31, 87, 0.28);
  background-color: var(--white);
  box-shadow: var(--shadow-card), var(--edge-highlight);
}
.section-cta-link:hover span {
  transform: translate(3px, -1px);
}
.section-cta-link:active {
  transform: scale(0.96);
}
.home-section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
  max-width: none;
  margin-bottom: 34px;
  text-align: left;
}
.home-section-heading-split h2,
.home-section-heading-split > div > p:not(.section-kicker) {
  margin-inline: 0;
}
.review-summary-card {
  min-width: 220px;
  padding: 22px 24px;
  border: 1px solid rgba(178, 31, 87, 0.14);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 246, 249, 0.88)),
    url("../backgrounds/paper-texture.png");
  box-shadow: var(--shadow-card), var(--edge-highlight);
}
.review-summary-score {
  display: block;
  color: var(--berry);
  font: 700 clamp(2.75rem, 4vw, 4.35rem) / 0.9 var(--serif);
  letter-spacing: -0.04em;
}
.review-summary-scale {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-weight: 800;
}
.review-summary-card small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.45;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--green-deep);
  color: var(--white);
}
.skip-link:focus {
  transform: none;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(40, 50, 44, 0.08);
  backdrop-filter: blur(16px);
}
.header-inner {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 28px;
}
.brand img {
  width: 190px;
  height: auto;
}
.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 2.8vw, 52px);
}
.desktop-nav a,
.desktop-nav summary {
  position: relative;
  padding: 28px 0 24px;
  font-size: var(--type-ui);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.desktop-nav summary::-webkit-details-marker {
  display: none;
}
.desktop-nav a::after,
.desktop-nav summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--berry);
  transition: right var(--motion-base) var(--ease-out);
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after,
.desktop-nav summary[aria-current="page"]::after,
.nav-dropdown[open] summary::after {
  right: 0;
}
.nav-dropdown {
  position: relative;
}
.mega-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% - 10px);
  left: 50%;
  width: min(560px, 90vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 251, 0.98);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.nav-dropdown[open] .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-copy {
  grid-column: 1/-1;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.mega-copy strong {
  display: block;
  color: var(--green-deep);
  font-size: 1rem;
}
.mega-copy span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
}
.mega-menu a {
  padding: 9px 0;
  font-size: 0.86rem;
  line-height: 1.25;
  text-transform: none;
}
.mega-all {
  grid-column: 1/-1;
  margin-top: 6px;
  color: var(--berry) !important;
  font-weight: 800;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-phone {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-deep);
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(38, 45, 40, 0.04);
}
.header-phone img {
  width: 18px;
}
.header-cta {
  font-size: var(--type-sm);
  letter-spacing: 0.045em;
}
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  place-items: center;
  cursor: pointer;
}
.menu-toggle img {
  width: 23px;
}
.mobile-menu {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 auto;
  padding: 20px 24px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform: translateY(-120%);
  visibility: hidden;
  transition:
    transform var(--motion-base) var(--ease-out),
    visibility 0s linear var(--motion-base);
}
.mobile-menu.open {
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.mobile-menu a {
  display: block;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 1.04rem;
  font-weight: 700;
}
.mobile-menu .mobile-room-link {
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.92rem;
}
.mobile-call {
  color: var(--green-deep);
}
.mobile-menu .button {
  margin-top: 16px;
  border: 0;
}

/* Buttons */
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}
.button:active {
  transform: translateY(0) scale(0.985);
}
.button:focus-visible,
.desktop-nav a:focus-visible,
.mobile-menu a:focus-visible,
.text-link:focus-visible,
.filter:focus-visible,
.season-tab:focus-visible,
.sort:focus-within,
.menu-toggle:focus-visible,
.faq-question:focus-visible,
.thumb-grid button:focus-visible,
.gallery-grid button:focus-visible,
.lightbox-close:focus-visible,
.socials a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: 3px;
}
.button:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}
.button-berry {
  color: var(--white);
  background: linear-gradient(135deg, #be2a63, #a7184c);
  box-shadow: 0 12px 26px rgba(178, 31, 87, 0.18);
}
.button-green {
  color: var(--white);
  background: linear-gradient(135deg, #315b47, #1b3b2e);
  box-shadow: 0 12px 25px rgba(28, 59, 46, 0.16);
}
.button-light {
  background: var(--white);
  color: var(--ink);
  border-color: #dcd6d1;
}
.button-wide {
  width: 100%;
}
.button img {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--berry);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.text-link img {
  width: 17px;
  color: var(--berry);
}

/* Decorations */
.botanical {
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
  width: 210px;
  z-index: 0;
}
.botanical-left {
  left: -55px;
  bottom: 10px;
}
.botanical-right {
  right: -55px;
  bottom: -40px;
  transform: scaleX(-1);
}
.botanical-top {
  top: 26px;
  right: 3%;
  width: 160px;
  transform: rotate(-8deg);
}
.content-layer {
  position: relative;
  z-index: 1;
}

/* Hero shared */
.split-hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.split-hero-grid {
  min-height: clamp(390px, 34vw, 510px);
  display: grid;
  grid-template-columns: 43% 57%;
}
.split-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px 50px 62px 0;
}
.split-hero-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -150px 0 -100vw;
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--white) 72%,
    rgba(255, 255, 255, 0.95) 86%,
    rgba(255, 255, 255, 0) 100%
  );
}
.split-hero h1 {
  margin: 0;
  font: 600 clamp(3.35rem, 5.45vw, 5.9rem) / 0.94 var(--serif);
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.split-hero h1 em {
  display: block;
  color: var(--berry);
  font-style: normal;
}
.split-hero .lead {
  max-width: 560px;
  margin: 22px 0 0;
  color: #424a45;
  font-size: var(--type-md);
  line-height: 1.72;
  text-wrap: pretty;
}
.hero-media {
  min-width: 0;
  overflow: hidden;
}
.hero-media picture,
.hero-media img {
  width: 100%;
  height: 100%;
}
.hero-media img {
  object-fit: cover;
  object-position: center;
}

.hero-media img,
.about-photo img,
.simple-card picture img,
.simple-card > img,
.room-card-photo img,
.room-hero-media img,
.thumb-grid img,
.equipment-photo img,
.gallery-grid img,
.related-card img,
.location-map img {
  outline: 1px solid rgba(23, 28, 25, 0.08);
  outline-offset: -1px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.review-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 27px;
}
.review-score {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid var(--line);
}
.review-score > img {
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
}
.review-score strong {
  font: 600 1.8rem/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.review-score span {
  color: var(--muted);
  font-size: var(--type-xs);
}
.review-brand {
  font-weight: 800;
  color: #4d5a53;
  font-size: 0.8125rem;
}
.review-brand.booking {
  color: #164d7a;
}

/* Booking bar */
.booking-wrap {
  position: relative;
  z-index: 10;
  margin-top: -34px;
  padding-bottom: 12px;
}
.booking-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1.2fr;
  gap: 0;
  min-height: 104px;
  padding: 15px;
  border: 1px solid rgba(60, 54, 48, 0.08);
  border-radius: 15px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.booking-field {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}
.booking-field:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 22px;
  right: 0;
  bottom: 22px;
  width: 1px;
  background: var(--line);
}
.booking-field img {
  width: 24px;
  opacity: 0.82;
}
.booking-field label {
  display: block;
  margin-bottom: 4px;
  color: #777d79;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.booking-field input,
.booking-field select {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--type-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: 0;
}
/* Natywne `type="date"` i `select` ignoruja otoczenie: przegladarka rysuje
   wlasny `dd.mm.rrrr` domyslnym krojem i doklada swoja ikone kalendarza obok
   naszej. Ponizsze sprowadza je do wygladu reszty paska. */
/* `select` celowo BEZ `appearance: none` — pozniejsza regula (~5836) daje mu
   ramke i biale tlo, wiec zdjecie natywnej strzalki zostawiloby puste pole
   bez zadnej wskazowki, ze jest rozwijane. */
.booking-field select {
  cursor: pointer;
}
.booking-field input[type="date"] {
  min-width: 0;
  cursor: pointer;
}
.booking-field input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.booking-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.booking-field input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* Pusta data ma byc wyraznie podpowiedzia, a nie wpisana wartoscia */
.booking-field input[type="date"]:not(:focus):invalid,
.booking-field input[type="date"]:not(:focus)[value=""] {
  color: var(--muted);
}
/* `outline: 0` wyzej zdejmuje domyslny pierscien — bez tego pole w pasku
   nie pokazywaloby fokusu wcale. */
.booking-field:focus-within {
  border-radius: var(--radius-xs);
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: 2px;
}
.booking-action {
  display: grid;
  align-content: center;
  padding: 6px 4px 6px 20px;
}
.booking-action small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  text-align: center;
  font-size: 0.72rem;
}

/* Fact bands */
.trust-strip-section {
  margin: 48px 0;
  padding: 34px 0;
  border-block: 1px solid color-mix(in srgb, var(--berry-soft) 72%, var(--line));
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(251, 236, 241, 0.86),
      transparent 28%
    ),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}
.room-main + .trust-strip-section {
  margin-top: 16px;
}
.facts-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 28px 0 16px;
}
.facts-band-separated {
  padding: 0;
}
.fact {
  position: relative;
  min-height: 92px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid rgba(60, 54, 48, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(38, 45, 40, 0.05);
}
.facts-band-separated .fact {
  min-height: 108px;
  border-color: rgba(178, 31, 87, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 38px rgba(38, 45, 40, 0.06);
}
.fact:not(:last-child)::after {
  content: none;
}
.fact img {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 50%;
  background: var(--berry-soft);
  opacity: 0.95;
}
.fact strong {
  display: block;
  color: var(--green-deep);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.fact span {
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.32;
}

/* Home */
.about-grid {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 70px;
}
.about-photo {
  position: relative;
}
.about-photo img {
  width: 100%;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}
.about-copy h2 {
  margin: 0;
  font: 600 clamp(2.35rem, 4vw, 4.2rem) / 1.02 var(--serif);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.about-copy p {
  max-width: 66ch;
  color: var(--muted);
  font-size: var(--type-md);
  line-height: 1.72;
  text-wrap: pretty;
}
.amenity-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.amenity-item {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(38, 45, 40, 0.04);
  text-align: center;
}
.amenity-item:not(:last-child) {
  border-right: 1px solid var(--line);
}
.amenity-item img {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--berry-soft) 72%, var(--white));
  opacity: 0.95;
}
.amenity-item span {
  color: var(--green-deep);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.32;
}
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.simple-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}
.simple-card picture,
.simple-card > img {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.simple-card picture img,
.simple-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.simple-card-body {
  padding: 18px 17px 20px;
}
.simple-card h3 {
  margin: 0 0 8px;
  font: 600 1.6rem/1.08 var(--serif);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.simple-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.58;
  text-wrap: pretty;
}
.attractions-grid .simple-card h3 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 800;
}
.reviews-section {
  background: #fff5f4;
  overflow: hidden;
}
.review-grid,
.review-carousel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Karuzela wychodzi poza .container az do krawedzi ekranu. Wczesniej urywala
   sie na granicy kontenera, przez co ostatnia widoczna karta wygladala na
   przyciety blad, a nie na zaproszenie do przewijania. Ujemny margines
   wyrownany paddingiem trzyma pierwsza karte w linii z reszta tresci. */
.review-carousel {
  display: flex;
  gap: 22px;
  margin-top: 34px;
  /* Odstep boczny rowny marginesowi .container (40px), nie wyjscie na cala
     szerokosc ekranu. Wersja z `calc(50% - 50vw)` liczyla 50vw RAZEM
     z paskiem przewijania, a 50% bez niego — roznica (~15px) tworzyla
     przepelnienie, ktore `overflow-x: hidden` na <body> obcinalo,
     przesuwajac w bok cala strone (m.in. sekcje „Jak do nas trafic?"). */
  padding: 8px 4px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
/* Fokus na przewijanym obszarze musi byc widoczny — to element w kolejnosci Tab */
.review-carousel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: 4px;
}
.review-card {
  flex: 0 0 min(310px, 78vw);
  scroll-snap-align: start;
  min-height: 180px;
  padding: 24px;
  border: 1px solid #f0dfdf;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-sm);
}
.stars {
  color: var(--gold);
  letter-spacing: 0.16em;
}
.review-card p {
  color: #414843;
  font-size: var(--type-sm);
  line-height: 1.6;
  text-wrap: pretty;
}
.review-card footer {
  font-size: var(--type-xs);
  font-weight: 800;
}
.home-reviews-section {
  padding-top: clamp(76px, 8vw, 118px);
  padding-bottom: clamp(72px, 8vw, 112px);
}
.home-reviews-section .review-carousel {
  gap: 20px;
  margin-top: 0;
  /* Boczny padding musi zostac taki jak w regule bazowej — skrot `padding`
     z wartoscia 4px kasowal go i karty znow urywaly sie na kontenerze. */
  padding-block: 10px 26px;
}
.home-reviews-section .review-card {
  position: relative;
  flex: 0 0 min(390px, 84vw);
  min-height: 252px;
  padding: 32px;
  border: 1px solid rgba(178, 31, 87, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 248, 0.9)),
    url("../backgrounds/paper-texture.png");
  box-shadow: 0 22px 52px rgba(72, 41, 51, 0.1), var(--edge-highlight);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}
.home-reviews-section .review-card::before {
  content: "“";
  position: absolute;
  top: 12px;
  right: 24px;
  color: rgba(178, 31, 87, 0.12);
  font: 700 5.25rem / 0.82 var(--serif);
  pointer-events: none;
}
.home-reviews-section .review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(178, 31, 87, 0.2);
  box-shadow: 0 30px 64px rgba(72, 41, 51, 0.14), var(--edge-highlight);
}
.home-reviews-section .stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 247, 225, 0.88);
  color: #c89121;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}
.home-reviews-section .review-card p {
  margin: 22px 0 28px;
  color: var(--ink);
  font: 500 clamp(1.12rem, 1.55vw, 1.38rem) / 1.48 var(--serif);
  letter-spacing: -0.012em;
}
.home-reviews-section .review-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(25, 40, 34, 0.08);
}
.home-reviews-section .review-card footer strong {
  color: var(--ink);
  font-size: var(--type-sm);
  letter-spacing: -0.01em;
}
.home-reviews-section .review-card footer span {
  color: var(--berry);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}
.cta-band {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 138px;
  padding: 30px 44px;
  border-radius: 18px;
  color: var(--white);
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(255, 255, 255, 0.18),
      transparent 28%
    ),
    linear-gradient(115deg, #bc235c, #971645);
  box-shadow: 0 28px 60px rgba(166, 28, 78, 0.22);
}
.cta-band > img {
  width: 52px;
  filter: brightness(0) invert(1);
}
.cta-band h2 {
  margin: 0;
  font: 800 clamp(1.45rem, 2.1vw, 2.2rem) / 1.12 var(--sans);
  text-wrap: balance;
}
.cta-band p {
  margin: 8px 0 0;
  max-width: 720px;
  opacity: 0.88;
  font-size: var(--type-md);
}
.faq-teaser {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-top: 24px;
  padding: 24px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Rooms listing */
.page-hero h1 {
  font-size: clamp(3.15rem, 5vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.034em;
  text-wrap: balance;
}
.page-hero .subtitle {
  margin: 14px 0 0;
  color: var(--berry);
  font-weight: 700;
}
.info-panel {
  margin-top: -30px;
  position: relative;
  z-index: 6;
}
.info-panel-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.filter img {
  width: 19px;
}
.filter.active {
  color: var(--white);
  border-color: var(--berry);
  background: var(--berry);
}
.sort {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.sort img {
  width: 18px;
}
.sort select {
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 0.8125rem;
  font-weight: 700;
}
.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  align-items: stretch;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.rooms-catalog-section {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 9% 4%,
      rgba(251, 236, 241, 0.92),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 98%,
      rgba(251, 236, 241, 0.76),
      transparent 22%
    ),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 52%, var(--paper) 100%);
}
.rooms-catalog-section .botanical-left {
  top: 40px;
  left: -72px;
}
.rooms-catalog-section .botanical-right {
  right: -70px;
  bottom: 18px;
  transform: scaleX(-1) rotate(-8deg);
}
.room-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out);
}
.room-card-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
}
.room-card-photo {
  position: relative;
  aspect-ratio: 1.35/1;
  overflow: hidden;
}
.room-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-base) var(--ease-out);
}

/* Pricing page */
.pricing-hero .split-hero-copy em {
  color: var(--berry);
  font-style: normal;
}

.pricing-hero-card {
  position: relative;
  overflow: hidden;
}

.pricing-hero-card > img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
}

.pricing-hero-note {
  position: absolute;
  right: 24px;
  bottom: 24px;
  min-width: 178px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card), var(--edge-highlight);
  backdrop-filter: blur(10px);
}

.pricing-hero-note span,
.pricing-hero-note small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-hero-note strong {
  display: block;
  margin: 7px 0 8px;
  color: var(--berry);
  font: 700 2.65rem/0.92 var(--serif);
  letter-spacing: -0.04em;
}

.pricing-hero-note small {
  padding-top: 8px;
  border-top: 1px solid rgba(178, 31, 87, 0.14);
}

.pricing-page-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(251, 236, 241, 0.9), transparent 25%),
    radial-gradient(circle at 92% 100%, rgba(232, 240, 235, 0.82), transparent 24%),
    url("../backgrounds/paper-texture.png");
}

.pricing-heading {
  margin-bottom: 36px;
}

.pricing-panel {
  overflow: hidden;
  border: 1px solid rgba(233, 227, 223, 0.9);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card), var(--edge-highlight);
  backdrop-filter: blur(8px);
}

.season-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid rgba(233, 227, 223, 0.9);
  background: linear-gradient(180deg, rgba(255, 248, 247, 0.94), rgba(255, 255, 255, 0.86));
}

.season-tab {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 14px 18px;
  border: 1px solid rgba(233, 227, 223, 0.95);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--edge-highlight);
  transition:
    transform var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.season-tab strong {
  font-size: 0.96rem;
  letter-spacing: -0.01em;
}

.season-tab span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.season-tab:hover,
.season-tab.active {
  transform: translateY(-2px);
  border-color: rgba(178, 31, 87, 0.24);
  background: var(--white);
  box-shadow: var(--shadow-sm), var(--edge-highlight);
}

.season-tab.active strong {
  color: var(--berry);
}

.price-guarantee {
  min-width: 170px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  color: var(--white);
  background: linear-gradient(135deg, #315b47, #1b3b2e);
  box-shadow: 0 16px 34px rgba(28, 59, 46, 0.16);
}

.price-guarantee img {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  filter: brightness(0) invert(1);
}

.price-guarantee span {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.price-list {
  display: grid;
}

.price-row {
  display: grid;
  grid-template-columns: 124px minmax(220px, 1fr) minmax(220px, 0.9fr) minmax(132px, 0.45fr) auto;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(233, 227, 223, 0.88);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.price-row:last-child {
  border-bottom: 0;
}

.price-row:hover {
  background-color: rgba(255, 250, 248, 0.72);
}

.price-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--focus) 32%, transparent);
  outline-offset: -4px;
}

.price-room-media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.price-room-media img {
  width: 124px;
  height: 92px;
  display: block;
  object-fit: cover;
  transition: transform var(--motion-base) var(--ease-out);
}

.price-row:hover .price-room-media img {
  transform: scale(1.04);
}

.price-room-main h3 {
  margin: 7px 0 0;
  font: 600 clamp(1.25rem, 1.7vw, 1.7rem) / 1.08 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.price-room-main h3 a {
  color: inherit;
  text-decoration: none;
}

.price-badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--white);
  background: var(--berry);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price-room-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.price-room-facts span {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(248, 244, 241, 0.82);
  color: var(--green-deep);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
}

.price-room-facts img {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.price-amount {
  display: grid;
  justify-items: start;
  gap: 0;
}

.price-amount small,
.price-amount span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-amount small {
  margin-bottom: 6px;
}

.price-amount strong {
  color: var(--berry);
  font: 700 clamp(1.85rem, 2.7vw, 2.7rem) / 0.96 var(--serif);
  /* Bylo -0.045em: przy Cormorancie w tym stopniu cyfry zaczynaly sie stykac,
     a cena jest jedyna liczba na stronie, ktora musi byc czytelna od razu.
     `tabular-nums` trzyma rowna szerokosc cyfr miedzy pokojami w tabeli. */
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.price-amount span {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(178, 31, 87, 0.14);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.price-value {
  display: none;
}

.pricing-page-section[data-season="low"] [data-season-price="low"],
.pricing-page-section[data-season="high"] [data-season-price="high"],
.pricing-page-section[data-season="special"] [data-season-price="special"] {
  display: block;
}

.pricing-page-section[data-season="special"] .price-amount span {
  display: none;
}

.price-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 190px;
}

.price-actions .button {
  min-height: 44px;
  justify-content: center;
  padding-inline: 16px;
  white-space: nowrap;
}

.price-note-card {
  max-width: 960px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 24px auto 0;
  padding: 18px 20px;
  border: 1px solid rgba(178, 31, 87, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm), var(--edge-highlight);
}

.price-note-card img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 9px;
  border-radius: 14px;
  background: var(--berry-soft);
}

.price-note-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
}

.pricing-details-section {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
}

.pricing-details-grid {
  display: grid;
  grid-template-columns: 1.25fr repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pricing-detail-card {
  min-height: 190px;
  padding: 28px;
  border: 1px solid rgba(233, 227, 223, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card), var(--edge-highlight);
}

.pricing-detail-card.is-featured {
  grid-row: span 2;
  padding: 36px;
  background:
    radial-gradient(circle at 92% 12%, rgba(251, 236, 241, 0.95), transparent 35%),
    var(--white);
}

.pricing-detail-card img {
  width: 58px;
  height: 58px;
  padding: 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--berry-soft), var(--white));
  box-shadow: inset 0 0 0 1px rgba(178, 31, 87, 0.08);
}

.pricing-detail-card h2,
.pricing-faq-teaser h2 {
  margin: 0;
  font: 600 clamp(2.2rem, 3.5vw, 3.3rem) / 1.02 var(--serif);
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.pricing-detail-card h3 {
  margin: 18px 0 8px;
  color: var(--green-deep);
  font-size: 1.05rem;
}

.pricing-detail-card p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.66;
}

.pricing-faq-teaser {
  align-items: center;
}

.pricing-faq-teaser h2 {
  max-width: 820px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--berry);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.room-card-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
  pointer-events: none;
}
.room-card h2,
.room-card h3 {
  min-height: 64px;
  margin: 0 0 8px;
  font: 600 1.68rem/1.08 var(--serif);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.room-card .room-summary {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.58;
  text-wrap: pretty;
}
.room-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.room-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #faf7f5;
  color: #4b534e;
  font-size: var(--type-xs);
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.room-meta li span {
  min-width: 0;
}
.room-meta img {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  opacity: 0.9;
}
.room-card .button {
  position: relative;
  z-index: 4;
  margin-top: auto;
  min-height: 44px;
  pointer-events: auto;
}
.rooms-benefits {
  overflow: hidden;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.benefit {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 144px;
  padding: 22px 20px;
  border: 1px solid rgba(188, 32, 91, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(38, 45, 40, 0.05);
}
.benefit-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--berry-soft) 82%, var(--white));
  box-shadow: inset 0 0 0 1px rgba(178, 31, 87, 0.08);
}
.benefit-icon img {
  width: 27px;
  opacity: 0.9;
}
.benefit h3 {
  margin: 1px 0 7px;
  color: var(--green-deep);
  font-size: var(--type-body);
  line-height: 1.2;
  text-wrap: balance;
}
.benefit p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.58;
  text-wrap: pretty;
}

/* Single room */
.room-hero {
  position: relative;
  overflow: visible;
}
.room-hero-grid {
  min-height: 360px;
  display: grid;
  grid-template-columns: 38% 62%;
}
.room-hero-copy {
  position: relative;
  z-index: 2;
  padding: 45px 50px 38px 0;
}
.room-hero-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -130px 0 -100vw;
  background: linear-gradient(
    90deg,
    var(--white) 0%,
    var(--white) 74%,
    rgba(255, 255, 255, 0.94) 88%,
    transparent 100%
  );
}
.breadcrumbs {
  display: flex;
  gap: 9px;
  margin-bottom: 17px;
  color: #818681;
  font-size: var(--type-xs);
}
.breadcrumbs span {
  color: var(--berry);
}
.room-hero h1 {
  margin: 0;
  font: 600 clamp(3rem, 4.75vw, 4.95rem) / 0.94 var(--serif);
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.room-hero-copy > p {
  max-width: 500px;
  margin: 22px 0;
  color: #444c47;
  font-size: var(--type-md);
  line-height: 1.72;
  text-wrap: pretty;
}
.rating-row {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 18px 0;
}
.rating-row .rating-number {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pill-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--green-deep);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pill img {
  width: 20px;
  height: 20px;
  opacity: 0.82;
}
.room-hero-media {
  overflow: hidden;
}
.room-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-main {
  position: relative;
}
.room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 50px;
  align-items: start;
}
.room-content {
  min-width: 0;
}
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.thumb-grid button {
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.thumb-grid img {
  width: 100%;
  aspect-ratio: 1.42/1;
  object-fit: cover;
}
.booking-card {
  position: sticky;
  top: 108px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.booking-card h2 {
  margin: 0 0 19px;
  font: 600 2rem/1.06 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* Miejsce na widget RoomAdmin (kalendarz albo formularz rezerwacji).
   Widget przychodzi jako <iframe> z obcej domeny i sam ustawia sobie
   wysokosc skryptem — my odpowiadamy wylacznie za ramy, w ktorych siedzi. */
.ra-slot {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Iframe doladowuje sie po zaladowaniu strony i do tego momentu ma zerowa
     wysokosc. Bez rezerwacji miejsca tresc pod nim podskakuje w chwili
     pojawienia sie kalendarza — to widoczne szarpniecie i kara w CLS.
     420px to wysokosc kalendarza dwumiesiecznego; blad w te czy we w te
     jest niegrozny, bo skrypt widgetu i tak skoryguje wysokosc. */
  min-height: 420px;
}
.ra-slot iframe {
  display: block;
  width: 100%;
  border: 0;
}
/* Karta z kalendarzem nie ma wewnetrznego paddingu po bokach — widget
   rysuje wlasne marginesy i podwojne odstepy zwezalyby siatke dni. */
.booking-card-kalendarz {
  padding: 25px 14px;
}
/* ⚠️ Padding karty ustala PÓŹNIEJSZA reguła (.booking-card, ~l. 4546):
   `padding: 30px`. Powyższe 25px/14px nigdy nie wygrywa — zostaje jako
   wartość dla wąskich ekranów, gdzie tamta reguła nie obowiązuje.
   Dlatego przycisk NIE MOŻE mieć własnych marginesów poziomych: liczony
   od 14px, a stojący w karcie o 30px, wychodził krzywo — 12px poza lewą
   krawędź i 10px za prawą. Wyrównanie bierzemy z paddingu karty. */
/* Przycisk pod kalendarzem. Widget pokazuje samą zajętość (wtyczka osadza go
   z wyłączonym własnym przyciskiem), więc to jedyna droga od „widzę wolny
   termin" do „rezerwuję" — musi być wyraźny i na pełną szerokość. */
.ra-kalendarz-cta {
  display: block;
  /* Bez marginesów poziomych — wyrównanie bierze się z paddingu karty,
     inaczej przycisk stoi krzywo względem kalendarza (patrz uwaga wyżej). */
  margin: 16px 0 0;
  text-align: center;
}
/* Pierścień fokusu na przycisku rezerwacji.
   Wariant ogólny (.button:focus-visible) daje 32% krycia, co przy białym
   tle karty wychodzi 1,64:1 — poniżej wymaganych 3:1 (WCAG 2.2, 1.4.11)
   i praktycznie niewidoczne. To jedyne CTA na tej karcie; osoba idąca
   klawiaturą musi wiedzieć, że na nim stoi. */
.ra-kalendarz-cta:focus-visible {
  outline: 3px solid var(--berry-dark);
  outline-offset: 3px;
}

/* ===========================================================================
   Okno rezerwacji RoomAdmin (modal)

   Wnetrze formularza siedzi w <iframe> na obcej domenie i jest poza naszym
   zasiegiem. Ale RAMA modala jest w naszym DOM-ie — i domyslnie wyglada jak
   awaria: przycisk „zamknij" ma position:static, wiec laduje NAD biala karta,
   w lewym gornym rogu, na tresci strony. Kontener ma promien 5px przy naszym
   systemie 18px i zadnego cienia, wiec nie odcina sie od strony.

   Wtyczka doklada przyciskowi klasy `et_pb_button et_pb_more_button` —
   relikt motywu Divi, ktorego tu nie ma. Stad ostre rogi i obcy krój.
   Nadpisujemy je wlasnymi wartosciami.
   =========================================================================== */

/* `!important` jest tu konieczne, nie wygodne: wtyczka wpisuje
   `border-radius: 5px` INLINE w atrybucie style, a styl inline bije kazda
   regule z arkusza. Bez tego okno zostaje z obcym promieniem 5px przy
   naszym systemie 18px. Ten sam powod dotyczy paddingu. */
.ra-reservation-form-container {
  border-radius: var(--radius-md) !important;
  /* Gorny odstep wiekszy — przycisk „zamknij" siedzi w prawym gornym rogu
     i bez tego zachodzilby na pierwszy wiersz formularza (pola dat). */
  padding: 58px 18px 18px !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Przyciemnienie tla — bez niego modal zlewa sie ze strona pod spodem.
   Wtyczka daje czysta czern; zmiekczamy ja do koloru atramentu marki. */
.custombox-overlay.custombox-open {
  background: rgba(23, 20, 18, 0.55) !important;
  backdrop-filter: blur(3px);
}

/* Przycisk zamkniecia wraca TAM, GDZIE go szukamy: prawy gorny rog okna.
   `position: static` z wtyczki wypychalo go poza karte, na tresc strony. */
.ra-modal-close-button,
.ra-modal-close-button.et_pb_button,
.ra-modal-close-button.et_pb_more_button {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--berry);
  color: var(--white);
  font: 700 var(--type-xs, 0.82rem) / 1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--motion-fast, 180ms) ease;
}
.ra-modal-close-button:hover,
.ra-modal-close-button:focus-visible {
  background: var(--berry-dark);
}

/* Rodzic przycisku musi byc ukladem odniesienia dla position:absolute,
   inaczej przycisk ucieknie do krawedzi okna przegladarki. */
[id^="ra-reservation-form-modal"],
[id^="ra-calendar-single-modal"] {
  position: relative;
}

@media (max-width: 700px) {
  /* Na telefonie modal zajmuje prawie caly ekran. Przycisk musi miec co
     najmniej 44 px wysokosci — przy 39 px trafienie kciukiem w biegu jest
     loteria, a to jedyne wyjscie z okna. */
  .ra-modal-close-button {
    top: 10px;
    right: 10px;
    min-height: 44px;
    padding: 12px 20px;
  }
}
.form-field {
  margin-bottom: 13px;
}
.form-field label {
  display: block;
  margin: 0 0 6px;
  color: #696f6a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: var(--type-body);
}
.form-field textarea {
  min-height: 132px;
  padding-top: 12px;
  resize: vertical;
}
.booking-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 15px;
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.48;
}
.booking-note img {
  width: 21px;
}
.content-block {
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}
.content-block h2 {
  margin: 0 0 15px;
  font: 600 2.25rem/1.06 var(--serif);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.content-block p {
  color: #4b534e;
  font-size: var(--type-md);
  line-height: 1.72;
  text-wrap: pretty;
}
.room-amenities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.room-amenity {
  min-height: 128px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 18px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 10px 26px rgba(38, 45, 40, 0.04);
  text-align: center;
}
.room-amenity:last-child {
  border-right: 1px solid var(--line);
}
.room-amenity img {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--berry-soft) 72%, var(--white));
  opacity: 0.95;
}
.room-amenity span {
  color: var(--green-deep);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.32;
}
.equipment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 26px;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: var(--type-sm);
}
.check-list img {
  width: 17px;
}
.equipment-photo img {
  border-radius: 8px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-grid-bento {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-grid button {
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.gallery-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.gallery-grid-bento .gallery-item:nth-child(1),
.gallery-grid-bento .gallery-item:nth-child(2) {
  grid-column: span 2;
}
.gallery-grid-bento .gallery-item:nth-child(n + 3) {
  grid-column: span 1;
}
.gallery-grid-bento img {
  height: 210px;
}
.gallery-grid-bento .gallery-item:nth-child(1) img,
.gallery-grid-bento .gallery-item:nth-child(2) img {
  height: 290px;
}
.related-section {
  margin-top: 18px;
  padding: 34px;
  border: 1px solid color-mix(in srgb, var(--berry-soft) 72%, var(--line));
  border-top: 5px solid var(--berry);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--paper-2), var(--white));
}
.related-section::before {
  content: "";
  display: block;
  width: 84px;
  height: 3px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: var(--berry);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.related-card a {
  display: block;
  height: 100%;
}
.related-card img {
  width: 100%;
  aspect-ratio: 1.55/1;
  object-fit: cover;
}
.related-card-body {
  padding: 18px 18px 20px;
}
.related-card h3 {
  margin: 0 0 5px;
  font: 600 1.38rem/1.08 var(--serif);
  text-wrap: balance;
}
.related-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.48;
}

/* Contact */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: -36px;
  position: relative;
  z-index: 5;
}
.contact-card {
  min-height: 138px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-content: center;
  gap: 14px;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.contact-card.highlight {
  background: #fff7f9;
}
.contact-card img {
  width: 29px;
}
.contact-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.contact-card a,
.contact-card span {
  display: block;
  font-size: var(--type-ui);
  line-height: 1.42;
}
.contact-map-card {
  overflow: hidden;
  min-height: 360px;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.94),
      rgba(255, 248, 247, 0.9)
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(178, 31, 87, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, rgba(23, 54, 43, 0.1), rgba(23, 54, 43, 0.02));
  box-shadow: var(--shadow-soft);
}
.contact-map-card h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.4rem);
}
.contact-map-card p {
  max-width: 520px;
  color: var(--muted);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 24px;
  /* Bez tego kolumny domyslnie sie rozciagaja (`stretch`): panel „Praktyczne
     informacje” dostawal wysokosc formularza i konczyl sie ~470px pustego
     pola pod ostatnia pozycja. Puste pudlo z ramka i cieniem czyta sie jak
     blad ladowania, nie jak swiatlo. Panel ma byc wysoki na swoja tresc. */
  align-items: start;
}
.panel {
  position: relative;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.panel h2 {
  margin: 0 0 24px;
  font: 600 2.2rem/1.06 var(--serif);
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.reservation-system-panel {
  overflow: hidden;
  background:
    linear-gradient(
      135deg,
      rgba(251, 236, 241, 0.82),
      rgba(255, 255, 255, 0.96)
    ),
    var(--white);
}
.reservation-system-panel > p:not(.section-kicker) {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--type-md);
  line-height: 1.68;
}
.contact-inquiry-panel,
.practical-panel {
  overflow: hidden;
}
/* Tylko na formularzu. To samo zdobienie na obu panelach obok siebie
   przestawalo byc akcentem i zrownywalo je wizualnie. */
.contact-inquiry-panel::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 24px;
  width: 92px;
  height: 92px;
  background: url("../brand/flower-corner.svg") center/contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.roomadmin-placeholder {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
  padding: 24px;
  border: 1px dashed rgba(178, 31, 87, 0.36);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}
.roomadmin-placeholder strong {
  display: block;
  color: var(--green-deep);
  font-size: 1.25rem;
}
.roomadmin-placeholder span {
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .button-wide {
  width: 100%;
}
.form-grid .full {
  grid-column: 1/-1;
}
.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: var(--type-xs);
  line-height: 1.48;
}
.checkbox input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
}
/* Szesc pozycji w rownych odstepach 22px czytalo sie jak jeden blok bez
   struktury — oko nie mialo czego pogrupowac. Kolejnosc i ikony pochodza
   z pola ACF (redaktor je ustawia), wiec grupowania nie da sie zapisac
   w szablonie; robi to sama przestrzen: wlosowa linia i wiekszy odstep
   rozdzielaja pozycje na czytelne pary. */
.practical-list {
  display: grid;
  gap: 18px;
}
.practical-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px;
}
.practical-item + .practical-item {
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}
.practical-item img {
  width: 27px;
}
.practical-item h3 {
  margin: 0 0 3px;
  font-size: var(--type-ui);
}
.practical-item p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.5;
}
.location-card {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.location-copy {
  padding: clamp(30px, 4vw, 58px);
}
.location-copy h2 {
  margin: 0 0 15px;
  font: 600 2.15rem/1.06 var(--serif);
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.location-copy p {
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.58;
  text-wrap: pretty;
}
.location-map img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.route {
  min-height: 130px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-content: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.route img {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 50%;
  background: var(--berry-soft);
}
.route h3 {
  margin: 0 0 4px;
  font-size: var(--type-ui);
}
.route p {
  margin: 0;
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.5;
}
/* Zakladki kategorii. Przy 19 pytaniach jedna dluga lista meczy — podzial
   na 5 grup skraca widoczna liste do 3-6 pozycji. */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 0 auto 24px;
}
.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--type-ui);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out);
}
.faq-tab:hover {
  border-color: var(--rose-line);
  color: var(--ink);
}
.faq-tab.is-active {
  border-color: var(--berry);
  background: var(--berry);
  color: var(--white);
}
.faq-tab-count {
  font-size: var(--type-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.faq-panel.is-hidden {
  display: none;
}
/* Tytul grupy potrzebny tylko bez JS — ze skryptem mowi to aktywna zakladka */
.faq-panel-title {
  max-width: 900px;
  margin: 0 auto 12px;
  font-family: var(--serif);
  font-size: var(--type-lg);
}
.faq-tabs ~ .faq-panel .faq-panel-title {
  display: none;
}

/* Jedna kolumna, nie trzy. Przy 19 pytaniach siatka 3-kolumnowa zostawiala
   w ostatnim rzedzie jedna samotna karte, a waskie kolumny wymuszaly
   mikroskopijny tekst (12,2px), zeby dlugie polskie pytania sie zmiescily.
   Akordeon czyta sie pionowo — szerokosc ograniczamy dla dlugosci wiersza,
   a nie dzielimy tresci na kolumny. */
.faq-grid {
  display: grid;
  gap: 12px;
  max-width: 900px;
  margin-inline: auto;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color var(--motion-fast) var(--ease-out);
}
.faq-item:hover {
  border-color: var(--rose-line);
}
.faq-question {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.faq-question img {
  width: 20px;
}
/* 0.76rem = 12,2px — ponizej progu czytelnosci i poza skala typograficzna. */
.faq-question strong {
  font-size: var(--type-md);
  font-weight: 600;
  line-height: 1.35;
}
.faq-answer {
  display: none;
  padding: 0 20px 18px 58px;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.65;
}
.faq-item.open .faq-answer {
  display: block;
}
.faq-question .chevron {
  transition: transform var(--motion-fast) var(--ease-out);
}
.faq-item.open .faq-question .chevron {
  transform: rotate(180deg);
}
.faq-list {
  display: grid;
  max-width: 980px;
  margin: 32px auto 0;
  gap: 14px;
}
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(38, 45, 40, 0.05);
}
.faq-list summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 800;
  cursor: pointer;
}
.faq-list summary::after {
  content: "+";
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--berry-soft);
  color: var(--berry);
}
.faq-list details[open] summary::after {
  content: "–";
}
.faq-list p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
}

/* Footer */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 66px 0 26px;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(135deg, #254835, #17352b);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1.35fr 1fr 1.15fr 0.8fr;
  gap: 44px;
}
.footer-grid-rich ul {
  list-style: none;
  padding-left: 0;
}
.footer-logo {
  width: 210px;
}
.site-footer h2 {
  margin: 0 0 15px;
  color: var(--white);
  font: 800 0.9rem/1.25 var(--sans);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.site-footer p,
.site-footer a,
.site-footer li {
  margin: 7px 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9375rem;
  line-height: 1.62;
}
.site-footer .footer-grid > div > a {
  display: block;
  width: fit-content;
}
.site-footer ul {
  margin: 0;
  padding-left: 18px;
}
.footer-grid-rich ul {
  padding-left: 0;
}
.footer-room-links a {
  display: inline-block;
  line-height: 1.28;
}
.footer-phone {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 12px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--white) !important;
  font-weight: 800;
}
.bank-account span {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.footer-note {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.78rem !important;
}
.socials {
  display: flex;
  gap: 10px;
}
.socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}
.socials img {
  width: 19px;
  filter: brightness(0) invert(1);
}
/* Dane rejestrowe sprzedawcy — wymagane przez operatora platnosci.
   Ciszej niz reszta stopki: to informacja formalna, nie tresc sprzedazowa,
   ale musi byc czytelna, wiec kontrast zostaje powyzej progu WCAG AA. */
.footer-firma {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.footer-firma-nazwa {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

/* Gdy dane rejestrowe sa nad stopka, kreska nad copyright bylaby druga
   z rzedu — zostawiamy jedna, zeby nie robic drabinki. */
.footer-firma + .footer-bottom {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Dane rejestrowe na stronie Kontakt.

   Ta sekcja celowo NIE krzyczy. To informacja formalna — wymóg operatora
   płatności i przepisów o sprzedaży online — a nie treść sprzedażowa.
   Dostaje więc język wizualny kart kontaktowych (promień, cień, delikatna
   linia), ale wyciszony: tło o ton jaśniejsze niż karty, bez gradientu,
   bez hoveru. Ma budzić zaufanie, nie przyciągać wzrok. */
.contact-rejestr {
  grid-column: 1 / -1;
  margin-top: clamp(26px, 3.5vw, 40px);
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3.5vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--white) 62%, transparent);
  box-shadow: var(--shadow-xs);
}

/* Akcent berry tylko tutaj — jedna kreska wystarczy, żeby sekcja należała
   do reszty strony, bez dokładania koloru do samych danych. */
.contact-rejestr-tytul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--berry);
}

.contact-rejestr-tytul::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--rose-line) 55%, transparent),
    transparent
  );
}

/* Nazwa firmy niesie sekcję — serif, bo to jedyna „ludzka” część tych
   danych, reszta to numery. */
.contact-rejestr-nazwa {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-size: var(--type-md);
  line-height: 1.35;
  color: var(--ink);
}

.contact-rejestr-forma {
  margin: 4px 0 0;
  font-size: var(--type-sm);
  color: var(--muted);
}

.contact-rejestr-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.contact-rejestr-pozycja dt {
  margin-bottom: 3px;
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-rejestr-pozycja dd {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--ink);
}

/* Numery rejestrowe ludzie przepisują cyfra po cyfrze — stała szerokość
   znaku i lekki rozstrzał ułatwiają to i chronią przed pomyłką. */
.contact-rejestr-numer {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Dane do przelewu — jedyny fragment tej sekcji, który gość faktycznie
   przepisuje, więc dostaje własne tło i trochę więcej powietrza. */
.contact-konto {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 24px);
  border: 1px solid color-mix(in srgb, var(--rose-line) 30%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--berry-soft) 45%, var(--white));
}

.contact-konto-tytul {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--berry-dark);
}

.contact-konto-lista {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Numer konta ma zajmować pełną szerokość — 26 cyfr złamane na dwie linie
   to najprostsza droga do pomyłki przy przepisywaniu. */
.contact-konto-pozycja {
  grid-column: 1 / -1;
}

.contact-konto-numer {
  font-size: var(--type-md);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.contact-konto-uwaga {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--rose-line) 26%, transparent);
  font-size: var(--type-xs);
  line-height: 1.55;
  color: var(--muted);
}
.footer-decor {
  position: absolute;
  right: -45px;
  bottom: -80px;
  width: 230px;
  opacity: 0.18;
  filter: brightness(0) invert(1);
}

/* Feedback / lightbox */
.toast {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  max-width: 360px;
  padding: 16px 18px;
  border-radius: 10px;
  color: var(--white);
  background: var(--green-deep);
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  opacity: 0;
  transform: translateY(140%);
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out),
    visibility 0s linear var(--motion-base);
}
.toast.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  place-items: center;
  padding: 30px;
  background: rgba(16, 22, 18, 0.86);
}
.lightbox.open {
  display: grid;
}
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 84vh;
  border-radius: 12px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.lightbox-close img {
  width: 22px;
}
.field-error {
  display: block;
  margin-top: 6px;
  color: #9f1239;
  font-size: 0.72rem;
  font-weight: 700;
}
[aria-invalid="true"] {
  border-color: #be123c !important;
  box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.1);
}
.mobile-sticky {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    transform: translateY(-2px);
  }
  .simple-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  .room-card:hover {
    border-color: color-mix(in srgb, var(--berry) 22%, var(--line));
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
  }
  .room-card:hover .room-card-photo img {
    transform: scale(1.035);
  }
  .gallery-grid button:hover,
  .related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 1120px) {
  .container {
    width: min(calc(100% - 42px), var(--container));
  }
  .header-inner {
    grid-template-columns: 205px 1fr auto;
    gap: 18px;
  }
  .brand img {
    width: 188px;
  }
  .desktop-nav {
    gap: 18px;
  }
  .header-phone span {
    display: none;
  }
  .split-hero-grid {
    grid-template-columns: 46% 54%;
  }
  .split-hero-copy {
    padding-right: 25px;
  }
  .amenity-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .amenity-item:nth-child(4) {
    border-right: 1px solid var(--line);
  }
  .amenity-item:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }
  .rooms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .rooms-grid .room-card:nth-child(5) {
    grid-column: auto;
  }
  .room-amenities {
    grid-template-columns: repeat(4, 1fr);
  }
  .room-amenity:nth-child(4) {
    border-right: 1px solid var(--line);
  }
  .room-amenity:nth-child(-n + 4) {
    border-bottom: 1px solid var(--line);
  }
  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
  .footer-grid > :last-child {
    grid-column: 2;
  }
}

@media (max-width: 880px) {
  :root {
    --header-h: 78px;
  }
  body {
    padding-bottom: 68px;
  }
  .container {
    width: min(calc(100% - 30px), var(--container));
  }
  .section {
    padding: 64px 0;
  }
  .header-inner {
    grid-template-columns: 1fr auto;
    min-height: var(--header-h);
  }
  .brand img {
    width: 178px;
  }
  .desktop-nav,
  .header-cta,
  .header-phone {
    display: none;
  }
  .menu-toggle,
  .mobile-menu {
    display: grid;
  }
  .mobile-menu {
    display: block;
  }
  .split-hero-grid,
  .room-hero-grid {
    grid-template-columns: 1fr;
  }
  .split-hero-copy,
  .room-hero-copy {
    padding: 48px 0 38px;
  }
  .split-hero-copy::after,
  .room-hero-copy::after {
    inset: 0 -30px;
    background: var(--white);
  }
  .split-hero h1,
  .room-hero h1 {
    font-size: clamp(3.4rem, 10vw, 5.2rem);
  }
  .hero-media,
  .room-hero-media {
    min-height: 390px;
    border-radius: 0 0 22px 22px;
  }
  .booking-wrap {
    margin-top: 20px;
  }
  .booking-bar {
    grid-template-columns: 1fr 1fr;
  }
  .booking-field:nth-child(2)::after {
    display: none;
  }
  .booking-action {
    padding: 12px;
  }
  .facts-band,
  .info-panel-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .fact:nth-child(even)::after {
    display: none;
  }
  .fact:last-child {
    grid-column: 1/-1;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-photo {
    max-width: 620px;
  }
  .cards-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Na waskim ekranie karuzela moze wychodzic poza margines .container —
     ujemny margines rowny jego marginesowi bocznemu, wiec bez przepelnienia. */
  .review-carousel {
    margin-inline: -15px;
    padding-inline: 15px;
    scroll-padding-inline: 15px;
  }
  .amenity-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
  }
  .filter {
    flex: 0 0 auto;
  }
  .sort {
    align-self: flex-end;
  }
  .section-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-layout {
    grid-template-columns: 1fr;
  }
  .booking-card {
    position: static;
    order: -1;
  }
  .equipment-grid {
    grid-template-columns: 1fr;
  }
  .contact-cards {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .location-card {
    grid-template-columns: 1fr;
  }
  .route-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid-bento .gallery-item:nth-child(n) {
    grid-column: span 1;
  }
  .gallery-grid-bento img,
  .gallery-grid-bento .gallery-item:nth-child(1) img,
  .gallery-grid-bento .gallery-item:nth-child(2) img {
    height: 190px;
  }
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid > :first-child {
    grid-column: 1/-1;
  }
  .footer-grid > :last-child {
    grid-column: auto;
  }
  .mobile-sticky {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    display: block;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: rgba(255, 253, 251, 0.95);
    backdrop-filter: blur(12px);
  }
  .mobile-sticky .button {
    width: 100%;
    max-width: calc(100vw - 28px);
  }

  body:has(.room-main) .mobile-sticky,
  body:has(#rezerwacja) .mobile-sticky {
    display: none;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .container {
    width: min(calc(100% - 22px), var(--container));
  }
  .section {
    padding: 52px 0;
  }
  .split-hero-copy,
  .room-hero-copy {
    padding-top: 35px;
  }
  .split-hero h1,
  .room-hero h1 {
    font-size: clamp(2.55rem, 12.5vw, 3.2rem);
    line-height: 0.98;
    letter-spacing: -0.026em;
  }
  .hero-media,
  .room-hero-media {
    min-height: 285px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .review-strip {
    flex-wrap: wrap;
  }
  .booking-bar {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  .booking-field {
    padding: 13px 14px;
  }
  .booking-field::after {
    display: none !important;
  }
  .booking-field:not(:last-of-type) {
    border-bottom: 1px solid var(--line);
  }
  .facts-band,
  .info-panel-inner {
    grid-template-columns: 1fr;
  }
  .fact {
    justify-content: flex-start;
    padding-left: 22px;
  }
  .fact::after {
    display: none;
  }
  .fact:not(:last-child) {
    border-bottom: 1px solid rgba(60, 54, 48, 0.08);
  }
  .fact:last-child {
    grid-column: auto;
  }
  .about-copy h2 {
    font-size: clamp(2.45rem, 12vw, 2.9rem);
  }
  .amenity-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .amenity-item:nth-child(even) {
    border-right: 1px solid var(--line);
  }
  .amenity-item:nth-child(-n + 6) {
    border-bottom: 1px solid var(--line);
  }
  .cards-4,
  .review-grid,
  .rooms-grid {
    grid-template-columns: 1fr;
  }
  .cta-band {
    grid-template-columns: 1fr;
    padding: 25px;
    text-align: center;
  }
  .cta-band > img {
    margin-inline: auto;
  }
  .faq-teaser {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-map-card {
    min-height: 0;
    border-radius: 20px;
  }
  .gallery-grid-bento {
    grid-template-columns: 1fr;
  }
  .gallery-grid-bento img,
  .gallery-grid-bento .gallery-item:nth-child(1) img,
  .gallery-grid-bento .gallery-item:nth-child(2) img {
    height: 230px;
  }
  .related-section {
    padding: 22px;
  }
  .route-grid {
    grid-template-columns: 1fr;
  }
  .sort {
    align-self: stretch;
    justify-content: space-between;
  }
  .room-card h2,
  .room-card h3 {
    min-height: 0;
  }
  .benefit-grid {
    grid-template-columns: 1fr;
  }
  .room-amenities {
    grid-template-columns: repeat(2, 1fr);
  }
  .room-amenity:nth-child(even) {
    border-right: 1px solid var(--line);
  }
  .room-amenity:nth-child(-n + 6) {
    border-bottom: 1px solid var(--line);
  }
  .thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .check-list {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid img {
    height: 130px;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .contact-cards {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: auto;
  }
  .panel {
    padding: 22px;
  }
  .route-grid {
    grid-template-columns: 1fr;
  }
  .route {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .route:last-child {
    border-bottom: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid > :first-child {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .botanical {
    width: 150px;
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===== Willa Azalia — V2 background polish + approved rooms megamenu ===== */
:root {
  --shadow-xs: 0 3px 10px rgba(25, 52, 41, 0.055);
  --shadow-card: 0 10px 28px rgba(25, 52, 41, 0.085),
    0 2px 7px rgba(25, 52, 41, 0.045);
  --shadow-float: 0 24px 70px rgba(25, 52, 41, 0.16),
    0 8px 22px rgba(25, 52, 41, 0.08);
  --shadow-button: 0 12px 26px rgba(180, 31, 82, 0.24);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body {
  background-color: var(--paper);
  background-image: url("../backgrounds/paper-texture.png");
  background-repeat: repeat;
  background-size: 512px 512px;
}

.split-hero,
.page-hero {
  isolation: isolate;
  background-color: var(--paper);
  background-image:
    url("../backgrounds/hero-mesh.png"),
    linear-gradient(115deg, var(--white) 0%, #fffaf7 43%, #eff5f0 100%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

.split-hero::before,
.page-hero::before,
.split-hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.split-hero::before,
.page-hero::before {
  left: -95px;
  bottom: -90px;
  width: 330px;
  height: 460px;
  background: url("../backgrounds/floral-corner-left.png") left bottom /
    contain no-repeat;
  opacity: 0.3;
}

.split-hero::after,
.page-hero::after {
  right: -90px;
  top: 30px;
  width: 280px;
  height: 420px;
  background: url("../backgrounds/floral-corner-right.png") right top /
    contain no-repeat;
  opacity: 0.2;
}

.hero-media,
.image-frame,
.room-hero-media,
.main-room-photo,
.contact-map-card {
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-float);
}

.booking-bar,
.booking-panel,
.panel,
.contact-card,
.booking-card,
.room-card,
.review-card,
.benefit,
.simple-card,
.faq-item,
.related-card {
  box-shadow: var(--shadow-card), var(--edge-highlight);
}

.room-card,
.contact-card,
.review-card,
.benefit,
.simple-card,
.panel,
.related-card {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

.room-card:hover {
  box-shadow: var(--shadow-float), var(--edge-highlight);
}

.rooms-catalog-section,
.rooms-benefits {
  background-image:
    radial-gradient(
      circle at 9% 4%,
      rgba(251, 236, 241, 0.9),
      transparent 25%
    ),
    radial-gradient(
      circle at 92% 98%,
      rgba(232, 240, 235, 0.86),
      transparent 24%
    ),
    url("../backgrounds/paper-texture.png");
  background-size: auto, auto, 512px 512px;
}

.reviews-section {
  position: relative;
  isolation: isolate;
  background-color: #fff8fa;
  background-image:
    url("../backgrounds/reviews-blush.png"),
    url("../backgrounds/paper-texture.png");
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: cover, 512px 512px;
}

.reviews-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: -10px;
  width: 260px;
  height: 350px;
  background: url("../backgrounds/floral-corner-right.png") right bottom /
    contain no-repeat;
  opacity: 0.26;
  pointer-events: none;
}

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--shadow-button), var(--edge-highlight);
}

.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../backgrounds/cta-pattern.png") right center / auto 145%
    no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

.site-footer {
  isolation: isolate;
  background-image: linear-gradient(135deg, #193429, #244b3a);
}

.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -70px;
  width: 500px;
  height: 310px;
  background: url("../backgrounds/footer-botanical.png") right bottom /
    contain no-repeat;
  opacity: 0.55;
  pointer-events: none;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(39, 74, 57, 0.14);
  border-radius: 999px;
  color: var(--green-deep);
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.72);
}

.rooms-trigger {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.desktop-nav .rooms-trigger {
  min-height: var(--header-h);
  padding: 0;
  font-size: 0.98rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.desktop-nav .rooms-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 18px;
  height: 2px;
  background: var(--berry);
  transition: right var(--motion-fast) var(--ease-out);
}

.desktop-nav .rooms-trigger:hover::after,
.desktop-nav .rooms-trigger.is-active::after,
.site-header.mega-open .rooms-trigger::after {
  right: 0;
}

.desktop-nav .rooms-trigger.is-active,
.site-header.mega-open .rooms-trigger {
  color: var(--berry);
}

.rooms-mega {
  position: absolute;
  z-index: 70;
  top: calc(var(--header-h) + 10px);
  left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  right: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  padding: 25px;
  border: 1px solid #ded7d1;
  border-radius: 21px;
  background: rgba(255, 254, 252, 0.985);
  box-shadow: var(--shadow-float), var(--edge-highlight);
  transform: translateY(-10px) scale(0.992);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    visibility var(--motion-base) var(--ease-out);
}

.rooms-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.rooms-mega-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 0.95fr) minmax(
      420px,
      1.35fr
    );
  gap: 24px;
}

.rooms-mega-intro {
  position: relative;
  overflow: hidden;
  min-height: 540px;
  padding: 31px 38px 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdfa, #fbf7f2);
}

.rooms-mega-intro h2 {
  margin: 0 0 22px;
  font: 600 clamp(2.5rem, 3.4vw, 3.45rem) / 1.03 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mini-line {
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 0 22px;
  background: var(--berry);
}

.rooms-mega-intro > p:not(.section-kicker) {
  max-width: 32ch;
  color: #3f4441;
  font-size: 0.98rem;
  line-height: 1.75;
}

.mega-all-rooms {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin-top: 28px;
  gap: 10px;
}

.mega-all-rooms img,
.availability img,
.recommended img {
  width: 22px;
  filter: brightness(0) invert(1);
}

.rooms-mega-floral {
  position: absolute;
  left: -8px;
  bottom: -3px;
  width: 345px;
  opacity: 0.9;
  pointer-events: none;
}

.rooms-mega-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mega-group-card {
  padding: 25px 28px;
  border: 1px solid rgba(236, 229, 223, 0.68);
  border-radius: 18px;
  background: #fffdfa;
  box-shadow: var(--shadow-card);
}

.mega-group-card header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
}

.mega-group-card header img {
  width: 28px;
  height: 28px;
  filter: invert(19%) sepia(63%) saturate(3933%) hue-rotate(324deg)
    brightness(84%) contrast(94%);
}

.mega-group-card h3 {
  margin: 0;
  color: var(--berry);
  font: 850 0.86rem/1.2 var(--sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.mega-group-card > a {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #2b302d;
  font-size: 0.91rem;
  line-height: 1.45;
}

.mega-group-card > a:hover {
  color: var(--berry);
}

.mega-group-card > a span {
  color: var(--berry);
}

.group-large {
  flex: 1;
}

.mega-featured-room {
  overflow: hidden;
  border: 1px solid #e6ded8;
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow-card), var(--edge-highlight);
}

.mega-featured-image {
  position: relative;
  display: block;
  height: 295px;
  overflow: hidden;
}

/* `:not(.recommended img)` nie jest ozdobnikiem. Wewnatrz .mega-featured-image
   sa DWA obrazki: zdjecie pokoju i ikona gwiazdki w badge'u „Polecany".
   Regula `.mega-featured-image img` ma te sama specyficznosc co
   `.recommended img` (0,2,0) wyzej w pliku, wiec jako pozniejsza wygrywala
   — gwiazdka dostawala width/height 100% i zajmowala cala karte zamiast 22px. */
.mega-featured-image > picture img,
.mega-featured-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-base) var(--ease-out);
}

.mega-featured-room:hover .mega-featured-image > picture img,
.mega-featured-room:hover .mega-featured-image > img {
  transform: scale(1.04);
}

.recommended {
  position: absolute;
  top: 18px;
  left: 17px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 37px;
  padding: 0 17px;
  border-radius: 12px;
  background: linear-gradient(145deg, #c21d59, #a90e48);
  color: var(--white);
  font-size: 0.81rem;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(151, 17, 65, 0.25);
}

.mega-featured-content {
  padding: 24px 34px 26px;
}

.mega-featured-content h2 {
  margin: 0 0 11px;
  font: 600 2.2rem/1.12 var(--serif);
  letter-spacing: -0.018em;
}

.mega-featured-content p {
  margin: 0;
  color: #585d59;
  font-size: 0.92rem;
  line-height: 1.62;
}

.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.feature-pills span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid #ede7e2;
  border-radius: 999px;
  background: #faf7f3;
  font-size: 0.82rem;
  font-weight: 700;
}

.feature-pills img {
  width: 22px;
  height: 22px;
}

.availability {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-top: 20px;
  border-radius: 10px;
  background: linear-gradient(145deg, #31543c, #24432f);
  color: var(--white);
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rooms-mega-facts {
  min-height: 92px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.35fr;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #e6ded7;
  border-radius: 17px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.mega-fact,
.mega-contact-fact {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 22px;
  border-right: 1px solid #eee8e3;
}

.mega-fact img {
  width: 34px;
  height: 34px;
}

.mega-fact span,
.mega-contact-fact > span:last-child {
  display: flex;
  flex-direction: column;
}

.mega-fact strong,
.mega-contact-fact strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.mega-fact small,
.mega-contact-fact small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.mega-contact-fact {
  border-right: 0;
}

.phone-bubble {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8e8ec;
}

.phone-bubble img {
  width: 24px;
  filter: invert(16%) sepia(83%) saturate(3644%) hue-rotate(328deg)
    brightness(89%) contrast(92%);
}

.rooms-trigger:focus-visible,
.rooms-mega a:focus-visible {
  outline: 3px solid rgba(185, 22, 79, 0.24);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (max-width: 1180px) {
  .header-phone {
    display: none;
  }

  .season-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .price-guarantee {
    grid-column: 1 / -1;
  }

  .price-row {
    grid-template-columns: 104px minmax(220px, 1fr) minmax(180px, 0.85fr);
  }

  .price-room-media img {
    width: 104px;
    height: 84px;
  }

  .price-amount {
    justify-items: end;
  }

  .price-actions {
    grid-column: 2 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-detail-card.is-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .rooms-mega {
    left: 12px;
    right: 12px;
  }

  .rooms-mega-grid {
    grid-template-columns: 280px 1fr;
  }

  .mega-featured-room {
    grid-column: 1 / -1;
  }

  .rooms-mega-facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .mega-contact-fact {
    grid-column: 2 / 4;
  }
}

@media (max-width: 760px) {
  .home-section-heading {
    margin-bottom: 32px;
    text-align: left;
  }

  .home-section-heading h2 {
    font-size: clamp(2.35rem, 13vw, 3.35rem);
  }

  .home-section-heading > p:not(.section-kicker),
  .home-section-heading > div > p:not(.section-kicker) {
    margin-inline: 0;
    font-size: 1rem;
  }

  .home-heading-actions {
    justify-content: flex-start;
    margin-top: 20px;
  }

  .section-cta-link {
    min-height: 44px;
    padding-inline: 16px;
    letter-spacing: 0.09em;
  }

  .pricing-hero-card > img {
    min-height: 320px;
  }

  .pricing-hero-note {
    right: 14px;
    bottom: 14px;
    min-width: 148px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .pricing-hero-note strong {
    font-size: 2.2rem;
  }

  .season-tabs {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .season-tab {
    min-height: 72px;
    border-radius: 18px;
  }

  .price-guarantee {
    min-width: 0;
  }

  .price-list {
    gap: 0;
    padding-block: 8px;
    background: linear-gradient(180deg, rgba(255, 250, 248, 0.55), rgba(255, 255, 255, 0.9));
  }

  .price-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 12px;
    padding: 16px;
    border: 1px solid rgba(233, 227, 223, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(38, 45, 40, 0.075), var(--edge-highlight);
  }

  .price-row:last-child {
    border-bottom: 1px solid rgba(233, 227, 223, 0.9);
  }

  .price-row + .price-row {
    margin-top: 22px;
  }

  .price-room-media {
    border-radius: 20px;
  }

  .price-room-media img {
    width: 100%;
    height: 210px;
  }

  .price-room-main h3 {
    margin-top: 8px;
    font-size: clamp(1.45rem, 8vw, 2rem);
  }

  .price-room-main,
  .price-room-facts,
  .price-amount,
  .price-actions {
    grid-column: 1 / -1;
  }

  .price-room-facts {
    grid-template-columns: 1fr;
  }

  .price-amount {
    justify-items: start;
    padding: 4px 2px 2px;
  }

  .price-actions {
    grid-template-columns: 1fr;
  }

  .price-note-card {
    align-items: flex-start;
  }

  .pricing-details-grid {
    grid-template-columns: 1fr;
  }

  .pricing-detail-card,
  .pricing-detail-card.is-featured {
    padding: 24px;
    border-radius: 22px;
  }

  .pricing-faq-teaser {
    display: grid;
  }

  .home-section-heading-split {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .review-summary-card {
    width: min(100%, 320px);
  }

  .home-reviews-section .review-card {
    flex-basis: min(330px, 86vw);
    min-height: 238px;
    padding: 26px;
  }

  .rooms-mega {
    display: none;
  }

  .split-hero::before,
  .page-hero::before {
    left: -140px;
    opacity: 0.18;
  }

  .split-hero::after,
  .page-hero::after,
  .reviews-section::after,
  .site-footer::after {
    opacity: 0.12;
  }
}

/* ===== Kowalski pass — homepage icon scale + room detail rhythm ===== */
.facts-band {
  gap: 16px;
}

.fact {
  min-height: 116px;
  gap: 18px;
  padding: 22px 20px;
  border-radius: 18px;
}

.fact img {
  width: 54px;
  height: 54px;
  padding: 13px;
  box-shadow: inset 0 0 0 1px rgba(178, 31, 87, 0.08);
}

.fact strong {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.fact span {
  font-size: 0.82rem;
}

.amenity-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.amenity-item {
  min-height: 178px;
  gap: 18px;
  padding: 26px 20px;
  border-radius: 20px;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.amenity-item img {
  width: 66px;
  height: 66px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--berry-soft), var(--white));
}

.amenity-item span {
  max-width: 14ch;
  font-size: 0.98rem;
  line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
  .amenity-item:hover {
    transform: translateY(-4px);
    border-color: rgba(178, 31, 87, 0.18);
    box-shadow: var(--shadow-card), var(--edge-highlight);
  }
}

.amenity-item:active,
.button:active,
.room-card:active,
.related-card:active,
.gallery-grid button:active {
  transform: scale(0.97);
}

.room-hero {
  padding: 34px 0 30px;
  background-image:
    url("../backgrounds/hero-mesh.png"),
    linear-gradient(115deg, var(--white) 0%, #fffaf7 43%, #eff5f0 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.room-hero-grid {
  min-height: auto;
  grid-template-columns: minmax(0, 0.74fr) minmax(520px, 1.26fr);
  gap: 54px;
  align-items: center;
}

.room-hero-copy {
  padding: 28px 0;
}

.room-hero-copy::after {
  inset: -34px -110px -34px -100vw;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.9) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}

.room-hero h1 {
  font-size: clamp(3.2rem, 5.1vw, 5.05rem);
}

.room-hero-copy > p {
  max-width: 58ch;
  margin: 24px 0;
}

.rating-row {
  margin: 24px 0 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(39, 74, 57, 0.12);
}

.pill {
  min-height: 46px;
  padding: 0 15px;
  border-radius: 999px;
  box-shadow: var(--shadow-xs);
}

.pill img {
  width: 22px;
  height: 22px;
}

.room-hero-media {
  border-radius: 34px 12px 34px 12px;
}

.room-hero-media img {
  aspect-ratio: 1.72 / 1;
  min-height: 400px;
}

.room-main {
  padding-top: 54px;
}

.room-layout {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.44fr);
  gap: 42px;
}

.booking-card {
  top: 118px;
  padding: 30px;
  border-radius: 22px;
}

.booking-card h2 {
  margin-bottom: 22px;
  font-size: 2.35rem;
}

.form-field {
  margin-bottom: 14px;
}

.form-field input,
.form-field select,
.form-field textarea {
  min-height: 54px;
  border-radius: 12px;
}

.content-block {
  padding: 46px 0;
}

.content-block:first-child {
  padding-top: 0;
}

.content-block h2 {
  margin-bottom: 18px;
  font-size: clamp(2.35rem, 3.4vw, 3.05rem);
}

.content-block p {
  max-width: 72ch;
}

.room-amenities {
  gap: 14px;
  margin-top: 28px;
}

.room-amenity {
  min-height: 150px;
  padding: 22px 16px;
  border-radius: 16px;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.room-amenity img {
  width: 52px;
  height: 52px;
  padding: 13px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--berry-soft), var(--white));
}

.room-amenity span {
  max-width: 18ch;
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  .room-amenity:hover {
    transform: translateY(-4px);
    border-color: rgba(178, 31, 87, 0.18);
    box-shadow: var(--shadow-card), var(--edge-highlight);
  }
}

.equipment-grid {
  gap: 54px;
}

.check-list {
  gap: 12px 30px;
}

.check-list li {
  align-items: flex-start;
  min-height: 38px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(233, 227, 223, 0.82);
}

.equipment-grid .check-list {
  gap: 14px;
}

.equipment-grid .check-list li {
  min-height: 64px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(233, 227, 223, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 248, 0.88)),
    url("../backgrounds/paper-texture.png");
  box-shadow: 0 14px 34px rgba(38, 45, 40, 0.055), var(--edge-highlight);
  color: var(--green-deep);
  font-weight: 750;
  line-height: 1.28;
}

.equipment-grid .check-list img {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 9px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--berry-soft), var(--white));
  box-shadow:
    inset 0 0 0 1px rgba(178, 31, 87, 0.08),
    0 8px 18px rgba(178, 31, 87, 0.08);
}

.gallery-content-block {
  padding-top: 54px;
}

.gallery-grid-bento {
  gap: 16px;
}

.gallery-grid button {
  border-radius: 16px;
}

.gallery-grid-bento img {
  height: 225px;
}

.gallery-grid-bento .gallery-item:nth-child(1) img,
.gallery-grid-bento .gallery-item:nth-child(2) img {
  height: 315px;
}

.related-section {
  margin-top: 34px;
  padding: 46px;
  border-top: 0;
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(251, 236, 241, 0.9),
      transparent 26%
    ),
    linear-gradient(180deg, var(--paper-2), var(--white));
}

.related-grid {
  gap: 24px;
}

.related-card {
  border-radius: 20px;
}

.related-card img {
  aspect-ratio: 1.5 / 1;
  transition: transform 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .related-card:hover img {
    transform: scale(1.04);
  }
}

@media (max-width: 1120px) {
  .amenity-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .room-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 760px) {
  .facts-band,
  .amenity-row,
  .room-hero-grid,
  .room-layout,
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .fact,
  .amenity-item {
    min-height: 128px;
  }

  .room-hero {
    padding-top: 30px;
  }

  .room-hero-media img {
    min-height: 320px;
  }

  .booking-card {
    position: static;
  }
}

/* ===== Header + hero booking refinement ===== */
.site-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 251, 0.92)),
    url("../backgrounds/paper-texture.png");
  border-bottom-color: rgba(39, 74, 57, 0.1);
  box-shadow: 0 10px 34px rgba(25, 52, 41, 0.055);
}

.header-inner {
  min-height: 86px;
}

.desktop-nav {
  gap: 6px;
  width: fit-content;
  justify-self: center;
  padding: 6px;
  border: 1px solid rgba(39, 74, 57, 0.09);
  border-radius: 999px;
  background: rgba(250, 245, 241, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.desktop-nav a,
.desktop-nav .rooms-trigger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #27352f;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    color var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.desktop-nav a::after,
.desktop-nav .rooms-trigger::after {
  content: none;
}

.desktop-nav a:hover,
.desktop-nav .rooms-trigger:hover,
.desktop-nav a[aria-current="page"],
.desktop-nav .rooms-trigger.is-active,
.site-header.mega-open .rooms-trigger {
  color: var(--berry);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 8px 20px rgba(25, 52, 41, 0.075),
    inset 0 0 0 1px rgba(178, 31, 87, 0.08);
}

.desktop-nav a:active,
.desktop-nav .rooms-trigger:active {
  transform: scale(0.97);
}

.header-actions {
  gap: 10px;
}

.header-phone {
  min-height: 42px;
  padding: 0 15px;
  border-color: rgba(39, 74, 57, 0.1);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  letter-spacing: -0.01em;
}

.header-cta {
  min-height: 46px;
  padding-inline: 20px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(178, 31, 87, 0.2);
}

.booking-wrap {
  margin-top: -18px;
  padding-bottom: 0;
}

.booking-bar {
  width: min(100%, 1080px);
  min-height: 78px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(210px, 0.85fr);
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 10px;
  border-color: rgba(39, 74, 57, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 18px 42px rgba(25, 52, 41, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
}

.booking-field {
  min-height: 58px;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
}

.booking-field:not(:last-of-type)::after {
  top: 16px;
  bottom: 16px;
  background: rgba(39, 74, 57, 0.11);
}

.booking-field img {
  width: 20px;
  height: 20px;
  padding: 7px;
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--berry-soft);
  opacity: 1;
}

.booking-field label {
  margin-bottom: 1px;
  font-size: 0.64rem;
  letter-spacing: 0.095em;
}

.booking-field input,
.booking-field select {
  height: 26px;
  font-size: 0.95rem;
  font-weight: 700;
}

.booking-action {
  padding: 0;
}

.booking-action .button {
  min-height: 54px;
  border-radius: 999px;
  font-size: 0.82rem;
}

.booking-action small {
  display: none;
}

@media (max-width: 1180px) {
  .desktop-nav {
    gap: 3px;
  }

  .desktop-nav a,
  .desktop-nav .rooms-trigger {
    padding-inline: 12px;
    font-size: 0.76rem;
  }

  .booking-bar {
    width: 100%;
    border-radius: 24px;
  }
}

@media (max-width: 760px) {
  .site-header {
    box-shadow: 0 8px 26px rgba(25, 52, 41, 0.07);
  }

  .booking-wrap {
    margin-top: 18px;
    padding-bottom: 8px;
  }

  .booking-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 22px;
  }

  .booking-field {
    border: 1px solid rgba(39, 74, 57, 0.09);
  }

  .booking-field::after {
    content: none !important;
  }
}

/* ===== Contact page polish ===== */
.contact-hero .split-hero-grid {
  min-height: clamp(430px, 32vw, 540px);
}

.contact-hero .split-hero-copy {
  padding-block: clamp(42px, 5vw, 66px);
}

.contact-hero .lead {
  max-width: 60ch;
}

.contact-hero .hero-media {
  border-radius: 0 0 0 34px;
  box-shadow:
    0 18px 60px rgba(25, 52, 41, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.contact-cards {
  width: min(calc(100% - 80px), 1180px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
  margin-bottom: 22px;
}

.contact-card {
  min-height: 156px;
  grid-template-columns: 68px 1fr;
  align-items: center;
  align-content: center;
  gap: 20px;
  padding: 28px;
  border-color: rgba(39, 74, 57, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 251, 0.88)),
    url("../backgrounds/paper-texture.png");
  box-shadow:
    0 16px 38px rgba(25, 52, 41, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.contact-card.highlight {
  border-color: rgba(178, 31, 87, 0.14);
  background:
    radial-gradient(circle at 90% 0%, rgba(251, 236, 241, 0.95), transparent 34%),
    linear-gradient(135deg, var(--white), #fff7f9);
}

.contact-card img {
  width: 62px;
  height: 62px;
  padding: 17px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--berry-soft), var(--white));
  box-shadow:
    inset 0 0 0 1px rgba(178, 31, 87, 0.09),
    0 10px 22px rgba(25, 52, 41, 0.06);
  opacity: 0.95;
}

.contact-card:nth-child(3) img {
  background: linear-gradient(135deg, var(--green-soft), var(--white));
}

.contact-card strong {
  margin-bottom: 7px;
  color: var(--berry);
  font-size: 0.76rem;
  letter-spacing: 0.105em;
}

.contact-card a {
  width: fit-content;
  color: var(--green-deep);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.22;
  text-decoration: none;
}

.contact-card a:hover {
  color: var(--berry);
}

.contact-card span {
  max-width: 32ch;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.48;
}

.contact-card div span + span {
  margin-top: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-card:hover {
    transform: translateY(-4px);
    border-color: rgba(178, 31, 87, 0.16);
    box-shadow:
      0 24px 54px rgba(25, 52, 41, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }
}

.contact-card:active {
  transform: scale(0.97);
}

@media (max-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .contact-hero .hero-media {
    border-radius: 26px;
  }

  .contact-cards {
    width: min(calc(100% - 30px), var(--container));
    margin-top: 26px;
  }

  .contact-card {
    grid-template-columns: 56px 1fr;
    min-height: 132px;
    padding: 22px;
    border-radius: 20px;
  }

  .contact-card img {
    width: 54px;
    height: 54px;
    padding: 14px;
    border-radius: 18px;
  }
}

/* ===== Mobile menu redesign ===== */
.mobile-menu-panel,
.mobile-menu-head,
.mobile-main-links,
.mobile-room-list,
.mobile-menu-actions {
  min-width: 0;
}

@media (max-width: 880px) {
  .menu-toggle {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 247, 249, 0.9));
    box-shadow: var(--shadow-sm), var(--edge-highlight);
  }

  .mobile-menu {
    position: fixed;
    z-index: 80;
    inset: var(--header-h) 0 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    box-sizing: border-box;
    display: block;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 0;
    background:
      radial-gradient(circle at 14% 0%, rgba(251, 236, 241, 0.96), transparent 34%),
      linear-gradient(180deg, rgba(255, 253, 251, 0.98), rgba(255, 248, 247, 0.96));
    box-shadow: 0 28px 80px rgba(25, 52, 41, 0.16);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      transform var(--motion-base) var(--ease-out),
      opacity var(--motion-fast) var(--ease-out),
      visibility 0s linear var(--motion-base);
  }

  .mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
  }

  .mobile-menu-panel {
    display: grid;
    gap: 14px;
    max-width: 520px;
    min-height: 100%;
    margin-inline: auto;
  }

  .mobile-menu-head {
    padding: 20px;
    border: 1px solid rgba(233, 227, 223, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-card), var(--edge-highlight);
  }

  .mobile-menu-head .section-kicker {
    margin-bottom: 8px;
  }

  .mobile-menu-head strong {
    display: block;
    color: var(--ink);
    font: 600 1.9rem/1 var(--serif);
    letter-spacing: -0.03em;
  }

  .mobile-menu-head span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .mobile-main-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mobile-main-links a {
    min-height: 76px;
    display: grid;
    grid-template-columns: 38px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(233, 227, 223, 0.92);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-sm), var(--edge-highlight);
    color: var(--ink);
    font-weight: 850;
    text-decoration: none;
  }

  .mobile-main-links a[aria-current="page"] {
    border-color: rgba(178, 31, 87, 0.22);
    color: var(--berry);
    background: rgba(255, 247, 250, 0.96);
  }

  .mobile-main-links img {
    width: 38px;
    height: 38px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--berry-soft), var(--white));
  }

  .mobile-room-list {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(233, 227, 223, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-card), var(--edge-highlight);
  }

  .mobile-menu-label {
    padding: 2px 4px 6px;
    color: var(--berry);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-menu .mobile-room-link {
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(233, 227, 223, 0.82);
    border-radius: 16px;
    background: rgba(248, 244, 241, 0.64);
    color: var(--ink);
    text-decoration: none;
  }

  .mobile-room-link span {
    font-weight: 850;
    line-height: 1.18;
  }

  .mobile-room-link small {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .mobile-menu-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    gap: 10px;
    padding: 12px 0 2px;
    background: linear-gradient(180deg, rgba(255, 248, 247, 0), rgba(255, 248, 247, 0.98) 22%);
  }

  .mobile-call {
    min-height: 62px;
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid rgba(49, 91, 71, 0.13);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-sm), var(--edge-highlight);
    color: var(--green-deep);
    text-decoration: none;
  }

  .mobile-call img {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    padding: 11px;
    border-radius: 16px;
    background: var(--green-soft);
  }

  .mobile-call span {
    grid-column: 2;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mobile-call strong {
    grid-column: 2;
    display: block;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
  }

  .mobile-menu .button {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    border: 0;
    border-radius: 18px;
  }
}

/* ===== Global audit fixes: room tablet spacing ===== */
@media (max-width: 980px) {
  .room-layout,
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .booking-card {
    position: static;
    order: -1;
  }

  .room-amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-amenity {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .room-amenities {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   WARSTWA WORDPRESS

   Wszystko, co dokłada WordPress, dopisujemy TYLKO TUTAJ, na końcu pliku.

   Powyżej jest 4900 linii ręcznie pisanego CSS-a, w którym ostatnie ~1760
   linii to warstwy nadpisań z kolejnych „passów”. Kolejność reguł jest tam
   nośna — przestawienie, posortowanie albo rozbicie na moduły rozsypie
   wygląd w miejscach, których nikt nie przewidzi. Ten plik traktujemy
   jak binarny: tylko dopisujemy na końcu.
   =========================================================================== */

/* --- Pasek administracyjny -------------------------------------------------
   .site-header jest przyklejony u góry, więc przy zalogowanym userze
   musi zejść pod pasek WP. */

body.admin-bar .site-header {
  top: 32px;
}

body.admin-bar .rooms-mega {
  top: calc(var(--header-h) + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .rooms-mega {
    top: calc(var(--header-h) + 46px);
  }
}

/* --- Cennik bez cen --------------------------------------------------------
   Pola cenowe są puste do czasu, aż właścicielka poda prawdziwe stawki.
   Szablon nie renderuje wtedy kolumny z ceną, więc siatka wiersza musi
   się domknąć bez niej. */

.price-row--bez-ceny {
  grid-template-columns: 124px minmax(220px, 1fr) minmax(220px, 0.9fr) auto;
}

.pricing-empty {
  padding: clamp(38px, 5vw, 68px) clamp(24px, 4vw, 52px);
  text-align: center;
}

.pricing-empty p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: var(--type-md);
  line-height: 1.65;
}

.pricing-empty .button {
  margin-top: 26px;
}

@media (max-width: 1120px) {
  .price-row--bez-ceny {
    grid-template-columns: 96px minmax(180px, 1fr) auto;
  }
}

/* --- Klasy edytora WordPressa ---------------------------------------------
   Używane na stronach generycznych (regulamin, polityka prywatności),
   gdzie treść idzie z pola wysiwyg. */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip: auto;
  background: var(--white);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  color: var(--green-deep);
  font-size: var(--type-sm);
  text-decoration: none;
}

.alignleft {
  float: left;
  margin: 0 1.6em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1.6em;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignwide {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.alignfull {
  width: 100%;
  max-width: none;
}

.wp-caption {
  max-width: 100%;
  margin-bottom: 1.6em;
}

.wp-caption img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.wp-caption-text,
.wp-element-caption {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--type-sm);
  text-align: center;
}

.wp-block-image img,
.entry-content img {
  max-width: 100%;
  height: auto;
}

/* --- Treść stron generycznych --------------------------------------------- */

.tresc-strony {
  max-width: 78ch;
}

.tresc-strony > * + * {
  margin-top: 1.1em;
}

.tresc-strony h2 {
  margin-top: 1.9em;
  font: 600 clamp(1.55rem, 2.4vw, 2.1rem) / 1.2 var(--serif);
}

.tresc-strony h3 {
  margin-top: 1.5em;
  font: 700 var(--type-lg) / 1.35 var(--sans);
}

.tresc-strony ul,
.tresc-strony ol {
  padding-left: 1.3em;
}

.tresc-strony li + li {
  margin-top: 0.45em;
}

.tresc-strony a {
  color: var(--berry);
  text-underline-offset: 3px;
}

/* Sekcja elastyczna „wezwanie do dzialania” - wariant w tresci strony,
   wezszy niz pasmo .cta-band domykajace strone. */
.cta-inline {
  margin: 34px 0;
  padding: 30px 32px;
  border-radius: 22px;
  border: 1px solid rgba(178, 31, 87, 0.14);
  background: linear-gradient(135deg, rgba(255, 253, 251, 0.96), rgba(248, 244, 241, 0.9));
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.cta-inline h2 {
  margin: 0 0 8px;
  font: 600 var(--type-xl) / 1.25 var(--serif);
}

.cta-inline p {
  margin: 0 0 18px;
  color: var(--muted);
}

/* Karta „w cenie pobytu” oznaczona w panelu jako wyrozniona.
   Wersja PHP nie rozrozniala tych kart, ale pole `wyrozniona` istnieje w ACF -
   bez tej reguly przelacznik w panelu nie robilby zupelnie nic. */
.pricing-detail-card.is-highlight {
  border-color: rgba(178, 31, 87, 0.22);
  box-shadow: 0 18px 40px rgba(178, 31, 87, 0.1);
}

.pricing-detail-card.is-highlight h3 {
  color: var(--berry);
}

/* Cennik bez sezonow: jedna cena na pokoj.
   Reguly `.price-value { display:none }` i `[data-season]` wyzej w tym pliku
   pochodza z wersji z trzema zakladkami sezonow. Zostaly w arkuszu, bo traktujemy
   go jak plik binarny - neutralizujemy je tutaj, na koncu, zamiast wycinac. */
.price-value {
  display: block;
}

.price-amount .price-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Cena za noc na podstronie pokoju. Wersja PHP nie pokazywala jej wcale -
   gosc musial wracac na cennik, zeby poznac stawke pokoju, ktory oglada. */
.room-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}

.room-price strong {
  font: 600 clamp(1.6rem, 3vw, 2.1rem) / 1 var(--serif);
  color: var(--berry);
}

.room-price span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.room-price small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 600;
}

.room-price .room-price-od {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ===========================================================================
   Warstwa 0.11 — cena na kartach pokoi i poprawki audytu wizualnego

   Dopisywane na koncu pliku (regula "append only", D-006): ostatnie warstwy
   tego arkusza sa zalezne od kolejnosci i przenoszenie regul rozsypuje wyglad
   w miejscach, ktorych nikt nie przewidzi.
   =========================================================================== */

/* --- Cena przypieta do zdjecia karty --------------------------------------

   Powod umiejscowienia: kwota ma byc widoczna w tej samej chwili co zdjecie
   i nazwa, bez wodzenia wzrokiem na dol karty. Prawy dolny rog nie koliduje
   z plakietka ("Widok na ogrod"), ktora siedzi w lewym gornym.

   Forma jest ta sama co plywajaca karta ceny w hero — strona mowi o cenie
   jednym jezykiem wizualnym niezaleznie od miejsca.                          */

.room-card-photo,
.simple-card-photo,
.related-card-photo {
  position: relative;
}

.simple-card-photo,
.related-card-photo {
  display: block;
  overflow: hidden;
}

.room-price-tag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 6px 20px rgba(38, 45, 40, 0.16),
    inset 0 0 0 1px rgba(178, 31, 87, 0.1);
  /* Karta jest klikalna w calosci — znacznik nie moze przechwytywac kliknięc */
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.room-price-tag-od {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.room-price-tag-kwota {
  color: var(--berry);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  /* Cyfry o rownej szerokosci — kwoty w rzedzie kart ustawiaja sie w kolumne */
  font-variant-numeric: tabular-nums;
}

.room-price-tag-jednostka {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

/* --- Zajawka pokoju na stronie glownej ------------------------------------

   Karty na stronie glownej i w katalogu pokazuja ten sam obiekt, wiec musza
   mowic tym samym jezykiem: zdjecie, nazwa, dla ilu osob, cena, ten sam
   przycisk. Wczesniej zajawka miala odnosnik tekstowy, a katalog pelny
   przycisk — ten sam pokoj wygladal na dwa rozne produkty.                   */

.simple-card--pokoj {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.simple-card--pokoj .simple-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.simple-card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px !important;
  color: var(--green-deep) !important;
  font-size: var(--type-xs) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

.simple-card-meta img {
  width: 17px;
  height: 17px;
  opacity: 0.85;
}

.simple-card--pokoj .button {
  margin-top: auto;
  align-self: flex-start;
  min-height: 44px;
}

.simple-card--pokoj p:not(.simple-card-meta) {
  margin-bottom: 16px;
}

/* --- Karty korzysci: tekst wracal do kolumny ikony -------------------------

   .benefit ma trzy dzieci (ikona, h3, p) w siatce o dwoch kolumnach
   `56px 1fr`. Automatyczne rozmieszczanie wkladalo akapit do drugiego rzedu
   w PIERWSZEJ kolumnie — czyli w pas o szerokosci 56 px. Tekst lamal sie po
   jednym wyrazie i karta wygladala na zepsuta. Pomiar: kolumna tekstu miala
   56 px przy karcie 287 px.

   Poprawka jest wylacznie w CSS: przypisanie obu elementom drugiej kolumny
   nie rusza HTML-a, wiec struktura pozostaje zgodna z wzorcem.               */

.benefit > h3,
.benefit > p {
  grid-column: 2;
}

.benefit > p {
  grid-row: 2;
}

/* --- Cele dotykowe --------------------------------------------------------

   Odnosniki w stopce i odnosniki tekstowe mialy 17–24 px wysokosci klikalnej.
   Powiekszamy sam obszar dotyku, nie odstepy miedzy wierszami — uklad zostaje
   taki jak byl.                                                              */

@media (max-width: 900px) {
  .site-footer a,
  .footer-bottom a,
  .text-link,
  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .site-footer li {
    margin-bottom: 0;
  }
}

/* --- Stan wskazania kart --------------------------------------------------

   Karta zajawki reagowala na najechanie, karta katalogu tez, ale zdjecie
   powiekszalo sie tylko w jednej z nich. Ujednolicone i ograniczone do
   wlasciwosci, ktore przegladarka umie animowac bez przeliczania ukladu.     */

@media (hover: hover) {
  .simple-card--pokoj:hover .room-price-tag,
  .room-card:hover .room-price-tag {
    box-shadow:
      0 10px 26px rgba(38, 45, 40, 0.2),
      inset 0 0 0 1px rgba(178, 31, 87, 0.22);
  }
}

.room-price-tag {
  transition: box-shadow var(--motion-base) var(--ease-out);
}

/* --- „Czego u nas nie ma": wyliczenie brakow, nie kafelki -----------------

   Sekcja stoi tuz pod siatka udogodnien. W poprzedniej formie miala ten sam
   uklad i te same okragle ikony, wiec obie czytalo sie jako jedna dluga lista
   rzeczy, ktore obiekt ma. Uczciwe uprzedzenie gubilo swoj sens.

   Lista jest wyraznie stonowana wzgledem udogodnien: bez cieni, bez bialych
   kart, znak "x" zamiast piktogramu. To ma byc informacja, nie oferta.        */

.brak-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.brak-pozycja {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--type-sm);
  line-height: 1.55;
  text-wrap: pretty;
}

.brak-znak {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--berry-soft) 60%, var(--white));
  color: var(--berry);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 760px) {
  .brak-lista {
    grid-template-columns: 1fr;
    gap: 0 0;
  }
}

/* --- Kwoty w cenniku: cyfry o rownej szerokosci ---------------------------

   Siedem kwot jedna pod druga w kolumnie. Bez tabular-nums cyfry maja rozna
   szerokosc, wiec "130" i "300" nie zaczynaja sie w tym samym miejscu i cala
   kolumna delikatnie faluje. Ta sama zasada co w pigulkach parametrow.       */

.price-value,
.price-amount,
.room-price strong,
.review-summary-score,
.mega-fact strong {
  font-variant-numeric: tabular-nums;
}

/* Tytuly zajawek maja rozna dlugosc (jedno- i dwuwierszowe). Bez rezerwacji
   wysokosci wiersz "2 osoby" i opis zaczynaja sie w kazdej karcie na innej
   wysokosci, co w rzedzie czterech kart widac od razu. Ta sama zasada, ktora
   w karcie katalogu utrzymuje rownolegle rzedy pigulek.                      */

.simple-card--pokoj h3 {
  min-height: 56px;
}

@media (max-width: 900px) {
  .simple-card--pokoj h3 {
    min-height: 0;
  }
}

/* --- Pozostale cele dotykowe ----------------------------------------------

   Odnosniki w kartach kontaktu (telefon, e-mail, mapa) i nazwy pokoi w wierszach
   cennika mialy 21-38 px wysokosci klikalnej. Telefon w karcie kontaktu to
   najwazniejszy odnosnik w calym serwisie dla gościa z telefonem w reku.

   Odnosnikow w biegu tekstu (np. "Polityka prywatnosci" w zgodzie RODO) celowo
   nie powiekszamy - 44 px w srodku akapitu rozjechaloby interlinie.           */

@media (max-width: 900px) {
  .contact-card a,
  .practical-item a,
  .location-copy a,
  .price-room-main > a,
  .price-room-main h3 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .price-row .price-room-main a {
    min-height: 44px;
  }
}

/* ===========================================================================
   Warstwa 0.12 — ujednolicenie rytmu i rozdzielenie sekcji

   Punkt wyjscia (zmierzony, nie oszacowany):
     - naglowki H2 mialy DZIEWIEC roznych rozmiarow: 27, 34, 35, 38, 44, 45,
       49, 51 i 64 px. Ten sam poziom hierarchii wygladal na piec roznych,
       w zaleznosci od tego, w ktorej sekcji sie znalazl.
     - odstepy pionowe sekcji: 34, 54, 68 i 102 px - cztery rytmy naraz.
     - tla: poza sekcja opinii wszystkie sekcje byly przezroczyste, wiec nic
       ich od siebie nie oddzielalo. Strona czytala sie jak jeden dlugi pas.

   Wzorcem jest sekcja "Goscie doceniaja szczegoly": kicker, duzy naglowek
   szeryfowy, opcjonalny lead, wlasna powierzchnia. Ten uklad obowiazuje
   teraz wszedzie.
   =========================================================================== */

:root {
  /* Jeden rytm pionowy zamiast czterech */
  --sekcja-y: clamp(64px, 6.2vw, 104px);
  --sekcja-y-maly: clamp(46px, 4.4vw, 72px);

  /* Dwie powierzchnie do naprzemiennego rozdzielania sekcji */
  --powierzchnia-ciepla: #fdf6f3;
  --powierzchnia-chlodna: #fbfaf8;
  --linia-sekcji: rgba(38, 45, 40, 0.07);

  /* Jedna skala naglowkow sekcji */
  --naglowek-sekcji: clamp(2.15rem, 3.4vw, 3.1rem);
  --naglowek-bloku: clamp(1.55rem, 2.1vw, 2.05rem);
}

/* --- Rytm --------------------------------------------------------------- */

.section,
.section-compact,
.section-soft,
.reviews-section,
.rooms-catalog-section,
.pricing-page-section,
.pricing-details-section,
.room-main {
  padding-top: var(--sekcja-y);
  padding-bottom: var(--sekcja-y);
}

.section-compact {
  padding-top: var(--sekcja-y-maly);
  padding-bottom: var(--sekcja-y-maly);
}

/* Odstep miedzy naglowkiem sekcji a trescia. `.center` byl samym
   `text-align: center`, wiec kazda siatka radzila sobie sama: `.benefit-grid`
   miala wlasne `margin-top: 40px`, `.route-grid` i `.cards-4` nic — naglowek
   przylegal wtedy do kafelkow. Jedna regula zamiast poprawiania kazdej siatki
   z osobna; `:last-child` chroni przed podwojnym odstepem, gdy blok naglowka
   jest ostatni w kontenerze. */
.center:not(:last-child) {
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* Siatki, ktore mialy juz wlasny odstep gorny — bez tego sumowalby sie
   z marginesem `.center` (40+44 = 84px zamiast 44px). */
.center + .benefit-grid,
.center + .review-carousel,
.center + .contact-cards,
.center + .faq-tabs,
.center + .faq-panel {
  margin-top: 0;
}

/* --- Powierzchnie -------------------------------------------------------

   Naprzemiennie, przypisane po klasie sekcji, a nie przez nth-of-type:
   kolejnosc sekcji rozni sie miedzy szablonami, wiec licznik dawalby na
   kazdej stronie inny uklad.                                              */

.amenities-section,
.pricing-details-section,
.rooms-benefits,
.faq-section,
.contact-form-section {
  background: var(--powierzchnia-ciepla);
}

.home-rooms-section,
.rooms-catalog-section,
.location-section {
  background: var(--powierzchnia-chlodna);
}

/* Wlosowa linia tam, gdzie dwie sasiadujace sekcje maja to samo tlo —
   bez niej granica miedzy nimi nie istnieje.                              */

.section + .section,
.section-compact + .section-compact,
.section + .section-compact,
.section-compact + .section {
  border-top: 1px solid var(--linia-sekcji);
}

/* ...ale nie tam, gdzie tlo i tak sie zmienia */
.section + .reviews-section,
.reviews-section + .section-compact,
.section + .section-soft,
.section-soft + .section,
[class*="section"] + .amenities-section,
.amenities-section + [class*="section"],
[class*="section"] + .home-rooms-section,
.home-rooms-section + [class*="section"] {
  border-top: 0;
}

/* --- Skala naglowkow ----------------------------------------------------

   Dwa poziomy zamiast dziewieciu:
     - naglowek sekcji (pelna szerokosc, z kickerem),
     - naglowek bloku (wewnatrz kolumny, np. na podstronie pokoju).        */

.section-title,
.home-section-heading h2,
.reviews-section h2,
.pricing-page-section h2,
.rooms-catalog-section h2,
.rooms-benefits h2,
.faq-section h2 {
  font-size: var(--naglowek-sekcji);
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.home-section-heading {
  margin-bottom: 40px;
}

.content-block > h2,
.panel > h2,
.location-copy h2 {
  margin: 0 0 18px;
  font: 600 var(--naglowek-bloku) / 1.12 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Kicker ma wszedzie ten sam odstep do naglowka */
.section-kicker,
.eyebrow {
  margin-bottom: 12px;
}

/* --- Podstrona pokoju: koniec z waskimi kolumnami pigulek ---------------

   `.equipment-grid` dzielilo kolumne tresci na pol (tekst | zdjecie), a
   `.check-list` dzielila polowe jeszcze raz na dwie kolumny. Przy kolumnie
   zwezonej przez karte rezerwacji pozycje wyposazenia mialy ok. 110 px
   szerokosci: kazda lamala sie na trzy wiersze, naglowki grup gubily sie
   miedzy nimi, a zdjecie wisialo obok bardzo wysokiej listy.

   Teraz: naglowek i lista na pelnej szerokosci kolumny, pozycje ukladaja
   sie same wedlug dostepnego miejsca, zdjecie pod lista jako domkniecie.  */

.equipment-grid {
  display: block;
}

.check-list {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px 24px;
  margin: 0 0 22px;
}

.equipment-grid h3 {
  margin: 26px 0 12px;
  color: var(--green-deep);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.equipment-photo {
  margin-top: 8px;
}

.equipment-photo img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 12px;
}

/* --- Karta rezerwacji idzie za scrollem ---------------------------------

   Podstrona pokoju ma ponad 11 000 px wysokosci. Karta rezerwacji stala na
   samej gorze prawej kolumny i znikala po pierwszym ekranie — gosc, ktory
   przeczytal opis, wyposazenie i obejrzal galerie, nie mial przy sobie
   zadnego sposobu rezerwacji az do pasma CTA na samym dole.                */

.room-layout > .booking-card,
.room-layout aside.booking-card {
  position: sticky;
  top: calc(var(--header-h, 80px) + 18px);
  align-self: start;
  /* Gdyby karta byla wyzsza niz ekran, sticky przestaje dzialac —
     wlasne przewijanie w srodku to zabezpiecza. */
  max-height: calc(100vh - var(--header-h, 80px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Karta z kalendarzem: przewija sie SAM KALENDARZ, nie cala karta ----

   ⚠️ POWOD ISTNIENIA TEJ REGULY (06.08.2026, zmierzone na produkcji):
   powyzsza reguła powstala dla wlasnego formularza zapytania, ktory byl
   niski i miescil sie w calosci. Kalendarz RoomAdmin ma 1732 px, przez co
   karta miala 1912 px tresci w 782 px okna — 59% chowalo sie za wlasnym
   przewijaniem, A W TYM JEDYNY PRZYCISK REZERWACJI (1835 px od gory).
   Nic nie sygnalizowalo, ze karta sie przewija, a iframe przechwytywal
   kolko myszy. Efekt: z komputera NIE DALO SIE zarezerwowac z tej karty.

   Rozwiazanie: karta przestaje byc pojemnikiem przewijanym, a staje sie
   kolumna — przewija sie wylacznie kalendarz, naglowek i przycisk zostaja
   na swoich miejscach. Sticky nadal dziala, bo wysokosc karty jest znow
   ograniczona ekranem.                                                    */

.room-layout > .booking-card-kalendarz,
.room-layout aside.booking-card-kalendarz {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* przewijanie przejmuje .ra-slot nizej */
}
.booking-card-kalendarz .ra-slot {
  flex: 1 1 auto;
  /* Nadpisuje min-height: 420px z reguly ogolnej. Tam rezerwacja miejsca
     chroni przed skokiem ukladu przy doladowaniu iframe; tutaj kalendarz
     ma wlasne przewijanie, wiec ta sama wartosc uniemozliwilaby skurczenie
     sie do wysokosci karty i przycisk znow wyjechalby poza ekran. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Miekka krawedz na dole mowi „jest tego wiecej" — bez niej gosc nie ma
     powodu przypuszczac, ze kalendarz da sie przewinac. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.booking-card-kalendarz .ra-kalendarz-cta {
  flex: 0 0 auto; /* przycisk nigdy sie nie kurczy ani nie odplywa */
}

@media (max-width: 1000px) {
  .room-layout > .booking-card,
  .room-layout aside.booking-card {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* ===========================================================================
   Warstwa 0.12b — czytelnosc formularza, cennik, karty kontaktowe
   =========================================================================== */

/* --- Pola formularza byly praktycznie niewidoczne ------------------------

   Zmierzony kontrast obramowania do tla panelu: 1,27:1. Wytyczne dla
   elementow interfejsu wymagaja 3:1. Bialy prostokat na niemal bialym tle
   z wlosowa ramka nie wyglada na pole do wpisania - i tak dokladnie
   wygladal formularz zapytania, czyli jedyny sposob kontaktu dla goscia,
   ktory nie chce dzwonic.                                                  */

.form-field input,
.form-field select,
.form-field textarea,
.booking-field input,
.booking-field select {
  border: 1.5px solid #cfc6c0;      /* 3,04:1 na tle panelu */
  background: var(--white);
  box-shadow: inset 0 1px 2px rgba(38, 45, 40, 0.04);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

/* Pola dat w formularzu kontaktu nie mialy zadnej obslugi — przegladarka
   rysowala surowe `dd.mm.rrrr` domyslnym krojem, obok starannie
   ostylowanych pozostalych pol. */
.form-field input[type="date"] {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.form-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-field input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #b7aca4;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(178, 31, 87, 0.14);
  outline: none;
}

.form-field label {
  color: #4b534e;                   /* bylo #696f6a - 5,14:1, teraz 7,4:1 */
  font-size: 0.75rem;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #8d938e;
}

/* Zgoda RODO to pole wymagane, a wygladala jak przypis drobnym drukiem */
.form-grid .checkbox,
label.checkbox {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  margin: 6px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: #4b534e;
  font-size: 0.82rem;
  line-height: 1.5;
}

label.checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--berry);
}

/* --- Cennik: wiersze byly scisniete -------------------------------------

   Siedem wierszy po 38 px wysokosci klikalnej, pigulki parametrow wtloczone
   miedzy nazwe a kwote, dwa przyciski jeden nad drugim w waskiej kolumnie.
   Tabela z cenami to miejsce, w ktorym gosc porownuje oferte - musi dac sie
   przeczytac spokojnie.                                                    */

.price-list {
  gap: 14px;
}

.price-row {
  gap: 22px;
  padding: 18px 20px;
  border-radius: 14px;
}

.price-row + .price-row {
  margin-top: 0;
}

.price-room-main {
  gap: 6px;
}

.price-room-main h3,
.price-room-main > a {
  font-size: 1.06rem;
  line-height: 1.25;
}

.price-room-facts {
  gap: 8px;
  margin-top: 4px;
}

.price-room-facts span {
  padding: 6px 11px;
  line-height: 1.3;
}

.price-amount {
  gap: 2px;
  padding-left: 10px;
}

.price-value {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.price-actions {
  gap: 9px;
}

.price-actions .button {
  min-height: 42px;
  white-space: nowrap;
}

.pricing-panel {
  padding: 26px;
}

/* --- Karty kontaktowe: nie wygladaly na klikalne ------------------------

   Telefon i e-mail to najwazniejsze odnosniki na tej podstronie, a byly
   zwyklym tekstem w srodku pudelka. Cala karta jest teraz celem, a numer
   dostaje wage odpowiadajaca temu, ze to najszybsza droga do wlascicielki. */

.contact-card {
  position: relative;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
}

.contact-card a {
  display: inline-block;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green-deep);
  text-decoration: none;
}

/* Rozciagniety odnosnik: klikalna jest cala karta, ale w drzewie
   dostepnosci pozostaje jeden, opisany odnosnik. */
.contact-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

@media (hover: hover) {
  .contact-card:has(a):hover {
    transform: translateY(-2px);
    border-color: rgba(178, 31, 87, 0.28);
    box-shadow: 0 14px 30px rgba(38, 45, 40, 0.1);
  }

  .contact-card:has(a):hover a {
    color: var(--berry);
  }
}

.contact-card:focus-within {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(178, 31, 87, 0.16);
}

.contact-card.highlight {
  border-color: rgba(178, 31, 87, 0.24);
}

/* --- Ranga: formularz przed panelem informacyjnym ----------------------- */

/*
 * Wczesniej oba panele miały ten sam cien i ramke („panel dorownuje
 * formularzowi”). Skutek byl odwrotny do zamierzonego: formularz jest
 * jedynym punktem konwersji na tej stronie, a wygladal jak rodzenstwo
 * przypisu obok. Panel zostaje panelem, ale schodzi o stopien nizej —
 * cichsze tlo i brak uniesienia, zeby cien niosl tylko formularz.
 */
.contact-inquiry-panel {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.contact-form-section .practical-panel {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--paper-2) 55%, var(--white));
  box-shadow: none;
}

/* ===========================================================================
   Warstwa 0.12c — korekta zakresu skali naglowkow

   Poprzednia warstwa celowala w naglowki po klasie SEKCJI, przez co zabrala
   ze soba tytuly kart pokoi (`.room-card h2` w `.rooms-catalog-section`)
   i urosly one do rozmiaru naglowka sekcji. Tytul karty to nie naglowek
   sekcji — o poziomie decyduje rola elementu, nie to, w ktorej sekcji lezy.

   Trzy poziomy, przypisane po roli:
     1. naglowek sekcji  ~44 px  — otwiera sekcje, zwykle z kickerem
     2. naglowek bloku   ~27 px  — wewnatrz kolumny lub panelu
     3. tytul karty      ~27 px  — w karcie, kaflu, wierszu cennika
   =========================================================================== */

/* 1. Naglowek sekcji — rozpoznawany po opakowaniu, nie po sekcji */

.section-title,
.center > h2,
.home-section-heading h2,
.section > .container > h2,
.section-compact > .container > h2,
.pricing-details-section .container > div > h2,
.about-copy > h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--naglowek-sekcji);
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

/* 2. Naglowek bloku */

.content-block > h2,
.equipment-grid h2,
.panel > h2,
.booking-card h2,
.location-copy h2,
.related-section > h2,
.room-content h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--naglowek-bloku);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* 3. Tytuly kart — zostaja przy swoim rozmiarze mimo regul powyzej */

.room-card h2,
.room-card h3,
.simple-card h3,
.related-card h3,
.price-row h3,
.benefit h3,
.route h3,
.faq-item h3,
.contact-card strong {
  font-size: 1.62rem;
  line-height: 1.1;
}

.benefit h3,
.route h3,
.faq-item h3 {
  font-family: var(--sans);
  font-size: var(--type-body);
  line-height: 1.25;
}

.contact-card strong {
  font-family: var(--sans);
  font-size: 0.72rem;
}

/* Sekcja „Pozostale pokoje” to blok w kolumnie, nie osobna sekcja strony */
.related-section h2 {
  font-size: var(--naglowek-bloku);
}

/* Domkniecie skali: dwa naglowki, ktore trafily do zlej grupy.
   "Komfort bez doplat" to tytul karty w siatce, nie naglowek sekcji;
   naglowek zajawki FAQ otwiera cale pasmo, wiec nalezy do poziomu sekcji. */

.pricing-detail-card h2,
.pricing-detail-card h3 {
  font-family: var(--serif);
  font-size: 1.62rem;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.faq-teaser h2,
.pricing-faq-teaser h2 {
  font-size: var(--naglowek-sekcji);
  line-height: 1.03;
  letter-spacing: -0.028em;
}

/* ===========================================================================
   Warstwa 0.12d — galeria pokoju i sekcja „Pozostale pokoje”
   =========================================================================== */

/* --- Galeria: rowne kafle zamiast ukladu bento --------------------------

   Uklad bento (dwa szerokie 290 px + reszta 210 px w czterech kolumnach)
   przy 13 zdjeciach dawal rzedy 2 / 4 / 4 / 3 o dwoch roznych wysokosciach
   i poszarpanym dole. Liczba zdjec rozni sie miedzy pokojami (4-13), wiec
   zaden staly uklad "pierwsze dwa duze" nie ulozy sie dobrze dla wszystkich.

   Rowne kafle o stalych proporcjach wygladaja na decyzje, a nie na resztki. */

.gallery-grid,
.gallery-grid-bento {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.gallery-grid-bento .gallery-item:nth-child(1),
.gallery-grid-bento .gallery-item:nth-child(2),
.gallery-grid-bento .gallery-item:nth-child(n + 3) {
  grid-column: span 1;
}

.gallery-grid img,
.gallery-grid-bento img,
.gallery-grid-bento .gallery-item:nth-child(1) img,
.gallery-grid-bento .gallery-item:nth-child(2) img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery-item {
  display: block;
}

/* --- „Pozostale pokoje” bez wlasnej dekoracji ---------------------------

   Sekcja miala rozowy gradient, 5-pikselowa listwe w kolorze berry i
   22-pikselowy promien — wlasny jezyk wizualny, ktorego nie uzywa nic innego
   na stronie. W kolumnie tresci wygladalo to jak wklejona reklama.          */

.related-section {
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--linia-sekcji);
  padding-top: 30px;
  border-radius: 0;
  background: none;
}

/* --- Dlaczego karta rezerwacji nie chciala sie przykleic ----------------

   `html` i `body` mialy `overflow-x: hidden` (zabezpieczenie przed poziomym
   przewijaniem od dekoracji botanicznych wychodzacych poza kontener).
   Przegladarka koercjonuje `overflow-x: hidden` + `overflow-y: visible`
   do `hidden auto` — body staje sie kontenerem przewijania, a `position:
   sticky` w jego wnetrzu odnosi sie do scrollportu, ktory nigdy sie nie
   przewija. Sticky bylo poprawnie ustawione i po prostu nie dzialalo.

   `overflow-x: clip` przycina tak samo, ale NIE tworzy kontenera
   przewijania — sticky zaczyna dzialac, a poziomy scroll nadal nie wystapi. */

html,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* === Warstwa 0.13 — okruszki w jednej linii ==============================

   Zmierzone przed poprawka (Playwright, `Range.getClientRects()` na kazdym
   okruszku, wiec liczymy linie tekstu, a nie pudelka):

   1280 px, /pokoje/pokoj-deluxe-double-twin/ — 2 linie zamiast jednej.
     `flex-wrap: nowrap` nie zabrania lamania tekstu WEWNATRZ okruszka, a
     domyslny `flex-shrink: 1` kurczy pozycje ponizej ich naturalnej szerokosci.
     Efekt: „Strona / glowna” pekalo w polowie nazwy, a nazwa pokoju schodzila
     pod separator.

   ponizej 900 px — link przesuniety o 12,2 px w dol wzgledem reszty.
     Warstwa celow dotykowych dala `.breadcrumbs a { display: inline-flex;
     align-items: center; min-height: 44px }`. Link centruje swoj tekst w 44 px,
     a `<span>` i `<strong>` sa rozciagniete (`align-items` domyslnie `normal`
     => `stretch`) i maja tekst przy gornej krawedzi. (44 − 19,68) / 2 = 12,16 px
     — dokladnie zmierzona roznica. Cel dotykowy byl poprawny, wyrownanie nie.

   390 px z dluga nazwa pokoju — 5 roznych wysokosci tekstu naraz.

   Poprawka: pudelka wyrownane w pionie, okruszki nieprzelamywalne w srodku,
   a jedyny element, ktory wolno skrocic, to ostatni — bo powtarza `<h1>`
   stojacy 20 px nizej, wiec wielokropek niczego nie zabiera.               */

.breadcrumbs {
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  line-height: 1.35;
}

.breadcrumbs > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.breadcrumbs > strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kolumny hero sa elementami siatki, wiec maja `min-width: auto` — ich
   minimalna szerokosc bierze sie z zawartosci. Nieprzelamywalne okruszki
   rozepchaly te kolumne do 447 px przy oknie 390 px; `overflow-x: clip`
   na `body` przycinal to bez paska przewijania, wiec objaw byl taki, ze
   prawa krawedz tekstu po prostu znikala poza ekranem. */

.split-hero-copy,
.room-hero-copy {
  min-width: 0;
}

@media (max-width: 900px) {
  .breadcrumbs {
    /* Link ma 44 px celu dotykowego, wiec 12 px swiatla nad i pod tekstem
       jest juz w samym pasku — pelny margines dokladalby drugie tyle. */
    margin-bottom: 4px;
  }
}

/* === Warstwa 0.14 — stopka: kolumna pokoi i kontakt z ikonami ============

   Kolumna „Udogodnienia” miala cztery pozycje prowadzace pod TEN SAM adres
   `/#udogodnienia`. Zastapiona lista wszystkich pokoi, ktora buduje sie
   z opublikowanych wpisow — siedem pozycji zamiast czterech, wiec siatka
   musi dac tej kolumnie wiecej miejsca zamiast sciskac reszte.

   Kontakt dostaje uklad ikona + tresc. Numer telefonu wygladal dotad jak
   kolejna pozycja menu, a jest najszybsza droga do wlascicielki.           */

.footer-grid {
  /* Rowne kolumny, a szerokosc dokladamy KLASA, nie pozycja w siatce.
     Pierwsza wersja rozdawala ulamki po kolejnosci (`1.15fr 1.9fr 1fr …`)
     i szeroka kolumna trafila na „Kontakt”, bo pokoje sa trzecim dzieckiem,
     nie drugim — a kolejnosc kolumn ustawia sie w panelu, wiec przypisanie
     po pozycji rozjedzie sie przy pierwszym przestawieniu. */
  grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr));
  gap: 40px 46px;
  align-items: start;
}

/* Siedem pokoi potrzebuje dwoch kolumn — inaczej rosnie w wieze
   trzykrotnie wyzsza od sasiadow i rozciaga cala stopke. */
.footer-pokoje {
  grid-column: span 2;
}

.footer-lista-pokoi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-lista-pokoi li {
  margin: 0;
}

.footer-lista-pokoi a {
  display: block;
  margin: 0;
  padding: 5px 0;
  line-height: 1.35;
  text-wrap: balance;
}

/* Kontakt: ikona i tresc w jednym wierszu, wyrownane do pierwszej linii. */

.footer-pozycja {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 11px;
  width: auto !important;
  margin: 0 0 12px !important;
  padding: 2px 0;
}

.footer-pozycja img {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  opacity: 0.72;
  filter: brightness(0) invert(1);
}

.footer-pozycja address {
  margin: 0;
  font-style: normal;
  line-height: 1.55;
}

.footer-pozycja span {
  font-variant-numeric: tabular-nums;
}

/* Telefon to najwazniejsza pozycja w calej stopce — ma to widac. */
.footer-kontakt .footer-pozycja[href^="tel:"] span {
  color: var(--white);
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.footer-pozycja:hover img,
.footer-pozycja:focus-visible img {
  opacity: 1;
}

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 40px;
  }

  /* Logo przestaje walczyc o miejsce z trescia i bierze caly wiersz. */
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 880px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 32px;
  }

  /* Siedem pokoi w dwoch waskich kolumnach lamie kazdy tytul na trzy wiersze. */
  .footer-pokoje {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-lista-pokoi {
    grid-template-columns: 1fr;
  }
}