/* BLOG*/



.post-thumbnail img {

  display: block;

  margin: 0 auto;

  width: 100%;

  height: auto;

  border-radius: 6px;

}



/* Ogólny kontener dla bloga */

.blog-container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 15px 24px;

}



/* Główna struktura flex */

.blog-archive-layout {

  display: flex;

  flex-wrap: nowrap;

  gap: 32px;

  align-items: flex-start;

}



/* Lewa kolumna – treść wpisów */

.blog-posts-list {

  flex: 0 1 calc(100% - 360px);

  max-width: calc(100% - 360px);

  min-width: 0;

}



/* Prawa kolumna – sidebar */

.blog-sidebar {

  flex: 0 0 320px;

  max-width: 320px;

  min-width: 280px;

}



/* Wpis blogowy – karta */

.blog-post-row {

  display: flex;

  gap: 32px;

  background: #fff;

  border-radius: 14px;

  box-shadow: 0 4px 18px #0001;

  margin-bottom: 36px;

  overflow: hidden;

}



.blog-article-main {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 30px 24px 30px 0;

  min-width: 45%;

}



.blog-thumbnail {

  display: block;

  width: 100%;

  height: auto;

  object-fit: cover;

  border-radius: 0;

}



/* Kategorie, tytuł, meta */

.blog-categories a {

  font-size: 13px;

  color: #999;

  margin-right: 10px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.blog-post-title {

  margin: 13px 0;

  font-size: 24px;

  font-weight: 700;

  line-height: 1.25;

}



.blog-title-link {

  text-decoration: none;

  color: #111;

}



.blog-meta {

  display: flex;

  gap: 18px;

  font-size: 14px;

  color: #555;

  margin-bottom: 13px;

}



.blog-post-excerpt {

  color: #555;

  font-size: 16px;

  line-height: 1.7;

}



.blog-readmore-btn {

  margin-top: 12px;

  display: inline-block;

  font-size: 14px;

  color: var(--color-main);

  text-decoration: underline;

}



/* Sidebar */

.blog-sidebar .widget {

  background-color: #f8f8f8;

  padding: 16px 20px;

  border-radius: 8px;

  margin-bottom: 24px;

  box-shadow: 0 1px 4px rgba(0,0,0,0.05);

}



.blog-sidebar .widget-title {

  font-size: 18px;

  margin-bottom: 12px;

  font-weight: 600;

  color: #222;

  border-bottom: 1px solid #ddd;

  padding-bottom: 6px;

}



.blog-sidebar ul {

  padding: 0;

  list-style: none;

}



.blog-sidebar ul li {

  margin-bottom: 8px;

}



.blog-sidebar ul li a {

  color: #222;

  text-decoration: none;

  font-size: 15px;

  transition: color 0.3s;

}



.blog-sidebar ul li a:hover {

  color: var(--color-main);

}



/* Responsywność – kolumny jedna pod drugą na mobile */

@media (max-width: 992px) {

  .blog-archive-layout {

    flex-direction: column;

  }



  .blog-posts-list,

  .blog-sidebar {

    flex: 1 1 100%;

    max-width: 100%;

  }



  .blog-post-row {

    flex-direction: column;

  }



  .blog-article-main {

    padding: 24px;

  }

}

.blog-pagination {

  display: flex;

  justify-content: center;

  margin: 48px auto 0 auto;

  padding-top: 24px;

  border-top: 1px solid #eee;

}

.blog-pagination .page-numbers {

  display: inline-block;

  margin: 0 6px;

  padding: 8px 14px;

  font-size: 15px;

  font-weight: 500;

  color: #333;

  background-color: #f5f5f5;

  border-radius: 6px;

  text-decoration: none;

  transition: all 0.25s ease;

}

.blog-pagination .page-numbers:hover {

  background-color: var(--color-main);

  color: #fff;

}

.blog-pagination .page-numbers.current {

  background-color: #666666;

  color: #ffffff;

  font-weight: 600;

  pointer-events: none;

}

@media (max-width: 768px) {

  .blog-pagination {

    flex-wrap: wrap;

    gap: 8px;

  }

  .blog-pagination .page-numbers {

    padding: 10px 12px;

    font-size: 14px;

  }

}

.nav-links {

    margin: 20px 0px 40px 0px;

}