/*
 * Ostoja — Blog styling
 * Card grid "magazyn", single post prose, archives, search, 404, comments.
 * Mobile-first, plain CSS, uses --ost-* tokens + --ost-ease.
 */

/* ============================================================
   Page hero extras
   ============================================================ */
.ost-page-hero__desc { margin-top: 1rem; color: var(--ost-muted-foreground); max-width: 42rem; margin-inline: auto; }
.ost-page-hero__desc p { margin: 0; }
.ost-search-query { color: var(--ost-primary); }

/* ============================================================
   Blog section wrapper
   ============================================================ */
.ost-blog-section { padding-block: 3.5rem 5rem; }

/* ============================================================
   Post grid — 1 / sm:2 / lg:3 columns
   ============================================================ */
.ost-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.75rem;
}
@media (min-width: 1024px) {
  .ost-post-grid { gap: 2rem; }
}

/* ============================================================
   Blog listing layout: main grid + right sidebar
   ============================================================ */
.ost-blog-layout { display: grid; gap: 2.5rem; align-items: start; }
/* Two columns only when a sidebar is actually rendered; otherwise the grid
   (single column) lets the post cards fill the full page width. */
@media (min-width: 1024px) {
  .ost-blog-layout:has(.ost-blog-aside) { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }
}
.ost-blog-main { min-width: 0; }

/* Blog sidebar (Najnowsze wpisy + Kategorie) */
.ost-blog-aside { display: grid; gap: 1.75rem; align-content: start; }
@media (min-width: 1024px) { .ost-blog-aside { position: sticky; top: 6rem; } }

.ost-aside-widget {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  padding: 1.5rem;
}
.ost-aside-widget__title { font-size: 1.05rem; margin: 0 0 1.1rem; }

.ost-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ost-recent__link { display: flex; gap: .85rem; align-items: center; }
.ost-recent__thumb { flex: 0 0 4rem; width: 4rem; height: 4rem; border-radius: .75rem; overflow: hidden; background: var(--ost-muted); }
.ost-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ost-recent__thumb-fallback { display: block; width: 100%; height: 100%; background: var(--ost-gradient-forest); }
.ost-recent__body { display: grid; gap: .2rem; min-width: 0; }
.ost-recent__title { font-weight: 600; font-size: .92rem; line-height: 1.3; color: var(--ost-foreground); }
.ost-recent__link:hover .ost-recent__title { color: var(--ost-primary); }
.ost-recent__date { font-size: .78rem; color: var(--ost-muted-foreground); }

.ost-cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ost-cat-list li { font-size: .92rem; }
.ost-cat-list a { color: var(--ost-muted-foreground); }
.ost-cat-list a:hover { color: var(--ost-foreground); }
.ost-cat-list .children { list-style: none; margin: .4rem 0 0 .9rem; padding: 0; display: grid; gap: .4rem; }

/* Recent comments widget */
.ost-recent-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ost-recent-comments .ost-rc__item { border-bottom: 1px solid var(--ost-border); padding-bottom: 1rem; }
.ost-recent-comments .ost-rc__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ost-rc__link { display: grid; gap: .2rem; }
.ost-rc__author { font-weight: 600; font-size: .92rem; color: var(--ost-foreground); }
.ost-rc__meta { font-size: .78rem; color: var(--ost-muted-foreground); }
.ost-rc__excerpt { font-size: .85rem; line-height: 1.5; color: var(--ost-muted-foreground); }
.ost-recent-comments a:hover .ost-rc__author { color: var(--ost-primary); }

/* ============================================================
   Post card
   ============================================================ */
.ost-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  overflow: hidden;
  transition: box-shadow .25s var(--ost-ease), transform .25s var(--ost-ease);
}
.ost-post-card:hover { box-shadow: var(--ost-shadow-card); transform: translateY(-3px); }
.ost-post-card:focus-within { box-shadow: var(--ost-shadow-card); }

.ost-post-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ost-muted);
}
.ost-post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ost-ease);
}
.ost-post-card:hover .ost-post-card__img { transform: scale(1.04); }

.ost-post-card__fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ost-gradient-forest);
  position: relative;
}
.ost-post-card__fallback::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--ost-grain);
  background-size: 22px 22px;
  opacity: .5;
}

.ost-post-card__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  flex: 1 1 auto;
}

.ost-post-card__date { font-size: .8rem; color: var(--ost-muted-foreground); }

.ost-post-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ost-primary);
  transition: color .15s var(--ost-ease);
}
.ost-post-card:hover .ost-post-card__more { color: var(--ost-forest); }
.ost-post-card__more svg { transition: transform .2s var(--ost-ease); }
.ost-post-card:hover .ost-post-card__more svg { transform: translateX(4px); }

.ost-post-card__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ost-forest);
  background: color-mix(in oklab, var(--ost-gold) 26%, transparent);
  border: 1px solid color-mix(in oklab, var(--ost-gold) 55%, transparent);
  padding: .3rem .7rem;
  border-radius: 9999px;
  transition: background-color .15s var(--ost-ease);
}
.ost-post-card__tag:hover { background: color-mix(in oklab, var(--ost-gold) 42%, transparent); color: var(--ost-forest); }

.ost-post-card__title {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0;
}
.ost-post-card__title a { color: var(--ost-foreground); }
.ost-post-card__title a:hover { color: var(--ost-primary); }
/* Stretch the title link over the whole card for a single keyboard tab stop. */
.ost-post-card__title a::after { content: ""; position: absolute; inset: 0; }

.ost-post-card__excerpt {
  margin: 0;
  color: var(--ost-muted-foreground);
  font-size: .95rem;
}

.ost-post-card__meta {
  margin-top: auto;
  padding-top: .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--ost-muted-foreground);
}
.ost-post-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ost-primary);
  transition: transform .2s var(--ost-ease);
}
.ost-post-card:hover .ost-post-card__arrow { transform: translateX(4px); }

/* ============================================================
   Pagination
   ============================================================ */
.ost-pagination { margin-top: 3.5rem; }
.ost-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.ost-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .85rem;
  border-radius: 9999px;
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  color: var(--ost-foreground);
  font-size: .9rem;
  font-weight: 500;
  box-shadow: var(--ost-shadow-soft);
  transition: background-color .15s var(--ost-ease), color .15s var(--ost-ease);
}
.ost-pagination a.page-numbers:hover { background: var(--ost-secondary); color: var(--ost-forest); }
.ost-pagination .page-numbers.current {
  background: var(--ost-primary);
  color: var(--ost-primary-foreground);
  border-color: transparent;
}
.ost-pagination .page-numbers.dots { background: transparent; border-color: transparent; box-shadow: none; }

/* ============================================================
   Empty state / search form
   ============================================================ */
.ost-empty {
  text-align: center;
  max-width: 36rem;
  margin: 2rem auto;
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  padding: 3rem 2rem;
}
.ost-empty__title { font-size: 1.5rem; margin: 0 0 .5rem; }
.ost-empty__text { margin: 0; color: var(--ost-muted-foreground); }
.ost-empty__search { margin-top: 1.75rem; }

.ost-empty__search .search-form,
.ost-404__search .search-form {
  display: flex;
  gap: .5rem;
  max-width: 26rem;
  margin-inline: auto;
}
.ost-empty .search-field,
.ost-404__search .search-field {
  flex: 1 1 auto;
  height: 3rem;
  padding: 0 1.25rem;
  border-radius: 9999px;
  border: 1px solid var(--ost-input);
  background: var(--ost-card);
  color: var(--ost-foreground);
  font-family: inherit;
  font-size: .9rem;
}
.ost-empty .search-field:focus,
.ost-404__search .search-field:focus { outline: 2px solid color-mix(in oklab, var(--ost-primary) 50%, transparent); outline-offset: 2px; }
.ost-empty .search-submit,
.ost-404__search .search-submit {
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  border: 0;
  background: var(--ost-primary);
  color: var(--ost-primary-foreground);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s var(--ost-ease);
}
.ost-empty .search-submit:hover,
.ost-404__search .search-submit:hover { background: var(--ost-forest); }

/* ============================================================
   404
   ============================================================ */
.ost-404__actions { margin-top: 2rem; display: flex; justify-content: center; }
.ost-404__search { margin-top: 2rem; }

/* ============================================================
   Single post
   ============================================================ */
.ost-single-post { padding-block: 2.5rem 5rem; }

/* Centered head (featured image sits above it via .ost-single-figure) */
.ost-single-head {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 0 2.5rem;
}

/* Body: content + optional sidebar. No sidebar → single full-width column. */
.ost-single-layout { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) {
  .ost-single-post--sidebar .ost-single-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}
.ost-single-main { min-width: 0; }
.ost-single-aside { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 1024px) { .ost-single-aside { position: sticky; top: 6rem; } }

/* Related posts after the content */
.ost-related { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--ost-border); }
.ost-related__title { font-size: 1.4rem; margin: 0 0 1.5rem; }

.ost-single-hero { background: var(--ost-gradient-hero); position: relative; overflow: hidden; }
.ost-single-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--ost-grain); background-size: 24px 24px; opacity: .6; pointer-events: none;
}
.ost-single-hero__inner {
  position: relative;
  max-width: none;
  margin-inline: auto;
  padding-block: 4rem 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.ost-single-title { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0; }
.ost-single-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  font-size: .9rem;
  color: var(--ost-muted-foreground);
}
.ost-single-meta__author { font-weight: 600; color: var(--ost-foreground); }
.ost-single-meta__sep { opacity: .6; }

.ost-single-figure {
  margin-block: 0 2rem;
}
.ost-single-figure__img {
  width: 100%;
  border-radius: calc(var(--ost-radius) * 1.25);
  box-shadow: var(--ost-shadow-card);
}

/* ============================================================
   Prose
   ============================================================ */
.ost-prose {
  max-width: none;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ost-foreground);
}
.ost-prose > * { margin-block: 0 1.35rem; }
.ost-prose > *:last-child { margin-bottom: 0; }

.ost-prose h2 { font-size: 1.75rem; margin-top: 2.75rem; }
.ost-prose h3 { font-size: 1.375rem; margin-top: 2.25rem; }
.ost-prose h4 { font-size: 1.125rem; margin-top: 2rem; }

.ost-prose p { margin-block: 0 1.35rem; }

.ost-prose a {
  color: var(--ost-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ost-ease), color .15s var(--ost-ease);
}
.ost-prose a:hover { color: var(--ost-forest); text-decoration-color: currentColor; }

.ost-prose ul, .ost-prose ol { padding-left: 1.4rem; }
.ost-prose li { margin-block: .4rem; }
.ost-prose li::marker { color: var(--ost-gold); }

.ost-prose img,
.ost-prose figure img {
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
}
.ost-prose figure { margin-inline: 0; }
.ost-prose figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  color: var(--ost-muted-foreground);
  text-align: center;
}

.ost-prose blockquote {
  margin: 2rem 0;
  padding: .5rem 0 .5rem 1.5rem;
  border-left: 4px solid var(--ost-forest);
  color: var(--ost-foreground);
  font-style: italic;
  font-size: 1.15rem;
}
.ost-prose blockquote p:last-child { margin-bottom: 0; }

.ost-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--ost-muted);
  padding: .15em .4em;
  border-radius: .4rem;
}
.ost-prose pre {
  background: var(--ost-forest);
  color: var(--ost-cream);
  padding: 1.25rem 1.5rem;
  border-radius: var(--ost-radius);
  overflow-x: auto;
}
.ost-prose pre code { background: transparent; padding: 0; color: inherit; }

.ost-prose hr { border: 0; border-top: 1px solid var(--ost-border); margin-block: 2.5rem; }

.ost-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ost-prose th, .ost-prose td { padding: .65rem .75rem; border-bottom: 1px solid var(--ost-border); text-align: left; }
.ost-prose th { font-weight: 600; }

.ost-page-links {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-top: 2rem;
  font-size: .9rem;
}
.ost-page-links span span { padding: .25rem .6rem; border: 1px solid var(--ost-border); border-radius: .5rem; }
.ost-page-links a span { background: var(--ost-card); }

/* ============================================================
   Tags
   ============================================================ */
.ost-single-tags {
  max-width: none;
  margin: 2.5rem auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.ost-single-tags__label { font-size: .85rem; color: var(--ost-muted-foreground); font-weight: 600; }
.ost-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.ost-tag-list a {
  display: inline-flex;
  font-size: .8rem;
  padding: .3rem .75rem;
  border-radius: 9999px;
  background: var(--ost-secondary);
  color: var(--ost-secondary-foreground);
  transition: background-color .15s var(--ost-ease);
}
.ost-tag-list a:hover { background: var(--ost-sage); color: var(--ost-forest); }

/* ============================================================
   Post navigation (prev / next)
   ============================================================ */
.ost-post-nav {
  max-width: none;
  margin: 3rem auto 0;
}
.ost-post-nav .nav-links {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .ost-post-nav .nav-links { grid-template-columns: 1fr 1fr; }
  .ost-post-nav .nav-next { text-align: right; }
}
.ost-post-nav .nav-previous a,
.ost-post-nav .nav-next a {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 1.25rem;
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  transition: box-shadow .2s var(--ost-ease);
}
.ost-post-nav a:hover { box-shadow: var(--ost-shadow-card); }
.ost-post-nav__dir { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ost-muted-foreground); }
.ost-post-nav__title { font-weight: 600; color: var(--ost-foreground); }

/* ============================================================
   Sidebar (optional)
   ============================================================ */
.ost-sidebar { display: grid; gap: 1.5rem; }
.ost-sidebar-widget {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  padding: 1.5rem;
}
.ost-sidebar-widget__title { font-size: 1rem; margin: 0 0 1rem; }
.ost-sidebar-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ost-sidebar-widget a { color: var(--ost-muted-foreground); }
.ost-sidebar-widget a:hover { color: var(--ost-foreground); }

/* ============================================================
   Comments
   ============================================================ */
.ost-comments {
  max-width: none;
  margin: 3.5rem auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ost-border);
}
.ost-comments__title { font-size: 1.4rem; margin: 0 0 1.5rem; }
.ost-comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.ost-comment-list ol.children { list-style: none; margin: 1.25rem 0 0; padding-left: 1.5rem; }
.ost-comment-list .comment-body {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ost-comment-list .comment-author { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.ost-comment-list .comment-author .avatar { border-radius: 9999px; }
.ost-comment-list .comment-author .says { display: none; }
.ost-comment-list .comment-meta { font-size: .8rem; color: var(--ost-muted-foreground); margin: .35rem 0 .75rem; }
.ost-comment-list .comment-meta a { color: var(--ost-muted-foreground); }
.ost-comment-list .reply { font-size: .85rem; }
.ost-comment-list .comment-reply-link {
  display: inline-flex;
  padding: .3rem .85rem;
  border-radius: 9999px;
  background: var(--ost-secondary);
  color: var(--ost-secondary-foreground);
}
.ost-comment-list .comment-reply-link:hover { background: var(--ost-sage); }
.ost-comments__closed { color: var(--ost-muted-foreground); font-size: .9rem; }

.ost-comments .comment-respond {
  background: var(--ost-card);
  border: 1px solid var(--ost-border);
  border-radius: var(--ost-radius);
  box-shadow: var(--ost-shadow-soft);
  padding: 1.75rem;
}
.ost-comments .comment-reply-title { font-size: 1.25rem; margin: 0 0 1rem; }
.ost-comments .comment-form { display: grid; gap: 1rem; }
.ost-comments .comment-form p { margin: 0; display: grid; gap: .4rem; }
/* Informational paragraphs are plain inline text, not stacked field grids. */
.ost-comments .comment-form .logged-in-as,
.ost-comments .comment-form .comment-notes { display: block; line-height: 1.6; }
.ost-comments .comment-form .logged-in-as a { color: var(--ost-primary); }
.ost-comments .comment-form .logged-in-as a:hover { color: var(--ost-forest); }
.ost-comments .comment-form label { font-size: .85rem; font-weight: 600; }
.ost-comments .comment-form input[type="text"],
.ost-comments .comment-form input[type="email"],
.ost-comments .comment-form input[type="url"],
.ost-comments .comment-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--ost-input);
  border-radius: .75rem;
  background: var(--ost-background);
  color: var(--ost-foreground);
  font-family: inherit;
  font-size: .95rem;
}
.ost-comments .comment-form textarea { min-height: 8rem; resize: vertical; }
.ost-comments .comment-form input:focus,
.ost-comments .comment-form textarea:focus { outline: 2px solid color-mix(in oklab, var(--ost-primary) 50%, transparent); outline-offset: 1px; }
.ost-comments .form-submit { margin: 0; }
.ost-comments .comment-form .comment-form-cookies-consent { grid-template-columns: auto 1fr; align-items: center; gap: .5rem; }
.ost-comments .comment-form .comment-form-cookies-consent label { font-weight: 400; }