/*
 * Black Lens 2.0 — Professional Investigative Journalism Platform
 * Loaded via wp_enqueue_style (functions.php)
 * World-Class Typography, Contrast & High-Legibility Card System
 */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── 1. CSS Custom Property Overrides ──────────────────────── */
:root {
    --accent-color: #c8102e;          /* Deep crimson — investigative authority */
    --accent-hover: #a00d25;
    --accent-glow:  rgba(200, 16, 46, 0.22);
    --font-heading: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --card-surface: #11141c;
    --card-surface-hover: #161a25;
    --card-border: rgba(255, 255, 255, 0.08);
    --card-border-hover: rgba(200, 16, 46, 0.55);
    --card-radius: 8px;
    --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 16px rgba(200, 16, 46, 0.12);
}

/* ── 2. Global Typography — Investigative Feel ─────────────── */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.site-title, .brand-logo,
.hero-headline, .card-title, .post-title,
.tile-title, .entry-title, .single-post-title {
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}
/* ── 7. PROFESSIONAL POST CARDS & HOMEPAGE DESIGN SYSTEM ────────── */

/* ── 7.1 Category Badges (Compact, High-Contrast, Single-Line) ── */
.tile-content .category,
.slide-content .category,
.card-content .category,
.article-meta .category,
.index-meta .category,
.newspaper-kicker,
.newspaper-lead-pill,
.newspaper-card-tag {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 92% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: linear-gradient(135deg, #c8102e 0%, #980a20 100%) !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    line-height: 1.3 !important;
    margin-bottom: 0.45rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
    border: none !important;
    text-shadow: none !important;
}

/* ── 7.2 Interactive Action Deck (30s Takeaway & Reading Time) ── */
.card-action-deck {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 0.88;
    transform: translateY(0) !important;
    transition: all 0.25s ease !important;
    pointer-events: auto !important;
}

.bento-tile:hover .card-action-deck,
.slide:hover .card-action-deck,
.article-card:hover .card-action-deck,
.feed-card:hover .card-action-deck {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
}

.card-action-pill {
    background: rgba(11, 14, 20, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 4px !important;
    color: #f0f3f8 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.card-action-pill svg {
    stroke: currentColor !important;
}

.card-summary-btn:hover {
    background: #c8102e !important;
    border-color: #c8102e !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(200, 16, 46, 0.4) !important;
    transform: translateY(-1px);
}

.card-summary-btn:active {
    transform: scale(0.96);
}

/* ── 7.3 Bento Hero Tiles (.bento-tile.live-tile) ── */
.bento-tile {
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    background: var(--card-surface) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s ease, 
                border-color 0.3s ease !important;
}

.bento-tile:hover {
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
    transform: translateY(-3px) !important;
}

.bento-tile .tile-bg {
    filter: brightness(0.92) contrast(1.04) saturate(0.98) !important;
    transform: scale(1) !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.bento-tile:hover .tile-bg {
    transform: scale(1.05) !important;
    filter: brightness(0.98) contrast(1.08) saturate(1.06) !important;
}

/* Scrim Gradient: high transparency on top, deep legibility scrim at bottom */
.tile-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, 
        rgba(11, 14, 20, 0.05) 0%, 
        rgba(11, 14, 20, 0.25) 35%, 
        rgba(11, 14, 20, 0.82) 70%, 
        rgba(11, 14, 20, 0.98) 100%) !important;
    transition: background 0.35s ease !important;
}

.bento-tile:hover .tile-overlay {
    background: linear-gradient(180deg, 
        rgba(11, 14, 20, 0.05) 0%, 
        rgba(11, 14, 20, 0.35) 25%, 
        rgba(11, 14, 20, 0.88) 65%, 
        rgba(11, 14, 20, 1) 100%) !important;
}

.tile-content {
    padding: 1.25rem 1.2rem 1.15rem 1.2rem !important;
    z-index: 3 !important;
}

.tile-title {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
    margin: 0 0 0.35rem 0 !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.tile-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.tile-title a:hover {
    color: #ff4d6d !important;
}

.tile-excerpt {
    font-family: var(--font-heading) !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: rgba(230, 235, 245, 0.85) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

/* ── 7.4 Hero Slider Centerpiece (.slide) ── */
.hero-slider {
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
    border: 1px solid var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
}

.slide-bg {
    filter: brightness(0.92) contrast(1.05) saturate(1.02) !important;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.slide:hover .slide-bg {
    transform: scale(1.04) !important;
}

.slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, 
        rgba(11, 14, 20, 0.05) 0%, 
        rgba(11, 14, 20, 0.3) 30%, 
        rgba(11, 14, 20, 0.85) 65%, 
        rgba(11, 14, 20, 0.98) 100%) !important;
}

.slide-content {
    padding: 2.2rem 2.25rem 2rem 2.25rem !important;
    z-index: 3 !important;
}

.slide-content .badge {
    background: #c8102e !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 3px 9px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    margin-bottom: 0.5rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.slide-content .article-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
}

.slide-content .hero-headline {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.25rem, 2.2vw, 1.85rem) !important;
    font-weight: 700 !important;
    line-height: 1.36 !important;
    color: #ffffff !important;
    margin: 0.35rem 0 0.5rem 0 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.slide-content .hero-headline a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.slide-content .hero-headline a:hover {
    color: #ff4d6d !important;
}

.slide-content .hero-excerpt {
    font-family: var(--font-heading) !important;
    font-size: 0.925rem !important;
    line-height: 1.55 !important;
    color: rgba(240, 243, 248, 0.88) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
}

.slide-nav-bar {
    background: rgba(11, 14, 20, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── 7.5 Mixed Block: Lead Article Card (.article-card) ── */
.article-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease !important;
}

.article-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

.article-card .card-img-wrap {
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #090c12 !important;
}

.article-card .card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.95) contrast(1.05) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.article-card:hover .card-img-wrap img {
    transform: scale(1.04) !important;
}

.article-card .card-content {
    padding: 1.35rem 1.45rem !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.article-card .card-content h3 {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.55rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.article-card .card-content h3 a {
    color: #f0f3f8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.article-card .card-content h3 a:hover {
    color: #c8102e !important;
}

.article-card .card-content .excerpt {
    font-family: var(--font-heading) !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: #9aa4b2 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ── 7.6 Mixed Block: List Cards (.list-card) ── */
.mixed-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.list-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 6px !important;
    padding: 0.75rem 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.9rem !important;
    transition: all 0.25s ease !important;
}

.list-card:hover {
    background: var(--card-surface-hover) !important;
    border-color: var(--card-border-hover) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.list-card .list-thumb {
    width: 88px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #090c12 !important;
}

.list-card .list-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.92) contrast(1.05) !important;
    transition: transform 0.4s ease !important;
}

.list-card:hover .list-thumb img {
    transform: scale(1.06) !important;
    filter: brightness(1) !important;
}

.list-card .list-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.list-card .list-content h4 {
    font-family: var(--font-heading) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 0.3rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.list-card .list-content h4 a {
    color: #e4e8f0 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.list-card:hover .list-content h4 a {
    color: #ff4d6d !important;
}

.list-card .list-content .date {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    color: #7f8a9a !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* ── 7.7 Feed Cards (.feed-card in feed-grid & main-feed-grid) ── */
.feed-grid,
.main-feed-grid {
    display: grid !important;
    gap: 1.5rem !important;
}

.feed-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease !important;
}

.feed-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

.feed-card .card-img-wrap {
    width: 100% !important;
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #090c12 !important;
}

.feed-card .card-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(0.94) contrast(1.05) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.feed-card:hover .card-img-wrap img {
    transform: scale(1.05) !important;
    filter: brightness(1) contrast(1.08) !important;
}

.feed-card .card-content {
    padding: 1.3rem 1.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.feed-card .card-content h3 {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
    margin: 0 0 0.5rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.feed-card .card-content h3 a {
    color: #f0f3f8 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.feed-card:hover .card-content h3 a {
    color: #c8102e !important;
}

.feed-card .card-content .excerpt {
    font-family: var(--font-heading) !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: #9aa4b2 !important;
    margin: 0 0 1rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.feed-card .card-footer {
    margin-top: auto !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    color: #7f8a9a !important;
}

.feed-card .card-footer .author {
    font-weight: 500 !important;
    color: #9aa4b2 !important;
}

.feed-card .card-footer .read-time {
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    color: #ff4d6d !important;
    background: rgba(200, 16, 46, 0.1) !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
}

/* ── 7.8 Media Cards (.media-card) ── */
.media-card {
    background: var(--card-surface) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.media-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--card-border-hover) !important;
    box-shadow: var(--card-shadow-hover) !important;
}

.media-card h4 {
    font-family: var(--font-heading) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #f0f3f8 !important;
    padding: 0.9rem 1rem !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.media-card:hover h4 {
    color: #ff4d6d !important;
}

/* ── 7.9 Feed Header & Section Filter Tabs ── */
.feed-header h2,
.section-header h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-left: 4px solid #c8102e !important;
    padding-left: 12px !important;
    margin: 0 !important;
}

.feed-filters button {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #9aa4b2 !important;
    border-radius: 4px !important;
    padding: 5px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.feed-filters button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.feed-filters button.active {
    background: #c8102e !important;
    border-color: #c8102e !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.35) !important;
}


@media (max-width: 991px) {
    .card-action-deck {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .hero-live-wall {
        height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 1.15rem !important;
    }
    
    .hero-col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        height: auto !important;
    }
    
    .bento-tile {
        height: 240px !important;
        min-height: 240px !important;
    }
    
    .hero-slider {
        height: 420px !important;
        min-height: 420px !important;
    }
    
    .mixed-block {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 640px) {
    .hero-col {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    
    .bento-tile {
        height: 230px !important;
        min-height: 230px !important;
    }
    
    .hero-slider {
        height: 410px !important;
        min-height: 410px !important;
    }
    
    .slide-content {
        padding: 1.5rem 1.25rem 3rem 1.25rem !important;
    }
    
    .slide-content .hero-headline {
        font-size: 1.15rem !important;
        line-height: 1.38 !important;
    }

    .slide-content .hero-excerpt {
        font-size: 0.82rem !important;
        line-height: 1.48 !important;
    }
    
    .tile-title {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    .tile-content {
        padding: 1rem !important;
    }
    
    .list-card .list-thumb {
        width: 80px !important;
        height: 60px !important;
    }
    
    .list-card .list-content h4 {
        font-size: 0.85rem !important;
    }
}