/* ============================================================================
 * uki-archive.css — Phase 4 category/archive page (mockups/ukraineinfo-category-v1.html)
 * Restyles the native Penci "list" category archive to the cream+slate+gold system.
 * Consumes uki-tokens.css. Enqueued ONLY on is_category() (see child functions.php),
 * every rule scoped under body.category so tag/author/date/search + the /events/ CPT
 * archive are untouched. Reversible: delete this file + its enqueue block.
 *
 * Built piece-by-piece (each guest-verified before the next):
 *   (i)   rubric header + breadcrumb   ← THIS COMMIT
 *   (ii)  featured lead (page 1)       ← later
 *   (iii) list rows + placeholders     ← later
 *   (iv)  sidebar rail                 ← later
 *   (v)   pager                        ← later
 *   (vi)  endnote empty-state          ← later
 *   (vii) responsive pass              ← later
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * (i) BREADCRUMB — Penci's native .penci-breadcrumb (Домашня/Головна › Term).
 * Mockup .crumb: muted, small, gold hover, subtle › separators.
 * ------------------------------------------------------------------------- */
body.category .penci-breadcrumb {
    font-size: 12.5px;
    color: var(--uki-muted, #6f6a5d);
    margin: 4px auto 0;
    padding-top: 18px;
    letter-spacing: .01em;
}
body.category .penci-breadcrumb a,
body.category .penci-breadcrumb a.crumb {
    color: var(--uki-muted, #6f6a5d);
    font-weight: 500;
}
body.category .penci-breadcrumb a:hover {
    color: var(--uki-gold, #bf922c);
}
body.category .penci-breadcrumb > span:last-child {
    color: var(--uki-ink, #242c46);
}
body.category .penci-breadcrumb .penci-faicon {
    color: var(--uki-line, #dbcfb4);
    margin: 0 7px;
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * (i) RUBRIC HEADER — Penci's .archive-box > .title-bar (span prefix + h1)
 * + the optional .penci-category-description + our injected .uki-rubric-count.
 * Mockup .rubric: kicker «Рубрика» (gold), H1 (Lora 600, clamp 32–48),
 * .desc (serif, max 60ch), .count (muted). A single hairline closes the block.
 * ------------------------------------------------------------------------- */
body.category .archive-box {
    padding: 26px 0 0;
    margin-bottom: 0;
    border: 0;
}
body.category .archive-box .title-bar {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
    border: 0;
}
/* Replace Penci's "Категорія:" prefix with the gold «Рубрика» kicker. The prefix
   span is display:none so screen readers drop it from the a11y tree; the kicker is
   a decorative ::before on the (visible) title-bar parent. */
body.category .archive-box .title-bar > span {
    display: none;
}
body.category .archive-box .title-bar::before {
    content: "Рубрика";
    display: block;
    margin-bottom: 10px;
    font-family: var(--uki-sans, "Inter", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--uki-gold, #bf922c);
}
body.category .archive-box .title-bar h1 {
    font-family: var(--uki-serif, "Lora", Georgia, serif);
    font-weight: 600;
    color: var(--uki-ink, #242c46);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.06;
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
}

/* Category description (native, when the term has one — omitted cleanly if empty). */
body.category .penci-category-description {
    font-family: var(--uki-serif, "Lora", Georgia, serif);
    font-size: 18px;
    color: #46443d;
    line-height: 1.5;
    max-width: 60ch;
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}
body.category .penci-category-description .penci-category-description-inner p:last-child {
    margin-bottom: 0;
}

/* Injected count + last-updated line (child functions.php, penci_featured_archive_posts). */
body.category .uki-rubric-count-wrap {
    padding-top: 12px;
    padding-bottom: 18px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--uki-line, #dbcfb4);
}
body.category .uki-rubric-count {
    font-size: 13px;
    color: var(--uki-muted, #6f6a5d);
    letter-spacing: .03em;
}

/* ---------------------------------------------------------------------------
 * (ii) FEATURED LEAD — the newest post (first <li>) on page 1 only
 * (body.uki-archive-p1, set in child functions.php when !is_paged()). Penci's
 * list item is thumb-left; here we restack it: full-width 16:8 cover on top, then
 * a larger Lora title + dek + byline. Pages 2+ and every non-first row stay native
 * (refined in piece iii). Single-post category → only this <li> exists, so the
 * lead is the whole column with no empty rows block (degrades cleanly by nature).
 * ------------------------------------------------------------------------- */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child {
    margin-bottom: 34px;
}
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .item {
    display: block;
}
/* cover on top, 16:8, full width */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .thumbnail {
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
    border-radius: 6px;
    overflow: hidden;
}
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .thumbnail a.penci-image-holder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    background-size: cover;
    background-position: center;
    background-color: var(--uki-ink, #242c46);
}
/* content sits full width below the cover */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .content-list-right {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
/* kicker */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .cat a.penci-cat-name {
    font-family: var(--uki-sans, "Inter", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--uki-gold, #bf922c);
}
/* title — larger Lora ink, gold on hover */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child h2.penci-entry-title {
    font-family: var(--uki-serif, "Lora", Georgia, serif);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.16;
    margin: 10px 0 12px;
}
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child h2.penci-entry-title a {
    color: var(--uki-ink, #242c46);
}
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child:hover h2.penci-entry-title a {
    color: var(--uki-gold, #bf922c);
}
/* dek (excerpt) */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .item-content {
    font-size: 16px;
    color: #46443d;
    line-height: 1.6;
    max-width: 64ch;
    margin: 0 0 12px;
}
/* byline row */
body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .grid-post-box-meta {
    font-size: 12.5px;
    color: var(--uki-muted, #6f6a5d);
    letter-spacing: .03em;
}
/* lead with no featured image → synthesized 16:8 gradient (Penci omits .thumbnail
   for no-cover posts and adds li.pc-nothumb; there is no holder to paint). */
body.uki-archive-p1 #main .penci-wrapper-data > li.pc-nothumb:first-child .item::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    margin: 0 0 18px;
    border-radius: 6px;
    background: linear-gradient(150deg, #2b3350, #1c2238);
}

/* ---------------------------------------------------------------------------
 * (iii) LIST ROWS — every non-first post (mockup .row): 200px 3:2 thumb + kicker
 * / Lora title (gold hover) / dek / byline, hairline between rows. All selectors
 * are scoped to #main .penci-wrapper-data (the archive loop) so a future sidebar
 * or related grid can't inherit the row/lead treatment. Reading-time is left as
 * Penci renders it (no hide, no patch). Somber covers arrive as the post's own
 * featured image from the pipeline — no per-item front-end detection here.
 * ------------------------------------------------------------------------- */
#main .penci-wrapper-data > li:not(:first-child) {
    border-top: 1px solid var(--uki-line, #dbcfb4);
}
#main .penci-wrapper-data > li:not(:first-child) .item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding: 24px 0;
}
/* thumbnail → fixed 200px, 3:2 crop */
#main .penci-wrapper-data > li:not(:first-child) .thumbnail {
    width: 200px;
    max-width: none;
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
}
#main .penci-wrapper-data > li:not(:first-child) .thumbnail a.penci-image-holder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    background-color: var(--uki-ink, #242c46);
}
/* content column */
#main .penci-wrapper-data > li:not(:first-child) .content-list-right {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
/* kicker */
#main .penci-wrapper-data > li:not(:first-child) .cat a.penci-cat-name {
    font-family: var(--uki-sans, "Inter", system-ui, sans-serif);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--uki-gold, #bf922c);
}
/* title — Lora ink, gold on row hover */
#main .penci-wrapper-data > li:not(:first-child) h2.penci-entry-title {
    font-family: var(--uki-serif, "Lora", Georgia, serif);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.22;
    margin: 7px 0 9px;
}
#main .penci-wrapper-data > li:not(:first-child) h2.penci-entry-title a {
    color: var(--uki-ink, #242c46);
}
#main .penci-wrapper-data > li:not(:first-child):hover h2.penci-entry-title a {
    color: var(--uki-gold, #bf922c);
}
/* dek */
#main .penci-wrapper-data > li:not(:first-child) .item-content {
    font-size: 14.5px;
    color: #4a4740;
    line-height: 1.55;
    margin: 0 0 10px;
}
/* byline */
#main .penci-wrapper-data > li:not(:first-child) .grid-post-box-meta {
    font-size: 12.5px;
    color: var(--uki-muted, #6f6a5d);
}
/* row with no featured image → synthesized 3:2 gradient in the thumb column
   (Penci omits .thumbnail + adds li.pc-nothumb + .content-list-right.fullwidth). */
#main .penci-wrapper-data > li.pc-nothumb:not(:first-child) .item::before {
    content: "";
    align-self: start;
    aspect-ratio: 3 / 2;
    border-radius: 5px;
    background: linear-gradient(150deg, #2b3350, #1c2238);
}
#main .penci-wrapper-data > li.pc-nothumb:not(:first-child) .content-list-right.fullwidth {
    width: auto;
}

/* ---------------------------------------------------------------------------
 * (iv) SIDEBAR RAIL (mockup .rail). The archive is now single-sidebar
 * (penci_two_sidebar_archive=false), so #sidebar = main-sidebar on the right.
 * Show only the mockup's three blocks: «Останні публікації» → «Рубрики»
 * (categories-2, an archive-only widget) → «Розсилка громади» (the Session-I
 * slate box). Hide Search / «Останні коментарі» / the empty text block. The
 * archive-only Рубрики widget is hidden on single posts (which keep their own
 * Категорії in their left rail). All scoped so nothing leaks off category pages.
 * ------------------------------------------------------------------------- */
body.category #sidebar #block-2,
body.category #sidebar #block-4,
body.category #sidebar #block-7,
body.category #sidebar .widget_search {
    display: none;
}
/* (the archive-only «Рубрики» widget is shown only on category archives via a
   site-wide rule in uki-skin.css — uki-archive.css does not load off-category.) */
body.category #sidebar .widget {
    margin-bottom: 28px;
}
body.category #sidebar .widget:last-child {
    margin-bottom: 0;
}
/* block headings → gold uppercase + 2px ink underline */
body.category #sidebar #penci_latest_news_widget-3 > .widget-title,
body.category #sidebar #categories-2 > .widget-title,
body.category #sidebar #categories-2 > .widgettitle,
body.category #sidebar #categories-2 > h2,
body.category #sidebar #categories-2 > h3,
body.category #sidebar #categories-2 > h4 {
    font-family: var(--uki-sans, "Inter", system-ui, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--uki-gold, #bf922c);
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--uki-ink, #242c46);
}
body.category #sidebar #penci_latest_news_widget-3 .widget-title .inner-arrow {
    display: none;
}
/* «Останні публікації» mini-rows (mockup .mini) */
body.category #sidebar #penci_latest_news_widget-3 .side-newsfeed {
    margin: 0;
    padding: 0;
    list-style: none;
}
body.category #sidebar #penci_latest_news_widget-3 li.penci-feed {
    margin: 0;
    float: none;
    width: auto;
}
body.category #sidebar #penci_latest_news_widget-3 .side-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 0;
    border-bottom: 1px solid var(--uki-line, #dbcfb4);
}
body.category #sidebar #penci_latest_news_widget-3 li.penci-feed:last-child .side-item {
    border-bottom: 0;
}
body.category #sidebar #penci_latest_news_widget-3 .side-image {
    width: 62px;
    height: 48px;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 3px;
    overflow: hidden;
}
body.category #sidebar #penci_latest_news_widget-3 .side-image a.penci-image-holder {
    display: block;
    width: 62px;
    height: 48px;
    background-size: cover;
    background-position: center;
}
body.category #sidebar #penci_latest_news_widget-3 .side-item-text {
    flex: 1 1 auto;
}
body.category #sidebar #penci_latest_news_widget-3 .side-title-post {
    font-family: var(--uki-serif, "Lora", Georgia, serif);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.3;
    margin: 0;
}
body.category #sidebar #penci_latest_news_widget-3 .side-title-post,
body.category #sidebar #penci_latest_news_widget-3 .side-title-post a {
    color: var(--uki-ink, #242c46);
}
body.category #sidebar #penci_latest_news_widget-3 .side-item:hover .side-title-post,
body.category #sidebar #penci_latest_news_widget-3 .side-item:hover .side-title-post a {
    color: var(--uki-gold, #bf922c);
}
body.category #sidebar #penci_latest_news_widget-3 .side-item-meta {
    font-size: 11.5px;
    color: var(--uki-muted, #6f6a5d);
    margin-top: 4px;
}
/* «Рубрики» categories list (mockup .cats): count right, current = gold bold */
body.category #sidebar #categories-2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.category #sidebar #categories-2 li.cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--uki-line, #dbcfb4);
    font-size: 14.5px;
    color: var(--uki-muted, #6f6a5d);
}
body.category #sidebar #categories-2 li.cat-item:last-child {
    border-bottom: 0;
}
body.category #sidebar #categories-2 li.cat-item a {
    color: var(--uki-ink, #242c46);
}
body.category #sidebar #categories-2 li.cat-item a:hover {
    color: var(--uki-gold, #bf922c);
}
body.category #sidebar #categories-2 li.cat-item.current-cat > a {
    color: var(--uki-gold, #bf922c) !important; /* beats uki-skin's .cat-item a !important */
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * (v) PAGER (mockup .pager) — numbered squares, current = solid ink, gold hover.
 * Categories are single-page today, so this styles Penci's .penci-pagination
 * defensively for when a category grows past one page.
 * ------------------------------------------------------------------------- */
body.category .penci-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}
body.category .penci-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.category .penci-pagination a,
body.category .penci-pagination span,
body.category .penci-pagination .page-numbers {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--uki-line, #dbcfb4);
    border-radius: 4px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--uki-ink, #242c46);
    padding: 0 12px;
    background: none;
    line-height: 1;
}
body.category .penci-pagination a:hover,
body.category .penci-pagination a.page-numbers:hover {
    border-color: var(--uki-gold, #bf922c);
    color: var(--uki-gold, #bf922c);
}
body.category .penci-pagination .current,
body.category .penci-pagination span.current {
    background: var(--uki-ink, #242c46);
    color: #fff;
    border-color: var(--uki-ink, #242c46);
}

/* ---------------------------------------------------------------------------
 * (vi) ENDNOTE empty-state (mockup .endnote) — dashed nudge after the loop,
 * injected by the penci_archive_after_posts hook in child functions.php.
 * ------------------------------------------------------------------------- */
body.category .uki-endnote {
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--uki-paper-2, #fbf7ec);
    border: 1px dashed var(--uki-line, #dbcfb4);
    border-radius: 5px;
    font-size: 14px;
    color: var(--uki-muted, #6f6a5d);
    line-height: 1.55;
}
body.category .uki-endnote a {
    color: var(--uki-gold, #bf922c);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * (vii) RESPONSIVE — ≤980px: 2-col → 1-col, sidebar de-sticks and drops below
 * the main column. (The ≤620px row/lead collapse is below.)
 * ------------------------------------------------------------------------- */
@media (max-width: 980px) {
    body.category #sidebar {
        width: 100%;
        float: none;
        margin: 40px 0 0;
        position: static;
    }
    body.category #sidebar .theiaStickySidebar {
        position: static !important;
        transform: none !important;
        width: auto !important;
    }
}

/* Row/lead mobile collapse (mockup: rows → 1-col, cover 16/9 at ≤620px). Scoped
   to the elements built in pieces ii–iii; the broader layout sweep is piece vii. */
@media (max-width: 620px) {
    #main .penci-wrapper-data > li:not(:first-child) .item {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px 0;
    }
    #main .penci-wrapper-data > li:not(:first-child) .thumbnail {
        width: 100%;
    }
    #main .penci-wrapper-data > li:not(:first-child) .thumbnail a.penci-image-holder,
    #main .penci-wrapper-data > li.pc-nothumb:not(:first-child) .item::before {
        aspect-ratio: 16 / 9;
    }
    body.uki-archive-p1 #main .penci-wrapper-data > li:first-child h2.penci-entry-title {
        font-size: 24px;
    }
    body.uki-archive-p1 #main .penci-wrapper-data > li:first-child .thumbnail a.penci-image-holder,
    body.uki-archive-p1 #main .penci-wrapper-data > li.pc-nothumb:first-child .item::before {
        aspect-ratio: 16 / 9;
    }
}