/**
 * Imprex Blog — Editorial / Magazine Layout
 * @version 1.0.0
 *
 * Covers:
 *  • home.php   — Blog posts page (70/30 + featured hero)
 *  • archive.php — Category/Tag/Author archives
 *  • single.php  — Single post editorial layout
 *
 * Naming convention: .imprex-blog-* and .imprex-single-*
 * No !important abuse — selectors are specific enough.
 */

/* ==========================================================================
   0. RESETS & SHARED TOKENS
   ========================================================================== */

:root {
    --ib-accent:      #0d6abb;
    --ib-accent-dark: #0a5291;
    --ib-text:        #1a1a2e;
    --ib-muted:       #6b7280;
    --ib-border:      #e8ecf0;
    --ib-bg:          #f7f9fb;
    --ib-white:       #ffffff;
    --ib-radius:      6px;
    --ib-shadow-sm:   0 1px 4px rgba(0,0,0,.07);
    --ib-shadow-md:   0 4px 16px rgba(0,0,0,.10);
    --ib-shadow-lg:   0 8px 32px rgba(0,0,0,.13);
    --ib-font-body:   17px;
    --ib-lh-body:     1.75;
}

/* ==========================================================================
   1. PAGE WRAPPER
   ========================================================================== */

.imprex-blog-page {
    padding: 0 0 60px;
    background: var(--ib-bg);
}

/* ==========================================================================
   2. SEO INTRO BLOCK (blog page content)
   ========================================================================== */

.imprex-blog-seo {
    background: var(--ib-white);
    border-bottom: 1px solid var(--ib-border);
    padding: 32px 0 24px;
    margin-bottom: 0;
}

.imprex-blog-seo .container > *:last-child { margin-bottom: 0; }

.imprex-blog-seo p {
    color: var(--ib-muted);
    font-size: 15px;
    line-height: 1.6;
    max-width: 780px;
}

/* ==========================================================================
   3. ARCHIVE HEADER (category / tag / author pages)
   ========================================================================== */

.imprex-archive-header {
    background: var(--ib-white);
    border-bottom: 1px solid var(--ib-border);
    padding: 36px 0 28px;
    margin-bottom: 0;
}

.imprex-archive-header h1 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--ib-text);
    margin: 0 0 8px;
    line-height: 1.2;
}

.imprex-archive-header .imprex-archive-desc {
    color: var(--ib-muted);
    font-size: 15px;
    margin: 0;
}

.imprex-archive-header .imprex-archive-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ib-accent);
    margin-bottom: 10px;
}

/* ==========================================================================
   4. MAIN LAYOUT — 70 / 30
   ========================================================================== */

.imprex-blog-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
}

.imprex-blog-main {
    flex: 1 1 0;
    min-width: 0; /* prevent flex overflow */
}

.imprex-blog-sidebar-col {
    flex: 0 0 310px;
    width: 310px;
    position: sticky;
    top: 20px;
}

/* When no sidebar — main takes full width */
.imprex-blog-layout.no-sidebar .imprex-blog-main { flex: 0 0 100%; }

/* ==========================================================================
   5. FEATURED (HERO) POST
   ========================================================================== */

.imprex-featured-post {
    background: var(--ib-white);
    border-radius: var(--ib-radius);
    overflow: hidden;
    box-shadow: var(--ib-shadow-md);
    margin-bottom: 32px;
    transition: box-shadow .2s ease;
}

.imprex-featured-post:hover { box-shadow: var(--ib-shadow-lg); }

/* 16:9 image container */
.imprex-featured-post__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #dde2e8;
}

.imprex-featured-post__img-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.imprex-featured-post__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}

.imprex-featured-post:hover .imprex-featured-post__img-wrap img {
    transform: scale(1.03);
}

/* Fallback: no image — show accent gradient */
.imprex-featured-post__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ib-accent) 0%, var(--ib-accent-dark) 100%);
}

/* Body below image */
.imprex-featured-post__body {
    padding: 16px 14px 20px;
}

.imprex-featured-post__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.imprex-featured-post__title {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 2.5vw, 1.9rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.imprex-featured-post__title a {
    color: var(--ib-text);
    text-decoration: none;
    transition: color .15s;
}

.imprex-featured-post__title a:hover { color: var(--ib-accent); }

.imprex-featured-post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--ib-muted);
    margin-bottom: 14px;
}

.imprex-featured-post__meta i { font-size: 14px; margin-right: 3px; vertical-align: -2px; }

.imprex-featured-post__excerpt {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   6. POST LIST (horizontal items)
   ========================================================================== */

.imprex-post-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Single list row */
.imprex-post-item {
    display: flex;
    align-items: stretch;
    background: var(--ib-white);
    border-radius: var(--ib-radius);
    overflow: hidden;
    box-shadow: var(--ib-shadow-sm);
    margin-bottom: 16px;
    transition: box-shadow .18s ease, transform .18s ease;
}

.imprex-post-item:hover {
    box-shadow: var(--ib-shadow-md);
    transform: translateY(-2px);
}

/* Thumbnail — fixed 16:9 */
.imprex-post-item__thumb {
    flex: 0 0 220px;
    width: 220px;
    position: relative;
    overflow: hidden;
    background: #dde2e8;
}

.imprex-post-item__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.imprex-post-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .35s ease;
}

.imprex-post-item:hover .imprex-post-item__thumb img { transform: scale(1.05); }

.imprex-post-item__thumb-placeholder {
    width: 100%;
    height: 100%;
    min-height: 124px; /* ~220×(9/16) */
    background: linear-gradient(135deg, var(--ib-accent) 0%, var(--ib-accent-dark) 100%);
}

/* Content side */
.imprex-post-item__body {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.imprex-post-item__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.imprex-post-item__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

.imprex-post-item__title a {
    color: var(--ib-text);
    text-decoration: none;
    transition: color .15s;
}

.imprex-post-item__title a:hover { color: var(--ib-accent); }

.imprex-post-item__meta {
    font-size: 11px;
    color: var(--ib-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.imprex-post-item__meta i { font-size: 13px; margin-right: 2px; vertical-align: -2px; }

.imprex-post-item__excerpt {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ==========================================================================
   7. SHARED: CATEGORY PILLS
   ========================================================================== */

.imprex-cat-pill {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    background: #003366;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.imprex-cat-pill:hover {
    background: #f0f0f0;
    color: #003366;
    text-decoration: none;
}

/* ==========================================================================
   8. SHARED: READ MORE BUTTON
   ========================================================================== */

.imprex-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ib-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: gap .15s, color .15s;
}

.imprex-read-more:hover { gap: 9px; color: var(--ib-accent-dark); text-decoration: none; }
.imprex-read-more::after { content: '→'; font-size: 14px; }

/* ==========================================================================
   9. PAGINATION
   ========================================================================== */

.imprex-pagination {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.imprex-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--ib-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--ib-text);
    background: var(--ib-white);
    border: 1px solid var(--ib-border);
    transition: background .15s, color .15s, border-color .15s;
}

.imprex-pagination .page-numbers:hover,
.imprex-pagination .page-numbers.current {
    background: var(--ib-accent);
    color: var(--ib-white);
    border-color: var(--ib-accent);
}

.imprex-pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    cursor: default;
}

/* ==========================================================================
   10. NO RESULTS
   ========================================================================== */

.imprex-no-results {
    padding: 60px 20px;
    text-align: center;
    color: var(--ib-muted);
    font-size: 16px;
}

/* ==========================================================================
   11. SIDEBAR
   ========================================================================== */

.imprex-blog-sidebar-col {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.imprex-sidebar-widget {
    background: var(--ib-white);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--ib-shadow-sm);
}

.imprex-sidebar-widget:last-child { margin-bottom: 0; }

.imprex-sidebar-widget-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ib-text);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ib-accent);
}

/* Common widget list styles */
.imprex-sidebar-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.imprex-sidebar-widget ul li {
    padding: 6px 0;
    border-bottom: 1px solid var(--ib-border);
    font-size: 13px;
    color: var(--ib-text);
}

.imprex-sidebar-widget ul li:last-child { border-bottom: none; }

.imprex-sidebar-widget ul li a {
    color: var(--ib-text);
    text-decoration: none;
    transition: color .15s;
}

.imprex-sidebar-widget ul li a:hover { color: var(--ib-accent); }


/* ==========================================================================
   12. SINGLE POST — HEADER BLOCK (full width)
   ========================================================================== */

.imprex-single-page {
    background: var(--ib-bg);
    padding-bottom: 60px;
}

.imprex-single-header {
    background: var(--ib-white);
    border-bottom: 1px solid var(--ib-border);
    padding: 28px 0 20px;
    margin-bottom: 0;
}

.imprex-single-header__inner {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.imprex-single-header__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    justify-content: center;
}

.imprex-single-header__title {
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--ib-text);
    margin: 0 0 20px;
    width: 100%;
    text-align: center;
}

/* Excerpt as sub-headline */
.imprex-single-header__excerpt {
    width: 100%;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 22px;
    font-style: italic;
    text-align: center;
}

.imprex-single-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12px;
    color: var(--ib-muted);
    padding-top: 16px;
    border-top: 1px solid var(--ib-border);
    justify-content: center;
    width: 100%;
}

.imprex-single-header__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.imprex-single-header__meta-item i { font-size: 15px; color: var(--ib-accent); }

/* ==========================================================================
   13. SINGLE POST — SPLIT LAYOUT (70 / 30)
   ========================================================================== */

.imprex-single-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
}

.imprex-single-content {
    flex: 1 1 0;
    min-width: 0;
}

.imprex-single-sidebar-col {
    flex: 0 0 310px;
    width: 310px;
    min-width: 310px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* ==========================================================================
   14. SINGLE POST — FEATURED IMAGE + CONTENT
   ========================================================================== */

.imprex-single-featured-img {
    width: 100%;
    border-radius: var(--ib-radius);
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: var(--ib-shadow-md);
}

.imprex-single-featured-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* The article body — better reading typography */
.imprex-single-body {
    background: var(--ib-white);
    border-radius: var(--ib-radius);
    padding: 28px 20px;
    box-shadow: var(--ib-shadow-sm);
    border: 1px solid var(--ib-border);
}

.imprex-single-body .c27-content-wrapper,
.imprex-single-body {
    font-size: var(--ib-font-body);
    line-height: var(--ib-lh-body);
    color: #374151;
}

/* Content typography overrides */
.imprex-single-body p { margin-bottom: 1.4em; }

.imprex-single-body h2,
.imprex-single-body h3,
.imprex-single-body h4 {
    color: var(--ib-text);
    font-weight: 800;
    line-height: 1.25;
    margin: 1.8em 0 .7em;
}

.imprex-single-body h2 { font-size: 1.55rem; }
.imprex-single-body h3 { font-size: 1.25rem; }
.imprex-single-body h4 { font-size: 1.05rem; }

.imprex-single-body a {
    color: var(--ib-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.imprex-single-body a:hover { color: var(--ib-accent-dark); }

.imprex-single-body blockquote {
    border-left: 4px solid var(--ib-accent);
    margin: 1.5em 0;
    padding: .8em 1.2em;
    background: rgba(13,106,187,.05);
    border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
    font-style: italic;
    color: #4b5563;
}

.imprex-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ib-radius);
    margin: .5em 0;
}

.imprex-single-body ul,
.imprex-single-body ol {
    padding-left: 1.5em;
    margin-bottom: 1.4em;
}

.imprex-single-body li { margin-bottom: .4em; }

.imprex-single-body pre,
.imprex-single-body code {
    background: #f3f4f6;
    border-radius: 4px;
    font-size: .88em;
}

.imprex-single-body pre { padding: 1em 1.2em; overflow-x: auto; }
.imprex-single-body code { padding: .15em .4em; }

/* ==========================================================================
   15. SINGLE POST — TAGS + NAVIGATION
   ========================================================================== */

.imprex-single-footer {
    margin-top: 28px;
}

.imprex-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
}

.imprex-tag-pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--ib-border);
    transition: background .15s, color .15s;
}

.imprex-tag-pill:hover {
    background: var(--ib-text);
    color: var(--ib-white);
    border-color: var(--ib-text);
    text-decoration: none;
}

/* Prev / Next navigation */
.imprex-post-nav {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
}

.imprex-post-nav__item {
    flex: 1;
    background: var(--ib-white);
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius);
    padding: 14px 16px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.imprex-post-nav__item:hover {
    border-color: var(--ib-accent);
    box-shadow: var(--ib-shadow-sm);
    text-decoration: none;
}

.imprex-post-nav__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ib-muted);
}

.imprex-post-nav__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ib-text);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imprex-post-nav__item--next { text-align: right; }

/* ==========================================================================
   16. COMMENTS (single post)
   ========================================================================== */

.imprex-single-comments {
    margin-top: 0;
}

.imprex-single-comments .container { padding: 0; } /* inside our layout already */

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    /* Archive / Home — sidebar goes below content */
    .imprex-blog-layout {
        flex-direction: column;
        gap: 24px;
    }

    .imprex-blog-sidebar-col {
        flex: 0 0 100%;
        width: 100%;
        position: static;
    }

    /* Single post — sidebar goes below */
    .imprex-single-layout {
        flex-direction: column;
        gap: 24px;
    }

    .imprex-single-sidebar-col {
        flex: 0 0 100%;
        width: 100%;
        position: static;
        order: 2; /* push sidebar below content */
    }

    .imprex-single-content { order: 1; }

    /* Single header excerpt */
    .imprex-single-header__excerpt { max-width: 100%; }
}

@media (max-width: 640px) {
    /* List items — stack on mobile */
    .imprex-post-item {
        flex-direction: column;
    }

    .imprex-post-item__thumb {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    /* Single body — less padding on mobile */
    .imprex-single-body { padding: 20px; }

    /* Featured post body */
    .imprex-featured-post__body { padding: 16px 18px 20px; }

    /* Post nav — stack */
    .imprex-post-nav { flex-direction: column; }

    /* Archive header */
    .imprex-archive-header { padding: 24px 0 18px; }

    .imprex-blog-layout { padding-top: 24px; }
}

/* ==========================================================================
   18. LATEST POSTS WIDGET / SHORTCODE
   ========================================================================== */

.imprex-lp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.imprex-lp-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.imprex-lp-item:last-child { border-bottom: none; padding-bottom: 0; }
.imprex-lp-item:first-child { padding-top: 0; }

/* Square 80×80 thumbnail */
.imprex-lp-thumb {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    background: #dde2e8;
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.imprex-lp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .3s ease;
}

.imprex-lp-item:hover .imprex-lp-thumb img { transform: scale(1.07); }

.imprex-lp-thumb__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ib-accent) 0%, var(--ib-accent-dark) 100%);
}

/* Body — vertically centered alongside the 80px thumbnail */
.imprex-lp-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
    gap: 4px;
}

/* Title — 2-line clamp */
.imprex-lp-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ib-text);
    text-decoration: none;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}

.imprex-lp-title:hover { color: var(--ib-accent); text-decoration: none; }

/* Meta row: date + category */
.imprex-lp-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Date: icon + text */
.imprex-lp-meta__date {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #888;
    line-height: 1;
}

.imprex-lp-meta__date i { font-size: 12px; color: #aaa; vertical-align: -1px; }

/* Category: icon + text (plain link, no pill) */
.imprex-lp-meta__cat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #888;
    text-decoration: none;
    line-height: 1;
    transition: color .15s;
}

.imprex-lp-meta__cat i { font-size: 12px; color: #aaa; vertical-align: -1px; }
.imprex-lp-meta__cat:hover { color: var(--ib-accent); text-decoration: none; }
.imprex-lp-meta__cat:hover i { color: var(--ib-accent); }

/* ==========================================================================
   19. RELATED POSTS BLOCK ("Notizie Correlate")
   ========================================================================== */

.imprex-related {
    margin-top: 36px;
    margin-bottom: 36px;
}

.imprex-related__title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ib-text);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ib-accent);
}

/* 3-column grid */
.imprex-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Card */
.imprex-related-card {
    background: var(--ib-white);
    border-radius: var(--ib-radius);
    overflow: hidden;
    box-shadow: var(--ib-shadow-sm);
    border: 1px solid var(--ib-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
}

.imprex-related-card:hover {
    box-shadow: var(--ib-shadow-md);
    transform: translateY(-3px);
}

/* 16:9 image wrapper */
.imprex-related-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #dde2e8;
    display: block;
    text-decoration: none;
    flex-shrink: 0;
}

.imprex-related-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .4s ease;
}

.imprex-related-card:hover .imprex-related-card__img-wrap img {
    transform: scale(1.05);
}

.imprex-related-card__img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ib-accent) 0%, var(--ib-accent-dark) 100%);
}

/* Category pill on/over image */
.imprex-related-card__cat {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

/* Card body */
.imprex-related-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Title — grows to fill remaining space */
.imprex-related-card__title {
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 auto;
    padding-bottom: 12px;
    letter-spacing: -.01em;
}

.imprex-related-card__title a {
    color: var(--ib-text);
    text-decoration: none;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imprex-related-card__title a:hover { color: var(--ib-accent); }

/* Date — always at bottom */
.imprex-related-card__date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ib-muted);
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--ib-border);
    flex-shrink: 0;
}

.imprex-related-card__date i { font-size: 13px; color: var(--ib-accent); }

/* ── Responsive: related posts grid ────────────────────── */

@media (max-width: 900px) {
    .imprex-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .imprex-related__grid { grid-template-columns: 1fr; }
    .imprex-related { margin-top: 24px; margin-bottom: 24px; }
}

/* ==========================================================================
   20. CONTAINER WIDTH OVERRIDES
   Widening the parent-theme .container to reduce side white-space.
   ========================================================================== */

@media (min-width: 992px) {
    body .container {
        width: 1120px !important;
    }
}

@media (min-width: 1200px) {
    body .container {
        width: 1270px !important;
    }
}

/* ==========================================================================
   21. CATEGORY PILLS — !important OVERRIDE
   Forces dark-blue / white-text regardless of parent-theme specificity.
   Covers: list cards, hero card, related grid overlay, archive header, meta row.
   ========================================================================== */

.imprex-cat-pill {
    background-color: #003366 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 7px !important;
    height: 20px !important;
    border-radius: 10px !important;
    border: none !important;
    text-decoration: none !important;
}

.imprex-cat-pill:hover,
.imprex-cat-pill:focus {
    background-color: #f0f0f0 !important;
    color: #003366 !important;
    text-decoration: none !important;
}

/* Pill overlaid on card images (related grid) — keep readable */
.imprex-related-card__cat.imprex-cat-pill {
    background-color: #003366 !important;
    color: #ffffff !important;
    /* semi-transparent backing already set via rgba — override cleanly */
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
}