/* Oddech - pełnoekranowy pas: kadr ze zdjęciem albo sama typografia */
.ax-breath {
  position: relative;
  overflow: hidden;
  background: var(--ax-ink-deep);
  color: var(--ax-paper);
  --ax-breath-muted: rgba(244, 241, 235, 0.72);
  --ax-breath-caption: rgba(244, 241, 235, 0.6);
  --ax-breath-italic: var(--ax-steel-light);
  --ax-breath-italic-opacity: 1;
}

.ax-breath--sand {
  background: var(--ax-sand);
  color: var(--ax-navy);
}

.ax-breath--paper {
  background: var(--ax-paper);
  color: var(--ax-navy);
}

.ax-breath--sand,
.ax-breath--paper {
  --ax-breath-muted: rgba(53, 59, 102, 0.72);
  --ax-breath-caption: rgba(53, 59, 102, 0.55);
  --ax-breath-italic: var(--ax-navy);
  --ax-breath-italic-opacity: 0.7;
}

/* Nad zdjęciem tekst zawsze leży na ciemnej zasłonie - tony jasne dotyczą tylko wariantu typograficznego. */
.ax-breath--has-photo {
  color: var(--ax-paper);
  --ax-breath-muted: rgba(244, 241, 235, 0.72);
  --ax-breath-caption: rgba(244, 241, 235, 0.6);
  --ax-breath-italic: var(--ax-steel-light);
  --ax-breath-italic-opacity: 1;
}

.ax-breath--photo,
.ax-breath--wide {
  height: clamp(550px, 74svh, 790px);
  display: flex;
  align-items: flex-end;
}

.ax-breath__media {
  position: absolute;
  /* Zapas nad i pod kadrem to droga dla parallaksu - bez niego wyjechałby biały pas. */
  inset: -12% 0;
  height: 124%;
  will-change: transform;
}

.ax-breath__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ax-breath__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * Pętla wideo leży dokładnie na plakacie i wchodzi przenikaniem, gdy pierwsza
 * klatka jest już gotowa - podmiana bez przenikania daje szarpnięcie, bo kadr
 * wideo nigdy nie zgadza się ze zdjęciem co do piksela.
 */
.ax-breath__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}

.ax-breath__video.is-ready {
  opacity: 1;
}

/* Bez ruchu zostaje samo zdjęcie - wideo nie dostaje nawet adresu w skrypcie. */
@media (prefers-reduced-motion: reduce) {
  .ax-breath__video {
    display: none;
  }
}

.ax-breath__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 15, 34, 0.86) 0%, rgba(11, 15, 34, 0.42) 50%, rgba(11, 15, 34, 0.3) 100%);
}

.ax-breath__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ax-maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vh, 72px) var(--ax-gutter);
  display: grid;
  gap: 18px;
}

.ax-breath__lines {
  margin: 0;
  max-width: 22ch;
  font-weight: 600;
  font-size: clamp(34px, 4.2vw, 70px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.ax-breath__line {
  display: block;
}

.ax-breath__italic {
  font-weight: 300;
  font-style: italic;
  color: var(--ax-breath-italic);
  opacity: var(--ax-breath-italic-opacity);
}

/*
 * W projekcie .br-photo i .br-wide mają identyczne reguły - różni je dopiero
 * treść. Zostawiamy szerszy łamacz dla "wide", bo ten wariant niesie trzy linie.
 */
.ax-breath--wide .ax-breath__lines {
  max-width: 28ch;
}

/*
 * Pas typograficzny nie wozi górnego oddechu - bierze go od sekcji nad sobą,
 * tak jak w projekcie. Sam trzyma tylko dół. Wielkie litery mają wejść zaraz
 * po poprzedniej treści; własny padding u góry dokładał się do tego, co dała
 * już tamta sekcja, i zdanie odjeżdżało na środek pustego pola.
 */
.ax-breath--type {
  display: grid;
  align-content: center;
  padding: 0 0 clamp(80px, 10vh, 150px);
}

/* Pas typograficzny liczy powietrze samą sekcją - wewnętrzny padding dublowałby odstęp. */
.ax-breath--type .ax-breath__inner {
  padding-top: 0;
  padding-bottom: 0;
}

/*
 * Blok zawęża się do najdłuższego wiersza i staje na środku sekcji. Bez tego
 * wyrównanie parzystego wiersza do prawej odrzuca go na krawędź okna i para
 * wierszy przestaje czytać się jako jedno zdanie rozpisane na dwie linie.
 */
.ax-breath--type .ax-breath__lines {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(48px, 7.5vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  display: grid;
  gap: clamp(6px, 1vw, 16px);
}

.ax-breath--type .ax-breath__line {
  will-change: transform;
}

.ax-breath--type .ax-breath__line:nth-child(even) {
  text-align: right;
}

.ax-breath__side {
  position: absolute;
  right: var(--ax-gutter);
  top: clamp(40px, 7vh, 80px);
  z-index: 2;
  margin: 0;
  max-width: 34ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  text-align: right;
  color: var(--ax-breath-muted);
  text-wrap: pretty;
}

.ax-breath__footnote {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ax-breath-caption);
}

@media (max-width: 900px) {
  /* Nota z boku nachodzi na tekst główny, gdy kadr zwęzi się do telefonu. */
  .ax-breath__side {
    display: none;
  }

  .ax-breath--photo,
  .ax-breath--wide {
    height: clamp(460px, 68svh, 620px);
  }
}

@media (max-width: 640px) {
  .ax-breath__lines,
  .ax-breath--wide .ax-breath__lines {
    max-width: none;
    font-size: clamp(30px, 9vw, 40px);
  }

  /*
   * Telefon: zdanie stoi w osi ekranu, wiersz pod wierszem. Na pulpicie parzysty
   * wiersz idzie do prawej krawędzi bloku i para czyta się jak jedno zdanie
   * rozpisane na dwie linie, ale na 390 px blok zajmuje niemal cały ekran -
   * krótszy wiersz zwisał wtedy przy lewej krawędzi pod dłuższym i para
   * przestawała trzymać się razem.
   */
  .ax-breath--type .ax-breath__lines {
    width: auto;
    font-size: clamp(34px, 11vw, 54px);
    text-align: center;
  }

  .ax-breath--type .ax-breath__line:nth-child(even) {
    text-align: center;
  }

  /*
   * Powietrze pasa na telefonie. Pas nie ma własnego górnego oddechu - bierze go
   * od sekcji nad sobą, a ta domyka się na telefonie krótko (ok. 28 px), więc
   * wielkie litery siadały zaraz pod poprzednią treścią, mając pod sobą prawie
   * dwa razy tyle pustego pola. Dół oddaje te kilkadziesiąt pikseli górze.
   *
   * Wartości są liczone optycznie, nie po pudełku: pod ostatnim wierszem stoi
   * jeszcze wydłużenie dolne kursywy, więc żeby oba odstępy wyglądały na równe,
   * dolny padding musi być mniejszy od sumy górnego i domknięcia sekcji nad pasem.
   */
  .ax-breath--type {
    padding: clamp(18px, 3vh, 30px) 0 clamp(44px, 6.6vh, 62px);
  }
}