/* =========================================
   Blog Over — Editorial List Layout
   Premium newspaper z-pattern blog layout
   ========================================= */

/* ---------- Outer wrapper ---------- */
.blog-over-editorial-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Gap between z-pattern cards */
    gap: 2px;
}

/* ── Z-Pattern: Beautiful card separator ─────────────────
   Each featured card (except the first) gets a subtle
   top border to visually separate the alternating rows.    */
.blog-over-editorial-list .blog-over-editorial-featured + .blog-over-editorial-featured {
    border-top: 2px solid var(--blog-over-border-color, #e2e8f0);
    margin-top: 0;
}

/* Removes the bottom accent line from middle cards so only
   the last one has the blue separator effect */
.blog-over-editorial-list .blog-over-editorial-featured:not(:last-child) {
    border-bottom: none;
    box-shadow: 0 1px 0 var(--blog-over-border-color, #e2e8f0);
}

/* =========================================
   FEATURED POST — Hero split card
   Default: image LEFT | content RIGHT
   Classes added by PHP: .image-left / .image-right
   ========================================= */
.blog-over-editorial-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 360px;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    background: var(--blog-over-bg-card, #fff);
    border-bottom: 3px solid var(--blog-over-primary, #3b82f6);
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* Image on the RIGHT — swap column order */
.blog-over-editorial-featured.image-right .blog-over-editorial-featured-image {
    order: 2;
}
.blog-over-editorial-featured.image-right .blog-over-editorial-featured-content {
    order: 1;
}

/* ---- Featured Image panel ---- */
.blog-over-editorial-featured-image {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    /* Act as a proper containing block for the img */
}

/* Fix for posts with no image */
.blog-over-editorial-featured.no-image,
.no-sidebar .blog-over-editorial-featured.no-image {
    grid-template-columns: 1fr;
    min-height: auto;
}

/* The <a> sits inside and fills the panel */
.blog-over-editorial-featured-image > a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The img fills the <a> */
.blog-over-editorial-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}

/* Subtle overlay so cat badge is always readable */
.blog-over-editorial-featured-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,.28) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.blog-over-editorial-featured:hover .blog-over-editorial-featured-image img {
    transform: scale(1.06);
}


/* ---- Category badge — on image ---- */
.blog-over-editorial-featured-cat {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 3;
}

/* No-image variant: inline below content top */
.blog-over-editorial-featured-cat.is-inline {
    position: static;
    margin-bottom: 14px;
}

.blog-over-editorial-featured-cat a {
    display: inline-block;
    padding: 4px 12px;
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-radius: 4px;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.blog-over-editorial-featured-cat a:hover {
    background: var(--blog-over-secondary, #1e40af);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* ---- Content panel ---- */
.blog-over-editorial-featured-content {
    padding: 36px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: var(--blog-over-bg-card, #fff);
}

/* ---- Meta (author / date) ---- */
.blog-over-editorial-featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    font-size: .78rem;
    color: var(--blog-over-text-muted, #6b7280);
}

.blog-over-editorial-featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.blog-over-editorial-featured-meta a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.blog-over-editorial-featured-meta a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

/* ---- Title ---- */
.blog-over-editorial-featured-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 12px;
    letter-spacing: -.03em;
}

.blog-over-editorial-featured-title a {
    color: var(--blog-over-heading-color, #111827);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-over-editorial-featured-title a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

/* Accent rule below title */
.blog-over-editorial-featured-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--blog-over-primary, #3b82f6), var(--blog-over-secondary, #1e40af));
    margin-top: 12px;
    border-radius: 2px;
}

/* ---- Excerpt ---- */
.blog-over-editorial-featured-excerpt {
    font-size: .93rem;
    line-height: 1.72;
    color: var(--blog-over-text-secondary, #4b5563);
    margin: 16px 0 22px;
}

.blog-over-editorial-featured-excerpt p {
    margin: 0;
}

/* ---- Read-more CTA ---- */
.blog-over-editorial-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blog-over-primary, #3b82f6);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .9px;
    text-decoration: none;
    width: fit-content;
    padding: 9px 20px;
    border: 2px solid var(--blog-over-primary, #3b82f6);
    border-radius: 6px;
    transition: all .22s ease;
}

.blog-over-editorial-readmore:hover {
    background: var(--blog-over-primary, #3b82f6);
    color: #fff !important;
    text-decoration: none !important;
    gap: 12px;
}

.blog-over-editorial-readmore i {
    font-size: .72rem;
    transition: transform .2s ease;
}

.blog-over-editorial-readmore:hover i {
    transform: translateX(3px);
}

/* =========================================
   LIST ITEMS — compact ranked rows
   ========================================= */
.blog-over-editorial-items {
    border: 1px solid var(--blog-over-border-color, #e5e7eb);
    border-top: none;
    border-radius: 0 0 14px 14px;
    background: var(--blog-over-bg-card, #fff);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
}

.blog-over-editorial-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--blog-over-border-color, #e5e7eb);
    transition: background .18s ease;
    position: relative;
    text-decoration: none;
}

.blog-over-editorial-item:last-child {
    border-bottom: none;
}

.blog-over-editorial-item:hover {
    background: var(--blog-over-bg-body, #f9fafb);
}

/* Rank number badge */
.blog-over-editorial-item-number {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blog-over-primary, #3b82f6);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 50%;
    line-height: 1;
}

/* Thumbnail */
.blog-over-editorial-item-thumb {
    flex-shrink: 0;
    width: 82px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
}

.blog-over-editorial-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
    display: block;
}

.blog-over-editorial-item:hover .blog-over-editorial-item-thumb img {
    transform: scale(1.08);
}

/* Content */
.blog-over-editorial-item-content {
    flex-grow: 1;
    min-width: 0;
}

.blog-over-editorial-item-cat {
    margin-bottom: 3px;
}

.blog-over-editorial-item-cat a {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blog-over-primary, #3b82f6);
    text-decoration: none;
}

.blog-over-editorial-item-cat a:hover {
    color: var(--blog-over-secondary, #1e40af) !important;
}

.blog-over-editorial-item-title {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.42;
    margin: 0 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-over-editorial-item-title a {
    color: var(--blog-over-heading-color, #111827);
    text-decoration: none;
    transition: color .2s ease;
}

.blog-over-editorial-item-title a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

.blog-over-editorial-item-meta {
    font-size: .72rem;
    color: var(--blog-over-text-muted, #9ca3af);
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-over-editorial-item-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-over-editorial-item-meta a {
    color: inherit;
    text-decoration: none;
}

.blog-over-editorial-item-meta a:hover {
    color: var(--blog-over-primary, #3b82f6);
}

/* =========================================
   NO SIDEBAR — columns stay equal 50/50
   ========================================= */
.no-sidebar .blog-over-editorial-featured {
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
}

.no-sidebar .blog-over-editorial-featured-image {
    min-height: 420px;
}

/* =========================================
   IMAGE RATIO variants (Pro filter)
   ratio-full = natural cover (default)
   ratio-square / landscape / wide / portrait
   ========================================= */
.blog-over-editorial-featured-image.ratio-square  { aspect-ratio: 1/1; min-height: unset; }
.blog-over-editorial-featured-image.ratio-landscape { aspect-ratio: 4/3; min-height: unset; }
.blog-over-editorial-featured-image.ratio-wide    { aspect-ratio: 16/9; min-height: unset; }
.blog-over-editorial-featured-image.ratio-portrait { aspect-ratio: 3/4; min-height: unset; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 960px) {
    .blog-over-editorial-featured {
        grid-template-columns: 1fr;
        border-radius: 14px 14px 0 0;
    }

    /* Force image to always be on top for mobile (override z-pattern order) */
    .blog-over-editorial-featured.image-right .blog-over-editorial-featured-image,
    .blog-over-editorial-featured.image-right .blog-over-editorial-featured-content {
        order: 0;
    }

    .blog-over-editorial-featured-image {
        min-height: 260px;
    }

    /* Make image relative-height on tablet */
    .blog-over-editorial-featured-image img {
        position: relative;
        height: 260px;
    }

    .blog-over-editorial-featured-content {
        padding: 28px 28px;
    }

    .blog-over-editorial-featured-title {
        font-size: 1.45rem;
    }

    .no-sidebar .blog-over-editorial-featured {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .blog-over-editorial-featured-content {
        padding: 20px 18px;
    }

    .blog-over-editorial-featured-title {
        font-size: 1.25rem;
    }

    .blog-over-editorial-featured-meta {
        font-size: .72rem;
        gap: 10px;
    }

    .blog-over-editorial-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .blog-over-editorial-item-thumb {
        width: 68px;
        height: 54px;
    }

    .blog-over-editorial-item-number {
        display: none;
    }

    .blog-over-editorial-item-title {
        font-size: .86rem;
    }
}