/* ==========================================================================
   MATRITSATA - MOBILE HOMEPAGE CORE SECTIONS (< 1024px)
   ========================================================================== */

@media (max-width: 1023px) {

    /* ==========================================================================
       1. "ВАЖНО ДНЕС" SECTION (MOBILE MICRO-CARDS)
       ========================================================================== */
    .section-vazhno-dnes {
        padding: 32px 0 28px !important;
        background-color: #FFFFFF !important;
    }

    .vazhno-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .vazhno-grid .news-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #ECECEC !important;
        background: transparent !important;
    }

    .vazhno-grid .news-card:nth-child(n+4) {
        display: none !important;
    }

    .vazhno-grid .news-card:nth-child(3),
    .vazhno-grid .news-card:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .vazhno-grid .news-card-thumb {
        width: 104px !important;
        height: 70px !important;
        aspect-ratio: auto !important;
        border-radius: 4px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        background-color: #F0F0F2 !important;
    }

    .vazhno-grid .news-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }

    .vazhno-grid .news-card-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    .vazhno-grid .category-badge {
        font-size: 9px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: var(--color-accent-red) !important;
        margin-bottom: 1px !important;
        line-height: 1.1 !important;
    }

    .vazhno-grid .news-card-title {
        font-family: var(--font-sans) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: var(--color-text-main) !important;
        margin-bottom: 2px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Prevent vazhno-grid mobile micro-cards from stretching */
    .vazhno-grid .news-card-excerpt {
        display: none !important;
    }

    .vazhno-grid .news-byline-bar {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
    }

    .vazhno-grid .news-byline-bar .byline-avatar {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    .vazhno-grid .news-byline-bar .byline-author-name {
        font-size: 11px !important;
    }

    .vazhno-grid .news-byline-bar .byline-reading-time {
        font-size: 9.5px !important;
    }

    .vazhno-grid .news-card-footer {
        border-top: none !important;
        padding-top: 0 !important;
        margin-top: 3px !important;
    }

    .vazhno-grid .news-card-meta {
        font-size: 9.5px !important;
        color: #8E8E93 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .vazhno-grid .news-card-meta>span::after {
        content: none !important;
    }

    .vazhno-grid .btn-card-action {
        font-size: 9.5px !important;
        gap: 2px !important;
    }

    .vazhno-grid .btn-card-action svg,
    .vazhno-grid .post-views-badge svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* ==========================================================================
       2. MOBILE INVESTIGATION & CATEGORY BANNERS (COMPACT HORIZONTAL SPLIT)
       ========================================================================== */
    .section-investigation-banner {
        padding: 16px 0 !important;
        background-color: var(--color-bg-body) !important;
    }

    .investigation-banner-card {
        min-height: 120px !important;
        padding: 0 !important;
        border-radius: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        overflow: hidden !important;
        background-color: #070709 !important;
    }

    .investigation-banner-card .banner-thumb-link {
        flex: 0 0 115px !important;
        width: 115px !important;
        height: auto !important;
        display: block !important;
    }

    @media (min-width: 480px) and (max-width: 1023px) {
        .investigation-banner-card .banner-thumb-link {
            flex: 0 0 150px !important;
            width: 150px !important;
        }
    }

    .investigation-banner-card .banner-thumb-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .investigation-content {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding: 12px 36px 12px 14px !important;
        /* 36px right padding keeps text clear of ribbon on mobile */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        min-width: 0 !important;
    }

    /* Top-Right Ribbon on Mobile */
    .investigation-banner-card .banner-bookmark-top-right {
        top: 10px !important;
        right: 12px !important;
    }

    .investigation-banner-card .banner-bookmark-top-right svg {
        width: 17px !important;
        height: 28px !important;
        stroke: #FFFFFF !important;
        stroke-width: 2 !important;
    }

    .investigation-banner-card .banner-bookmark-top-right.active svg path {
        fill: var(--color-accent-red, #E50914) !important;
        stroke: var(--color-accent-red, #E50914) !important;
    }

    .investigation-badge-wrap {
        margin-bottom: 3px !important;
    }

    .investigation-badge {
        font-size: 8.5px !important;
        letter-spacing: 0.06em !important;
    }

    .investigation-badge .square-bullet {
        width: 4px !important;
        height: 4px !important;
    }

    .investigation-title {
        font-family: var(--font-sans) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        color: #FFFFFF !important;
        margin-bottom: 4px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Subtitle on Mobile */
    .investigation-excerpt {
        font-family: var(--font-sans) !important;
        font-size: 10.5px !important;
        line-height: 1.35 !important;
        color: #A0A0A8 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .investigation-meta-row {
        gap: 5px !important;
        font-size: 9.5px !important;
        margin-bottom: 8px !important;
        line-height: 1 !important;
    }

    .investigation-meta-dot {
        font-size: 8px !important;
    }

    .investigation-meta-row .btn-banner-reaction {
        font-size: 9px !important;
        padding: 2px 5px !important;
    }

    .investigation-meta-row .btn-banner-reaction svg,
    .investigation-meta-views svg {
        width: 10px !important;
        height: 10px !important;
    }

    .investigation-cta-btn {
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        padding: 4px 10px !important;
        border-radius: 3px !important;
    }

    .investigation-cta-btn .cta-arrow {
        font-size: 10px !important;
    }

    /* ==========================================================================
       3. "АНАЛИЗИ" SECTION (3-COLUMN MICRO-CARDS)
       ========================================================================== */
    .section-analizi-mnenia {
        padding: 32px 0 36px !important;
        background-color: #FFFFFF !important;
    }

    .analizi-column .matritsata-section-header {
        margin-bottom: 6px !important;
        padding-bottom: 4px !important;
        border-bottom: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .analizi-column .matritsata-section-title {
        font-size: 13.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    .analizi-column .matritsata-section-title .square-bullet {
        width: 5px !important;
        height: 5px !important;
        background-color: var(--color-accent-red) !important;
    }

    .analizi-subgrid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .analiz-item-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .analiz-item-card .news-card-thumb {
        aspect-ratio: 16 / 10 !important;
        border-radius: 3px !important;
        margin-bottom: 4px !important;
        position: relative !important;
        overflow: hidden !important;
        background-color: #000000 !important;
        width: 100% !important;
    }

    .analiz-item-card .news-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        display: block !important;
    }

    .analiz-thumb-bullet {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        width: 4px !important;
        height: 4px !important;
        background-color: var(--color-accent-red) !important;
        z-index: 2 !important;
    }

    .analiz-card-body {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .analiz-card-cat {
        font-size: 8.5px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--color-accent-red) !important;
        margin-bottom: 2px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .analiz-card-title {
        font-family: var(--font-sans) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        color: var(--color-text-main) !important;
        margin-bottom: 3px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }

    .analiz-card-title a {
        color: var(--color-text-main) !important;
        text-decoration: none !important;
    }

    /* Hide long excerpts in 100px mobile columns */
    .analiz-item-card .analiz-card-excerpt {
        display: none !important;
    }

    /* Compact Byline inside 3-column micro-cards */
    .analiz-item-card .news-byline-bar {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
    }

    .analiz-item-card .byline-author-box {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .analiz-item-card .byline-avatar {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
    }

    .analiz-item-card .byline-author-name {
        font-size: 9.5px !important;
        line-height: 1.1 !important;
        max-width: 75px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .analiz-item-card .byline-dot {
        display: none !important;
    }

    .analiz-item-card .byline-bullet.square-bullet {
        width: 4px !important;
        height: 4px !important;
    }

    .analiz-item-card .byline-reading-time {
        font-size: 8.5px !important;
        line-height: 1 !important;
    }

    .analiz-card-meta {
        font-size: 9.5px !important;
        color: #8E8E93 !important;
        margin-top: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
        line-height: 1.2 !important;
    }

    .analiz-card-meta .btn-card-action {
        font-size: 9px !important;
        gap: 2px !important;
    }

    .analiz-card-meta .btn-card-action svg,
    .analiz-card-meta .post-views-badge svg {
        width: 9.5px !important;
        height: 9.5px !important;
    }
}