/* ==========================================================================
   Sekcja: Manifest marki (.marka)
   Blok gorny: pionowa etykieta przy hairline + eyebrow + manifest.
   Blok dolny: zdjecie (lewa) + akapity z CTA (prawa, ~46%), zamkniete hairlinem.

   Gest wlasny, nie z Kisty: zdjecie lamie siatke i wychodzi az do lewej
   krawedzi ekranu. Rail etykiety konczy sie dokladnie na gornej krawedzi
   zdjecia - fotografia go przecina i linia juz nie wraca. Dzieki temu pod
   wypuszczonym kadrem nie ma zadnego kikuta pionowej linii, a zamykajacy
   hairline biegnie z tej samej krawedzi ekranu co zdjecie: dol sekcji ma
   jedno domkniecie, nie skrzyzowanie dwoch roznych linii.

   Hierarchia powietrza (od najciasniejszego): lead -> note -> CTA ->
   manifest -> zdjecie -> ... -> najwiekszy odstep w calej sekcji to ten
   miedzy dolna krawedzia zdjecia i CTA a zamykajacym hairlinem.
   ========================================================================== */

/* Wspolna miara ucieczki w lewo, uzywana przez zdjecie i przez hairline.
   Mobile: tylko padding .wrap.
   Desktop: padding .wrap + tor etykiety (3.5rem) + wlasny padding kolumny
   tresci + polowa marginesu, ktory .wrap zostawia powyzej 1440 px. */
.marka { --marka-bleed: var(--gutter); }

/* --- Etykieta sekcji ----------------------------------------------------- */
/* Ten sam hairline 1px w obu breakpointach, tylko obrocony o 90 stopni:
   ponizej 1024 px lezy poziomo pod etykieta i wyznacza gorna krawedz sekcji,
   od 1024 px stoi pionowo przy obroconej etykiecie (to juz robi .marked).
   Poziomy wariant ucieka w lewo tak samo jak zdjecie i dolny hairline, zeby
   obie kreski sekcji startowaly z tej samej krawedzi ekranu. */
@media (max-width: 1023px) {
  .marka .marked > .label {
    margin-left: calc(-1 * var(--marka-bleed));
    padding-left: var(--marka-bleed);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
  }
}

/* --- Blok gorny: eyebrow + manifest -------------------------------------- */
/* padding-bottom, nie margin na zdjeciu: to on wyznacza dolna granice railu,
   wiec pionowa linia konczy sie rowno z gorna krawedzia fotografii. */
.marka__head { padding-bottom: clamp(2.25rem, 6vw, 3rem); }

/* Etykieta w torze .marked jest indeksem sekcji i zostaje wyszarzona.
   Eyebrow to zdanie marki, wiec idzie w --ink (klasa .label--ink) - dzieki
   temu dwa mikro-wersaliki nie czytaja sie jak duplikat, tylko jak dwa
   rozne poziomy. */
.marka__eyebrow { margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem); }

/* --- Manifest: mieszany naglowek sans + serif ---------------------------- */
/* Waga 300 i podzial sans/serif dziedziczymy z .h2 - tu tylko skala.
   Naglowek dostaje pelna szerokosc kolumny tresci, wiec moze urosnac tak,
   zeby dominowal kadr, a nie miec wagi akapitu.
   Skala jest liniowa wzgledem viewportu (9.8vw = 2.4rem przy 390 px), zeby
   dluzsza linia serifowa trzymala dwa wiersze takze na 360 i 320 px. */
.marka__title {
  font-size: clamp(2rem, 9.8vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.marka__title .serif { letter-spacing: -0.032em; }

@media (min-width: 768px) {
  .marka__title .serif { letter-spacing: -0.02em; }
}

/* --- Zdjecie ------------------------------------------------------------- */
/* Ucieczka w lewo. Prawa krawedz zostaje na siatce, wiec kadr rosnie tylko
   w jedna strone i czyta sie jak swiadome zlamanie kolumny. */
.marka__figure { margin-left: calc(-1 * var(--marka-bleed)); }
.marka__media { aspect-ratio: 3 / 2; }

/* Kadr jest szerszy niz oryginal 3:2, wiec cover przycina gore i dol.
   Przesuwamy okno w gore - inaczej szersze proporcje zjadaja glowy. */
.marka__media img { object-position: 50% 17%; }

/* --- Akapity ------------------------------------------------------------- */
.marka__aside { margin-top: clamp(2rem, 5vw, 2.75rem); }

.marka__lead {
  max-width: 44ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.marka__note {
  max-width: 46ch;
  margin-top: clamp(1.25rem, 2.5vw, 1.9rem);
  color: var(--muted);
}

/* --- CTA ----------------------------------------------------------------- */
/* CTA nalezy do akapitow, wiec siedzi tuz pod nimi - o krok dalej niz odstep
   lead/note, ale bez zadnej dziury. Cale powietrze sekcji zbiera sie nizej,
   pod zdjeciem i pod CTA. */
.marka__act { margin-top: clamp(1.6rem, 4vw, 2.25rem); }

/* --- Hairline domykajacy sekcje ------------------------------------------ */
/* Startuje z tej samej krawedzi ekranu co zdjecie, wiec pod wypuszczonym
   kadrem nie zostaje sierocy pas tla. Odstep nad linia jest celowo
   najwiekszy w calej sekcji - to on niesie oddech, a nie luka w kolumnie
   tekstu. */
.marka__rule {
  margin-top: clamp(5rem, 20vw, 8rem);
  margin-left: calc(-1 * var(--marka-bleed));
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .marka {
    --marka-pad: clamp(2rem, 3.4vw, 3.25rem);
    --marka-rail: 3.5rem;
    --marka-bleed: calc(
      var(--gutter) + var(--marka-rail) + var(--marka-pad) +
      max(0px, (100vw - var(--measure)) / 2)
    );
  }

  /* Etykieta ma czytac sie od gory sekcji. writing-mode: vertical-rl razem
     z rotate(180deg) sadza tekst na dole pudelka, wiec dosuwamy go do konca
     osi inline - po obrocie to wizualna gora. Wysokosc railu bierze sie juz
     tylko z bloku gornego, bo .marked obejmuje wylacznie eyebrow i manifest. */
  .marka .marked > .label {
    display: flex;
    justify-content: flex-start;
  }

  .marka__head {
    padding-left: var(--marka-pad);
    padding-bottom: clamp(3rem, 5.5vw, 5rem);
  }

  /* Blok dolny wraca na te sama os pionowa co manifest: tor etykiety plus
     jej odstep od tresci. Dzieki temu naglowek, kolumna tekstu i prawa
     krawedz hairline'u stoja w jednej linii. */
  .marka__lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    column-gap: clamp(2.5rem, 4.4vw, 4rem);
    row-gap: 0;
    padding-left: calc(var(--marka-rail) + var(--marka-pad));
  }

  .marka__figure { grid-column: 1;      grid-row: 1; margin-top: 0; }
  .marka__aside  { grid-column: 2;      grid-row: 1; margin-top: 0; }
  .marka__rule   { grid-column: 1 / -1; grid-row: 2; }

  .marka__title { font-size: clamp(3.5rem, 7vw, 7rem); letter-spacing: -0.025em; }
  .marka__title .serif { letter-spacing: -0.015em; }

  /* Kolumna tekstu musi utrzymac wage obok wielkiego manifestu: wezsza miara
     + wieksza skala leadu. */
  .marka__lead {
    max-width: 38ch;
    font-size: clamp(1.2rem, 0.55rem + 0.95vw, 1.45rem);
  }

  /* Wysokosc wiersza wyznacza zdjecie, nie kolumna tekstu - kadr po ucieczce
     w lewo jest duzo szerszy, wiec musi tez byc wysoki.
     Proporcja 3/2 musi tu zniknac: grid wylacza stretch w poprzek dla
     elementu z aspect-ratio, wiec obrazek liczylby szerokosc z wysokosci
     i wchodzil na kolumne tekstu.
     min-height rosnie z viewportem, bo ucieczka w lewo tez rosnie - inaczej
     kadr splaszczalby sie do paska przy szerokich ekranach. */
  .marka__figure {
    position: relative;
    align-self: start;
    min-height: clamp(24rem, 29vw, 31rem);
  }
  .marka__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  /* Prawa kolumna zaczyna sie rowno z gora zdjecia i konczy tam, gdzie
     konczy sie tekst. Zadnego rozciagania do dolu kadru - nadmiar wysokosci
     zostaje powietrzem nad hairlinem, wspolnym dla obu kolumn. */
  .marka__aside {
    align-self: start;
    display: flex;
    flex-direction: column;
  }
  .marka__act { margin-top: clamp(2rem, 3.2vw, 2.6rem); }

  /* Najwiekszy interwal w sekcji. Minimum 10rem trzyma go powyzej 160 px
     takze na 1024 px, gdzie 12.5vw bylo by za male. */
  .marka__rule { margin-top: clamp(10rem, 12.5vw, 13.5rem); }
}