/* Pojedyncza realizacja i wpis blogu (szablon W): karta ze zdjęciem i treścią, obok sidebar.
   Realizacje mają pusty sidebar (jak dziś), wpisy blogu dostają „Ostatnie wpisy” (@recent-posts, #12).
   Wymiary z obecnej strony (#11); tokeny: docs/ARCHITEKTURA.md, sekcja 4. Mobile-first. */
.post-area { padding: 90px 0 85px; }
.post-layout { display: grid; gap: 30px; align-items: start; }

.post { background: var(--c-bg); box-shadow: var(--shadow-md); }
.post__img { width: 100%; aspect-ratio: 900 / 550; object-fit: cover; }
.post__body { padding: 25px 30px 4px; }
.post__title {
  margin: 0 0 8px;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: capitalize;
}
.post__body p { margin: 0 0 20px; line-height: 1.8; }
.post__body ul { margin: 0 0 30px; padding-left: 40px; }

/* Sidebar: widżet „Ostatnie wpisy” */
.widget { margin: 0 0 30px; padding: 15px; background: var(--c-bg); box-shadow: 0 0 5px var(--c-line-strong); }
.widget__title {
  margin: 0 0 20px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--c-line-strong);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
}
.recent-posts { margin: 0; padding: 0; list-style: none; }
.recent-posts__item { display: flex; gap: 10px; min-height: 90px; }
.recent-posts__img { display: block; flex: none; width: 80px; height: 80px; object-fit: cover; }
.recent-posts__title {
  display: block;
  margin: 16px 0 0;
  color: var(--c-text-strong);
  font: 500 0.875rem/1.57 var(--font-heading);
}
.recent-posts__date { color: var(--c-text-strong); font-size: 0.875rem; }

@media (min-width: 768px) {
  .post-layout { grid-template-columns: 7fr 5fr; }
}
@media (min-width: 992px) {
  .post-layout { grid-template-columns: 77fr 37fr; }
}