/* ==========================================================================
   MATRITSATA - MOBILE HOMEPAGE HERO & LIVE NEWS TICKER (< 1024px)
   ========================================================================== */

@media (max-width: 1023px) {

    /* ==========================================================================
       1. HERO SECTION & LEAD STORY
       ========================================================================== */
    .matritsata-hero-section {
        position: relative;
        padding: 16px 0 28px !important;
        background-color: #070709 !important;
        border-bottom: 1px solid #1E1E24;
        overflow: hidden;
    }

    .hero-container-inner {
        padding-left: var(--container-padding, 14px) !important;
        padding-right: var(--container-padding, 14px) !important;
    }

    .hero-grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .hero-lead-story {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Main image with dark side borders */
    .hero-mobile-media-box {
        position: relative;
        margin-left: calc(-1 * var(--container-padding, 14px)) !important;
        margin-right: calc(-1 * var(--container-padding, 14px)) !important;
        width: calc(100% + (2 * var(--container-padding, 14px))) !important;
        background-color: #000000;
        overflow: hidden;
        border-left: 12px solid #070709 !important;
        border-right: 12px solid #070709 !important;
        box-sizing: border-box !important;
    }

    .hero-mobile-img-link {
        display: block;
        width: 100%;
        height: auto;
    }

    .hero-mobile-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        display: block;
    }

    /* Author overlay over the image */
    .hero-mobile-overlay-author {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 14px 12px;
        background: linear-gradient(to top, rgba(7, 7, 9, 0.95) 0%, rgba(7, 7, 9, 0.6) 65%, transparent 100%);
        display: flex;
        flex-direction: column;
        gap: 8px;
        z-index: 2;
    }

    .hero-mobile-line {
        width: 100%;
        height: 1px;
        background-color: #FFFFFF !important;
    }

    .hero-mobile-author-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .hero-mobile-author-row .hero-author-box {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .hero-mobile-author-row .hero-author-avatar {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        border: 2px solid #FFFFFF !important;
        object-fit: cover !important;
        background: #FFFFFF;
        flex-shrink: 0;
    }

    .hero-mobile-author-row .hero-author-details {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hero-mobile-author-row .hero-author-name {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Views & Like Buttons on Right */
    .hero-mobile-author-row .hero-meta-right {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .hero-mobile-author-row .post-views-badge,
    .hero-mobile-author-row .btn-banner-reaction {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #FFFFFF !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer;
    }

    .hero-mobile-author-row .post-views-badge svg,
    .hero-mobile-author-row .btn-banner-reaction svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
        fill: none !important;
    }

    .hero-mobile-author-row .btn-banner-reaction.js-like-btn {
        color: var(--color-accent-red, #E50914) !important;
    }

    .hero-mobile-author-row .btn-banner-reaction.js-like-btn svg {
        fill: var(--color-accent-red, #E50914) !important;
        stroke: var(--color-accent-red, #E50914) !important;
    }

    /* Heading Title in Sans-Serif font */
    .hero-lead-title {
        font-family: var(--font-sans) !important;
        font-size: clamp(20px, 5.6vw, 24px) !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.015em !important;
        color: #FFFFFF !important;
        margin-top: 16px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    .hero-lead-title a {
        color: #FFFFFF !important;
        text-decoration: none;
    }

    /* Subheading in Pure White */
    .hero-lead-excerpt {
        font-family: var(--font-sans) !important;
        font-size: 13.5px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        color: #FFFFFF !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* ==========================================================================
       2. "ПОСЛЕДНИ НОВИНИ" TICKER
       ========================================================================== */
    .hero-live-ticker {
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        border: none !important;
        padding: 12px 0 0 !important;
        margin-top: 10px !important;
    }

    .hero-live-ticker .ticker-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
    }

    .ticker-red-block {
        display: block !important;
        flex: 1 1 auto !important;
        height: clamp(28px, 7.2vw, 32px) !important;
        background-color: var(--color-accent-red, #E50914) !important;
        margin-left: calc(-1 * var(--container-padding, 14px)) !important;
        min-width: 40px !important;
        flex-shrink: 1 !important;
    }

    .ticker-heading-title {
        font-family: var(--font-sans) !important;
        font-size: clamp(17px, 4.8vw, 21px) !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        color: #FFFFFF !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        text-align: right !important;
    }

    .ticker-header-line {
        display: block !important;
        width: 100% !important;
        height: 1.5px !important;
        background-color: #FFFFFF !important;
        margin-bottom: 18px !important;
    }

    .hero-live-ticker .ticker-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile Two-Column Item Split */
    .hero-live-ticker .ticker-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding-bottom: 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    }

    .hero-live-ticker .ticker-item:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .hero-live-ticker .ticker-item:nth-child(n+4) {
        display: none !important;
    }

    .hero-live-ticker .ticker-item:nth-child(3) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Main Left Column */
    .hero-live-ticker .ticker-item-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Compact Meta Row without excess vertical whitespace */
    .hero-live-ticker .ticker-item-meta {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        line-height: 1 !important;
    }

    .hero-live-ticker .ticker-meta-left {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        line-height: 1 !important;
    }

    .hero-live-ticker .ticker-time {
        font-family: var(--font-tech), var(--font-sans) !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        color: var(--color-accent-red, #E50914) !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
    }

    .hero-live-ticker .btn-card-action {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #C0C0C6 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .hero-live-ticker .btn-card-action svg {
        width: 12px !important;
        height: 12px !important;
        stroke: currentColor !important;
        fill: none !important;
    }

    .hero-live-ticker .btn-card-action.js-like-btn.active {
        color: var(--color-accent-red, #E50914) !important;
    }

    .hero-live-ticker .btn-card-action.js-like-btn.active svg {
        fill: var(--color-accent-red, #E50914) !important;
        stroke: var(--color-accent-red, #E50914) !important;
    }

    .hero-live-ticker .btn-card-action.js-dislike-btn.active {
        color: #FFFFFF !important;
    }

    .hero-live-ticker .btn-card-action.js-dislike-btn.active svg {
        fill: #FFFFFF !important;
        stroke: #FFFFFF !important;
    }

    /* Mobile News Title wraps prior to the bookmark ribbon */
    .hero-live-ticker .ticker-item-title {
        font-family: var(--font-sans) !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        color: #FFFFFF !important;
        text-decoration: none !important;
        margin-top: 2px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Dedicated Right Bookmark Column (Mobile) */
    .hero-live-ticker .ticker-item-bookmark-col {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        padding-top: 1px !important;
    }

    /* Large Ribbon Save Button on Mobile */
    .hero-live-ticker .btn-bookmark-mini {
        background: transparent !important;
        border: none !important;
        color: #FFFFFF !important;
        padding: 0 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.15s ease !important;
    }

    .hero-live-ticker .btn-bookmark-mini:active {
        transform: scale(0.92);
    }

    .hero-live-ticker .btn-bookmark-mini svg {
        width: 28px !important;
        height: 46px !important;
        min-width: 28px !important;
        min-height: 46px !important;
        stroke: #FFFFFF !important;
        fill: none !important;
        stroke-width: 2.2 !important;
    }

    .hero-live-ticker .btn-bookmark-mini.active svg path {
        fill: var(--color-accent-red, #E50914) !important;
        stroke: var(--color-accent-red, #E50914) !important;
    }

    .hero-live-ticker .ticker-footer-link {
        margin-top: 14px !important;
        padding-top: 10px !important;
        border-top: 1px solid #FFFFFF !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: var(--color-accent-red, #E50914) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        text-decoration: none !important;
    }

    .hero-live-ticker .ticker-footer-link svg {
        stroke: var(--color-accent-red, #E50914) !important;
    }
}