/* ==========================================================================
   Podstrona Oprawy i marki - sekcja 3: "Nowe kolekcje".

   To jest fotograficzny srodek strony, wiec naglowek stoi w skali DISPLAY -
   tej samej co H1 w hero, clamp(2.35rem, 5.55vw, 5rem). Poprzednia wersja miala
   tu wlasne 4.75rem, czyli trzeci rozmiar naglowka na jednej stronie.
   Strona ma dwa poziomy: warstwa fotograficzna (hero, kolekcje) i warstwa
   tekstowa (dobor, marki). Nic pomiedzy.

   Dyptyk laman celowo:
   - kadr lewy (siatka opraw) wychodzi poza lewa krawedz .wrap az do krawedzi
     ekranu - jest "kolekcja", wiec ma sie nie miescic,
   - kadr prawy (portret w przeciwslonecznych) jest pionowy, wezszy i zsuniety
     w dol, wiec dwa zdjecia nie czytaja sie jako para rownych plytek.
   Miedzy kadrami jest rynna z papieru, nie ramka.

   Naglowek jest jednolinijkowy i mieszany w linii (sans + serif obok siebie),
   inaczej niz dwuliniowe naglowki sasiednich sekcji - to lamie rytm strony
   dokladnie tam, gdzie zaczyna sie warstwa zdjeciowa.
   ========================================================================== */

.oim-kolekcje__head {
  display: grid;
  row-gap: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.oim-kolekcje__eyebrow { display: block; }

.oim-kolekcje__h {
  font-size: clamp(2.35rem, 5.55vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.oim-kolekcje__aside {
  display: grid;
  row-gap: clamp(1.5rem, 2.4vw, 2rem);
  justify-items: start;
}

.oim-kolekcje__p {
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  line-height: 1.7;
  text-wrap: pretty;
}

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

  .oim-kolekcje__eyebrow {
    grid-column: 1 / 7;
    grid-row: 1;
    margin-bottom: clamp(1.4rem, 2.4vw, 2rem);
  }

  .oim-kolekcje__h {
    grid-column: 1 / 7;
    grid-row: 2;
    font-size: clamp(2.35rem, 5.55vw, 5rem);
  }

  .oim-kolekcje__aside {
    grid-column: 7 / -1;
    grid-row: 1 / span 2;
    align-content: end;
    padding-left: clamp(1.5rem, 3vw, 3rem);
  }
}

/* --- Slot kanalu -------------------------------------------------------- */
/* Akapit obok naglowka obiecuje, ze wybrane kolekcje pojawiaja sie na tej
   stronie automatycznie. Ten kontener jest miejscem, w ktorym ladują - dyptyk
   ponizej to stan zerowy slotu, a nie dekoracja bez przyszlosci.
   Podmiane robi assets/js/oim-kolekcje.js. */
.oim-kolekcje__feed { display: block; }

/* --- Dyptyk ------------------------------------------------------------- */
/* Szerokosc wyjscia poza .wrap: przy waskim ekranie to sam gutter, przy szerokim
   dochodzi polowa marginesu wynikajacego z max-width kontenera. */
.oim-kolekcje__pair {
  --bleed: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
  display: grid;
  row-gap: clamp(1.25rem, 3vw, 2rem);
}

.oim-kolekcje__a {
  margin-left: calc(-1 * var(--bleed));
  aspect-ratio: 4 / 3;
}

.oim-kolekcje__b {
  width: 68%;
  margin-left: auto;
  aspect-ratio: 3 / 4;
}

@media (max-width: 767px) {
  /* Na waskim ekranie lewy kadr idzie od krawedzi do krawedzi - siatka opraw
     traci sens, gdy jest wielkosci znaczka pocztowego. */
  .oim-kolekcje__a { margin-right: calc(-1 * var(--bleed)); }
}

@media (min-width: 768px) {
  .oim-kolekcje__pair {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2.25rem);
    align-items: start;
  }

  .oim-kolekcje__a {
    grid-column: 1 / 9;
    aspect-ratio: 4 / 3;
  }

  .oim-kolekcje__b {
    grid-column: 9 / -1;
    width: 100%;
    /* Zsuniecie w dol o tyle, zeby prawy kadr wychodzil ponizej lewego.
       Przy mniejszym offsecie oba konczyly sie na tej samej linii i dyptyk
       czytal sie jako dwie rowne plytki, a nie jako przesuniecie.
       Proporcja 2/3 to natywny kadr zrodla - portret nie jest przycinany. */
    margin-top: clamp(3.5rem, 11vw, 10rem);
    aspect-ratio: 2 / 3;
  }
}

.oim-kolekcje__b img { object-position: 55% 40%; }

/* Link owijajacy kadr pojawia sie dopiero po podmianie na zdjecie z kanalu. */
.oim-kolekcje__shot { display: block; height: 100%; }

/* --- Podpis dyptyku ----------------------------------------------------- */
/* Uczciwosc zamiast milczenia: dopoki w slocie stoja kadry pogladowe, podpis
   mowi to wprost. Po podlaczeniu kanalu JS zamienia go na znacznik swiezosci. */
.oim-kolekcje__note {
  max-width: 52ch;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding-top: clamp(1rem, 1.8vw, 1.4rem);
  border-top: 1px solid var(--hairline);
  font-size: clamp(0.85rem, 0.83rem + 0.12vw, 0.92rem);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  /* Podpis siada pod lewym kadrem, nie pod calym dyptykiem - prawy kadr jest
     zsuniety w dol i konczy sie nizej, wiec linia podpisu ma zaczepic sie
     o dolna krawedz siatki opraw. */
  .oim-kolekcje__note { max-width: 46ch; }
}