/* ==========================================================================
   Sekcja: Dlaczego Michalowska (.dlaczego)
   Oddech miedzy ciezszymi sekcjami: zero zdjec, zero kafli, zero cieni.
   Uklad to redakcyjna tabela - pionowa etykieta, mieszany naglowek w lewej
   kolumnie, po prawej piec wierszy "tytul | opis" na ciaglych hairline'ach.
   Rytm zapozyczony z listy nagrod u Kisty, ale wartosc po prawej to zdanie,
   nie rok, wiec wiersz jest wyzszy i ma wlasna hierarchie stopni.
   ========================================================================== */

.dlaczego__in { min-width: 0; }

/* --- Etykieta sekcji ---------------------------------------------------- */
/* Ponizej 1024 etykieta z .marked lezy poziomo - dostaje wlasny hairline,
   ktory wyznacza gorna krawedz sekcji (ta sama zasada co w .marka). */
@media (max-width: 1023px) {
  .dlaczego .marked > .label {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
  }
}

@media (min-width: 1024px) {
  /* writing-mode: vertical-rl + rotate(180deg) sadza tekst na dole toru,
     wiec dosuwamy go do konca osi inline - po obrocie to wizualna gora.
     Pionowy hairline z .marked zostaje na pelnej wysokosci sekcji. */
  .dlaczego .marked > .label {
    display: flex;
    justify-content: flex-end;
  }

  .dlaczego__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    padding-left: clamp(1.75rem, 3vw, 3.25rem);
  }
}

/* --- Naglowek ------------------------------------------------------------ */
/* Gardlem jest linia serifowa "Michałowska?" - ma zostac w jednym wierszu na
   kazdej szerokosci. Od 1024 px naglowek nie ma juz calej szerokosci tresci,
   tylko wlasna kolumne (~40%), wiec stopien spada z 6.6 do 5 jednostek.
   Skala liczy sie z szerokosci kontenera, nie viewportu - inaczej przy waskim
   desktopie linia serifowa wychodzila poza pionowy hairline listy. */
.dlaczego__h {
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.dlaczego__h .serif { letter-spacing: -0.025em; }

@media (min-width: 560px) {
  .dlaczego__h { font-size: clamp(2.6rem, 6.6vw, 4.6rem); }
}

/* Fallback bez container queries: ta sama krzywa liczona z viewportu, tylko
   z zapasem, bo do szerokosci kolumny dochodzi jeszcze tor etykiety. */
@media (min-width: 1024px) {
  .dlaczego__h { font-size: clamp(2.6rem, 3.5vw, 4.2rem); }
}

@supports (font-size: 1cqi) {
  .dlaczego__in { container-type: inline-size; }
  .dlaczego__h { font-size: clamp(2.2rem, 11cqi, 3.4rem); }

  @media (min-width: 560px) {
    .dlaczego__h { font-size: clamp(2.6rem, 6.6cqi, 4.6rem); }
  }

  @media (min-width: 1024px) {
    .dlaczego__h { font-size: clamp(2.6rem, 5cqi, 4.2rem); }
  }
}

@media (min-width: 1024px) {
  /* Lewa kolumna jest domknieta z gory i z dolu: naglowek startuje rowno
     z pierwszym hairline'em listy, waski kadr konczy sie rowno z hairline'em
     domykajacym. Swiatlo miedzy nimi jest wtedy oddechem, a nie dziura. */
  .dlaczego__head {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding-right: clamp(2rem, 4vw, 4rem);
  }
}

/* --- Waski pionowy akcent ------------------------------------------------ */
/* Jedyny obraz w sekcji i jedyny element, ktory nie jest typografia ani linia.
   Ma byc przecinkiem, nie zdjeciem: waski slup, zawsze przy lewej krawedzi
   kolumny, nigdy szerszy niz jedna trzecia naglowka. */
.dlaczego__figure {
  width: clamp(9rem, 46vw, 12rem);
  margin-top: clamp(2rem, 5vw, 2.75rem);
}
.dlaczego__media { aspect-ratio: 5 / 9; }

/* Miedzy 640 a 1024 px sekcja jest jeszcze jednokolumnowa, ale kolumna jest
   juz szeroka. Kadr postawiony pod naglowkiem zostawialby obok siebie pas
   martwego papieru, wiec na tym pasmie stoi obok niego: naglowek dosuniety
   do gory, kadr do dolu wspolnego wiersza. */
@media (min-width: 640px) and (max-width: 1023px) {
  .dlaczego__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 3.5rem);
    align-items: end;
  }
  .dlaczego__h { align-self: start; }
  .dlaczego__figure {
    width: clamp(9rem, 20vw, 12rem);
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  /* Kadr wypelnia cala kolumne i siedzi tuz pod naglowkiem.
     Wczesniej byl waski (max 13rem) i zrzucany przez margin-top:auto na sam
     dol, wiec nad nim zostawalo ~250px pustki, a on sam czytal sie jak
     sierota odklejona od kompozycji. */
  .dlaczego__figure {
    width: 100%;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .dlaczego__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* kadr przyciety na postac, nie na beton dookola niej */
    object-position: 50% 30%;
  }
}

/* --- Lista --------------------------------------------------------------- */
/* Hairline na kazdej pozycji od gory plus jeden domykajacy pod lista: linie
   sa ciagle i wyznaczaja rytm sekcji. Bez ramek, bez tla, bez cieni. */
.dlaczego__list {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
  /* Pionowy hairline oddziela naglowek od listy i domyka siatke redakcyjna:
     dwie pionowe linie (etykieta, lista) + poziome linie wierszy. */
  .dlaczego__list {
    margin-top: 0;
    border-left: 1px solid var(--hairline);
  }
}

/* Odstep od pionowej linii daje padding wiersza, nie listy: dzieki temu
   hairline wiersza dobija az do pionowego hairline'u i siatka domyka sie
   w rogu, zamiast zostawiac 60 px sierocego swiatla miedzy dwiema liniami. */
.dlaczego__item {
  position: relative;
  padding-block: clamp(1.5rem, 3vw, 2.35rem);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
  .dlaczego__item { padding-left: clamp(2rem, 4vw, 4rem); }
}

/* Wiersz jak u Kisty: po lewej to, co nazywa, po prawej to, co tlumaczy.
   Ponizej 768 opis schodzi pod tytul - w waskiej kolumnie dwie szpalty
   zamienilyby sie w dwa slupki po kilka znakow. */
/* Kolumna tytulow jest tak szeroka, zeby najdluzszy z nich - "Doswiadczenie
   od 2009 roku" - zostal w jednym wierszu. Piec jednowierszowych tytulow daje
   rytm listy nagrod; jeden zlamany na dwoje od razu go psuje. */
@media (min-width: 768px) {
  .dlaczego__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.2vw, 3rem);
    align-items: start;
  }
}

/* Fioletowa linijka nasuwa sie na hairline wiersza - jedyny akcent koloru.
   Wiersze nie sa linkami, wiec hover ma byc szeptem, nie zaproszeniem:
   zadnego tla, zadnego przesuniecia layoutu. */
.dlaczego__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.dlaczego__t {
  margin-bottom: 0.5rem;
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}

@media (min-width: 768px) {
  .dlaczego__t { margin-bottom: 0; }
}

/* Opis siedzi stopien nizej i w szarosci - to on robi z wiersza pare
   "nazwa - wyjasnienie", a nie dwa rownorzedne bloki tekstu. */
.dlaczego__d {
  max-width: 46ch;
  font-size: clamp(0.92rem, 0.88rem + 0.18vw, 1.02rem);
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
  transition: color var(--dur) var(--ease);
}

@media (hover: hover) {
  .dlaczego__item:hover::before { transform: scaleX(1); }
  .dlaczego__item:hover .dlaczego__t { color: var(--purple); }
  .dlaczego__item:hover .dlaczego__d { color: var(--ink); }
}