/* Blog styles use the site's existing palette and shared header. */
.blog-shell { max-width: var(--max-width); margin-inline: auto; padding: 56px 24px 88px; }
.blog-masthead { max-width: 850px; margin-bottom: 38px; }
.blog-masthead h1, .article-heading h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.08; letter-spacing: -.035em; margin: 12px 0 20px; }
.blog-masthead > p:last-child, .article-deck { color: var(--color-muted); max-width: 68ch; font-size: 19px; }
.blog-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--color-muted); font-size: 13px; margin: 0 0 30px; }
.blog-breadcrumbs a:hover, .blog-breadcrumbs a:focus-visible { color: var(--color-text); text-decoration: underline; }
.blog-feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: 36px; align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--color-border); }
.blog-feature-image { overflow: hidden; border-radius: 6px; background: var(--color-surface); }
.blog-feature-image img { width: 100%; aspect-ratio: 1.6; height: auto; object-fit: cover; transition: transform .3s ease; }
.blog-feature-image:hover img { transform: scale(1.025); }
.blog-feature h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin: 12px 0 16px; }
.blog-feature p { color: var(--color-muted); }
.blog-label { color: var(--color-accent); font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--color-muted); font-size: 13px; }
.blog-text-link { display: inline-flex; gap: 12px; align-items: center; color: var(--color-text); font-weight: 700; border-bottom: 1px solid var(--color-accent); padding: 8px 0; }
.blog-text-link:hover, .blog-text-link:focus-visible { color: var(--color-accent); }
.blog-controls { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 40px; }
.blog-search { max-width: 380px; width: 100%; }
.blog-search label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.blog-search input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-text); font: inherit; }
.blog-results { color: var(--color-muted); font-size: 14px; margin: 0; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 32px; }
.blog-filter { font: inherit; color: var(--color-muted); background: transparent; border: 1px solid var(--color-border); border-radius: 4px; min-height: 44px; padding: 9px 14px; cursor: pointer; transition: color .15s, border-color .15s; }
.blog-filter:hover, .blog-filter[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-accent); }
.blog-filter[aria-pressed="true"] { background: rgba(217,119,50,.12); }
.blog-js-only { display: none; }
.blog-js .blog-js-only { display: block; }
.blog-js .blog-controls { display: flex; }
.blog-js .blog-filters { display: flex; }
.blog-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 38px; }
.blog-entry { display: grid; grid-template-columns: 120px 1fr; align-items: start; gap: 22px; padding: 28px 0; border-bottom: 1px solid var(--color-border); min-width: 0; }
.blog-entry[hidden], .blog-empty[hidden] { display: none; }
.blog-entry-image img { width: 120px; height: 106px; object-fit: cover; border-radius: 4px; }
.blog-entry h2, .blog-entry h3 { font-size: 22px; line-height: 1.28; margin: 8px 0 12px; }
.blog-entry h2 a:hover, .blog-entry h3 a:hover { color: var(--color-accent); }
.blog-entry p { color: var(--color-muted); font-size: 15px; margin: 0 0 12px; }
.blog-empty { padding: 28px 0; color: var(--color-muted); }
.blog-empty button { margin-top: 12px; }
.blog-contact { margin-top: 58px; padding: 32px 0 0; border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; gap: 28px; }
.blog-contact h2 { font-size: 28px; margin: 0 0 10px; }
.blog-contact p { color: var(--color-muted); max-width: 65ch; margin: 0; }
.blog-contact .button { flex-shrink: 0; }
.article-heading { max-width: 970px; }
.article-cover { margin: 32px 0 46px; }
.article-cover img { width: 100%; height: clamp(230px, 34vw, 410px); object-fit: cover; border-radius: 6px; }
.article-cover figcaption { font-size: 12px; color: var(--color-muted); padding-top: 8px; }
.article-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 60px; align-items: start; }
.article-toc { position: sticky; top: calc(var(--header-height) + 26px); border-top: 2px solid var(--color-accent); padding-top: 16px; font-size: 14px; }
.article-toc summary { font-weight: 750; cursor: pointer; }
.article-toc ol { padding-left: 22px; }
.article-toc li { padding: 6px 0; color: var(--color-muted); }
.article-toc a:hover, .article-toc a:focus-visible { color: var(--color-text); text-decoration: underline; }
.article-content { max-width: 72ch; font-size: 18px; line-height: 1.8; }
.article-content > p:first-child { color: var(--color-text); font-size: 20px; }
.article-content p, .article-content li { color: var(--color-muted); }
.article-content h2 { font-size: 29px; line-height: 1.25; margin: 44px 0 18px; scroll-margin-top: calc(var(--header-height) + 24px); }
.article-checklist { border-left: 3px solid var(--color-accent); padding: 4px 0 4px 24px; margin: 40px 0; }
.article-checklist h2 { margin: 0 0 16px; }
.article-checklist ul { padding-left: 20px; margin: 0; }
.article-checklist li { margin: 8px 0; }
.article-sources { font-size: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.article-sources h2 { font-size: 20px; margin: 0 0 16px; }
.article-sources a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-related { margin-top: 64px; }
.article-related > h2 { font-size: 30px; }
.blog-author { margin-top: 30px; font-size: 14px; color: var(--color-muted); }
.blog-feed { display: inline-block; margin-top: 30px; color: var(--color-muted); text-decoration: underline; }
#dziennik .journal-list h3 a { color: var(--color-text); }
#dziennik .journal-list h3 a:hover { color: var(--color-accent); }
#dziennik .journal-list p.journal-excerpt { font-size: 14px; text-transform: none; font-weight: 400; color: var(--color-muted); }
#dziennik .journal-list p.journal-read { margin-top: 20px; font-size: 13px; }
#dziennik .category-row a { display: inline-flex; align-items: center; }
#dziennik .category-row a:hover { text-decoration: underline; }
#dziennik .journal-all { margin-top: 28px; }
.blog-shell :focus-visible, #dziennik a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
@media (max-width: 1040px) {
  .blog-page:not(.nav-open) .site-nav { visibility: hidden; }
}
@media (max-width: 1000px) {
  .blog-feature { gap: 24px; }
  .blog-entries { grid-template-columns: 1fr; }
  .blog-entry { grid-template-columns: 160px 1fr; }
  .blog-entry-image img { width: 160px; height: 120px; }
  .article-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 700px) {
  .blog-shell { padding: 36px 18px 64px; }
  .blog-feature { grid-template-columns: 1fr; gap: 22px; }
  .blog-masthead { margin-bottom: 26px; }
  .blog-masthead > p:last-child, .article-deck { font-size: 17px; }
  .blog-controls { align-items: start; flex-direction: column; gap: 14px; }
  .blog-search { max-width: none; }
  .blog-filters { gap: 8px; }
  .blog-filter { padding: 9px 11px; font-size: 14px; }
  .blog-entry { grid-template-columns: 86px minmax(0, 1fr); gap: 16px; }
  .blog-entry-image img { width: 86px; height: 90px; }
  .blog-entry h2, .blog-entry h3 { font-size: 20px; }
  .blog-contact { flex-direction: column; align-items: start; }
  .article-layout { grid-template-columns: 1fr; gap: 22px; }
  .article-toc { position: static; }
  .article-content { font-size: 17px; }
  .article-content > p:first-child { font-size: 19px; }
  .article-content h2 { font-size: 26px; }
  .article-cover { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-feature-image img, .blog-filter { transition: none; }
}