/* SOHO VUE - 12-scale.css
   skala, rytm, ekspozycja materiałów + print
   Fragment 12/13 arkusza soho.css (wiersze 3665-4253 oryginalu).
   KOLEJNOSC LADOWANIA JEST ZNACZACA - patrz includes/head.php. */

/* ==========================================================================
   SKALA, RYTM I EKSPOZYCJA MATERIAŁÓW
   --------------------------------------------------------------------------
   Warstwa kompozycyjna dołożona nad istniejącym systemem. Nie wprowadza
   żadnego nowego koloru ani kroju pisma - korzysta wyłącznie z tokenów
   zdefiniowanych na górze arkusza.

   Trzy zasady, które trzymają rytm całej strony:
   1. Jeden odstęp między sekcjami (--pad-y) i jeden wewnątrz nich (--sec-gap).
   2. Tekst + media to zawsze czytelny podział 50/50 (.split); na wąskim
      ekranie ten sam układ przechodzi w pion, bez zmiany hierarchii.
   3. Materiał wizualny zajmuje znaczną część wysokości okna. Kolumna tekstu
      jest krótka i nigdy nie rośnie razem z szerokością ekranu.
   ========================================================================== */

/* ------------------------------------------------- nagłówek i ciało sekcji */

/* Nagłówek sekcji jest wąski niezależnie od szerokości ekranu: tekst ma być
   krótkim wprowadzeniem do materiału, nie kolumną do czytania. */
.sec__head {
  max-width: 34rem;
}

.sec__head .lead,
.sec__head .body {
  max-width: 34ch;
}

.sec__body {
  margin-top: var(--sec-gap);
}

/* Sekcja mierzona wysokością okna. Używana tam, gdzie prowadzi materiał
   (widok, galeria) - treść zostaje wtedy wyśrodkowana w kadrze ekranu. */
.sec--full {
  min-height: 100svh;
  display: grid;
  align-items: center;
}

@media (max-width: 899px) {
  .sec--full {
    min-height: 0;
  }
}

/* --------------------------------------------------------- podział 50/50  */

.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.split__text {
  max-width: 34rem;
  min-width: 0;
}

.split__text .lead,
.split__text .body {
  max-width: 34ch;
}

.split__media {
  margin: 0;
  min-width: 0;
}

.split+.split,
.split+.sec__body,
.sec__body+.split {
  margin-top: var(--sec-gap);
}

@media (min-width: 1000px) {

  /* Realne 50/50: obie kolumny mają tę samą szerokość, materiał nie jest
     doklejką do akapitu. */
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5.5rem);
  }

  .split--start {
    align-items: start;
  }

  /* Materiał po lewej, tekst po prawej - naprzemienność buduje rytm. */
  .split--flip .split__media {
    order: -1;
  }

  /* Kolumna tekstu trzyma się początku swojej połowy i nie rośnie razem
     z ekranem - miarę wyznacza --measure, nie szerokość okna. */
  .split__text {
    margin-inline: 0 auto;
  }
}

/* Kadr w podziale zajmuje dużą część wysokości okna. */
.split__media .media {
  max-height: 88svh;
}

/* Materiał wychodzi poza `.wrap` i dochodzi do krawędzi ekranu. Podział
   pozostaje czytelnym 50/50 - kolumna tekstu nie rusza się o piksel -
   ale zdjęcie zyskuje całą zewnętrzną szerokość marginesu i wyraźnie
   dominuje nad tekstem obok. */
@media (min-width: 1000px) {
  .split:not(.split--flip) .split__media--bleed {
    margin-right: calc(var(--gutter) * -1);
  }

  .split--flip .split__media--bleed {
    margin-left: calc(var(--gutter) * -1);
  }

  /* Gdy o wysokości kadru decyduje limit (kadry pionowe), zdjęcie zostaje
     przy krawędzi okna, a nie ucieka na środek kolumny. */
  .split__media--bleed {
    display: grid;
  }

  .split:not(.split--flip) .split__media--bleed {
    justify-items: end;
  }

  .split--flip .split__media--bleed {
    justify-items: start;
  }

  .split__media--bleed>.media {
    width: 100%;
  }
}

@media (max-width: 999px) {
  .split__media .media {
    max-height: 76svh;
  }

  /* Na wąskim ekranie ujęcia panoramiczne przechodzą w kadr pionowy:
     inaczej materiał zostaje paskiem o wysokości jednej czwartej ekranu.
     Kadrowanie bierze na siebie object-fit, pliki zostają bez zmian. */
  .split__media .media--photo,
  .split__media .media--square {
    aspect-ratio: 4 / 5;
  }
}

/* ---------------------------------------------------------- proporcje kadru */

/* Nazwane proporcje zamiast wartości rozsianych po sekcjach: dzięki temu
   wszystkie kadry na stronie pochodzą z jednego, krótkiego zestawu. */
.media--wide {
  aspect-ratio: 16 / 9;
}

.media--square {
  aspect-ratio: 1 / 1;
}

.media--photo {
  aspect-ratio: 4 / 3;
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

.media--tall {
  aspect-ratio: 3 / 4;
}

/* --------------------------------------------------------------- film      */

/* Film jest osobnym, pełnoekranowym doświadczeniem, nie kafelkiem w siatce.
   Kadr idzie przez całą szerokość okna i zajmuje niemal całą jego wysokość;
   przycięcie bierze na siebie object-fit, więc materiał zachowuje charakter
   filmowy na każdym ekranie. Kolor materiału pozostaje nietknięty - nad
   obrazem leży wyłącznie przesłona czytelnościowa paska sterowania. */
.reel {
  position: relative;
  background: var(--charcoal);
  color: var(--sand);
  --fg-soft: rgba(244, 241, 234, .72);
  isolation: isolate;
}

.reel .player {
  margin: 0;
}

.reel .player__stage {
  /* Bije wpis z atrybutu style (proporcje z konfiguracji): tutaj o kadrze
     decyduje wysokość okna, nie proporcje pliku. */
  aspect-ratio: auto !important;
  height: clamp(34rem, 92svh, 64rem);
}

.reel .player__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Warstwa ruchu skaluje ten element, nie sam <video>: pełny ekran ma
   wtedy czysty, nieprzeskalowany kadr. */
.reel .player__frame {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.player:fullscreen .player__frame {
  transform: none !important;
  position: static;
  height: 100%;
}

.reel .player__cap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem var(--pad-x) 0;
}

@media (max-width: 999px) {
  .reel .player__stage {
    height: auto;
    aspect-ratio: 16 / 10 !important;
    max-height: 78svh;
  }
}

@media (max-width: 699px) {

  /* Na telefonie kadr idzie w pion: film zostaje dużym materiałem, a nie
     paskiem o wysokości dwóch centymetrów. */
  .reel .player__stage {
    aspect-ratio: 4 / 5 !important;
    max-height: 74svh;
  }
}

/* ------------------------------------------------------- znaki SOHO VUE    */

/* Ptak wędrowniczek i muflon są elementami identyfikacji, nie ozdobnikami:
   dostają własną połowę układu i tę samą skalę, co materiał zdjęciowy.
   Grafiki wchodzą w oryginalnych kolorach - ptak w tonacji TAUPE trafia na
   pasma jasne, muflon w tonacji FROST na tło ciemne, zgodnie z zasadą
   systemową numer 2 z góry arkusza. */
.crest {
  margin: 0;
}

/* Szerokość siedzi na <picture>, nie na <img>: <picture> jest elementem
   blokowym i to on wyznacza miejsce w układzie. Gdyby rozmiar wisiał na
   samym <img> (width: 100% wewnątrz kontenera bez własnej szerokości),
   przeglądarka nie miałaby od czego liczyć procentów i znak potrafiłby
   wyjść zerowej wysokości. */
.crest picture {
  display: block;
  width: var(--crest-w, 20rem);
  max-width: 100%;
  margin-inline: auto;
}

.crest img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.crest__cap {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
  max-width: 26ch;
}

.crest--ptak {
  --crest-w: clamp(9.5rem, 16vw, 13.5rem);
}

.crest--muflon {
  --crest-w: clamp(7rem, 14vw, 10rem);
}

/* Kadr sekcji SECOND HOME niesie ptaka wędrowniczka wewnątrz pliku, więc
   ramka pracuje na proporcjach dostarczonej grafiki i nie przycina jej.
   Tło ramki znika: plik ma przezroczysty pas, na którym siedzi znak. */
.secondhome__frame {
  aspect-ratio: 1536 / 829;
  background: none;
}

.secondhome__frame img {
  object-fit: contain;
}

/* Znak nie jest treścią klikalną - kursor i zaznaczanie tekstu pod nim
   mają działać tak, jakby grafiki tam nie było. */
.secondhome__media {
  pointer-events: none;
}

#second-home .h2 {
  white-space: nowrap;
}

/* Nota pod nagłówkiem: krótkie wersy łamane w treści, więc bez limitu
   szerokości w znakach - inaczej przeglądarka złamałaby je po swojemu. */
#second-home .split__text .secondhome__note {
  margin-top: var(--head-gap);
  max-width: none;
  color: var(--ink);
  line-height: 1.6;
}

#second-home .split__text {
  margin-inline: 0 auto;
  text-align: left;
}

@media (max-width: 600px) {
  /* Na wąskim ekranie wymuszone łamanie rozbija rytm - wracamy do
     naturalnego zawijania. */
  .secondhome__note br {
    display: none;
  }

  #second-home .split__text .secondhome__note {
    max-width: 34ch;
  }
}

@media (max-width: 600px) {
  #second-home .h2 {
    font-size: clamp(.9rem, 4.32vw, 1.665rem) !important;
  }
}

@media (min-width: 1000px) {

  /* Kolumna tekstu wraca do zwykłego toku: znak nie stoi już obok akapitu,
     tylko leży na zdjęciu. */
  #second-home .split {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }

  #second-home .split__text {
    max-width: 40rem;
  }

  /* Ramka jest lekko powiększona i - przy dosunięciu do prawej krawędzi -
     wychodzi w lewo, nad kolumnę tekstu. */
  .secondhome__media>.media {
    width: 112%;
  }
}

/* ------------------------------------------------------------ przejście   */

/* Sekcja przejściowa: jeden znak marki na pustym polu, bez nagłówka i bez
   akapitu. Ma zatrzymać przewijanie na moment ciszy przed sekcją decyzji -
   dlatego dostaje własną wysokość mierzona oknem i nic poza grafiką.
   Dolny odstęp zdejmujemy: następna sekcja leży na tym samym paśmie
   i obie mają czytać się jako jeden ciemny rozdział. */
.interlude {
  padding-block: 0 var(--pad-y);
}

/* Znak siedzi okrakiem na linii podziału pasm: dokładnie połowa sylwetki
   na paśmie ciemnym, połowa nad krawędzią, na paśmie jasnym. Przesunięcie
   liczone z szerokości grafiki (muflon ma proporcje bliskie kwadratu, więc
   połowa wysokości to ok. 0.5 szerokości), przez co zanurzenie jest takie
   samo na każdym ekranie. Ujemny margines mieści się w dolnym odstępie
   sekcji poprzedniej, nie wchodzi więc na jej treść. */
.interlude .crest {
  /* Ujemny margines dolny odbiera układowi dokładnie tyle wysokości, ile
     znak wystaje ponad krawędź pasma - sekcja nie robi się przez to wyższa. */
  margin-bottom: calc(var(--crest-w) * -0.5);
}

/* Wyniesienie ponad krawędź siedzi na <picture>, nie na .crest.
   Powód jest konkretny: .crest niesie klasę .reveal, a stan końcowy
   odsłonięcia to `transform: none` - położony na tym samym elemencie
   skasowałby przesunięcie w chwili, w której znak wchodzi na ekran.
   Ujemny margines górny też odpada: skleiłby się z sekcją (margin
   collapsing) i podniósł całe pasmo zamiast samego znaku. */
.interlude .crest picture {
  transform: translateY(calc(var(--crest-w) * -0.5));
}

@media (max-width: 767px) {
  .interlude .crest {
    margin-bottom: calc(var(--crest-w) * -0.5);
  }

  .interlude .crest picture {
    transform: translateY(calc(var(--crest-w) * -0.5));
  }
}

/* --------------------------------------------------- powietrze w siatkach  */

.amen,
.why,
.qa,
.seasons,
.apart__grid {
  margin-top: var(--sec-gap);
}

/* Listy stojące samodzielnie w kolumnie podziału nie odsuwają się od góry:
   inaczej prawa połowa startowałaby niżej niż lewa. */
.split .market__points,
.split .promise,
.split .home__list {
  margin-top: 0;
}

.amen {
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.market__map {
  margin-top: var(--sec-gap);
}


.operator__marks {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.home {
  margin-top: 0;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.home__list li {
  padding: 1.45rem 0;
}

.vue__exposures li {
  padding: 1.25rem 0;
}

/* --------------------------------------------------------- galeria: skala  */

/* Mechanika slidera zostaje bez zmian - zmienia się wyłącznie format kadru.
   Jeden kadr na pełny ekran: aktywne zdjęcie zajmuje całą szerokość
   i całą wysokość okna, sąsiednie zostają poza kadrem. Taśmę ustawia
   offsetFor() w soho-galeria.js - aktywny slajd przy lewej krawędzi. */
.galeria {
  --shot-w: 100vw;
  /* Bez białego paska między sekcjami - taśma styka się z sąsiadami. */
  padding-block: 0;
  position: relative;
}

/* Taśma wypełnia ekran w pionie: żadnych pasów nad i pod kadrem.
   Wysokość liczona z svh, nie vh - inaczej pasek adresu na mobile
   ucinałby dół kadru. Proporcja ustępuje wysokości, przycięcie robi
   object-fit: cover. */
.galeria .shot .media {
  aspect-ratio: auto;
  height: 100svh;
}

/* Kropki nie mogą już stać pod taśmą (to byłby ten pasek), więc leżą
   na dolnej krawędzi kadru. Stąd jasny kolor zamiast linii na papierze. */
.galeria>.wrap:last-child {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1rem, 2.4vw, 1.75rem);
  z-index: 3;
  pointer-events: none;
}

.galeria .galeria__dots {
  margin-top: 0;
  pointer-events: auto;
}

.galeria .galeria__dots button {
  background: rgba(255, 255, 255, .55);
}

.galeria .galeria__dots button[aria-selected="true"] {
  background: #fff;
}

/* Strzałki wracają na oś kadru: pod taśmą nie ma już pasa na kropki. */
.galeria .galeria__nav {
  top: 50%;
}

.galeria__head {
  max-width: 36rem;
}

.galeria__stage {
  margin-top: var(--sec-gap);
}

/* Zbliżenie schodzi z kadru dopiero na aktywnym slajdzie. Ruch dzieje się
   wewnątrz ramki (.media ma overflow: hidden), więc taśma nie rozjeżdża się
   i pomiary slidera pozostają nietknięte. */
.galeria__viewport[data-slider] .shot .media img {
  transform: scale(1.05);
  transition: transform 1.1s var(--ease);
}

.galeria__viewport[data-slider] .shot[data-current] .media img {
  transform: none;
}

@media (max-width: 999px) {

  /* Na telefonie pełny ekran zostawiłby z wizualizacji wąski wycinek
     środka - kadr 3:2 daje wysokość, nie gubiąc bryły. */
  .shot .media,
  .galeria .shot .media {
    aspect-ratio: 3 / 2;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .galeria__viewport[data-slider] .shot .media img {
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------- wejścia elementów */

/* Jeden dodatkowy wariant odsłonięcia: materiał wchodzi minimalnie z dołu
   i ze zbliżenia. Celowo nie mnożymy typów ruchu - na stronie działają
   cztery: odsłonięcie treści, kurtyna kadru, dryf przy przewijaniu
   i maska wierszy w hero. */
.js .reveal--slow {
  transition-duration: 1.15s;
}

/* --------------------------------------------------------------- mobile    */

@media (max-width: 999px) {
  .split {
    gap: clamp(2.25rem, 7vw, 3.5rem);
  }

  .split__text {
    max-width: none;
  }

  /* Kolejność w pionie zawsze taka sama: najpierw tekst, potem materiał -
     niezależnie od tego, po której stronie stoi na desktopie. */
  .split--flip .split__media {
    order: 0;
  }
}

/* --------------------------------------------------------------- print    */

@media print {

  .nav,
  .mobar,
  .drawer,
  .totop,
  .hero__media {
    display: none !important;
  }

  .band {
    background: #fff !important;
    color: #000 !important;
  }
}