/* ============================================================
   BLOG LISTING STRÁNKA — ČLÁNKY POD SEBOU S OBRÁZKAMI
   blog-listing-fix.css  (v3 — finálna)
   Identifikátor: .page-width[style*="1350px"] — len /blog/m222
   Pridať POSLEDNÝ za contact_fix12.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1) OUTER GRID → FLEX COLUMN
   Selektor (0,4,1) > contact_fix12 (0,3,1) → vyhráva
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] > div:first-child {
  display:               flex !important;
  flex-direction:        column !important;
  align-items:           stretch !important;
  gap:                   0 !important;
  grid-template-columns: unset !important;
  width:                 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   2) WRAPPER — centrovanie, max šírka
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] {
  max-width:  900px !important;
  margin:     0 auto !important;
  padding:    0 24px !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════
   3) PRÁZDNE ELEMENTY — schovaj
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] > div:first-child > p,
.pageBodyCenterIn .editContent .page-width[style*="1350px"] > div:first-child > br,
.pageBodyCenterIn .editContent .page-width[style*="1350px"] > div:first-child > ul {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   4) HR — oddelovač medzi článkami
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] > div:first-child > hr {
  width:      100% !important;
  border:     none !important;
  border-top: 1px solid #e2dbd4 !important;
  margin:     0 0 32px !important;
}

/* ═══════════════════════════════════════════════════════════
   5) KAŽDÝ ČLÁNOK — obrázok vľavo, text vpravo
   (column_block má inline flex-row z existujúceho JS)
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block {
  width:          100% !important;
  max-width:      100% !important;
  box-sizing:     border-box !important;
  border-bottom:  1px solid #e2dbd4 !important;
  padding-bottom: 32px !important;
  margin-bottom:  32px !important;
}

/* ═══════════════════════════════════════════════════════════
   6) OBRÁZOK — zobraz (contact_fix12 ho skrýva display:none)
   Selektor (0,5,1) > contact_fix12 (0,3,1)
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block > div:first-child:not(:last-child) {
  display: block !important;
}

.pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block img {
  width:         100% !important;
  height:        180px !important;
  object-fit:    cover !important;
  border-radius: 8px !important;
  display:       block !important;
}

/* ═══════════════════════════════════════════════════════════
   7) TEXTOVÝ STĹPEC — fill zvyšok
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block > div:last-child {
  flex:       1 1 0 !important;
  min-width:  0 !important;
  max-width:  100% !important;
  text-align: left !important;
  width:      auto !important;
}

/* ═══════════════════════════════════════════════════════════
   8) "NOVÍ V PRÍRODNEJ KOZMETIKE" BLOK
   — column_block priamo v .editContent (nie v page-width)
   — contact_fix12 skrýva jeho obrázok → zobrazíme
   Selektor (0,4,1) > contact_fix12 (0,3,1)
   ═══════════════════════════════════════════════════════════ */
.pageBodyCenterIn .editContent > .column_block > div:first-child:not(:last-child) {
  display:   block !important;
  flex:      0 0 260px !important;
  width:     260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

.pageBodyCenterIn .editContent > .column_block > div:first-child:not(:last-child) img {
  width:         100% !important;
  height:        180px !important;
  object-fit:    cover !important;
  border-radius: 8px !important;
  display:       block !important;
}

/* ═══════════════════════════════════════════════════════════
   9) MOBIL (≤ 768px) — obrázok hore, text dole
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pageBodyCenterIn .editContent .page-width[style*="1350px"] {
    padding: 0 16px !important;
  }

  /* Prepíš JS inline flex-direction: row → column */
  .pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block {
    flex-direction: column !important;
    gap:            16px !important;
  }

  .pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block > div:first-child {
    flex:      0 0 auto !important;
    width:     100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }

  .pageBodyCenterIn .editContent .page-width[style*="1350px"] .column_block img {
    height: 200px !important;
  }

  /* Noví blok — mobil */
  .pageBodyCenterIn .editContent > .column_block {
    flex-direction: column !important;
  }

  .pageBodyCenterIn .editContent > .column_block > div:first-child:not(:last-child) {
    flex:      0 0 auto !important;
    width:     100% !important;
    min-width: unset !important;
    max-width: 100% !important;
  }
}