/* ==========================================================================
   Z-Natury - blog: pierwszy wpis w ukladzie poziomym

   Odwzorowanie bloku .featured z makiety klienta (Z-Natury_Blog.html):
   zdjecie po lewej (52% szerokosci), tresc po prawej, ponizej 760 px powrot
   do ukladu pionowego ze zdjeciem 16:9 nad tekstem.

   Kafelek petli sklada sie z czterech elementow, ale w przeplywie stoja tylko
   DWA - przycisk i pigulka z kategoria maja w szablonie `position: absolute`.
   Dlatego wystarczy obrocic istniejacy flex (szablon daje `column`) i wyjac
   zdjecie z przeplywu: wtedy to ono dopasowuje sie do wysokosci tekstu,
   zamiast narzucac karcie swoja wysokosc naturalna.
   ========================================================================== */

/* Kafelek na cala szerokosc siatki (3 kolumny). `width` obsluguje tez tryb
   Isotope, wlaczany przez pasek filtrow - tam kafelki maja `position:
   absolute` i siatka ich nie dotyczy. */
.bde-post-loop .ee-post:first-child {
  grid-column: 1 / -1;
  width: 100%;
}

/* `overflow: hidden` zamiast wpisywania zdjeciu nowego promienia: szablon
   nadaje mu `border-radius: 18px 18px 0 0` (dobre, gdy lezy na gorze karty,
   zle, gdy stoi po lewej). Przycinanie na karcie nadazy za kazda zmiana
   promienia w Breakdance. */
.bde-post-loop .ee-post:first-child > a > div {
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.bde-post-loop .ee-post:first-child > a > div > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Zapas na dole robi miejsce przyciskowi, ktory jest pozycjonowany
   absolutnie - bez niego dluzsza zajawka weszlaby pod niego. */
.bde-post-loop .ee-post:first-child > a > div > [class*="bde-div"] {
  margin-left: 52%;
  padding: 26px 26px 60px;
}

.bde-post-loop .ee-post:first-child > a > div > [class*="bde-button"] {
  left: calc(52% + 26px);
}


/* --- Typografia wyroznionego wpisu (wg .featured h2 / .featured p) -------- */

.bde-post-loop .ee-post:first-child h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.2;
}

.bde-post-loop .ee-post:first-child [class*="bde-text"] p {
  font-size: 14px;
  line-height: 1.6;
}


/* --- Telefon ------------------------------------------------------------- */

@media (max-width: 759px) {

  .bde-post-loop .ee-post:first-child > a > div {
    flex-direction: column;
  }

  .bde-post-loop .ee-post:first-child > a > div > img {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .bde-post-loop .ee-post:first-child > a > div > [class*="bde-div"] {
    margin-left: 0;
    padding: 15px 15px 55px;
  }

  .bde-post-loop .ee-post:first-child > a > div > [class*="bde-button"] {
    left: 15px;
  }
}