/* SOHO VUE - 13-overrides.css
   strona prawna i poprawki domykające kaskadę
   Fragment 13/13 arkusza soho.css (wiersze 4254-4522 oryginalu).
   KOLEJNOSC LADOWANIA JEST ZNACZACA - patrz includes/head.php. */

/* ------------------------------------------------ strona prawna (polityka) */

/* Czyste, białe tło i sekcje bez linii — treść ma być czytelnym dokumentem,
   nie tabelą. Nagłówki sekcji: wersaliki, pogrubione. */
.page-legal,
.page-legal .band--paper {
  --paper: #fff;
  background: #fff;
}

.page-legal .qa__row,
.page-legal .qa__row:last-child {
  border: 0;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0 0;
}

.page-legal .qa__q {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .92rem;
  color: var(--ink);
}

/* Pasek nawigacji na stronie prawnej nie ma pod sobą zdjęcia hero, więc
   przyciemniający gradient kładłby na bieli szarą smugę. Zamiast tego pasek
   od razu wygląda jak stan „solid” ze strony głównej: pełne ciemne tło,
   biały znak SV czytelny, żadnego przejścia przy przewijaniu. */
.page-legal .nav::before {
  display: none;
}

.page-legal .nav {
  background: rgba(15, 14, 14, .96);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--brand-sand);
  border-bottom-color: rgba(251, 249, 245, .16);
}

.page-legal .nav .btn {
  --btn-bg: var(--brand-burgundy);
  --btn-fg: var(--brand-sand);
}

.page-legal .nav .btn:hover {
  --btn-bg: var(--burgundy-hi);
}

.page-legal .nav__toggle {
  background: transparent;
}

@media (max-width: 1119px) {
  .page-legal .nav {
    background: var(--burgundy);
    color: var(--sand);
    border-bottom-color: transparent;
  }
}

/* Nagłówek dokumentu: bez sztucznego zapasu na przezroczysty pasek. */
.page-legal .band--paper.sec {
  padding-top: clamp(3.5rem, 7vh, 5.5rem);
}

/* ------------------------------------------------- kąty proste w akcjach */

/* Wszystkie elementy klikalne typu przycisk — łącznie z powrotem na górę
   i strzałkami galerii — bez zaokrągleń. */
.btn,
.nav__toggle,
.player__btn,
.galeria__nav,
.totop,
.skip {
  border-radius: 0;
}

/* Galeria bez nagłówka: taśma zaczyna sekcję, więc nie odsuwa się od góry. */
.galeria__stage:first-child {
  margin-top: 0;
}

/* Lokalizacja bez kolumny z punktami: opis i mapka biorą całą szerokość. */
#lokalizacja .split> :only-child {
  grid-column: 1 / -1;
}

/* --------------------------------------------- kontrast w sekcjach jasnych */

/* Filary dewelopera: tytuł w kolorze marki, opis pełną czernią zamiast
   przygaszonego taupe — te trzy zdania mają się czytać jak treść, nie podpis. */
#operator .qa__q {
  color: var(--fg);
  font-weight: 700;
  text-transform: uppercase;
}

#operator .qa__a {
  color: var(--fg-soft);
}

/* Rozkład filarów z materiału klienta: tytuł po lewej, opis po prawej,
   w dwóch kolumnach zamiast jeden pod drugim. Wariant .qa--plain celowo
   składa wiersz do bloku (patrz 06-offer.css), więc tutaj wracamy do
   siatki - bez linii i kafli, które niesie bazowy .qa__row.
   Na telefonie kolumny nie ma: przy tej mierze tytuł w kapitalikach
   łamałby się na trzy wersy obok jednozdaniowego opisu. */
@media (min-width: 720px) {
  #operator .qa--plain .qa__row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 0 clamp(1.4rem, 2.5vw, 2.2rem);
    align-items: start;
  }

  #operator .qa--plain .qa__a {
    margin-top: 0;
  }
}

#operator .operator__stamp {
  filter: brightness(0) invert(1);
}

/* Kadr dewelopera dochodzi do lewej krawędzi ekranu, więc odstęp od
   kolumny tekstu musi być większy niż standardowy - inaczej zdjęcie
   dotyka bloku "Doświadczenie, które daje pewność". */
@media (min-width: 1000px) {
  #operator .split {
    gap: clamp(6rem, 11vw, 13rem);
  }
}

/* --------------------------------------------------------------- adres    */

/* Pionowy kadr o zachodzie obok krótkiego zdania. Proporcja bierze się
   z pliku (3392x4992), a nie z zestawu nazwanych kadrów - to jedyne
   miejsce, gdzie zdjęcie ma zostać nieprzycięte. */
.adres__media {
  aspect-ratio: 2 / 3;
}

/* Kadr dochodzi do dolnej krawędzi pasma - stąd sekcja bez dolnego
   odstępu. Kolumna tekstu trzyma się góry (.split--start), więc zdjęcie
   wyznacza wysokość sekcji. */
.adres {
  padding-bottom: 0;
}

/* Selektor jest celowo trzyczłonowy: `.split__text .body` (miara 34ch)
   i `.h2 + .body` (odstęp) mają po dwie klasy, więc jednoklasowa reguła
   przegrywałaby z nimi i wersy z materiału łamałyby się w połowie. */
.adres .split__text .adres__note {
  margin-top: var(--head-gap);
  max-width: none;
  /* Zdanie ma się czytać jak treść, nie podpis - pełna jasność pasma. */
  color: var(--fg);
  line-height: 1.7;
}

/* Wyrównanie do góry niesie już .split--start; tutaj zostaje sam odstęp
   między zdaniem a kadrem. Kolumna tekstu musi zmieścić najdłuższy wers
   ("gdzie górski krajobraz spotyka się z dobrym designem") - stąd szersza
   miara niż domyślne 34rem. */
@media (min-width: 1000px) {
  .adres .split {
    gap: clamp(4rem, 8vw, 9rem);
  }

  .adres .split__text {
    max-width: 42rem;
  }
}

@media (max-width: 719px) {
  /* Wymuszone łamanie nie mieści się w wąskiej kolumnie. */
  .adres__note br {
    display: none;
  }

  .adres .split__text .adres__note {
    max-width: 36ch;
  }
}

/* --------------------------------------------------------------- vue      */

/* Sekcja lifestyle'owa: kadr złożony (dwa ujęcia + znak Chill & Spa) po
   jednej stronie, dwa krótkie bloki opisu po drugiej. Kompozycja niesie
   własny tekst, więc obrazek nie jest kadrowany - wchodzi w całości. */
#widok .split__media .media {
  background: none;
  max-height: none;
}

#widok .split__media img {
  height: auto;
  object-fit: contain;
}

/* Łamania wierszy w opisie są celowe (układ z projektu), więc kolumna
   dostaje szerszą miarę niż domyślne 34ch. Miara musi zmieścić najdłuższy
   z wersów ("chwile w strefie Wellness & Spa...") bez zawijania - inaczej
   łamanie z projektu rozjeżdża się o jeden wers. */
#widok .split__text {
  max-width: 44rem;
}

/* Opis w tej sekcji ma czytać się jak tekst z projektu: pełna czerń,
   nie przygaszone `--fg-soft`. */
#widok .split__text .body {
  max-width: none;
  color: var(--ink);
}

.vue__block {
  margin-top: var(--head-gap);
}

.vue__block .label {
  display: block;
  margin-bottom: .8rem;
}

.vue__block .body+.body {
  margin-top: 1.1rem;
}

/* Między akapitami stoi pełny pusty wers - tak jak w materiale.
   Odstęp od nagłówka niesie --head-gap, wspólny dla wszystkich sekcji. */
#widok .vue__block .body+.body {
  margin-top: 1.9rem;
}

#widok .split__text .body {
  line-height: 1.72;
}

/* Kadr i opis mają się od siebie odsunąć mocniej niż w pozostałych
   sekcjach - przerwa jest tu elementem kompozycji, nie tylko odstępem. */
@media (min-width: 1000px) {
  #widok .split {
    gap: clamp(5rem, 8vw, 9rem);

    /* Tak samo jak w #udogodnienia: etykieta "Atmosfera" stoi w linii
       z górną krawędzią kadru, zamiast centrować się względem niego. */
    align-items: start;
  }
}

/* Poniżej tabletu kolumna jest węższa niż najdłuższy wers: wymuszone
   łamanie zostawiłoby sieroty w połowie zdania, więc oddajemy je
   przeglądarce. */
@media (max-width: 719px) {
  #widok .split__text .body br {
    display: none;
  }

  #widok .split__text .body {
    max-width: 38ch;
  }
}

/* Akapity wprowadzające w sekcjach na jasnym tle. */
#second-home .lead,
#widok .lead,
#lokalizacja .lead,
#udogodnienia .lead {
  color: var(--ink);
}

#udogodnienia .split__text .body {
  max-width: none;
  color: var(--ink);
}

#widok .label,
#udogodnienia .label {
  color: var(--burgundy);
}

@media (min-width: 1000px) {

  /* Kadr i kolumna tekstu zaczynają się na tej samej wysokości: etykieta
     "Udogodnienia" stoi w linii z górną krawędzią zdjęcia. Zdjęcie nadal
     schodzi do dolnej krawędzi sekcji (ujemny margines), ale nie jest już
     spychane w dół o --pad-y, a tekst nie centruje się względem kadru. */
  #udogodnienia .split {
    align-items: start;
  }

  #udogodnienia .split__media {
    margin-bottom: calc(var(--pad-y) * -1);
  }
}

/* ------------------------------------ second home: kadr do dołu i do prawej */

/* Plik zima_ptak_nowa_ver.webp ma 1456x1080 (proporcja 1,348), a ramka
   deklarowała 1536/829 (1,853). Przy `object-fit: contain` grafika była
   więc zmniejszana do wysokości ramki i otaczana pustym polem po bokach -
   stąd wrażenie, że kadr jest mały i nie dochodzi do krawędzi. Proporcja
   ramki równa proporcji pliku znosi to letterboxowanie: grafika wypełnia
   ramkę co do piksela. Samo zdjęcie zimowe leży w pliku dosunięte do
   prawej i dolnej krawędzi (17,93% / 38,24% -> 100% / 100%), więc razem
   z ramką dochodzi dokładnie do prawej krawędzi sekcji. */
.secondhome__frame {
  aspect-ratio: 1456 / 1080;
}

/* Warstwy w tej sekcji. Kadr zachodzi lewym bokiem na kolumnę tekstu, żeby
   być możliwie duży, a białe tło pliku NIE jest przezroczyste (obraz jest
   w RGB, bez kanału alfa) - bez jawnej kolejności zasłaniałoby nagłówek.
   Tekst dostaje więc warstwę 2, grafika 1. */
#second-home .split__text {
  position: relative;
  z-index: 2;
}

#second-home .secondhome__media {
  position: relative;
  z-index: 1;
}

@media (min-width: 1000px) {

  /* Kolumny wyrównane do dołu - to one dosuwają kadr do dolnej krawędzi
     sekcji. Podział kolumn i miara tekstu zostają nietknięte. */
  #second-home .split {
    align-items: end;
  }

  /* Prawy bok kadru zostaje przyklejony do krawędzi, a pod zdjęciem zostaje
     250 px oddechu przed ciemnym pasmem filmu. Poniżej 1000 px kadr nie jest
     dosunięty do dołu (układ przechodzi w pion), więc tam zostaje zwykły
     rytm sekcji z --pad-y. */
  #second-home {
    padding-bottom: 250px;
    --sh-gap: clamp(2rem, 4vw, 4rem);
    --sh-bleed: 1.12;
    --sh-col: calc((min(100vw, var(--maxw)) - 2 * var(--pad-x) - var(--sh-gap)) * .55);
    --sh-frame-w: calc((var(--sh-col) + var(--gutter)) * var(--sh-bleed));
    --sh-frame-h: calc(var(--sh-frame-w) * 1080 / 1456);
    --sh-photo-h: calc(var(--sh-frame-h) * .6176);
  }

  /* Kolumna tekstu zaczyna się dokładnie na górnej krawędzi zdjęcia zimowego.
     Zdjęcie leży w dolnej części pliku (od 38,24% wysokości w dół), więc jego
     wysokość to 61,76% wysokości ramki. Kolumna tekstu dostaje tę samą
     wysokość i jest dosunięta do dołu razem z kadrem - jej górna krawędź
     pokrywa się wtedy z górną krawędzią zdjęcia. Treść układa się od góry,
     czyli etykieta "Górski lifestyle" trafia w linię krawędzi zdjęcia.

     Wysokość ramki jest policzona z tych samych wielkości, z których grid
     wylicza kolumnę materiału:
       kolumna materiału = (szerokość .wrap - odstęp) * 1,1/2
       ramka             = (kolumna + wyjście na margines) * wysunięcie
       wysokość ramki    = szerokość ramki * 1080/1456 (proporcja pliku) */
  #second-home .split__text {
    align-self: end;
    height: var(--sh-photo-h);
    display: grid;
    /* Blok tekstu jest wysrodkowany w pionie wzgledem zdjecia zimowego:
       kolumna ma dokladnie jego wysokosc, wiec `center` stawia srodek
       tekstu na srodku kadru zamiast przy jego gornej krawedzi. */
    align-content: center;
  }

  /* Limit 88svh dotyczy kadrów panoramicznych. Tutaj obciąłby wysokość
     ramki i przywrócił puste pole po bokach, które właśnie znosimy. */
  #second-home .split__media .media {
    max-height: none;
  }
}

/* Między 1000 a 1279 px kolumna tekstu zajmuje proporcjonalnie więcej miejsca
   i kadr, wysunięty w lewo o 12%, wchodziłby samym ZDJĘCIEM na akapit
   (biały pas z ptakiem może na niego zachodzić, zdjęcie nie - tekst byłby
   nieczytelny). W tym zakresie kadr zostaje w swojej kolumnie. */
@media (min-width: 1000px) and (max-width: 1279px) {
  #second-home {
    --sh-bleed: 1;
  }

  #second-home .secondhome__media>.media {
    width: 100%;
  }
}

/* ================================================================= */
/*  STRONA PODZIĘKOWANIA (/dziekujemy)                               */
/*                                                                   */
/*  Ten sam język co hero strony głównej: jeden pełnoekranowy kadr   */
/*  pod przygaszeniem, tekst przy dolnej krawędzi. Klasy z prefiksem */
/*  `thanks` nie występują nigdzie indziej, więc pozycja na końcu    */
/*  kaskady niczego nie nadpisuje.                                   */
/* ================================================================= */

.thanks {
  position: relative;
  min-height: 100dvh;
  margin-top: calc(var(--nav-h) * -1);
  display: flex;
  align-items: flex-end;
  --fg: #fbf9f5;
  --fg-soft: rgba(251, 249, 245, .84);
  --detail: var(--frost);
  color: var(--fg);
  background: var(--burgundy-deep);
  isolation: isolate;
  overflow: hidden;
}

.thanks__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.thanks__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.thanks__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* Przygaszenie mocniejsze niż w hero: tu liczy się komunikat, nie kadr. */
.thanks::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(36, 15, 25, .88) 0%, rgba(36, 15, 25, .66) 38%,
      rgba(36, 15, 25, .26) 68%, rgba(36, 15, 25, .06) 100%),
    linear-gradient(to top, rgba(15, 14, 14, .68) 0%, rgba(15, 14, 14, 0) 58%);
}

.thanks__inner {
  width: 100%;
  padding-block: calc(var(--nav-h) + clamp(2rem, 6vh, 4rem)) clamp(3.5rem, 9vh, 6.5rem);
}

.thanks__col {
  max-width: 46rem;
}

.thanks__label {
  margin-bottom: clamp(1.2rem, 2.4vw, 1.7rem);
}

.thanks__title {
  font-size: clamp(2.1rem, 1.05rem + 3.1vw, 3.5rem);
  text-wrap: balance;
}

/* Drugi wers prostym krojem - bez kursywy. */
.thanks__title i {
  font-style: normal;
  color: rgba(251, 249, 245, .9);
}

.thanks__lead {
  margin-top: 1.5rem;
  max-width: 48ch;
}

/* Pasek nawigacji leży na zdjęciu tak samo jak na stronie głównej,
   a na wąskich ekranach dostaje własne tło (reguła .page-legal wyżej
   robi to samo dla dokumentów prawnych). */
@media (max-width: 1119px) {
  .page-thanks .nav {
    background: var(--burgundy);
    color: var(--sand);
    border-bottom-color: transparent;
  }
}

/* --------------------------------------------------------- przełącznik języków

   Rozwijana lista zamiast czterech skrótów w rzędzie: w pasku stoi tylko
   język bieżący, reszta wychodzi po kliknięciu. Nośnikiem jest <details>,
   więc rozwijanie i obsługa klawiatury są natywne.

   Kolor bierze się z paska (`currentColor`) - dzięki temu przełącznik
   zachowuje się tak samo nad zdjęciem i po przewinięciu, kiedy pasek
   robi się ciemny. Panel ma własne, nieprzezroczyste tło, bo rozwija się
   nad treścią strony. Narożniki jak w całym projekcie: `--r` (bez
   zaokrągleń). */

.lang {
  position: relative;
  flex: 0 0 auto;
}

/* Strzałka domyślnego znacznika <summary> zabrana w obu składniach -
   mamy własną, obracaną przy otwarciu. */
.lang__current {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .5rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  list-style: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  transition: opacity .3s var(--ease), background-color .3s var(--ease),
    border-color .3s var(--ease);
  opacity: .82;
}

.lang__current::-webkit-details-marker {
  display: none;
}

.lang__current:hover,
.lang__current:focus-visible,
.lang[open] > .lang__current {
  opacity: 1;
  background: rgba(251, 249, 245, .12);
  border-color: rgba(251, 249, 245, .28);
}

.lang__caret {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  transition: transform .3s var(--ease);
}

.lang[open] .lang__caret {
  transform: rotate(180deg);
}

.lang__menu {
  list-style: none;
  margin: 0;
  padding: .3rem 0;
  position: absolute;
  top: calc(100% + .45rem);
  right: auto;
  left: 0;
  min-width: 11rem;
  z-index: 2;
  background: var(--brand-burgundy);
  backdrop-filter: none;
  border: 1px solid rgba(251, 249, 245, .18);
  border-radius: var(--r);
  color: var(--brand-sand);
  box-shadow: 0 18px 40px rgba(15, 14, 14, .38);
}

.lang__item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem .9rem;
  text-decoration: none;
  color: inherit;
  opacity: .8;
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}

.lang__item:hover,
.lang__item:focus-visible {
  opacity: 1;
  background: rgba(251, 249, 245, .1);
}

.lang__item .lang__code {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  min-width: 1.7rem;
  opacity: .7;
}

.lang__name {
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: .01em;
}

.lang__item.is-current {
  opacity: 1;
}

.lang__item.is-current .lang__code {
  opacity: 1;
}

.lang__item.is-current .lang__name {
  font-style: normal;
}

/* Wariant w szufladzie mobilnej: ten sam element, ale panel rozwija się
   w strumieniu treści, a nie nad nią - szuflada i tak się przewija, więc
   nakładka mogłaby wyjść poza ekran. */
.lang--drawer {
  display: none;
}

.lang--drawer .lang__item.is-current .lang__name {
  font-style: normal;
}

@media (max-width: 1119px) {
  .lang--desk {
    display: none;
  }

  .lang--drawer {
    display: block;
    margin-top: 1.6rem;
  }

  .lang--drawer .lang__current {
    justify-content: space-between;
    padding: .8rem 1rem;
    font-size: .92rem;
    border-color: rgba(244, 241, 234, .28);
    opacity: 1;
  }

  .lang--drawer .lang__menu {
    position: static;
    min-width: 0;
    margin-top: .4rem;
    background: rgba(15, 14, 14, .28);
    backdrop-filter: none;
    border-color: rgba(244, 241, 234, .22);
    box-shadow: none;
  }

  .lang--drawer .lang__item {
    padding: .7rem 1rem;
  }
}

/* ---------------------------------------------------- powietrze na mobile */

/* Klient chce na telefonie wyraźnie więcej luzu między sekcjami: po ok. 50 px
   dodatkowego odstępu u góry i u dołu każdej sekcji poza hero. Zmieniamy
   wyłącznie rytm pionowy (--pad-y), więc obejmuje to wszystkie pasma `.sec`,
   galerię i interlude naraz. Hero ma własne odstępy w `.hero__inner` i
   pozostaje nietknięte. */
@media (max-width: 767px) {
  :root {
    --pad-y: calc(clamp(3.75rem, 12vw, 5.5rem) + 50px);
  }

  /* `.finale` ma własny padding, poza `--pad-y` - dokładamy tyle samo. */
  .finale {
    padding-block: calc(clamp(5rem, 12vw, 9rem) + 50px);
  }
}