/* =========================
   SINGLE POST – layout 1460
   ========================= */

:root{
  --z-yellow: #FED216;
  --z-gray: #F8F8F8;
  --z-text: #121212;
  --z-border: rgba(18,18,18,.12);
}

.container--wide{
  max-width: 1460px;
  margin: 0 auto;
  padding: 24px 16px;
}

.single-layout{
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.single-left{ flex: 0 0 68%; min-width: 0; }
.single-right{ flex: 0 0 32%; min-width: 0; }

@media (max-width: 980px){
  .single-layout{ flex-direction: column; }
  .single-left, .single-right{ flex: 1 1 auto; }
}

/* Meta badges (data + kategoria) */
.single-meta{
  display: flex;
  gap: 12px;
  padding-top: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.meta-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;            /* mniejsze niż było */
  border-radius: 999px;
  background: var(--z-gray);     /* szare tło */
  color: var(--z-text);          /* czarny tekst */
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.meta-badge svg{ opacity: .85; }

/* hover kategorii delikatny */
a.meta-badge--cat:hover{
  filter: brightness(0.98);
}

/* tytuł + content */
.single-title h2{
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 14px;
}

@media (max-width: 600px){
  .single-title h2{ font-size: 32px; }
}

.single-content{
  font-size: 18px;
  line-height: 1.7;
}

/* =========================
   Sidebar: Ostatnie wpisy
   równe prostokąty (obrazek + content w jednej karcie)
   ========================= */

.single-right h3{
  margin: 18px 0 14px;
  font-size: 20px;
}

.sidebar-posts{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Cała karta jest linkiem */
.sidebar-post{
  display: flex;
  gap: 16px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  text-decoration: none;
  color: var(--z-text);
  align-items: center; /* wyśrodkowanie w pionie */
}

.sidebar-post:hover{
  filter: brightness(0.99);
}

/* obrazek */
.sidebar-thumb{
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-thumb img{
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px; /* ZAOKRĄGLENIE */
  display: block;
}

.sidebar-thumb__placeholder{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.06);
}

/* prawa część */
.sidebar-info{
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centrowanie pionowe */
  gap: 6px;
  min-width: 0;
}


.sidebar-title{
  font-size: 15px;
  margin: 0;
  line-height: 1.25;

  /* żeby tytuł nie rozwalał prostokąta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-excerpt{
  font-size: 13px;
  margin: 0;
  opacity: .8;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-readmore{
  font-size: 12px;
  font-weight: 500;
  color: #fed216 !important;   /* TWÓJ ŻÓŁTY */
}

.sidebar-post:hover .sidebar-readmore{
  text-decoration: underline;
}


/* jeśli chcesz żółty akcent tylko na "Czytaj więcej" */
.sidebar-readmore{
  color: #a47f00;
}

/* =========================
   KAFELKI WPISÓW (LOOP)
   ========================= */

.post-tile{
  margin: 0;
}

.post-tile__link{
  display: block;
  text-decoration: none;
  color: #121212;
}

.post-tile__media{
  margin: 0 0 12px;
  border-radius: 18px;
  overflow: hidden;
}

.post-tile__img{
  width: 100%;
  height: auto;
  display: block;
}

/* meta: kategoria + data */
.post-tile__meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
  opacity: .85;
}

.post-tile__cat{
  font-weight: 500;
}

.post-tile__date{
  color: rgba(18,18,18,.75);
}

/* tytuł */
.post-tile__title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #121212;
}

/* opis max 2 linie */
.post-tile__excerpt{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(18,18,18,.78);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================
   /aktualnosci (home.php)
   ========================= */

.news-page .container--wide{
  max-width: 1460px;
  margin: 0 auto;
  padding: 24px 16px;
}

.news-page__header{
  margin-bottom: 18px;
}

.news-page__title{
  margin: 0 0 6px;
  font-size: 34px;
  color: #121212;
}

.news-page__lead{
  margin: 0;
  color: rgba(18,18,18,.75);
  font-size: 16px;
  line-height: 1.5;
}

/* Wpisy – FLEX “grid” */
.news-posts{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

/* 4 kolumny na szerokim ekranie (flex-basis) */
.news-posts .post-tile{
  flex: 0 0 calc(25% - 13.5px);
}

/* 3 kolumny */
@media (max-width: 1200px){
  .news-posts .post-tile{ flex-basis: calc(33.333% - 12px); }
}

/* 2 kolumny */
@media (max-width: 900px){
  .news-cat{ width: 160px; }
  .news-posts .post-tile{ flex-basis: calc(50% - 9px); }
}

/* 1 kolumna */
@media (max-width: 600px){
  .news-cats{ gap: 10px; }
  .news-cat{ width: calc(50% - 5px); height: 110px; }
  .news-posts .post-tile{ flex-basis: 100%; }
}