/* ============================================================
   ARCHIVE — Benqu's category layout (markup: archive.php):
     .archive-title   term title inside the shared .breadcrumb-bar
     .archive-layout  post list | sidebar
     .archive-item    horizontal card, thumb left, body right
     .widget          sidebar block with the ruled heading
     .archive-more    infinite-scroll trigger (assets/js/infinite-scroll.js)

   Only enqueued on is_archive(). .cat-badge, .entry-meta,
   .category-tile and .tag-chip come from base.css.
   ============================================================ */

/* ------------------------------------------------------------
   Archive title — sits inside the shared .breadcrumb-bar (base.css)
   ------------------------------------------------------------ */

/* Benqu shows no heading here at all — only the breadcrumb. One is
   added because an archive with no h1 is a real SEO/a11y hole on a
   site that runs Rank Math; it is kept flat so the band still reads
   as Benqu's thin strip. */
.archive-title {
    display: flex;
    gap: 14px;
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-ink);
}

/* Tick in the term's own colour — the same motif the article headings
   and the footer link lists use. Falls back to the accent off-category. */
.archive-title::before {
    content: "";
    flex: 0 0 auto;
    align-self: stretch;
    width: 5px;
    border-radius: 2px;
    background: var(--card-color, var(--c-accent));
}

.archive-description {
    max-width: 70ch;
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--c-ink-soft);
}

.archive-description p {
    margin: 0;
}

/* Hidden on /spisak/ when the list being read belongs to somebody else
   — see assets/js/saved-list.js. */
.archive-description[hidden] {
    display: none;
}

/* ------------------------------------------------------------
   Two-column body
   ------------------------------------------------------------ */
.archive-layout {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px);
    display: grid;
    gap: 32px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
    .archive-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 40px;
        align-items: start;
    }

    /* Height is deliberately unconstrained: the column grows to fit its
       widgets and never scrolls inside itself. Note the consequence —
       once the sidebar is taller than the viewport, whatever sits below
       the fold stays out of reach while it is pinned. Drop the sticky
       positioning if that ever becomes a problem. */
    .archive-side {
        position: sticky;
        /* Clears the sticky nav bar. */
        top: 88px;
    }
}

/* ------------------------------------------------------------
   Post list
   ------------------------------------------------------------ */
.archive-list {
    display: grid;
    gap: 28px;
}

.archive-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}

.archive-item:hover {
    box-shadow: 0 18px 36px -24px var(--c-shadow);
}

@media (min-width: 640px) {
    .archive-item {
        grid-template-columns: 300px minmax(0, 1fr);
    }
}

.archive-item__media {
    display: block;
    overflow: hidden;
    background: var(--c-surface-tint);
    aspect-ratio: 16 / 10;
}

@media (min-width: 640px) {
    /* Fills the cell instead of keeping a ratio, so the card's height
       is set by its text and the image never leaves a gap. */
    .archive-item__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 230px;
    }
}

.archive-item__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.archive-item:hover .archive-item__media img {
    transform: scale(1.04);
}

.archive-item__body {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(18px, 2.4vw, 26px);
}

.archive-item__terms {
    margin: 0;
}

.archive-item__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
}

.archive-item__title a {
    color: var(--c-ink);
    text-decoration: none;
}

.archive-item__title a:hover {
    color: var(--c-accent);
}

.archive-item__excerpt {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--c-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.archive-empty {
    margin: 0;
    padding: 48px 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--c-ink-soft);
}

/* ------------------------------------------------------------
   Dead end — empty search results and 404
   (template-parts/nothing-found.php)
   ------------------------------------------------------------ */
.nothing-found {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(20px, 3vw, 32px);
}

.nothing-found__message {
    max-width: 62ch;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--c-ink-soft);
}

.suggested {
    padding-bottom: clamp(32px, 5vw, 56px);
}

.suggested__inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 56px) 0;
}

/* Two columns of cards here, unlike the single-column archive list:
   these are a browsing aid, not the page's own results. */
@media (min-width: 1024px) {
    .suggested__inner .archive-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .suggested__inner .archive-item {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .suggested__inner .archive-item__title {
        font-size: 1.15rem;
    }
}

/* Full-width tag block, not the narrow sidebar one. */
.tag-list--wide .tag-chip {
    padding: 6px 18px;
    font-size: 0.85rem;
}

/* 404's numeral, kept as a quiet marker rather than a hero digit. */
.archive-title__code {
    color: var(--c-accent);
}

/* ------------------------------------------------------------
   Sidebar widgets
   ------------------------------------------------------------ */
.widget + .widget {
    margin-top: 34px;
}

/* Benqu's heading rule: a short stub, the title, then a rule running
   out to the edge. */
.widget-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
}

.widget-title::before {
    content: "";
    flex: 0 0 30px;
    height: 2px;
    background: var(--c-border-strong);
}

.widget-title::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--c-border-strong);
}

.category-grid-side {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.category-grid-side .category-tile {
    min-height: 84px;
    padding: 14px 12px;
}

.category-grid-side .category-tile__name {
    font-size: 0.92rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-list .tag-chip {
    padding: 5px 14px;
    font-size: 0.8rem;
}

/* ------------------------------------------------------------
   Infinite scroll trigger
   ------------------------------------------------------------
   Still a real link to the next page (see infinite-scroll.js), so
   it is styled as a button but behaves as navigation when the
   script is absent or the request fails.
   ------------------------------------------------------------ */
.archive-more {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.load-more {
    display: inline-grid;
    place-items: center;
    min-height: 48px;
    padding: 0 32px;
    border: 2px solid var(--c-border-strong);
    border-radius: 5px;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.load-more:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
}

/* While a batch is in flight the trigger is inert — the observer can
   fire again before the response lands. */
.is-loading .load-more {
    opacity: 0.55;
    pointer-events: none;
}

.archive-status {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--c-ink-faint);
}

.has-error .archive-status {
    color: var(--c-accent-deep);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .archive-item,
    .archive-item__media img,
    .load-more {
        transition: none;
    }
}