/*
 * blog.css — MINIMAL. Single-article visual layout only.
 * The DOM stays answer-first (h1 → opening content first, for AI extraction);
 * CSS only lifts the featured image to the top VISUALLY. Tokens only, no !important.
 * Enqueued on blog contexts only (functions.php).
 */

/* Single post: visual reorder (HTML/DOM order stays answer-first for AI) */
body.single-post main > article {
    display: flex;
    flex-direction: column;
}
body.single-post main > article > .wp-block-post-title          { order: 1; }
body.single-post main > article > .wp-block-post-featured-image { order: 2; }
body.single-post main > article > footer                        { order: 3; }
body.single-post main > article > .wp-block-post-content        { order: 4; }
body.single-post main > article > nav                           { order: 5; }

/* Featured image: rounded, full content width */
body.single-post .wp-block-post-featured-image {
    margin-block: var(--jta-space-5);
}
body.single-post .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--jta-radius-md);
}

/* ---- Page rhythm: space around the article card ---- */
body.single-post main#main-content {
    padding-block: var(--jta-space-10);
}

/* ---- Breadcrumb trail (muted row above the card) ---- */
body.single-post .rank-math-breadcrumb {
    margin-bottom: var(--jta-space-5);
}
body.single-post .rank-math-breadcrumb p {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    color: var(--jta-muted);
    line-height: 1.5;
}
body.single-post .rank-math-breadcrumb a {
    color: var(--jta-muted);
    text-decoration: none;
}
body.single-post .rank-math-breadcrumb a:hover {
    color: var(--jta-primary-strong);
}
body.single-post .rank-math-breadcrumb .separator {
    margin-inline: var(--jta-space-2);
    color: var(--jta-soft);
}
body.single-post .rank-math-breadcrumb .last {
    color: var(--jta-ink);
}

/* ---- Article = white card on the grey page ---- */
body.single-post main > article {
    background: var(--jta-surface);
    border: 1px solid var(--jta-border);
    border-radius: var(--jta-radius-lg);
    padding: var(--jta-section-pad);
    box-shadow: var(--jta-shadow-sm);
}

/* Show the article title (base.css hides every post-title site-wide) */
body.single-post main > article > .wp-block-post-title {
    display: block;
    margin-bottom: var(--jta-space-5);
}

/* ---- Article meta — two tiers: byline (date . author) then topic pills ---- */
body.single-post main > article > footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--jta-space-4);
    margin-bottom: var(--jta-space-8);
    padding-bottom: var(--jta-space-6);
    border-bottom: 1px solid var(--jta-border-soft);
}

/* Tier 1 -- byline (muted, icon-led, dot separator) */
body.single-post .jta-byline {
    align-items: center;
    color: var(--jta-muted);
    font-size: var(--wp--preset--font-size--small);
}
body.single-post .jta-byline .wp-block-post-date,
body.single-post .jta-byline .wp-block-post-author-name {
    display: inline-flex;
    align-items: center;
}
body.single-post .jta-byline a { color: var(--jta-muted); text-decoration: none; }
body.single-post .jta-byline a:hover { color: var(--jta-primary-strong); }
body.single-post .jta-byline .wp-block-post-date::before,
body.single-post .jta-byline .wp-block-post-author-name::before {
    font-family: "Material Symbols Outlined";
    margin-right: var(--jta-space-1);
    color: var(--jta-soft);
    font-size: 1.15em;
    line-height: 1;
}
body.single-post .jta-byline .wp-block-post-date::before { content: "calendar_today"; }
body.single-post .jta-byline .wp-block-post-author-name::before { content: "person"; }
body.single-post .jta-byline .wp-block-post-date::after {
    content: "\00B7";
    margin: 0 var(--jta-space-3);
    color: var(--jta-soft);
}

/* Tier 2 -- topic pills */
body.single-post .jta-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--jta-space-2);
}
body.single-post .jta-topics .taxonomy-category,
body.single-post .jta-topics .taxonomy-post_tag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jta-space-2);
    margin: 0;
}
/* category pill -- filled */
body.single-post .jta-topics .taxonomy-category a {
    display: inline-flex;
    align-items: center;
    gap: var(--jta-space-1);
    padding: var(--jta-space-1) var(--jta-space-3);
    border-radius: var(--jta-radius-pill);
    background: var(--jta-primary);
    color: var(--jta-ink);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--jta-font-weight-heading);
    line-height: 1.5;
}
body.single-post .jta-topics .taxonomy-category a::before {
    font-family: "Material Symbols Outlined";
    content: "folder";
    font-size: 1.05em;
}
/* tag pills -- outlined */
body.single-post .jta-topics .taxonomy-post_tag a {
    display: inline-flex;
    align-items: center;
    padding: var(--jta-space-1) var(--jta-space-3);
    border: 1px solid var(--jta-border);
    border-radius: var(--jta-radius-pill);
    background: var(--jta-surface);
    color: var(--jta-text);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--jta-font-weight-heading);
    line-height: 1.5;
    transition: border-color var(--jta-transition), color var(--jta-transition);
}
body.single-post .jta-topics .taxonomy-post_tag a:hover {
    border-color: var(--jta-primary);
    color: var(--jta-ink);
}

/* ---- Prev / next navigation at the foot of the article ---- */
body.single-post main > article > nav {
    margin-top: var(--jta-space-8);
    padding-top: var(--jta-space-6);
    border-top: 1px solid var(--jta-border-soft);
    gap: var(--jta-space-4);
}
body.single-post main > article > nav a {
    color: var(--jta-ink);
    text-decoration: none;
    font-weight: var(--jta-font-weight-heading);
}
body.single-post main > article > nav a:hover {
    color: var(--jta-primary-strong);
}

/* ---- Asides: "O autorze" + "Powiazane artykuly" ---- */
body.single-post main > aside {
    margin-top: var(--jta-section-gap);
}
body.single-post main > aside > h2 {
    margin-bottom: var(--jta-space-5);
}

/* Author presented as a soft card */
body.single-post .wp-block-post-author {
    display: flex;
    gap: var(--jta-space-4);
    align-items: flex-start;
    padding: var(--jta-card-pad);
    background: var(--jta-surface-soft);
    border: 1px solid var(--jta-border-soft);
    border-radius: var(--jta-radius-md);
}
body.single-post .wp-block-post-author__avatar img {
    display: block;
    border-radius: var(--jta-radius-full);
}
body.single-post .wp-block-post-author__name {
    font-weight: var(--jta-font-weight-heading);
    color: var(--jta-ink);
}
body.single-post .wp-block-post-author__bio {
    margin-top: var(--jta-space-1);
    color: var(--jta-muted);
    font-size: var(--jta-text-base);
    line-height: 1.55;
}

/* Related posts as compact cards */
body.single-post main > aside .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--jta-layout-gap);
    margin: 0;
}
body.single-post main > aside .wp-block-post-template > li {
    display: flex;
    flex-direction: column;
    gap: var(--jta-space-2);
    padding: var(--jta-card-pad-compact);
    background: var(--jta-surface);
    border: 1px solid var(--jta-border);
    border-radius: var(--jta-radius-md);
    list-style: none;
    transition: transform var(--jta-transition), box-shadow var(--jta-transition);
}
body.single-post main > aside .wp-block-post-template > li:hover {
    transform: translateY(-3px);
    box-shadow: var(--jta-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    body.single-post main > aside .wp-block-post-template > li { transition: box-shadow var(--jta-transition); }
    body.single-post main > aside .wp-block-post-template > li:hover { transform: none; }
}
body.single-post main > aside .wp-block-post-template .wp-block-post-featured-image:empty {
    display: none;
}
body.single-post main > aside .wp-block-post-title {
    display: block;
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
}
body.single-post main > aside .wp-block-post-title a {
    color: var(--jta-ink);
    text-decoration: none;
}
body.single-post main > aside .wp-block-post-title a:hover {
    color: var(--jta-primary-strong);
}
body.single-post main > aside .wp-block-post-date {
    color: var(--jta-muted);
    font-size: var(--wp--preset--font-size--small);
}
@media (max-width: 700px) {
    body.single-post main > aside .wp-block-post-template { grid-template-columns: 1fr; }
}

/* ============================================================ *
 * Blog listing cards — index (.blog) + category/tag archives (.archive)
 * Tokens only. (Type sizes use the theme's font-size presets — tokens.css has no type scale.)
 * ============================================================ */

/* Widen the listing column (title, intro, filter, grid) so the cards have room */
body:is(.blog, .archive) main#main-content > :not(.alignfull) {
    max-width: var(--jta-content-wide);
}
body:is(.blog, .archive) .wp-block-post-template {
    max-width: none;
}
/* Grid: 3 -> 2 -> 1 */
body:is(.blog, .archive) .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--jta-layout-gap);
}
@media (max-width: 1100px) {
    body:is(.blog, .archive) .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    body:is(.blog, .archive) .wp-block-post-template { grid-template-columns: 1fr; }
}

/* Category filter chips */
body:is(.blog, .archive) .jta-cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--jta-space-2);
    margin-bottom: var(--jta-space-6);
}
body:is(.blog, .archive) .jta-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--jta-space-1);
    padding: var(--jta-space-2) var(--jta-space-4);
    border: 1px solid var(--jta-border);
    border-radius: var(--jta-radius-pill);
    background: var(--jta-surface);
    color: var(--jta-ink);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--jta-font-weight-heading);
    transition: var(--jta-transition);
}
body:is(.blog, .archive) .jta-cat-chip .jtp-icon { font-size: 1.2em; }
body:is(.blog, .archive) .jta-cat-chip:hover { border-color: var(--jta-primary); }
body:is(.blog, .archive) .jta-cat-chip.is-active {
    background: var(--jta-primary);
    border-color: var(--jta-primary);
}

/* Card chrome */
body:is(.blog, .archive) .wp-block-post-template > li {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: var(--jta-surface);
    border: 1px solid var(--jta-border);
    border-radius: var(--jta-radius-md);
    transition: transform var(--jta-transition), box-shadow var(--jta-transition);
}
body:is(.blog, .archive) .wp-block-post-template > li:hover {
    transform: translateY(-4px);
    box-shadow: var(--jta-shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    body:is(.blog, .archive) .wp-block-post-template > li { transition: box-shadow var(--jta-transition); }
    body:is(.blog, .archive) .wp-block-post-template > li:hover { transform: none; }
}

/* Image / placeholder slot — slim 5:1 band, top corners rounded to match the card */
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-post-featured-image,
body:is(.blog, .archive) .wp-block-post-template > li > .jta-card-ph {
    margin: 0;
    width: 100%;
    aspect-ratio: 5 / 1;
    overflow: hidden;
    border-top-left-radius: var(--jta-radius-md);
    border-top-right-radius: var(--jta-radius-md);
}
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-post-featured-image a,
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
}
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-post-featured-image img {
    object-fit: cover;
}

/* Placeholder band (no featured image) -- category icon + name, left aligned */
body:is(.blog, .archive) .jta-card-ph {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--jta-space-2);
    padding-inline: var(--jta-card-pad-compact);
    background: var(--jta-gradient-primary);
    color: var(--jta-ink);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
}
body:is(.blog, .archive) .jta-card-ph .jtp-icon { font-size: 1.4em; }
body:is(.blog, .archive) .jta-card-ph__cat {
    font-weight: var(--jta-font-weight-heading);
    line-height: 1.2;
}

/* Card body (padded group inside the card) */
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--jta-space-3);
    padding: var(--jta-card-pad-compact);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Card footer row: date + Czytaj wiecej, pinned to the bottom */
body:is(.blog, .archive) .wp-block-post-template > li > .wp-block-group > .wp-block-group {
    align-items: center;
    gap: var(--jta-space-2);
    margin-top: auto;
}

body:is(.blog, .archive) .wp-block-post-date {
    color: var(--jta-muted);
    font-size: var(--wp--preset--font-size--small);
}

/* Title — re-shown (a blanket page-title hide collapsed it), 3-line clamp, whole-card link */
body:is(.blog, .archive) .wp-block-post-template .wp-block-post-title {
    display: block;
    margin: 0;
    font-weight: var(--jta-font-weight-heading);
    line-height: 1.25;
    overflow: hidden;
    max-height: calc(3 * 1.25em);
}
body:is(.blog, .archive) .wp-block-post-template .wp-block-post-title a {
    color: var(--jta-ink);
    text-decoration: none;
}
body:is(.blog, .archive) .wp-block-post-template .wp-block-post-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Excerpt (2-line clamp) + "Czytaj więcej ->" */
body:is(.blog, .archive) .wp-block-post-excerpt {
    margin: 0;
}
body:is(.blog, .archive) .wp-block-post-excerpt__excerpt {
    margin: 0;
    color: var(--jta-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body:is(.blog, .archive) .wp-block-read-more {
    position: relative;
    z-index: 1;
    color: var(--jta-primary-strong);
    font-weight: var(--jta-font-weight-heading);
    font-size: var(--wp--preset--font-size--small);
    text-decoration: none;
}
body:is(.blog, .archive) .wp-block-read-more:hover { color: var(--jta-ink); }

/* "Aktualizacja" stamp (jta_updated_date shortcode) — matches the byline meta. */
body.single-post .jta-updated {
    margin: var(--jta-space-2) 0 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--wp--preset--font-size--small);
    color: var(--jta-muted);
}
body.single-post .jta-updated::before {
    font-family: "Material Symbols Outlined";
    content: "update";
    margin-right: var(--jta-space-1);
    color: var(--jta-soft);
    font-size: 1.15em;
    line-height: 1;
}