/* ============================================================
 * Baztab newsroom v2.3.6 — final quality layer
 * Accessibility, editorial rhythm, robust focus states and small UX fixes.
 * ============================================================ */

.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    visibility: visible !important;
}

.screen-reader-text:focus {
    position: fixed !important;
    z-index: 100000;
    top: 12px;
    right: 12px;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    clip: auto !important;
    color: var(--bz-brand-900);
    background: var(--bz-white);
    border: 2px solid var(--bz-focus);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(var(--bz-black-rgb), .16);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--bz-focus) !important;
    outline-offset: 3px;
}

:where(h1, h2, h3, h4, [id], #comments, #respond) {
    scroll-margin-top: 96px;
}

:where(.af-article-desc, .af-archive-desc, .af-related-main, .baztab-comment-content, .af-footer-ul) a,
:where(h1, h2, h3, h4, h5, p) {
    overflow-wrap: break-word;
}

nav.af-header :where(.show-btn, .hide-btn, .show-btn-mobile, .hide-btn-mobile, .navbar-toggler),
.af-story-tools :where(a, button),
footer :where(.af-child1, .af-child2, .af-child3, .af-child4) > a {
    min-width: 36px;
    min-height: 36px;
}

.af-footer-tip-item {
    margin-bottom: 20px;
}

.af-footer-submit-tip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 23px;
    padding: 10px 20px;
    color: var(--bz-white) !important;
    background-image: linear-gradient(to left, var(--bz-social-telegram), var(--bz-social-whatsapp));
    border-radius: 25px;
    text-shadow: 0 0 13px var(--bz-white);
    text-decoration: none;
}

.af-footer-submit-tip:hover,
.af-footer-submit-tip:focus-visible {
    color: var(--bz-white) !important;
    filter: brightness(.96);
}

/* Avoid layout overflow from long URLs, labels or imported headlines. */
.baztab-rss-item__link,
.baztab-rss-item__link a,
.af-single-content,
.af-page-content {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    :where(h1, h2, h3, h4, [id], #comments, #respond) {
        scroll-margin-top: 78px;
    }

    nav.af-header :where(.show-btn, .hide-btn, .show-btn-mobile, .hide-btn-mobile, .navbar-toggler),
    .af-story-tools :where(a, button),
    footer :where(.af-child1, .af-child2, .af-child3, .af-child4) > a {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .af-skip-link,
    nav.af-header,
    footer,
    .af-story-tools,
    .af-top-header-ads,
    [class*="baztab-ad"],
    [class*="ads_"] {
        display: none !important;
    }
}


/* ============================================================
 * 2.3.1 — Prevent viewport-width full-bleed sections from
 * creating a page-level horizontal scrollbar on desktop.
 * Internal tables/tabs keep their own overflow behavior.
 * ============================================================ */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

body.home .af-video-index {
    box-sizing: border-box;
}


/* ============================================================
 * 2.3.3 — Search and comment focus normalization
 * Remove the browser/global blue outline from text-entry fields
 * while retaining one clear red focus indicator.
 * ============================================================ */
nav.af-header .searchwrapper :is(.search input, .search-form-input):focus,
nav.af-header .searchwrapper :is(.search input, .search-form-input):focus-visible,
.af-search-page input[type="search"]:focus,
.af-search-page input[type="search"]:focus-visible,
.af-single-comment #commentform input:not([type="submit"]):not([type="checkbox"]):focus,
.af-single-comment #commentform input:not([type="submit"]):not([type="checkbox"]):focus-visible,
.af-single-comment #commentform textarea:focus,
.af-single-comment #commentform textarea:focus-visible,
.harika-comments #commentform input:not([type="submit"]):focus,
.harika-comments #commentform input:not([type="submit"]):focus-visible,
.harika-comments #commentform textarea:focus,
.harika-comments #commentform textarea:focus-visible {
    outline: none !important;
    border-color: rgba(var(--bz-accent-rgb), .78) !important;
    box-shadow: 0 0 0 3px rgba(var(--bz-accent-rgb), .10) !important;
}


/* ============================================================
 * 2.3.6 — Mobile media composition restoration and optimization
 * Restores the established mobile hierarchy for Baztab TV and
 * Photo Reports: one full-width lead card followed by a clean
 * two-column supporting grid. Desktop composition is untouched.
 * ============================================================ */
@media (max-width: 899.98px) {
    body.home .af-mobile-media-section {
        margin: 16px 0 !important;
        padding: 20px 0 22px !important;
        background-attachment: scroll !important;
    }

    body.home .af-mobile-media-section > .container-af {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;
        padding: 0 !important;
    }

    body.home .af-mobile-media-section .af-head-title {
        margin: 0 0 14px !important;
        font-size: 1.18rem !important;
        line-height: 1.55 !important;
    }

    body.home .af-mobile-media-section .af-media-layout-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.home .af-mobile-media-section :is(.af-media-featured-col, .af-media-supporting-col) {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }

    body.home .af-mobile-media-section .af-video-player,
    body.home .af-mobile-media-section .af-video-main {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    body.home .af-mobile-media-section .af-video-main > a {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    body.home .af-mobile-media-section .af-video-main .af-media-frame--featured {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }

    body.home .af-mobile-media-section .af-video-main .af-media-frame--featured img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body.home .af-mobile-media-section .af-video-main h3 {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        margin: 9px 0 0 !important;
        padding: 0 !important;
        color: var(--bz-white) !important;
        background: transparent !important;
        border-radius: 0 !important;
        font-size: 1.08rem !important;
        font-weight: 800 !important;
        line-height: 1.72 !important;
        text-shadow: none !important;
        pointer-events: auto !important;
    }

    body.home .af-mobile-media-section .af-media-supporting-col {
        margin-top: 16px !important;
    }

    body.home .af-mobile-media-section .af-video-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 10px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.home .af-mobile-media-section .af-video-item,
    body.home .af-mobile-media-section .af-video-item:first-child,
    body.home .af-mobile-media-section .af-video-item:nth-child(3),
    body.home .af-mobile-media-section .af-video-item:nth-child(4),
    body.home .af-mobile-media-section .af-video-item:nth-child(6) {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.home .af-mobile-media-section .af-video-img,
    body.home .af-mobile-media-section .af-video-img > a,
    body.home .af-mobile-media-section .af-video-img .af-media-frame--compact {
        display: block !important;
        width: 100% !important;
    }

    body.home .af-mobile-media-section .af-video-img .af-media-frame--compact {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }

    body.home .af-mobile-media-section .af-video-img .af-media-frame--compact img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    body.home .af-mobile-media-section .af-video-desc,
    body.home .af-mobile-media-section .af-video-item h3 {
        width: 100% !important;
        margin: 7px 0 0 !important;
        padding: 0 !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
        line-height: 1.66 !important;
    }

    body.home .af-mobile-media-section .af-video-desc a,
    body.home .af-mobile-media-section .af-video-item h3 a {
        display: -webkit-box !important;
        overflow: hidden !important;
        color: var(--bz-white) !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }

    body.home .af-mobile-media-section .af-media-action--featured {
        width: 46px !important;
        height: 46px !important;
    }

    body.home .af-mobile-media-section .af-media-action--featured .af-media-action__icon {
        width: 24px !important;
        height: 24px !important;
    }
}

@media (max-width: 575.98px) {
    body.home .af-mobile-media-section > .container-af {
        width: calc(100% - 20px) !important;
    }

    body.home .af-mobile-media-section .af-video-main h3 {
        font-size: 1.02rem !important;
        line-height: 1.68 !important;
    }

    body.home .af-mobile-media-section .af-video-list {
        gap: 15px 9px !important;
    }

    body.home .af-mobile-media-section .af-video-desc,
    body.home .af-mobile-media-section .af-video-item h3 {
        font-size: .84rem !important;
        line-height: 1.62 !important;
    }
}