/* ==========================================================================
   Podstrona Oprawy i marki - sekcja 2: "Dobieramy, nie tylko pokazujemy".

   Naglowek stoi w skali SEKCJA - clamp(2.1rem, 4.2vw, 4.2rem) - identycznie
   jak "Marki bez logotypow" nizej. Wczesniej mial 3rem i byl najslabszym
   naglowkiem w calym serwisie: przegrywal nawet z podpisami sekcji na home.
   Zeby 4.2rem sie zmiescilo, naglowek wyszedl z waskiej kolumny tekstu i
   dostal wlasny rzad na osiem z dwunastu kolumn.

   Uklad na desktopie - JEDEN rzad, dwie kolumny:
     kolumna tekstu (1-8): naglowek na pelna szerokosc, pod nim akapit i osie
                           zawezone do szesciu kolumn siatki (6/7 kolumny)
     kolumna zdjecia (8-12)
   Wczesniej zdjecie stalo w siatce dwurzedowej i rozciagalo sie na oba rzedy.
   Grid rozdziela nadmiar wysokosci elementu rozpietego miedzy rzedy, wiec to
   zdjecie - a nie typografia - ustawialo odstep miedzy naglowkiem a akapitem:
   31px przy 1024, 116px przy 1440. Teraz naglowek i tekst leza w jednym pudle
   w normalnym flow, wiec odstep to dokladnie margin-bottom naglowka.
   Zdjecie jest wyzsze od kolumny tekstu, wiec asymetria rzedu zostaje.

   Trzy osie doboru pod akapitem to typograficzne echo zdania wyzej -
   te same trzy rzeczowniki, ktore wlasnie padly. Zero nowych obietnic.
   ========================================================================== */

.oim-dobor__in { min-width: 0; }

/* Ponizej 1024 pionowa etykieta .marked spada do poziomu i dubluje sie z
   naglowkiem sekcji - zostawiamy sam naglowek. */
@media (max-width: 1023px) {
  .oim-dobor .marked > .label { display: none; }
}

@media (min-width: 1024px) {
  .oim-dobor .marked > .label {
    height: auto;
    padding-right: 0;
    border-right: 0;
  }

  .oim-dobor__in {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
    padding-left: clamp(1.75rem, 3vw, 3.25rem);
    border-left: 1px solid var(--hairline);
  }

  .oim-dobor__col {
    grid-column: 1 / 8;
    min-width: 0;
  }

  .oim-dobor__h {
    padding-inline-end: clamp(1rem, 2vw, 2rem);
  }

  /* Akapit i osie stoja na szesciu kolumnach siatki nadrzednej, a kolumna
     tekstu ma ich siedem - stad 6/7 szerokosci rodzica. */
  .oim-dobor__text {
    width: calc(600% / 7);
    padding-inline-end: clamp(1rem, 2vw, 2rem);
  }

  .oim-dobor__fig {
    grid-column: 8 / -1;
  }
}

/* --- Tekst -------------------------------------------------------------- */
/* Gardlem jest serifowa linia "nie tylko pokazujemy" - 20 znakow Zodiaka.
   Skala jest liczona tak, zeby ta linia miescila sie w jednym wierszu i na
   telefonie, i w osmiu kolumnach siatki desktopowej. */
.oim-dobor__h {
  font-size: clamp(2.1rem, 4.67vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.oim-dobor__p {
  max-width: 44ch;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.1rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.oim-dobor__axes {
  margin-top: clamp(2rem, 3.4vw, 2.75rem);
  border-top: 1px solid var(--hairline);
}

.oim-dobor__axis {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
}

/* Zodiak ma proporcjonalne cyfry: "01" jest o 3,5px wezsze niz "02" i "03",
   wiec etykiety zaczynaly sie w trzech roznych miejscach. Stala szerokosc
   pudelka plus cyfry tabelaryczne daja jedna krawedz startu dla wszystkich. */
.oim-dobor__axis-n {
  flex: none;
  width: 1.75em;
  font: 300 0.85rem/1 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--purple);
}

/* --- Zdjecie ------------------------------------------------------------ */
.oim-dobor__fig {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .oim-dobor__fig { aspect-ratio: 3 / 2; }
}

@media (min-width: 1024px) {
  .oim-dobor__fig {
    margin-top: 0;
    aspect-ratio: 4 / 5;
  }
  /* Kadr pionowy z poziomego zrodla - przesuwamy okno w prawo, zeby zawias
     (jedyny punkt ostrosci) stanal blizej srodka plyty. */
  .oim-dobor__fig img { object-position: 72% 50%; }
}