/* Nowa Prowansja - nowy wyglad. Arkusz ladowany po style.css. */

/* === TOKENY === */
:root {
  /* tla */
  --np-bg:            #f6f1e9;  /* podstawowe tlo strony i kart */
  --np-bg-alt:        #efe7da;  /* sekcje naprzemienne: oferta, galeria, opinie */
  --np-bg-card:       #f9f5ee;  /* kafle opinii - jasniejsze od tla strony */
  --np-dark:          #3d332a;  /* sekcje ciemne: restauracja, kontakt/stopka, pasek mobilny */
  --np-darker:        #2c241d;  /* tlo hero, kafle okolicy */

  /* tekst */
  --np-text:          #3a2f26;  /* body */
  --np-heading:       #4a3b2c;  /* naglowki na jasnym */
  --np-muted:         #61554a;  /* akapity i podpisy */
  --np-on-dark:       #f7f2e9;  /* naglowki na ciemnym */
  --np-on-dark-soft:  #d8cbb8;  /* akapity na ciemnym */
  --np-on-dark-link:  #e5dac7;  /* linki na ciemnym */
  --np-on-dark-dim:   #b3a693;  /* copyright, podpisy pod liczbami */

  /* akcent */
  --np-gold:          #b08a5a;  /* akcent i nadtytuly na jasnym */
  --np-gold-soft:     #a8895f;  /* nadtytul i podpisy w opiniach */
  --np-gold-light:    #c9a267;  /* akcent na ciemnym tle */
  --np-gold-pale:     #d8c6a8;  /* podkreslenia linkow, cudzyslow */

  /* linie i obramowania */
  --np-line:          #e2d7c6;  /* separatory na jasnym */
  --np-border:        #cdbda6;  /* obramowania przyciskow wtornych */

  /* przyciski glowne */
  --np-btn:           #5a4632;  /* przyciski i pozycje menu */
  --np-btn-text:      #f6f1e9;

  /* przycisk "white" — na zdjeciach i ciemnym tle */
  --np-white-line:    rgba(247, 242, 233, 0.45);
  --np-white-fill:    rgba(247, 242, 233, 0.14);  /* wypelnienia i cienkie linie na ciemnym */

  /* pasek menu */
  --np-nav-bg:        rgba(246, 241, 233, 0.94);  /* tlo paska nawigacji */
  --np-white:         #fff;     /* jezyki na zdjeciu, strzalki galerii */
  --np-nav-active:    #7a5c38;  /* pozycja biezaca */

  /* hero */
  /* Prototyp przyciemnia dwa razy: zdjecie na 0.66 + ten gradient. Ma to doliczone. */
  --np-hero-shade:    linear-gradient(180deg, rgba(44,36,29,0.51) 0%, rgba(44,36,29,0.37) 38%, rgba(44,36,29,0.62) 100%);
  --np-glass:         rgba(247,242,233,0.22);  /* tlo paska rezerwacji */
  --np-glass-line:    rgba(247,242,233,0.34);  /* obramowanie paska i ikon social */
  --np-field:         rgba(44,36,29,0.5);      /* tlo pol formularza */
  --np-field-hvr:     rgba(44,36,29,0.74);     /* pole po najechaniu — daty czytelniejsze */

  /* ruch */
  --np-ease:          cubic-bezier(.22, .61, .36, 1);

  /* typografia */
  --np-serif:  'Cormorant Garamond', Georgia, serif;
  --np-sans:   'Jost', Helvetica, Arial, sans-serif;

  /* siatka */
  --np-max:      1240px;  /* maksymalna szerokosc kontenera */
  --np-gutter:   28px;    /* padding boczny kontenera */
  --np-section:  118px;   /* pionowy padding sekcji */
  --np-control:  50px;    /* wysokosc wszystkich przyciskow i pol */
}

/* Mostek do starych zmiennych ze style.css. */
:root {
  --beutyFont:   var(--np-serif);
  --regularFont: var(--np-sans);
  --fontColor:   var(--np-text);
  --siteWidth:   var(--np-max);
  --btnRezHvr:   var(--np-gold);

  /* Pionowy rytm sekcji uzywany przez style.css. */
  --spacing:     var(--np-section);
}

/* === RESET I TYPOGRAFIA === */
body {
  background: var(--np-bg);
  font-family: var(--np-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--np-text);
}

h1, h2, h3, h4, .beutyFont {
  margin: 0;
  font-family: var(--np-serif);
  font-weight: 400;
  color: var(--np-heading);
}

h1, h2 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* === ELEMENTY WSPOLNE (kontener, naglowki, przyciski) === */

/* Kontener tresci. Szerokosc bierze sie z --siteWidth (mostek na --np-max). */
.siteWidth {
  padding: 0 var(--np-gutter);
}

/* Pionowy rytm sekcji - 128 wewnatrz, 192 miedzy trescia sasiadow. */
article > section {
  padding: var(--np-section) 0;
  margin-top: calc(var(--np-section) / -2);
}

/* Wyrownanie ujemnego marginesu pierwszej sekcji. */
/* article {
  padding-top: calc(var(--np-section) / 2);
} */

/* Strona silnika nie ma hero - ten padding pokazywal tylko pasek tla nad widgetem. */
.body-pluginident-HotelSystemsBooking .articleContent {
  padding-top: 0;
}

/* Sekcja "jedno zdjecie" nie ma paddingu, wiec nie ma na co nachodzic. */
article > section.oneImage {
  margin-top: 0;
  margin-bottom: calc(var(--np-section) / 2);
}

/* Naglowek sekcji: nadtytul (.titleInfo) nad naglowkiem (.beutyFont). */
.contentTitle {
  padding-bottom: 48px;
}

.contentTitle .titleInfo {
  margin-bottom: 18px;
  font-family: var(--np-sans);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--np-gold);
}

/* Naglowki bez wersalikow i rozstrzelenia. */
.contentTitle .beutyFont {
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: var(--np-heading);
}

/* Przycisk - takze "Rezerwuj" w menu i w silniku rezerwacji. */
.button,
.mainMenu > li.last > a,
.mainHeader .buttonReservation {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--np-control);
  height: var(--np-control);
  padding: 0 26px;
  border: 1px solid var(--np-btn);
  border-radius: 0;
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--np-btn);
  color: var(--np-btn-text);
  transition: color .45s ease, border-color .45s ease;
}

/* Zloty pasek wjezdzajacy od lewej przy najechaniu. */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--np-gold);
  transition: transform .45s var(--np-ease);
}

/* Czesc przyciskow ma tekst w <span> — musi zostac nad paskiem. */
.button > span {
  position: relative;
  z-index: 1;
}

.button:hover {
  border-color: var(--np-gold);
  background: var(--np-btn);
  color: var(--np-btn-text);
}

.button:hover::before {
  transform: scaleX(1);
}

/* "Rezerwuj" - hover braz na zloto, bez wjazdu od lewej. */
.mainMenu > li.last > a,
.mainHeader .buttonReservation,
.roomsMain .rezBtn,
#sideBar .rezBtn {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}

.mainMenu > li.last > a::before,
.mainHeader .buttonReservation::before,
.roomsMain .rezBtn::before,
#sideBar .rezBtn::before {
  content: none;
}

/* Ramka zostaje brazowa — na zlotym tle robi sie widoczna. */
.mainMenu > li.last > a:hover,
.mainHeader .circleBooking:hover .buttonReservation,
.roomsMain .roomsDescription .rezBtn:hover,
#sideBar .rezBtn:hover {
  border-color: var(--np-btn);
  background: var(--np-gold);
  color: var(--np-btn-text);
}

/* style.css daje "Rezerwuj" w kartach bialy tekst, a ponizej 980 px zlota ramke. */
.roomsMain .roomsDescription .buttonWrapper .button.rezBtn {
  border-color: var(--np-btn);
  color: var(--np-btn-text);
}

/* Hover kafli ze zdjeciem: rusza sie samo zdjecie, kafel stoi. */
.sectionGallery.wsekcji .galleryGrid .galleryPicture img,
.np-tile__image,
.sectionSimple .imageSlider .sectionImage {
  transition: transform 1s var(--np-ease);
}

.sectionGallery.wsekcji .galleryPicture:hover img,
.np-tile:hover .np-tile__image,
.sectionSimple .imageSlider .sectionImageWrapper:hover .sectionImage {
  transform: scale(1.04);
}

/* === HEADER I MENU === */

/* Pasek nawigacji. Selektor z .mainHeader bije `.act .header-middle` ze style.css. */
.mainHeader .header-middle {
  border-bottom: 1px solid var(--np-line);
  background: var(--np-nav-bg);
  backdrop-filter: blur(8px);
}

/* Wnetrze paska: logo z lewej, nawigacja i CTA dosuniete do prawej.
   Padding 9 px zamiast 12 - wyzsze logo miesci sie bez rosniecia paska. */
.mainNav {
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 9px var(--np-gutter);
}

.mainNav #nav {
  width: 100%;
}

.mainMenu {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-top: 0;
}

/* Rozpychacz miedzy logo a reszta menu. */
.mainMenu > li.first {
  margin-left: auto;
}

/* style.css spycha pozycje o 10px w dol — psuje to wysrodkowanie w pasku. */
.mainMenu > li:not(.logoLi) {
  margin-top: 0;
}

/* Komorka logo trzyma szerokosc wiekszego boksu i wyrownuje go do lewej (.logoLi jest kolumna),
   inaczej zwijanie logo przesuwa cale menu i zweza przycisk "Rezerwuj". */
.mainMenu > li.logoLi {
  flex: 0 0 182px;
  align-items: flex-start;
}

/* Logo w pasku - bialy boks odcina je od kremowego tla paska.
   Pionowy padding i ujemny margines rowne paddingowi .mainNav: boks siega krawedzi paska. */
.logoLi .logo {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: -9px 0;
  padding: 9px 16px;
  background: var(--np-white);
}

.logoLi .logo img {
  display: block;
  height: 68px;
  width: auto;
  transition: height .3s ease;
}

/* Przed przewinieciem logo jest wieksze i boks wystaje 27 px pod pasek.
   Ujemny dolny margines zdejmuje ten nadmiar z ukladu, wiec pasek nie rosnie. */
.mainHeader:not(.act) .logoLi .logo {
  margin: -9px 0 -37px;
  padding: 12px 16px;
}

.mainHeader:not(.act) .logoLi .logo img {
  height: 90px;
}

/* Ikona fontello nad pozycjami menu - ze starego motywu. */
#nav a:not(.suba)::before {
  content: none;
}

.mainNav a {
  position: relative;
  padding: 4px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--np-btn);
}

/* Podkreslenie pozycji menu. */
.mainNav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--np-gold);
  transition: transform .3s ease;
}

.mainNav a:hover::after,
.mainMenu > li.act > a::after {
  transform: scaleX(1);
}

.mainMenu > li.act > a {
  color: var(--np-nav-active);
}

/* Logo i przycisk "Rezerwuj" podkreslenia nie dostaja. */
.logoLi .logo::after,
.mainMenu > li.last > a::after {
  content: none;
}

/* Ostatnia pozycja menu to "Rezerwuj". */

/* Przelacznik jezyka pod logo, na zdjeciu hero.
   left i margin-top wysrodkowuja go pod wystajacym boksem logo (po przewinieciu boks znika razem z jezykami). */
.mainMenu > li.langsContainer {
  position: absolute;
  top: 100%;
  left: 67px;
  width: 104px;
  margin-top: 40px;
  transition: opacity .3s ease;
}

/* Ponizej 1290 px style.css odsuwa logo o 20 px od lewej - jezyki jada za nim. */
@media (max-width: 1290px) {
  .mainMenu > li.langsContainer {
    left: 87px;
  }
}

.langsContainer .langs {
  justify-content: center;
  gap: 10px;
}

/* Jezyki na zdjeciu - biale napisy. */
.langsContainer a {
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--np-white);
}

/* Podkreslenie dziedziczy mechanizm z pozycji menu, tylko w bieli. */
.langsContainer a::after {
  background: var(--np-white);
}

.langsContainer a:hover::after,
.langsContainer .currentLang a::after {
  transform: scaleX(1);
}

.act .langsContainer {
  opacity: 0;
  pointer-events: none;
}

/* Hero ma wlasna kopie przelacznika — zostawiamy jedna, w pasku. */
.langsHeader {
  display: none;
}

/* Pasek po przewinieciu (.act) wyglada tak samo jak przed. */
.act .logoLi .logo .logoStandard {
  display: block;
}

.act .mainMenu > li {
  margin-top: 0;
}

/* Jezyki maja zaniknac w miejscu - bez tego regula wyzej zdejmuje im margines i skacza w gore, zanim znikna. */
.act .mainMenu > li.langsContainer {
  margin-top: 40px;
}

/* Bez tego pasek rosnie po przewinieciu o 8px (style.css daje logo 70px). */
.act .mainMenu > li.logoLi {
  height: auto;
}

.act .mainNav .mainMenu > li > a {
  color: var(--np-btn);
}

.act .mainNav .mainMenu > li.act > a {
  color: var(--np-nav-active);
}

.act .mainNav .mainMenu > li.last > a {
  color: var(--np-btn-text);
}

/* Menu mobilne - obszar pod paskiem mobilnym (60px). */
#mobileMenu {
  top: 60px;
  right: 0;
  left: 0;
  z-index: 90;
  width: 100%;
  height: calc(100% - 60px);
  padding: 0 28px 28px;
  overflow-y: auto;
  background: var(--np-white);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

#mobileMenu.showMenu {
  opacity: 1;
  pointer-events: auto;
}

/* Pierwsza pozycja styka sie z dolna krawedzia paska mobilnego. */
#mobileMenu #navigation {
  padding-top: 0;
}

#mobileMenu #navigation li {
  border-top: 1px solid var(--np-line);
  text-align: center;
}

/* Pozycje menu mobilnego — krój i stopien pisma jak w pasku nawigacji. */
#mobileMenu #navigation li a {
  padding: 14px 0;
  font-family: var(--np-sans);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-btn);
}

/* Biezaca zakladka — zlote tlo zamiast bordowego ze starego motywu. */
#mobileMenu #navigation li.act {
  background: var(--np-gold);
}

#mobileMenu #navigation li.act a {
  color: var(--np-btn-text);
}

/* Burger 50x50, bez obrysu. Flex, bo pasek go inaczej sciska ponizej 50px. */
.mobileBar .hamburger {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--np-control);
  height: var(--np-control);
  padding: 0;
  border: 0;
}

/* Wybrany jezyk w pasku mobilnym — zlota kreska, jak w menu na hero. */
.mobileBar .langsMobile .currentLang a {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--np-gold);
}

/* "Rezerwuj" w pasku dolnym w kolorze przycisku z menu desktopowego. */
.bottomNavMobile .rezerwujMobile {
  background: var(--np-btn);
  color: var(--np-btn-text);
}

/* === HERO === */

/* Hero odsuniete o wysokosc paska menu (--np-chrome z JS). */
.mainHeader .hero {
  height: calc(100svh - var(--np-chrome, 88px));
  margin-top: var(--np-chrome, 88px);
  align-items: flex-end;
  overflow: hidden;
  background: var(--np-darker);
}

.mainHeader .slider-container,
.mainHeader .slide,
.mainHeader .slick-list,
.mainHeader .slick-track,
.mainHeader .sliderImage {
  height: 100%;
}

/* Podstrony: hero z paskiem menu zajmuje 90% ekranu. */
.body-nomain .mainHeader .hero {
  height: calc(90svh - var(--np-chrome, 88px));
}

/* Na mobile zdjecie konczy sie dokladnie na dolnym pasku (60 px, hamburger.css). */
@media (max-width: 980px) {
  .mainHeader .hero,
  .body-nomain .mainHeader .hero {
    height: calc(100svh - var(--np-chrome, 88px) - 60px);
  }

  /* Element z backdrop-filter jest ukladem odniesienia dla #mobileMenu (position: fixed),
     a na mobile pasek ma 1 px wysokosci - menu dostawalo z tego 1 px zamiast pelnego ekranu. */
  .mainHeader .header-middle {
    backdrop-filter: none;
  }

  /* Zapas na dolny pasek, zeby ostatnia pozycja nie chowala sie pod nim na niskich ekranach. */
  #mobileMenu {
    padding-bottom: 88px;
  }
}

/* style.css tnie zdjecie na podstronach do 90vh - ma wypelniac hero. */
body:not(.body-layout-home) .mainHeader .sliderImage {
  max-height: none;
}

/* Stare minimum 640 px rozpychalo naglowek na niskim oknie - hero liczy wysokosc samo. */
.mainHeader .sliderImage,
header.mainHeader:not(.sliderOff) {
  min-height: 0;
}

/* Kontener zdjec wyzszy niz hero - zapas na parallax. */
.mainHeader .mainSlider {
  height: calc(100% + 14vh);
  margin-top: -12vh;
}

/* Przyciemnienie zdjecia — style.css ma tu wlasny gradient, podmieniamy go. */
.mainHeader .sliderImage::before {
  background: var(--np-hero-shade);
}

/* Najazd kamery na aktywnym slajdzie. */
.mainHeader .sliderImage.slick-active {
  transform-origin: 52% 55%;
  animation: npKen 18s linear infinite alternate both;
}

/* Tresc hero siedzi przy dolnej krawedzi, w kontenerze o szerokosci strony. */
.mainHeader .heroTitle {
  top: auto;
  bottom: clamp(24px, 12vh, 172px);
  left: 50%;
  width: 100%;
  max-width: var(--np-max);
  padding: 0 var(--np-gutter);
  transform: translateX(-50%);
  text-align: left;
}

/* Nadtytul nad naglowkiem hero - trzecia czesc name_full z CMS. */
.mainHeader .heroTitle .heroEyebrow {
  margin-bottom: clamp(10px, 2.4vh, 26px);
  font-family: var(--np-sans);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--np-gold-pale);
}

.mainHeader .heroTitle .beutyFont {
  font-size: clamp(38px, min(8vw, 11vh), 116px);
  font-weight: 300;
  line-height: 1;
  color: var(--np-on-dark);
}

/* Druga czesc nazwy strony (po znaku |) jest w hero leadem, nie nadtytulem. */
.mainHeader .heroTitle .titleInfo {
  max-width: 46ch;
  margin-top: 18px;
  font-family: var(--np-sans);
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: normal;
  text-transform: none;
  color: var(--np-on-dark-soft);
}

/* Pasek rezerwacji z silnika. Szerokosc dobrana tak, zeby pola dat nie byly dwa razy szersze od przycisku. */
.mainHeader .rezForm {
  width: 100%;
  min-width: 0;
  max-width: 520px;
  margin: 28px 0 0;
}

.act .mainHeader .rezForm,
.mainHeader .rezForm {
  margin-top: 28px;
}

.mainHeader .data-picker-rez {
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto;
  gap: 1px;
  border: 1px solid var(--np-glass-line);
  background: var(--np-glass);
  backdrop-filter: blur(10px);
}

/* Jeden rzad: przyjazd, wyjazd, przycisk. */
.mainHeader .data-picker-rez .inputRezIn {
  grid-row: 1;
  grid-column: 1 / 2;
}

.mainHeader .data-picker-rez .inputRezOut {
  grid-row: 1;
  grid-column: 2 / 3;
}

.mainHeader .data-picker-rez .circleBooking {
  grid-row: 1;
  grid-column: 3 / 4;
  height: var(--np-control);
}

.mainHeader .data-picker-rez .inputRez {
  height: var(--np-control);
  padding: 0 18px;
  background: var(--np-field);
  transition: background-color .35s ease;
}

/* Po najechaniu pole ciemnieje — data i etykieta wychodza mocniej ze zdjecia. */
.mainHeader .data-picker-rez .inputRez:hover {
  background: var(--np-field-hvr);
}

/* Szerokosc przycisku z tresci i paddingu, jak w pasku menu. */
.mainHeader .circleBooking {
  min-width: 0;
}

/* Widget ma w nazwach klas "circle" — w tym projekcie nic nie jest zaokraglone. */
.mainHeader .rezForm .circle,
.mainHeader .rezForm .circleBooking {
  border-radius: 0;
}

/* Wnetrze pola daty - etykieta, dzien i miesiac w jednej linii. */
.mainHeader .day-and-month {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
}

.mainHeader .be-caption {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-gold-light);
}

/* Srodek, nie baseline: etykieta i miesiac maja stac na osi duzej liczby dnia. */
.mainHeader .date-wrapper {
  flex-direction: row;
  align-items: center;
  gap: 3px;
  color: var(--np-on-dark);
}

/* Dzien tym samym krojem co reszta paska. */
.mainHeader .date-wrapper .dd,
.mainHeader .date-wrapper .mm {
  margin: 0;
  font-family: var(--np-sans);
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}

/* Sam numer dnia wyrozniony - miesiac zostaje przy reszcie pola. */
.mainHeader .date-wrapper .dd {
  font-size: 26px;
  color: var(--np-gold-light);
}

/* Pasek pod trescia hero. */
.mainHeader .headerFooter {
  bottom: 0;
}

.mainHeader .localizationWrapper {
  position: static;
  transform: none;
}

/* "Przewin" - podpis i grot nad dolna krawedzia hero. */
.mainHeader .scrollDown {
  position: absolute;
  top: auto;
  bottom: 18px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  animation: none;
  color: var(--np-white);
}

.mainHeader .scrollDown::before {
  content: none;
}

/* style.css obraca kazdy span w .scrollDown o -90 stopni. */
.mainHeader .scrollDownLabel {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  transform: none;
}

.mainHeader .scrollDownArrow {
  display: block;
  animation: npBounce 2.2s ease-in-out infinite;
}

/* Ikony social w linii z dolna krawedzia paska rezerwacji. */
.mainHeader .socialMediaHeader {
  right: var(--np-gutter);
  bottom: clamp(24px, 12vh, 172px);
}

.mainHeader .socialMediaHeader a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--np-control);
  height: var(--np-control);
  border: 1px solid var(--np-glass-line);
  border-radius: 50%;
  color: var(--np-on-dark);
}

.mainHeader .socialMediaHeader a svg {
  display: block;
}

.mainHeader .socialMediaHeader a:hover {
  border-color: var(--np-gold-light);
}

/* === SEKCJE TRESCI (O NAS, RESTAURACJA) === */
/* Sekcje tresci: onlyTwo.tpl (kolaz) i sekcja.tpl (jedno zdjecie). */
.section.sectionSimple .sectionRow {
  gap: 64px;
  align-items: stretch;
}

/* Tekst wysrodkowany wzgledem zdjec, bez bezowego tla ze starego motywu. */
.section.sectionSimple .sectionSide.sectionContent {
  justify-content: center;
  padding: 0;
  background: none;
}

.section.sectionSimple .sectionRow .sectionSlider {
  max-width: none;
}

.sectionSimple .contentTitle {
  padding-bottom: 28px;
}

.sectionSimple .sectionSide.sectionContent p {
  max-width: 62ch;
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--np-muted);
}

/* Tekst ciagly z CMS — stary motyw rozstrzeliwal go o 0.08em z <section>. */
.sectionSimple .sectionSide.sectionContent p,
.sectionSimple .sectionSide.sectionContent li {
  letter-spacing: normal;
}

/* Sekcja z samym tekstem - akapit bierze cala szerokosc kolumny, tak jak naglowek.
   Limit 62 ch jest dla sekcji, gdzie tekst stoi obok zdjecia.
   text-wrap: pretty wyrownywalo dlugosc ostatniej linii i lamalo tekst 190 px przed krawedzia. */
.sectionSimple.Text .sectionSide.sectionContent p {
  max-width: none;
  text-wrap: wrap;
}

/* Kolaz zdjec - wymiary z projektu (300 + 210 + 16 gap). */
.sectionSimple .imageSlider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(300px, 1.43fr) minmax(210px, 1fr);
  gap: 16px;
  height: 100%;
}

.sectionSimple .imageSlider .sectionImageWrapper {
  position: relative;
  overflow: hidden;
}

.sectionSimple .imageSlider .sectionImageWrapper:first-child {
  grid-column: span 2;
}

.sectionSimple .imageSlider .sectionImageWrapper:only-child {
  grid-row: span 2;
}

/* Sekcja z jednym zdjeciem - padding na kolumnie tekstu. */
.section.sectionSimple.oneImage {
  padding: 0;
}

.section.sectionSimple.oneImage .siteWidth {
  padding: 0;
}

/* Ponizej 980 px style.css zeruje padding kolumnie sekcji .Text (z !important),
   wiec margines boczny musi dac kontener. */
@media (max-width: 980px) {
  .section.sectionSimple.oneImage.Text .siteWidth {
    padding: 0 var(--np-gutter);
  }
}

/* Wszystkie sekcje "jedno zdjecie" tej samej wysokosci, wzorem tej ze strony glownej. */
.section.sectionSimple.oneImage .sectionRow {
  gap: 0;
  min-height: 720px;
}

/* Sekcja "tylko tresc" nie renderuje kadru, wiec nie ma czego wyrownywac do 720 px. */
.section.sectionSimple.oneImage.Text .sectionRow {
  min-height: 0;
}

/* style.css zeruje pionowy padding kolumnie (.Text .sectionSide, z !important) — oddech daje sekcja. */
.section.sectionSimple.oneImage.Text {
  padding: var(--np-section) 0;
}

/* Pod tekstem na /pokoje stoi lista pokoi z wlasnym paddingiem - drugi rytm byl za duzy. */
.body-ident-pokoje .articleContent > section.sectionSimple.oneImage.Text {
  padding-bottom: 0;
}

/* Pionowy padding jest tylko zapasem - tekst i tak stoi na srodku kolumny.
   Od strony zdjecia szerszy odstep, przy 28 px tekst dotykal kadru. */
.section.sectionSimple.oneImage .sectionSide.sectionContent {
  padding: 48px var(--np-gutter) 48px 64px;
}

.section.sectionSimple.oneImage.reverse .sectionSide.sectionContent {
  padding: 48px 64px 48px var(--np-gutter);
}

/* Jedno zdjecie - siatka kolazu jest tu niepotrzebna, a kadr ma swoje minimum. */
.section.sectionSimple.oneImage .imageSlider {
  display: flex;
  min-height: 600px;
}

.section.sectionSimple.oneImage .imageSlider .sectionImageWrapper {
  flex: 1;
}

@media (max-width: 980px) {
  /* style.css uklada tu kolumny jedna pod druga - tekst wraca na zwykly margines,
     a wysokosc liczy sie ze zdjecia i tekstu, nie ze wspolnego minimum. */
  .section.sectionSimple.oneImage .sectionRow {
    min-height: 0;
  }

  .section.sectionSimple.oneImage .sectionSide.sectionContent,
  .section.sectionSimple.oneImage.reverse .sectionSide.sectionContent {
    padding: var(--np-section) var(--np-gutter);
  }

  /* Na niskim ekranie kadr schodzi ponizej 600 px, zeby nie byl wyzszy niz on sam. */
  .section.sectionSimple.oneImage .imageSlider {
    min-height: min(600px, 80svh);
  }

  /* style.css doklada tu 72 px nad tytulem (z !important) — oddech daje juz padding sekcji. */
  .section.sectionSimple.Text .contentTitle {
    padding-top: 0 !important;
  }
}

/* Absolutne, zeby naturalna wysokosc zdjecia nie rozpychala wierszy siatki. */
.sectionSimple .imageSlider .sectionImage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Przycisk na srodku duzego zdjecia w kolazu. */
.sectionSimple .imageSlider .buttonWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

/* Statystyki — markup w sekcja.tpl, liczby animuje js/nowa-prowansja.js. */
.np-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.np-stats strong {
  display: block;
  font-family: var(--np-serif);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  color: var(--np-gold);
}

.np-stats span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--np-muted);
}

/* Wariant ciemny (restauracja). */
.sectionSimple.dark {
  background: var(--np-dark);
}

.sectionSimple.dark .contentTitle .titleInfo {
  color: var(--np-gold-light);
}

.sectionSimple.dark .contentTitle .beutyFont {
  color: var(--np-on-dark);
}

.sectionSimple.dark .sectionSide.sectionContent p {
  color: var(--np-on-dark-soft);
}

.sectionSimple.dark .np-stats strong {
  color: var(--np-gold-light);
}

.sectionSimple.dark .np-stats span {
  color: var(--np-on-dark-dim);
}

/* Przycisk obrysowy na tle: "Szczegoly", "Zobacz wszystkie", "Czytaj wiecej". */
.button.btnBorder {
  border-color: var(--np-border);
  background: transparent;
  color: var(--np-btn);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.button.btnBorder::before {
  content: none;
}

.button.btnBorder:hover {
  border-color: var(--np-border);
  background: transparent;
  color: var(--np-btn);
}

/* Ramka "doladowuje sie" od lewej. */
.button.btnBorder::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--np-btn);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s var(--np-ease);
}

.button.btnBorder:hover::after {
  clip-path: inset(0 0 0 0);
}

/* Ten sam przycisk w karcie pokoju — style.css maluje tam tekst na bialo. */
.roomsDescription .button.btnBorder {
  color: var(--np-btn);
}

/* Przycisk "white" - na ciemnym tle i na zdjeciach. */
.button.white,
.sectionSimple.dark .button,
.sectionSimple .imageSlider .button,
.sectionSeparator .button {
  border-color: var(--np-white-line);
  background: transparent;
  color: var(--np-on-dark);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

/* Bez zlotego paska wjezdzajacego od lewej — ten zostaje przyciskom rezerwacji. */
.button.white::before,
.sectionSimple.dark .button::before,
.sectionSimple .imageSlider .button::before,
.sectionSeparator .button::before {
  content: none;
}

.button.white:hover,
.sectionSimple .imageSlider .button:hover,
.sectionSeparator .button:hover {
  border-color: var(--np-white-line);
  background: var(--np-white-fill);
  color: var(--np-on-dark);
}

/* Na ciemnym tle (nie na zdjeciu) ramka robi sie pelna zamiast wypelnienia. */
.sectionSimple.dark .button:hover {
  border-color: var(--np-white-line);
  background: transparent;
  color: var(--np-on-dark);
}

.sectionSimple.dark .button.btnBorder::after {
  border-color: var(--np-on-dark);
}

/* === SEKCJA SEPARATOR (pas zdjecia z tekstem po lewej) === */

/* Zdjecie idzie przez cala szerokosc ekranu, wiec sekcja nie ma wlasnego paddingu. */
.section.sectionSimple.sectionSeparator {
  padding: 0;
}

article > section.sectionSeparator {
  margin-top: 0;
  margin-bottom: calc(var(--np-section) / 2);
}

.sectionSeparator .sectionImageWrapper {
  position: relative;
}

/* Bez tego zdjecie zostaje przy swoich 1920 px i wychodzi poza ekran. */
.sectionSeparator .sectionImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Przyciemnienie od lewej - pod tekstem ciemno, prawa czesc zdjecia odslonieta. */
.sectionSeparator .sectionImageWrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, rgba(44, 36, 29, 0.82) 0%, rgba(44, 36, 29, 0.62) 38%, rgba(44, 36, 29, 0.12) 100%);
}

/* Stara rownomierna nakladka ze style.css - zastapil ja gradient wyzej. */
.sectionSeparator .sectionSlider .sectionContent::after {
  content: none;
}

/* Tresc trzyma sie siteWidth zamiast starych 700 px. */
.sectionSeparator:not(.contentCenter) .sectionContent {
  max-width: var(--np-max);
}

.sectionSeparator .sectionContent .sectionSide {
  align-items: flex-start;
  padding: var(--np-section) var(--np-gutter);
  text-align: left;
}

.sectionSeparator .contentTitle .titleInfo {
  color: var(--np-gold-pale);
}

.sectionSeparator .sliderContent {
  max-width: 48ch;
  padding-bottom: 32px;
  font-size: 18px;
  line-height: 1.75;
}

/* === POKOJE === */

/* Naglowek jak w galerii: tytul przy lewej, reszte szerokosci bierze kreska. */
.roomsMain .contentTitle {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr);
  align-items: baseline;
  column-gap: 20px;
  padding-bottom: 56px;
  text-align: left;
}

.roomsMain .contentTitle .titleInfo {
  grid-area: 1 / 1;
}

.roomsMain .contentTitle .beutyFont {
  grid-area: 2 / 1;
  text-align: left;
}

.roomsMain .contentTitle::after {
  content: "";
  grid-area: 2 / 2;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 138, 90, 0.5), rgba(176, 138, 90, 0));
}

/* Podstrona pokoi ma .siteWidth dwa razy - zerujemy boczny padding. */
.roomsSection .roomsWrapper.siteWidth {
  padding-right: 0;
  padding-left: 0;
}

/* Karta: zdjecie i panel opisu, bez odstepu miedzy nimi. */
.roomsMain .roomWrapper {
  display: grid;
  grid-template-columns: 1.55fr minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
  text-align: left;
  background: var(--np-bg-card);
}

/* Przyciemniajaca warstwa ze style.css - lapala kliki w strzalki. */
section.roomsMain .imageMediaWrapper::before {
  content: none;
}

/* style.css trzyma tu sztywne 600px wysokosci. */
section.roomsMain .imageMediaWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Galeria zdjec pokoju w karcie (podstrona). */
#rooms .roomGallery,
#rooms .roomGallery .slick-list,
#rooms .roomGallery .slick-track,
#rooms .roomGallery .slick-slide,
#rooms .roomGallery .slick-slide > div {
  height: 100%;
}

/* Strzalki galerii leza na zdjeciu — biale i odsuniete od krawedzi. */
.roomsSection .roomGalleryArrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--np-control);
  height: var(--np-control);
  transform: translateY(-50%);
  border: 1px solid var(--np-white-line);
  background: var(--np-field);
  color: var(--np-white);
}

.roomsSection .prevSlide.roomGalleryArrow {
  left: 20px;
}

.roomsSection .nextSlide.roomGalleryArrow {
  right: 20px;
}

.roomsSection .roomGalleryArrow::before {
  width: auto;
  height: auto;
  font-family: var(--np-sans);
  font-size: 20px;
}

.roomsSection .prevSlide.roomGalleryArrow::before {
  content: "\2039";
}

.roomsSection .nextSlide.roomGalleryArrow::before {
  content: "\203A";
}

/* Panel opisu - druga kolumna karty. */
.roomsMain .roomsDescription {
  position: static;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 22px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 48px 44px;
  border-bottom: 0;
}

/* Stary motyw dawal kazdemu blokowi w panelu 33% wysokosci. */
.roomsMain .roomsDescription > div {
  flex: 0 0 auto;
}

.roomsMain .roomName {
  font-family: var(--np-serif);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--np-heading);
}

/* Skrocony opis pokoju z CMS, pod nazwa. */
.roomsMain .roomDesc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--np-muted);
}

/* Udogodnienia z CMS: liczba osob i metraz. */
.roomsMain .roomsDescription .roomInfo {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 26px;
  opacity: 1;
  visibility: visible;
}

.roomsMain .roomInfo div {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--np-muted);
}

/* Margines zamiast gapu — inaczej "m" i indeks gorny rozjezdzaja sie. */
.roomsMain .roomInfo i {
  margin-right: 10px;
  font-size: 15px;
  color: var(--np-gold);
}

/* Ikona "Sniadanie w cenie" — SVG z handoffu zamiast ikony z fontu. */
.roomsMain .roomInfo .roomInfoIcon {
  flex-shrink: 0;
  margin-right: 14px;
  color: var(--np-gold);
}

/* Projekt pokazuje cztery udogodnienia — reszta nie zmiescilaby sie w panelu. */
.roomsMain .roomsDescription .roomInfo div:nth-child(n+5) {
  display: none;
}

/* Cena: etykieta i "/ noc" drobne, kwota serif przy tej samej linii pisma. */
.roomsMain .roomsDescription .roomPrice {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--np-line);
  font-size: 14px;
  color: var(--np-muted);
}

.roomsMain .roomPrice strong {
  font-family: var(--np-serif);
  font-size: 54px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--np-heading);
}

.roomsMain .roomsDescription .buttonWrapper {
  justify-content: flex-start;
  gap: 14px;
  margin-top: auto;
}

/* style.css maluje "Rezerwuj" starym bordowym --dark-color. */
.roomsMain .roomsDescription .rezBtn {
  background: var(--np-btn);
  color: var(--np-btn-text);
}

/* Pasek pod karta: strzalki i licznik z lewej, przycisk z prawej. */
.roomsMain .roomsArrows {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.roomsMain .roomsArrows .prevSlide,
.roomsMain .roomsArrows .nextSlide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--np-control);
  height: var(--np-control);
  border: 1px solid var(--np-border);
  color: var(--np-btn);
}

/* Chevron zamiast glifu fontello. */
.roomsMain .roomsArrows .prevSlide::before,
.roomsMain .roomsArrows .nextSlide::before {
  width: auto;
  height: auto;
  font-family: var(--np-sans);
  font-size: 20px;
}

.roomsMain .roomsArrows .prevSlide::before {
  content: "\2039";
}

.roomsMain .roomsArrows .nextSlide::before {
  content: "\203A";
}

.roomsMain .roomsArrows .prevSlide {
  order: -3;
}

.roomsMain .roomsArrows .nextSlide {
  order: -2;
}

.roomsMain .roomsCounter {
  order: -1;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-gold);
}

.roomsMain .roomsArrows .button {
  margin-left: auto;
}

/* === SZCZEGOLY POKOJU === */
/* Podstrony pokoi maja biale tlo, nie kremowe jak reszta serwisu. */
.body-pluginident-Pokoje {
  background: var(--np-white);
}

.body-pluginident-Pokoje .articleContent {
  background: none;
}

/* Opis pokoju bez rozstrzelenia z <section>, tak jak tekst sekcji z CMS. */
.roomDescription p {
  letter-spacing: normal;
}

/* Cena w sidebarze - jak w kartach pokoi. "juz od" i "/ noc" bezszeryfowe, sama kwota serif. */
#sideBar .price.roomPrice {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  font-family: var(--np-sans);
  font-size: 14px;
  letter-spacing: normal;
  color: var(--np-muted);
}

#sideBar .price.roomPrice strong {
  font-family: var(--np-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--np-heading);
}

/* style.css maluje "Rezerwuj" starym bordowym --dark-color. */
#sideBar .rezBtn {
  border-color: var(--np-btn);
  background: var(--np-btn);
  color: var(--np-btn-text);
}

/* === PROPONOWANE POKOJE (podstrona pokoju) === */
.FeaturedRoom.siteWidth {
  max-width: var(--np-max);
  padding-right: var(--np-gutter);
  padding-bottom: var(--np-section);
  padding-left: var(--np-gutter);
}

/* Karta: zdjecie u gory, pod nim panel z nazwa, cena i przyciskami. */
.FeaturedRoom .sliderFeaturedRoom .BxImage {
  overflow: hidden;
  background: var(--np-bg);
}

.FeaturedRoom .sliderFeaturedRoom .BxImage .RoomCover {
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Pas na zdjecie; w starym motywie ten ::before rysowal czarny gradient. */
.FeaturedRoom .sliderFeaturedRoom .RoomCover::before {
  content: "";
  position: static;
  display: block;
  height: 480px;
  background: none;
  opacity: 1;
}

.FeaturedRoom .sliderFeaturedRoom .roomsDescription {
  position: static;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 26px 28px 0;
  background: var(--np-bg);
  text-align: left;
}

.FeaturedRoom .sliderFeaturedRoom .roomName {
  font-family: var(--np-serif);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  color: var(--np-heading);
}

.FeaturedRoom .sliderFeaturedRoom .roomPrice {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--np-line);
  font-size: 14px;
  color: var(--np-muted);
}

.FeaturedRoom .sliderFeaturedRoom .roomPrice strong {
  font-family: var(--np-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 0.9;
  color: var(--np-heading);
}

.FeaturedRoom .sliderFeaturedRoom .buttonWrapper {
  gap: 14px;
  justify-content: flex-start;
  padding: 22px 28px 28px;
  background: var(--np-bg);
}

.FeaturedRoom .sliderFeaturedRoom .buttonWrapper .button {
  width: auto;
}

/* Rezerwuj przed Szczegolami, jak w kartach pokoi. */
.FeaturedRoom .sliderFeaturedRoom .buttonWrapper .rezBtn {
  order: -1;
  border-color: var(--np-btn);
  background: var(--np-btn);
  color: var(--np-btn-text);
}

.FeaturedRoom .sliderFeaturedRoom .rezBtn::before {
  content: none;
}

.FeaturedRoom .sliderFeaturedRoom .rezBtn:hover {
  border-color: var(--np-btn);
  background: var(--np-gold);
  color: var(--np-btn-text);
}

/* "Szczegoly" nie ma w szablonie klasy btnBorder - dostaje ten sam wyglad. */
.FeaturedRoom .sliderFeaturedRoom .buttonWrapper .button:not(.rezBtn),
.FeaturedRoom .sliderFeaturedRoom .buttonWrapper .button:not(.rezBtn):hover {
  border-color: var(--np-border);
  background: transparent;
  color: var(--np-btn);
}

.FeaturedRoom .sliderFeaturedRoom .buttonWrapper .button:not(.rezBtn)::before {
  content: none;
}

/* Strzalki na zdjeciu, jak w galerii pokoju. */
.FeaturedRoom .sliderFeaturedRoom .prevSlide,
.FeaturedRoom .sliderFeaturedRoom .nextSlide {
  top: 240px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--np-control);
  height: var(--np-control);
  border: 1px solid var(--np-white-line);
  background: var(--np-field);
  color: var(--np-white);
}

.FeaturedRoom .sliderFeaturedRoom .prevSlide {
  left: 28px;
}

.FeaturedRoom .sliderFeaturedRoom .nextSlide {
  right: 28px;
}

.FeaturedRoom .sliderFeaturedRoom .prevSlide::before,
.FeaturedRoom .sliderFeaturedRoom .nextSlide::before {
  font-family: var(--np-serif);
  font-size: 30px;
  line-height: 1;
}

.FeaturedRoom .sliderFeaturedRoom .prevSlide::before {
  content: "\2039";
}

.FeaturedRoom .sliderFeaturedRoom .nextSlide::before {
  content: "\203A";
}

/* Odstep nad "Zobacz wszystkie"; szablon daje tu przyciskom 50% szerokosci. */
.FeaturedRoom .featuredAll {
  margin-top: 48px;
}

.FeaturedRoom .buttonWrapper.featuredAll .button {
  width: auto;
}

/* === GALERIA === */

/* Pierwsza kategoria na stronie galerii: style.css zeruje jej padding, wiec ujemny margines
   rytmu wciagal naglowek pod zdjecie hero. Kolejne kategorie maja nad soba sekcje i zostaja
   z ujemnym marginesem. Polowa rytmu wystarczy - .contentTitle ma juz 50 px. */
article > .sectionGallery:not(.wsekcji):first-child {
  margin-top: 0;
  padding-top: calc(var(--np-section) / 2);
}

/* Pod naglowkiem tyle samo co nad nim; style.css trzyma tu padding przez !important. */
.sectionGallery:not(.wsekcji) .contentTitle {
  padding-bottom: calc(var(--np-section) / 2 + 50px) !important;
}

.sectionGallery.wsekcji {
  background: var(--np-bg-alt);
}

/* Naglowek galerii przy lewej krawedzi, obok zlota kreska. */
.sectionGallery.wsekcji .contentTitle {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr);
  align-items: baseline;
  column-gap: 20px;
  padding-bottom: 56px;
  text-align: left;
}

.sectionGallery.wsekcji .contentTitle .titleInfo {
  grid-area: 1 / 1;
}

.sectionGallery.wsekcji .contentTitle .beutyFont {
  grid-area: 2 / 1;
  text-align: left;
}

.sectionGallery.wsekcji .contentTitle::after {
  content: "";
  grid-area: 2 / 2;
  height: 1px;
  background: linear-gradient(90deg, rgba(176, 138, 90, 0.5), rgba(176, 138, 90, 0));
}

/* Masonry przez CSS columns — style.css mial tu sztywna siatke 3 kolumn. */
.sectionGallery.wsekcji .galleryGrid {
  display: block;
  columns: 3 260px;
  column-gap: 18px;
  overflow: visible;
}

/* Tlo widac, zanim lozad doladuje zdjecie — kafel nie miga na bialo. */
.sectionGallery.wsekcji .galleryPicture {
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  break-inside: avoid;
  background: var(--np-line);
}

/* Rytm kafli z prototypu (zaklada 9 zdjec). */
.sectionGallery.wsekcji .galleryPicture {
  aspect-ratio: 3 / 2;
}

/* Oba wysokie kafle w srodkowej kolumnie - tak wypada masonry w prototypie. */
.sectionGallery.wsekcji .galleryPicture:nth-child(4),
.sectionGallery.wsekcji .galleryPicture:nth-child(6) {
  aspect-ratio: 1024 / 950;
}

/* Lamie kolumne co trzeci kafel, zeby podzial byl 3 + 3 + 3. */
.sectionGallery.wsekcji .galleryPicture:nth-child(3n) {
  break-after: column;
}

.sectionGallery.wsekcji .galleryGrid .galleryPicture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Projekt nie ma na kaflach podpisow ani bialej poswiaty. */
.sectionGallery.wsekcji .galleryPicture span {
  display: none;
}

.sectionGallery.wsekcji .galleryPicture::before {
  content: none;
}

/* === OPINIE === */
.sectionOpinie {
  background: var(--np-bg-alt);
}

.sectionOpinie .contentTitle {
  max-width: 660px;
  margin: 0 auto;
  padding-bottom: 56px;
  text-align: center;
}

/* Nadtytul sekcji w odcieniu z projektu, jak podpisy w kafelkach. */
.sectionOpinie .contentTitle .titleInfo {
  color: var(--np-gold-soft);
}

.np-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.np-review {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 36px 32px;
  background: var(--np-bg-card);
}

.np-review__mark {
  font-family: var(--np-serif);
  font-size: 54px;
  line-height: 0.6;
  color: var(--np-gold-pale);
}

/* letter-spacing zerujemy — stary motyw rozstrzeliwal tekst o 0.08em. */
.np-review__text {
  margin: 0;
  font-family: var(--np-serif);
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--np-heading);
}

/* Podpis dosuniety do dolu, zeby karty rownaly sie mimo roznej dlugosci cytatu. */
.np-review__author {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  line-height: 1.4;
}

.np-review__name {
  font-size: 15px;
  color: var(--np-heading);
}

.np-review__role {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-gold-soft);
}

.sectionOpinie .buttonWrapper {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* === OKOLICA === */
.kafelki .contentTitle {
  max-width: 660px;
  margin: 0 auto;
  padding-bottom: 56px;
  text-align: center;
}

.np-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

/* Przyciemnienie robi przezroczystosc zdjecia na ciemnym tle, nie overlay. */
.np-tile {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: var(--np-darker);
}

.np-tile__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.np-tile__content {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.np-tile__distance {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-gold-light);
}

/* letter-spacing zerujemy — stary motyw rozstrzeliwal tekst o 0.08em. */
.np-tile__name {
  font-family: var(--np-serif);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: normal;
  color: var(--np-on-dark);
}

.np-tile__text {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  color: rgba(247, 242, 233, 0.82);
}

.kafelki .buttonWrapper {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* === KONTAKT I DOJAZD === */
.np-contact {
  background: var(--np-dark);
  color: var(--np-on-dark);
}

.np-contact__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  align-items: stretch;
}

/* Tekst dosuniety do prawej krawedzi kolumny. */
.np-contact__info {
  display: flex;
  justify-content: flex-end;
  padding: var(--np-section) var(--np-gutter);
}

.np-contact__panel {
  width: 100%;
  max-width: 560px;
}

.np-contact__eyebrow {
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--np-gold-light);
}

.np-contact .beutyFont {
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
  color: var(--np-on-dark);
}

.np-contact__lead {
  max-width: 48ch;
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: normal;
  color: var(--np-on-dark-soft);
}

.np-contact__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.np-contact__links a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--np-on-dark-link);
  transition: opacity .3s ease;
}

.np-contact__links svg {
  flex-shrink: 0;
  color: var(--np-gold-light);
}

.np-contact__links a:hover {
  opacity: 0.62;
}

/* Mapa - tlo w pliku, bez lapania klikow. */
.np-contact__map {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}

.np-contact__mapImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

.np-contact__route {
  position: absolute;
  bottom: 28px;
  left: 28px;
}

/* === STOPKA === */
footer {
  color: var(--np-on-dark);
}

/* Wrapper stopki - bez szarego tla i marginesu ze starego motywu. */
footer,
.footerWrapper {
  background: var(--np-dark);
}

.footerWrapper {
  margin-top: 0;
  padding: 0;
}

.footerWrapperInner {
  padding: 96px var(--np-gutter) 0;
  border-top: 1px solid var(--np-white-fill);
}

/* Siatka kolumn zawija sie sama. */
.footerWrapperInner .threeColumns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 56px;
}

.footerWrapperInner .Column {
  width: auto;
  margin: 0;
  padding: 0;
}

/* Naglowek kolumny. */
.footerContact {
  margin-bottom: 18px;
  font-family: var(--np-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--np-gold-light);
}

/* Stary motyw centrowal zawartosc kolumny z logo. */
.footerWrapperInner .logoColumn {
  align-items: flex-start;
}

.logoColumn .logoFooter img {
  display: block;
  width: auto;
  height: 96px;
  /* logo jest ciemne — na ciemnym tle odwracamy je na biale */
  filter: brightness(0) invert(1) opacity(0.9);
}

.logoColumn p {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: normal;
  color: var(--np-on-dark-soft);
}

/* Listy linkow — stary motyw ustawial je w rzedzie, projekt chce kolumny. */
.footerMenu ul,
.footerInfo ul {
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.footerMenu ul li,
.footerInfo ul li {
  margin: 0;
  padding: 0;
}

.footerWrapperInner .FooterColorLink {
  padding: 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-on-dark-link);
  transition: color .3s ease;
}

.footerWrapperInner .FooterColorLink:hover {
  color: var(--np-gold-light);
}

/* Stary motyw centrowal ikony w kolumnie — maja stac pod naglowkiem. */
.footerSocial .socialMedia {
  justify-content: flex-start;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.footerSocial .socialMedia a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--np-glass-line);
  border-radius: 50%;
  color: var(--np-on-dark);
  transition: background .35s ease, border-color .35s ease;
}

.footerSocial .socialMedia a svg {
  display: block;
}

.footerSocial .socialMedia a:hover {
  border-color: var(--np-gold-light);
  background: rgba(201, 162, 103, 0.2);
}

/* Logo portalu wedding.pl pod ikonami social. */
.footerSocial .footerWedding {
  display: inline-block;
  margin-top: 26px;
}

.footerSocial .footerWedding img {
  display: block;
  width: auto;
  height: 24px;
  /* logo jest czarne — na ciemnym tle odwracamy je na biale */
  filter: brightness(0) invert(1);
  opacity: .65;
  transition: opacity .35s ease;
}

.footerSocial .footerWedding:hover img {
  opacity: 1;
}

/* Newsletter - pas pod kolumnami. */
.np-newsletter {
  position: relative;
  margin-top: 72px;
}

.np-newsletter .footerContact {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 54px;
  margin: 0;
}

.np-newsletter .newsletterContent {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  padding-bottom: 18px;
  border: 0;
}

/* Kreska pod polem — tak delikatna jak separator sekcji, gasnaca w prawo. */
.np-newsletter .newsletterContent::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,226,210,0.14), rgba(236,226,210,0.04));
}

/* Boczny padding trzyma wpisywany adres na srodku pasa, z dala od przycisku. */
.np-newsletter #newsletter_email {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 160px;
  border: 0;
  font-family: var(--np-sans);
  letter-spacing: 0.04em;
  text-align: center;
}

.np-newsletter #newsletter_email::placeholder {
  font-family: var(--np-sans);
  letter-spacing: 0.04em;
  text-align: center;
}

.np-newsletter .newsletterContent .button {
  position: absolute;
  top: 0;
  right: 0;
  gap: 10px;
  width: auto;
  height: 54px;
  padding: 0;
  border: 0;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: none;
  color: var(--np-on-dark);
}

.np-newsletter .newsletterContent .button::after {
  content: none;
}

.np-newsletter .newsletterContent .button svg {
  display: block;
  transition: transform .35s var(--np-ease);
}

.np-newsletter .newsletterContent .button:hover svg {
  transform: translateX(5px);
}

.np-newsletter p {
  margin: 24px 0 0;
  font-size: 14px;
  letter-spacing: normal;
  text-align: center;
  color: var(--np-on-dark-soft);
}

/* Pasek dolny: copyright, podpis HS i powrot na gore. */
.Credits {
  background: var(--np-dark);
}

.Credits .footer-bottom {
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 96px;
  padding: 32px var(--np-gutter) 0;
  border-top: 1px solid var(--np-white-fill);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--np-on-dark-dim);
}

.Credits .Copyrights {
  margin-right: auto;
}

.Credits .logoHS {
  cursor: pointer;
  color: var(--np-on-dark-dim);
}

/* "Do gory" - zwykly link tekstowy. */
.Credits .scrollTop {
  position: static;
  width: auto;
  height: auto;
  line-height: inherit;
  color: var(--np-on-dark-dim);
  cursor: pointer;
  transition: color .3s ease;
}

.Credits .scrollTop::before {
  content: none;
}

.Credits .scrollTop:hover {
  color: var(--np-gold-light);
}

/* === KOLEJNOSC SEKCJI NA STRONIE GLOWNEJ === */
.body-ident-main article {
  display: flex;
  flex-direction: column;
}

.body-ident-main article > section { order: 2; }  /* sekcje tresci z CMS */
.body-ident-main .roomsMain      { order: 3; }    /* pokoje */
.body-ident-main .sectionGallery { order: 4; }    /* galeria */
.body-ident-main .sectionOpinie  { order: 5; }    /* opinie */
.body-ident-main .kafelki        { order: 6; }    /* okolica */

/* Galeria i opinie dziela tlo - pelny rytm czytal sie miedzy nimi jak dziura. */
.body-ident-main .sectionOpinie {
  margin-top: calc(var(--np-section) * -1);
}

/* Tekst z CMS nad lista pokoi (rooms.tpl daje sekcjom domyslne order: 10).
   Padding, bo przestawiona kolejnosc nie lapie sie na regule :first-child ze style.css. */
.body-ident-pokoje .articleContent > section.sectionSimple {
  order: 1;
  padding-top: var(--np-section);
}

/* "Wazne informacje" schodzi pod liste pokoi - lista konczy sie wlasnym paddingiem, wiec sekcja nie doklada swojego. */
.body-ident-pokoje .articleContent > section.sectionSimple.oneImage.Text.section-37007 {
  order: 20;
  padding-top: 0;
}

/* === ANIMACJE === */
@keyframes npKen {
  from { transform: scale(1.01); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1%, 0); }
}

/* Kaskada wewnatrz sekcji - zwykly element wjezdza, duzy naglowek odslania sie od gory. */
@keyframes npRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes npWipe {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); }
  to   { opacity: 1; clip-path: inset(0 0 -10% 0); transform: none; }
}

@keyframes npBounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(9px); opacity: 1; }
}

/* Kaskada wewnatrz sekcji - atrybut i opoznienie nadaje JS. */
[data-np-cascade] {
  animation-name: npRise;
  animation-duration: .7s;
  animation-timing-function: var(--np-ease);
  animation-fill-mode: both;
}

/* Sam naglowek odslania sie od gory zamiast wjezdzac. */
[data-np-cascade="wipe"] {
  animation-name: npWipe;
  animation-duration: .85s;
}

/* Reveal sekcji - atrybut data-np-reveal nadaje JS. */
[data-np-reveal] {
  transition: opacity .9s var(--np-ease),
              transform .9s var(--np-ease);
}

[data-np-reveal="idle"] {
  opacity: 0;
  transform: translateY(34px);
}

[data-np-reveal="in"] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-np-reveal],
  [data-np-reveal="idle"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button::before,
  .button.btnBorder::after {
    transition: none;
  }

  /* Najazd na zdjecie zostaje, ale duzo wolniejszy; strzalka nieruchoma. */
  .mainHeader .sliderImage.slick-active {
    animation-duration: 60s;
  }

  .mainHeader .scrollDown {
    animation: none;
  }
}

/* === RESPONSYWNOSC (1240 / 1120 / 900 / 768 / 560) === */

@media (max-width: 900px) {
  /* Rytm pionowy na mobile: 72 w sekcji, 108 miedzy trescia sasiadow. */
  :root {
    --np-section: 72px;
  }

  .section.sectionSimple .sectionRow {
    gap: 32px;
  }

  /* Odstep nad trescia daje juz .np-contact__info. */
  .np-contact {
    padding-top: 0;
  }

  /* Zeby mapa nie stykala sie ze stopka. */
  .np-contact__map {
    margin-bottom: var(--np-section);
  }

  .sectionGallery.wsekcji .galleryGrid {
    columns: 2 200px;
  }

  /* Karta pokoju na jedna kolumne. */
  .roomsMain .roomWrapper {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
  }

  .roomsMain .imageMediaWrapper {
    min-height: 340px;
  }

  .roomsMain .roomsDescription {
    padding: 32px 24px;
  }

  /* style.css centruje tu bloki panelu — projekt trzyma je przy lewej. */
  .roomsMain .roomsDescription > div {
    justify-content: flex-start;
    text-align: left;
  }
}

/* Na mobile prezentacja pokoju jest prostsza — bez ikon i bez licznika. */
@media (max-width: 768px) {
  /* Tekst idzie przez cala szerokosc, wiec zdjecie przyciemniamy rowno. */
  .sectionSeparator .sectionImageWrapper::after {
    background: linear-gradient(180deg, rgba(44, 36, 29, 0.62) 0%, rgba(44, 36, 29, 0.72) 100%);
  }

  /* Nadtytul w pelnym rozstrzeleniu zajmowal trzy linie. */
  .mainHeader .heroTitle .heroEyebrow {
    font-size: 12px;
    letter-spacing: 0.24em;
  }

  /* Ciasniejsze przyciski - dluzsze napisy mieszcza sie w jednej linii. */
  .button {
    padding: 0 18px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* style.css daje tym przyciskom min-width 145 px, przez co nie mieszcza sie obok siebie. */
  .roomsMain .roomsDescription .buttonWrapper .button {
    min-width: 0;
    padding: 0 18px;
  }

  /* Galeria na mobile - trzy pierwsze kafle. */
  .sectionGallery .galleryGrid > *:nth-child(n+4) {
    display: none;
  }

  .roomsMain .roomsDescription .roomInfo,
  .roomsMain .roomsCounter {
    display: none;
  }

  .roomsMain .roomPrice strong {
    font-size: 40px;
  }
}

@media (max-width: 560px) {
  /* Wezsze kolumny statystyk - mniejsze liczby. */
  .np-stats strong {
    font-size: 40px;
  }

  .sectionGallery.wsekcji .galleryGrid {
    columns: 1;
  }

  /* Stopka schodzi do jednej kolumny — wtedy wszystko na srodku. */
  .footerWrapperInner .threeColumns {
    text-align: center;
  }

  .footerWrapperInner .logoColumn {
    align-items: center;
  }

  .footerMenu ul,
  .footerInfo ul {
    align-items: center;
  }

  .footerSocial .socialMedia {
    justify-content: center;
  }

  /* Copyright i podpis HS w jednym rzedzie - style.css lamie pasek w kolumne ponizej 980 px. */
  .Credits .footer-bottom {
    flex-direction: row;
    justify-content: center;
    gap: 16px 24px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .Credits .Copyrights,
  .Credits .logoHS {
    white-space: nowrap;
  }

  .Credits .Copyrights {
    margin-right: 0;
  }

  /* "Do gory" w osobnym wierszu nad creditsami. */
  .Credits .scrollTop {
    order: -1;
    flex-basis: 100%;
    font-size: 12px;
  }

  /* Newsletter w pionie. */
  .np-newsletter .footerContact {
    position: static;
    display: block;
    height: auto;
    margin-bottom: 18px;
    text-align: center;
  }

  .np-newsletter .newsletterContent {
    padding-bottom: 0;
  }

  .np-newsletter .newsletterContent::after {
    content: none;
  }

  .np-newsletter #newsletter_email {
    padding: 0;
    border-bottom: 1px solid var(--np-white-fill);
  }

  .np-newsletter .newsletterContent .button {
    position: static;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }
}