/* ==========================================================================
   Podstrona Oprawy i marki - sekcja 1: otwarcie.
   Rytm: eyebrow -> H1 (jedyny na stronie) -> lead -> pelnoekranowy pas
   fotograficzny -> jednozdaniowy podpis zakresu.

   Skala naglowkow na tej stronie ma DWA poziomy, nie cztery:
     DISPLAY  clamp(2.35rem, 5.55vw, 5rem)  - hero H1 i "Nowe kolekcje",
     SEKCJA   clamp(2.1rem, 4.67vw, 4.2rem) - "Dobieramy" i "Marki".
   Na 1440px daje to 80px i 67px - stopien 1.19, wyrazny, ale nie karykaturalny.
   Oba stopnie skaluja sie tym samym nachyleniem, wiec proporcja trzyma sie
   na kazdej szerokosci, a nie tylko w punkcie kontrolnym.
   Hero i kolekcje to warstwa fotograficzna strony, dwie pozostale sekcje to
   warstwa tekstowa. Trzeciego stopnia nie ma.

   Zasady ukladu:
   - naglowek stoi w lewej kolumnie, lead w prawej i konczy sie na tej samej
     linii bazowej co druga linia naglowka, wiec blok czyta sie jako jeden akapit
     tekstu, a nie jako dwa niezalezne pola,
   - pas zdjeciowy jest jedynym elementem wychodzacym poza .wrap - to on robi
     obietnice "najbardziej fotograficznej strony serwisu",
   - podpis pod pasem to ZDANIE. Poprzednia wersja miala tam czteropolowy pasek
     z numeracja 01-04 i pionowymi hairline'ami; wygladal jak filtr kategorii,
     a nie byl nawet linkiem. Kontrolka bez akcji jest gorsza niz brak kontrolki,
     wiec zostala tresc, a zniknal jej interfejs.
   ========================================================================== */

.oim-hero {
  /* header jest fixed i przezroczysty, wiec pierwszy ekran dostaje pelny oddech */
  padding-top: clamp(7rem, 5.5rem + 4vw, 10rem);
  padding-bottom: var(--section);
}

/* --- Blok naglowkowy ---------------------------------------------------- */
.oim-hero__head {
  display: grid;
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.oim-hero__eyebrow { display: block; }

.oim-hero__h {
  font-size: clamp(2.35rem, 5.55vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.oim-hero__lead {
  max-width: 34ch;
  font-size: clamp(1.15rem, 0.98rem + 0.75vw, 1.65rem);
  line-height: 1.4;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .oim-hero__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    column-gap: 0;
    row-gap: 0;
  }

  .oim-hero__eyebrow {
    grid-column: 1 / 8;
    grid-row: 1;
    margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
    align-self: end;
  }

  /* Od 1024 naglowek ma tylko siedem z dwunastu kolumn, wiec stopien liczymy
     z szerokosci tej kolumny, nie z viewportu - inaczej przy 1024 druga linia
     ("naprawde sa Twoje.") lamie sie na dwie. */
  .oim-hero__h {
    grid-column: 1 / 8;
    grid-row: 2;
    font-size: clamp(2.35rem, 5.55vw, 5rem);
  }

  /* Lead siada w tym samym rzedzie co druga linia naglowka - jego ostatnia
     linia i dol naglowka koncza sie na tej samej wysokosci. */
  .oim-hero__lead {
    grid-column: 8 / -1;
    grid-row: 2;
    padding-left: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: 0.35rem;
  }
}

/* --- Pas fotograficzny -------------------------------------------------- */
.oim-hero__band { width: 100%; }

@media (min-width: 1024px) {
  .oim-hero__band { aspect-ratio: 2.6 / 1; }
}

/* --- Podpis zakresu ----------------------------------------------------- */
/* Jeden hairline u gory i nic wiecej. Cztery kategorie z PRD siedza wewnatrz
   zdania, w Zodiaku - ta sama para krojow co w naglowku. To opis oferty,
   nie deklaracja stanu magazynu; pelne zastrzezenie stoi przy liscie marek. */
.oim-hero__scope {
  display: grid;
  row-gap: 0.9rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.25rem, 2.4vw, 1.9rem);
  border-top: 1px solid var(--hairline);
}

.oim-hero__scope-l { align-self: start; }

.oim-hero__scope-t {
  max-width: 30ch;
  font: 300 clamp(1.35rem, 1rem + 1.5vw, 2.15rem)/1.28 var(--sans);
  letter-spacing: -0.02em;
  /* balance, nie pretty: to dwuwierszowe zdanie w duzym stopniu, wiec chodzi
     o rowne dlugosci obu linii, a nie o samo uniknięcie sieroty na koncu. */
  text-wrap: balance;
}

/* Serif nie moze byc jedynym nosnikiem "to jest kategoria" - jest ozdobnikiem
   rytmicznym. Informacja siedzi w samych slowach, wiec czytnik ekranu nic nie
   traci i nie dodajemy zadnych roli ARIA. */
.oim-hero__scope-t .serif { letter-spacing: -0.01em; }

@media (min-width: 768px) {
  .oim-hero__scope {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0;
    align-items: baseline;
  }
  .oim-hero__scope-l { line-height: 1.9; }
  .oim-hero__scope-t { max-width: 34ch; }
}

@media (min-width: 1024px) {
  .oim-hero__scope { grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr); }
  .oim-hero__scope-t { max-width: 40ch; }
}