/**
 * 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. */
  scroll-margin-top: 7rem;
}
: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);
}

/* 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; }

/* 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 stručna 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; }

.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; }
}