/* =========================
   BLOG – horizontální karta
   ========================= */

.blog-card {
  background: #444;                 /* tvé tmavé pozadí karty */
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* horizontální layout */
.blog-card--h {
  display: flex;
  gap: 0;
}

/* levý sloupec – obrázek */
.blog-card__image {
  flex: 0 0 42%;
  max-width: 42%;
}
.blog-card__image img,
.blog-card__image--placeholder {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}
.blog-card__image--placeholder {
  background: #2f2f2f;
}

/* pravý sloupec – texty */
.blog-card__body {
  flex: 1 1 auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* meta řádek (autor, datum) */
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
  color: #e3e3e3;
  font-size: 14px;
}
.blog-card__meta i { color: #f1a9c2; }   /* ikonky do růžova */

/* titulek/nadpis */
.blog-card__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.blog-card__title a {
  color: #f1f7ff;                    /* světlejší pro kontrast */
  text-decoration: none;
}
.blog-card__title a:hover {
  color: #F98886;                    /* akcent */
}

/* úryvek */
.blog-card__excerpt h4 {
  margin: 0 0 8px;
  color: #fff2d6;                    /* tvá „zlatá“, dobře čitelná */
  font-weight: 500;
}

/* "Číst dál" */
.blog-card .read {
  color: #ffdb99;
  font-weight: 600;
  text-decoration: none;
}
.blog-card .read:hover { color: #ffd07a; }

/* responsivita – na mobilech dej text pod fotku */
@media (max-width: 991.98px) {
  .blog-card--h {
    flex-direction: column;
  }
  .blog-card__image {
    flex: 0 0 auto;
    max-width: 100%;
  }
  .blog-card__image img,
  .blog-card__image--placeholder {
    height: 260px;
  }
}

/* stránkování blogu */
.pagination {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination .page-item {
  margin: 0 3px;
}
.pagination .page-link {
  display: block;
  padding: 6px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #f1a9c2;
  color: #f98886;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.pagination .page-link:hover {
  background: #f1a9c2;
  color: #fff;
}
.pagination .page-active .page-link {
  background: #f98886;
  color: #fff;
  border-color: #f98886;
}

/* Blog page container - aby nezačínal pod headerem */
#blog-page {
  position: relative;
  z-index: 1;
  background: #3f3f3f; /* nebo transparent, podle tvé barevnosti */
  padding-top: 40px;   /* oddělí od menu */
}

header, .navbar {
  z-index: 1000;
  position: relative;
}

/* =========================
   BLOG – čitelnost detailu
   ========================= */

/* odděl text od pozadí a dej mu lepší kontrast */
#blog .blog-txt {
  max-width: 980px;
  margin: 24px auto 40px;
  background: rgba(32,32,32,.65);
  border: 1px solid rgba(241,169,194,.25);
  border-radius: 14px;
  padding: 24px 28px;
  color: #f5f7fb;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* meta řádek nad titulkem */
#blog .blog-detail-meta {
  gap: 14px;
  color: #d9dce3;
  margin: 0 0 8px;
}
#blog .blog-detail-meta i { color: #f1a9c2; }

/* titulek detailu */
#blog .blog-detail-title {
  font-size: 40px;
  line-height: 1.25;
  margin: 6px 0 14px;
  color: #ffffff;
  font-weight: 700;
}

/* samotný obsah */
#blog .blog-content {
  font-size: 18px;
  line-height: 1.8;
  color: #f0f2f6;
}
#blog .blog-content p { margin: 0 0 1em; }
#blog .blog-content h2,
#blog .blog-content h3 {
  color: #ffffff;
  margin: 1.6em 0 .6em;
  line-height: 1.35;
}
#blog .blog-content a {
  color: #ffd07a;
  border-bottom: 1px solid rgba(255,208,122,.4);
  text-decoration: none;
}
#blog .blog-content a:hover {
  color: #ffe09d;
  border-bottom-color: transparent;
}
#blog .blog-content blockquote {
  margin: 1.2em 0;
  padding: 12px 16px;
  border-left: 4px solid #f1a9c2;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}

/* jemný gradient na spodku banneru, aby přechod do textu nerušil */
#blog .blog-detail-banner {
  position: relative;
}
#blog .blog-detail-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

/* mobilní úpravy */
@media (max-width: 768px) {
  #blog .blog-txt {
    padding: 16px;
    margin: 16px auto 28px;
  }
  #blog .blog-detail-title {
    font-size: 28px;
  }
  #blog .blog-content {
    font-size: 16.5px;
    line-height: 1.75;
  }
}
/* ================================================
   BLOG DETAIL – obrázek uvnitř boxu (horní rohy zaoblené)
   ================================================ */

/* celý box */
#blog .blog-txt {
  max-width: 980px;
  margin: 24px auto 40px;
  background: #1f1f1f;
  border: 1px solid rgba(241,169,194,.22);
  border-radius: 14px;
  overflow: hidden;                     /* ořízne obrázek dovnitř */
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  color: #f5f7fb;
}

/* obrázek uvnitř boxu */
#blog .blog-detail-banner {
  margin: 0;
  position: relative;
}
#blog .blog-detail-img {
  display: block;
  width: 100%;
  height: 420px;                        /* pevná výška */
  object-fit: cover;
  object-position: center;
  border-radius: 14px 14px 0 0;         /* zakulacené jen horní rohy */
}

/* textová část uvnitř boxu */
#blog .blog-detail-meta {
  gap: 14px;
  color: #d9dce3;
  margin: 16px 0 8px;
  padding: 0 28px;
}
#blog .blog-detail-meta i { color: #f1a9c2; }

#blog .blog-detail-title {
  font-size: 36px;
  line-height: 1.25;
  margin: 6px 28px 14px;
  color: #fff;
  font-weight: 700;
}

#blog .blog-content {
  padding: 0 28px 32px;
  font-size: 18px;
  line-height: 1.82;
  color: #eef1f6;
}
#blog .blog-content p { margin: 0 0 1em; }

/* mobilní verze */
@media (max-width: 768px) {
  #blog .blog-txt { margin: 16px auto 28px; }
  #blog .blog-detail-img { height: 260px; }
  #blog .blog-detail-title { font-size: 26px; margin: 6px 18px 10px; }
  #blog .blog-content { padding: 0 18px 22px; font-size: 16.6px; }
}