/**
 * Articles and the two blog archives.
 *
 * Loaded on single posts and on /vodici/ + /novosti/ only.
 *
 * The body styles target **core block classes** (`.wp-block-heading`,
 * `.wp-block-table`, `.wp-block-image`) rather than classes of our own, because
 * that is what both sources produce: the 35 imported posts were written as core
 * block markup precisely so that they and everything Vedrana writes afterwards
 * need exactly one set of rules. The same file is loaded as the editor
 * stylesheet, so the editor canvas matches the front end.
 *
 * Values come from components/article-view.tsx. Tailwind utilities are
 * translated, never copied (Hard Rule 8), and every colour and radius is a
 * token (Hard Rules 5).
 */

/* -------------------------------------------------------------------------- */
/* Layout                                                                      */
/* -------------------------------------------------------------------------- */

.article {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.article__breadcrumb {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.article__breadcrumb a { color: inherit; }
.article__breadcrumb a:hover { color: var(--foreground); }
.article__crumb-sep { padding-inline: 0.5rem; }
.article__crumb-current { color: var(--foreground); }

.article__grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
  /* minmax(0,…) or a wide table stretches the column instead of scrolling. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .article__grid { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.article__main { min-width: 0; }

.article__aside {
  display: grid;
  align-content: start;
  gap: 1.5rem;
}


/* -------------------------------------------------------------------------- */
/* Header card                                                                 */
/* -------------------------------------------------------------------------- */

.article__header { padding: 1.5rem; }
@media (min-width: 640px) { .article__header { padding: 2rem; } }

.article__chip {
  display: inline-flex;
  width: fit-content;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  padding: 0.25rem 0.75rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-foreground);
}

.article__title {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
@media (min-width: 640px) { .article__title { font-size: 2.25rem; } }

.article__excerpt {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.article__stat { display: inline-flex; align-items: center; gap: 0.375rem; }
.article__stat .icon { width: 1rem; height: 1rem; }

.article__cover {
  margin-top: 1.5rem;
  overflow: hidden;
  padding: 0;
}
.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.article__body { margin-top: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .article__body { padding: 2rem; } }

/* The measure the export sets on the text column. Full-width children (tables,
   figures) still break out of it below. */
.article__prose { max-width: 48rem; }

/* -------------------------------------------------------------------------- */
/* Article body — core block markup                                            */
/* -------------------------------------------------------------------------- */

:is( .article__prose, .editor-styles-wrapper ) p {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

:is( .article__prose, .editor-styles-wrapper ) a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--primary) 30%, transparent);
  text-underline-offset: 2px;
}
:is( .article__prose, .editor-styles-wrapper ) a:hover { text-decoration-color: var(--primary); }

:is( .article__prose, .editor-styles-wrapper ) strong { color: var(--foreground); font-weight: 600; }

:is( .article__prose, .editor-styles-wrapper ) .wp-block-heading {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  /* Cleared by the sticky header when a contents link jumps here. */
  /* Clears the sticky topbar (34px) plus the header (~79px) = 113px. 7rem was
     112px, which cleared the header alone and left an anchored heading a pixel
     behind the bar once the topbar became sticky too. */
  scroll-margin-top: 8rem;
}
:is( .article__prose, .editor-styles-wrapper ) h2.wp-block-heading {
  margin-top: 3rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}
:is( .article__prose, .editor-styles-wrapper ) h2.wp-block-heading:first-child { margin-top: 0; }
:is( .article__prose, .editor-styles-wrapper ) h3.wp-block-heading {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

:is( .article__prose, .editor-styles-wrapper ) .wp-block-list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
:is( .article__prose, .editor-styles-wrapper ) ul.wp-block-list { list-style: disc; }
:is( .article__prose, .editor-styles-wrapper ) ol.wp-block-list { list-style: decimal; }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-list .wp-block-list { margin-top: 0.5rem; }

:is( .article__prose, .editor-styles-wrapper ) .wp-block-quote {
  margin-top: 1.5rem;
  border-left: 2px solid var(--primary);
  padding-left: 1rem;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--muted-foreground);
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-quote p { margin-top: 0; }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-quote p + p { margin-top: 0.75rem; }

:is( .article__prose, .editor-styles-wrapper ) .wp-block-separator {
  margin-block: 2rem;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Images ------------------------------------------------------------------ */

/* The framed figure the export uses: rounded, hairline border, faint tint, and
   the caption sitting *inside* the frame rather than floating under it. */
:is( .article__prose, .editor-styles-wrapper ) .wp-block-image {
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--muted) 30%, transparent);
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-image figcaption {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  color: var(--muted-foreground);
}

/* Tables ------------------------------------------------------------------ */

/* Deliberately not the old live-site treatment: no boxed grid, no zebra
   striping, no heavy header rule. Hairline row rules only, generous padding,
   and the first column carrying the emphasis. */
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table {
  margin-top: 1.5rem;
  /* The scroll container is the figure itself, so a wide table scrolls instead
     of pushing the page sideways. */
  overflow-x: auto;
}

/* Front end only. In the editor this element *is* the block wrapper, which
   Gutenberg constrains with `.wp-block { max-width: … }` — overriding that here
   is what let tables run the full width of the canvas. */
.article__prose .wp-block-table { max-width: 100%; }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}
/* Core's block-library stylesheet puts a 1px border on every cell and a 3px rule
   under thead — the boxed grid with the heavy header rule that this design is
   explicitly not. Reset all of it, then put a single hairline back on the row. */
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table td,
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table th,
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table thead,
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table tfoot { border: 0; }

:is( .article__prose, .editor-styles-wrapper ) .wp-block-table thead tr { border-bottom: 1px solid var(--border); }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table th {
  padding: 0.625rem 1rem 0.625rem 0;
  font-weight: 600;
  text-align: left;
  color: var(--foreground);
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table tbody tr { border-bottom: 1px solid var(--border); }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table tbody tr:last-child { border-bottom: 0; }
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table td {
  padding: 0.75rem 1rem 0.75rem 0;
  line-height: 1.625;
  vertical-align: top;
  color: var(--muted-foreground);
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table td:first-child {
  font-weight: 500;
  color: var(--foreground);
}
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table th:last-child,
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table td:last-child { padding-right: 0; }

/* Core's table caption renders after the table; the export printed it above.
   Kept in WordPress's position so the block stays canonical in the editor. */
:is( .article__prose, .editor-styles-wrapper ) .wp-block-table figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  color: var(--muted-foreground);
}

/* Bosnia (B6 d, the export's article-view.tsx): every table in an article is a
   framed card with its caption above and a tinted header row; a protocol table
   (inc/blog.php peptidi_protocol_table) gets a primary-tinted frame and a
   "Protokol:" prefix. Front end only — the editor keeps core's layout. */
.article__prose .wp-block-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.article__prose .wp-block-table.is-protocol {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  background: color-mix(in oklab, var(--primary-soft) 20%, transparent);
}
.article__prose .wp-block-table figcaption {
  order: -1;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}
.article__prose .wp-block-table thead tr {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 50%, transparent);
}
.article__prose .wp-block-table th,
.article__prose .wp-block-table td,
.article__prose .wp-block-table th:last-child,
.article__prose .wp-block-table td:last-child { padding: 0.75rem 1rem; }

/* Give the editor canvas the article's own measure, so a table or the products
   card is laid out at the width it will actually publish at rather than at
   whatever the canvas happens to be. */
.editor-styles-wrapper .wp-block {
  max-width: 48rem;
  margin-inline: auto;
}

/* Undo core's auto margins on our list items — they centred every bullet.

   WordPress's own editor stylesheet (`classic.min.css`) carries:

     .editor-styles-wrapper :where(:not(.is-layout-flex, .is-layout-grid)) > .wp-block
       { margin-left: auto; margin-right: auto }

   Every block element in the editor gets `.wp-block`, and each list item is a
   `core/list-item` block, so that rule reaches our `<li>`s. `.is-layout-grid`
   is a WP *layout-support* class, which a hand-written list never carries — so
   the `:not()` matches even though `.wp-block-list` above is a real
   `display: grid`. Auto inline margins on a *grid item* shrink-wrap it and
   centre it in its track, so each bullet sat indented by half its own leftover
   space and the list stepped in and out down the page. The front end never had
   it: no `.wp-block` classes there, so core's rule cannot apply.

   `:where()` contributes no specificity, so core's selector is (0,2,0) and
   this one is (0,2,1) — it wins without `!important`.

   When debugging this again: Chrome's getComputedStyle reports `0px` for an
   `auto` margin, so the margins look innocent. Measure geometry, not styles. */
.editor-styles-wrapper .wp-block-list > li {
  margin-inline: 0;
}

/* -------------------------------------------------------------------------- */
/* Table of contents                                                           */
/* -------------------------------------------------------------------------- */

.article-toc__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--foreground);
}

.article-toc__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.article-toc__link { color: var(--muted-foreground); }
.article-toc__link:hover { color: var(--primary); }

.article-toc--inline {
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: color-mix(in oklch, var(--muted) 40%, transparent);
  padding: 1.25rem;
}
.article-toc--inline .article-toc__item { display: flex; gap: 0.5rem; }
.article-toc--inline .article-toc__num {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .article-toc--inline .article-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.article-toc--sidebar { padding: 1.5rem; }

/* Sidebar only where there is a sidebar. Below 1024px .article__grid collapses
   to one column, so this card stops sitting beside the text and lands *under*
   it — a contents list after the contents, and on a phone one more full-height
   card to scroll past before the related posts. Long articles (more than three
   H2s) still get the numbered list at the top of the prose, which is the
   in-flow version of the same thing. Domagoj, 2026-09-02. */
@media (max-width: 1023px) {
  .article-toc--sidebar { display: none; }
}

/* Not sticky, and neither is the aside around it. Pinning the card alone let
   the three cards below ride up over it; pinning the whole sidebar fixed that
   but outgrew the screen on a long article and buried the katalog card behind
   an inner scrollbar. Tried both (Domagoj, 2026-08-28) — it simply scrolls. */

/* -------------------------------------------------------------------------- */
/* Preporučeni proizvodi — the card inside the text                            */
/* -------------------------------------------------------------------------- */

.article-products {
  margin-top: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--primary-soft) 40%, transparent);
  padding: 1.25rem;
}

.article-products__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.article-products__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.article-products__item { display: flex; align-items: center; gap: 0.75rem; }

.article-products__thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
}
.article-products__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.article-products__link {
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--primary) 30%, transparent);
  text-underline-offset: 2px;
}
.article-products__link:hover { text-decoration-color: var(--primary); }

.article-products__note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* The editor's stand-in when no products have been chosen yet. */
.article-products--empty p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------- */
/* Izvori i dodatna literatura                                                 */
/* -------------------------------------------------------------------------- */

.article-refs {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.article-refs__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.article-refs__lead {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.article-refs__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .article-refs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.article-refs__item { display: flex; gap: 0.5rem; }
.article-refs__icon { margin-top: 0.125rem; flex-shrink: 0; color: var(--primary); }
.article-refs__item a { color: var(--muted-foreground); }
.article-refs__item a:hover { color: var(--primary); }
.article-refs__source { display: block; font-size: 0.75rem; opacity: 0.7; }

.ruo-notice--article { margin-top: 2rem; }

/* -------------------------------------------------------------------------- */
/* Sidebar modules                                                             */
/* -------------------------------------------------------------------------- */

.article-related,
.article-sideproducts { padding: 1.5rem; }

.article-related__title,
.article-sideproducts__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.article-related__list,
.article-sideproducts__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.article-related__list a { color: var(--muted-foreground); }
.article-related__list a:hover { color: var(--primary); }

.article-sideproducts__item { display: flex; align-items: center; gap: 0.75rem; }
.article-sideproducts__item a { color: var(--muted-foreground); }
.article-sideproducts__item a:hover { color: var(--primary); }

.article-sideproducts__thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
}
.article-sideproducts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.25rem;
}

.article-cta {
  background-color: var(--ink);
  color: var(--ink-foreground);
  border-color: transparent;
  padding: 1.5rem;
}
.article-cta:hover { transform: none; box-shadow: var(--shadow-soft); }
.article-cta__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.article-cta__text { margin-top: 0.5rem; font-size: 0.875rem; opacity: 0.8; }
.article-cta .btn { margin-top: 1rem; }

/* -------------------------------------------------------------------------- */
/* Sections at the foot of an article                                          */
/* -------------------------------------------------------------------------- */

.article-section { margin-top: 3.5rem; }
.article-section__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.article-section__lead {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.article-section .product-grid,
.article-section .post-grid { margin-top: 1.5rem; }

/* -------------------------------------------------------------------------- */
/* Post cards and the archives                                                 */
/* -------------------------------------------------------------------------- */

.post-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
@media (min-width: 1024px) {
  .post-card--featured { grid-column: span 2; }
}

.post-card__media { display: block; overflow: hidden; }
.post-card__image {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.post-card--featured .post-card__image { height: 16rem; }
.post-card__media:hover .post-card__image { transform: scale(1.05); }

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

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}
.post-card__chip {
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  padding: 0.25rem 0.625rem;
  color: var(--accent-foreground);
}
.post-card__stat { display: inline-flex; align-items: center; gap: 0.25rem; }
.post-card__stat .icon { width: 0.875rem; height: 0.875rem; }

.post-card__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}
.post-card--featured .post-card__title { font-size: 1.5rem; }
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--primary); }

.post-card__excerpt {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.post-card__more {
  margin-top: 1rem;
  width: fit-content;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.post-card__more:hover { text-decoration: underline; }

/* "Protokoli na jednom mjestu" — Bosnia only, /vodici/ (routes/vodici/index.tsx:62). */
.protocols {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--secondary) 40%, transparent);
  padding-block: 2.5rem;
}
.protocols__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.protocols__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-foreground);
}
.protocols__title { margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
@media (min-width: 640px) { .protocols__title { font-size: 1.875rem; } }
.protocols__lead { margin-top: 0.5rem; max-width: 42rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.protocols__cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.protocols__grid { margin-top: 1.75rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .protocols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .protocols__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.protocols__card { display: flex; min-height: 8rem; flex-direction: column; padding: 1.25rem; color: inherit; text-decoration: none; }
.protocols__icon { width: 1.25rem; height: 1.25rem; color: var(--primary); }
.protocols__card-title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.protocols__more { margin-top: auto; padding-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); }

.post-archive { padding-block: 3rem; }
.post-archive__empty { color: var(--muted-foreground); }

/* Mobile shows six of the twelve; archive.js reveals the rest before it spends
   a request. Above the breakpoint all twelve are visible from the start. */
@media (max-width: 639px) {
  .post-grid--capped > .post-card:nth-child(n + 7) { display: none; }
}

.post-archive__more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.post-archive__more-btn[aria-busy='true'] { opacity: 0.6; pointer-events: none; }

/* A reveal-only button has nothing to fetch: once the cap stops applying above
   the breakpoint, there is nothing for it to do, so it is not shown at all. */
@media (min-width: 640px) {
  .post-archive__more--reveal-only { display: none; }
}

/* -------------------------------------------------------------------------- */
/* Contents that comes back after the sidebar has gone                         */
/* -------------------------------------------------------------------------- */

/* Not sticky while the sidebar is on screen — that was the overlap. Once the
   katalog card has scrolled well past the top, article.js lifts the contents
   list out of the flow and pins it where the sidebar used to be, so a long
   article keeps its navigation without anything ever sitting behind anything.
   Desktop only: on a phone the sidebar sits under the article and a panel
   floating over the text would be in the way. */
@media (min-width: 1024px) {
  .article-toc--sidebar.is-floating {
    position: fixed;
    top: 7rem;
    z-index: 20;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: peptidi-toc-in 0.18s ease-out;
  }
}

@keyframes peptidi-toc-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .article-toc--sidebar.is-floating { animation: none; }
}

/* Compliance notices in an article (base styles in main.css). */
.research-data-notice--article { margin-top: 1.25rem; }
.not-medicine-bar--article { margin-top: 2.5rem; }

/* -------------------------------------------------------------------------- */
/* Vodiči / Novosti — what sits under the grid                                 */
/* -------------------------------------------------------------------------- */

/* The export holds all three of these to max-w-3xl and centres them under a
   full-width grid (routes/vodici/index.tsx:66). */
.archive-prose,
.archive-cross,
.article-refs--archive {
  margin-inline: auto;
  max-width: 48rem;
}

.archive-prose {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.archive-prose__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.archive-cross {
  margin-top: 2rem;
  padding: 1.25rem;
}

.archive-cross__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.archive-cross__list {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.archive-cross__item a {
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--primary) 30%, transparent);
  text-underline-offset: 2px;
}

.archive-cross__item a:hover { text-decoration-color: var(--primary); }

.archive-cross__all {
  margin-top: 1rem;
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.archive-cross__all:hover { text-decoration: underline; }