/* ==========================================================================
   MATRITSATA - MOBILE BASE & GLOBAL UTILITIES
   ========================================================================== */

/* 1. Global Touch Ergonomics */
* {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
input,
select,
textarea {
    touch-action: manipulation;
}

/* 2. Desktop Visibility Control (>= 1024px) */
@media (min-width: 1024px) {

    .hero-mobile-author,
    .hero-reaction-bar,
    .hero-picked-backdrop,
    .mobile-category-bar,
    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block !important;
    }

    .hero-meta-right.desktop-only {
        display: flex !important;
        align-items: center !important;
    }

    .hero-visual-card.desktop-only,
    .hero-live-ticker.desktop-only {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-lead-meta.desktop-only {
        display: flex !important;
        flex-direction: row !important;
    }
}

/* ==========================================================================
   3. MOBILE BASE LAYOUT & FROSTED GLASS HEADER (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    .desktop-only {
        display: none !important;
    }

    :root {
        --container-padding: 14px;
    }

    body {
        position: relative;
    }

    /* 
     * Top 48px Black Underlay:
     * Sits behind the header at scroll = 0 so the semi-transparent glass shows black.
     * When you scroll down, this strip scrolls up and away with the page.
     */
    body::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        background-color: #070709;
        z-index: 0;
        pointer-events: none;
    }

    /* Semi-Transparent Frosted Glass Header */
    .site-header {
        background-color: rgba(127, 127, 127, 0.5) !important;
        backdrop-filter: blur(8px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-top-tier {
        height: 48px !important;
        background-color: transparent !important;
        border-bottom: none !important;
        color: #FFFFFF !important;
    }

    /* Keep the logo in its original brand RED (unfiltered) */
    .header-top-tier .site-logo-img,
    .header-top-tier .site-logo-text,
    .header-top-tier .site-logo-icon {
        filter: none !important;
    }

    .site-logo-img {
        width: auto !important;
        display: block !important;
        object-fit: contain !important;
    }

    /* Eye logo icon */
    .site-logo-icon {
        height: 28px !important;
        max-width: 44px !important;
    }

    /* Matritsata text logo: scaled down next to eye logo */
    .site-logo-text {
        height: 16px !important;
        max-width: 140px !important;
    }

    /* Drawer hamburger toggle button */
    .btn-header-drawer-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 4px;
        color: #FFFFFF !important;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .btn-header-drawer-toggle svg,
    .btn-header-action svg {
        width: 19px !important;
        height: 19px !important;
        stroke: currentColor;
    }

    .header-actions {
        gap: 6px !important;
    }

    /* Header action buttons (Search, etc.) */
    .header-actions .btn-header-action {
        padding: 4px !important;
        color: #FFFFFF !important;
    }

    .header-actions .btn-header-action:hover,
    .btn-header-drawer-toggle:hover {
        color: var(--color-accent-red, #E50914) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
    }

    .header-actions .btn-header-action .action-label {
        display: none !important;
    }

    /* Slide-out Navigation Drawer */
    .drawer-panel {
        width: 85% !important;
        max-width: 320px !important;
    }
}

/* ==========================================================================
   4. UNIFIED MOBILE META PROPORTIONS (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    .news-card-meta {
        gap: 6px !important;
        font-size: 10px !important;
    }

    .news-card-meta span::after,
    .analiz-card-meta span::after {
        content: none !important;
        display: none !important;
    }

    /* All text & counters in meta row: 10px, bold */
    .news-card-meta .news-card-date,
    .news-card-meta .btn-card-action,
    .news-card-meta .btn-card-action span,
    .news-card-meta .reaction-count {
        font-size: 10px !important;
        font-weight: 600 !important;
    }

    /* View counter: 10px, regular */
    .news-card-meta .post-views-badge,
    .news-card-meta .post-views-badge span {
        font-size: 10px !important;
        font-weight: 400 !important;
    }

    /* All icons scaled identically */
    .news-card-meta svg,
    .news-card-meta .post-views-badge svg,
    .news-card-meta .btn-card-action svg {
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        min-height: 11px !important;
        max-width: 11px !important;
        max-height: 11px !important;
        stroke: currentColor !important;
        fill: none !important;
        stroke-width: 1.8 !important;
    }
}