/*!
 * mobile.css — responsive layer for the public site.
 *
 * The site was built desktop-first: responsive.css contained one working
 * @media (min-width: 1200px) block, one that is invalid because the unit is
 * missing (`min-width: 921`), and one that is empty. Below 1200px there were
 * effectively no rules at all, so on a phone the layout ran wider than the
 * screen and every headline was clipped mid-word.
 *
 * Loaded after styles.css and responsive.css, and only adds max-width rules,
 * so the desktop layout is untouched.
 */

/* ================================================== 1. OVERFLOW GUARD == */
/* Nothing may make the document wider than the screen. This alone fixes the
   clipped headlines; the rules further down make it look considered. */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Article bodies are editor-pasted HTML and regularly contain wide tables,
   iframes and pre blocks. Let those scroll inside themselves rather than
   stretching the page. */
.news-para table,
.news-para pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.news-para iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

/* Long unbroken strings (URLs pasted into copy) must not push the layout. */
.news-para,
.small-card h4,
.very-small-card h3,
.big-heading,
h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ==================================================== 2. NAVIGATION == */
/* At 1440px the menu already ran past the right edge and wrapped awkwardly.
   Let it wrap cleanly instead of overflowing. */

.large-navbar-ul {
    flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
    .navbar .nav-link {
        font-size: 16px;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* The mega-dropdowns are laid out as a single wide row of divisions; on a
   phone that is far wider than the screen. */
@media (max-width: 991.98px) {
    .dropdown-menu-full-district,
    .dropdown-menu-full-more {
        max-width: 100vw;
        overflow-x: auto;
    }

    .dropdown-menu-full-district .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .nav-division-div {
        min-width: 45%;
    }
}

/* ==================================================== 3. TOP BAR ==== */

@media (max-width: 767.98px) {
    .topbar {
        font-size: 12px;
        line-height: 1.5;
    }

    .topbar .custom-container {
        padding-top: .35rem;
        padding-bottom: .35rem;
    }

    .navbar-header-img {
        width: 150px !important;
        max-width: 55vw;
    }
}

/* ================================================ 4. TYPOGRAPHY ===== */
/* Desktop sizes are set with !important in responsive.css at >=1200px, so
   these only ever apply below that. */

@media (max-width: 991.98px) {
    .big-heading {
        font-size: 24px;
        line-height: 1.4;
    }

    .news-para {
        font-size: 18px;
        line-height: 1.75;
    }

    .small-card h4 {
        font-size: 18px;
        line-height: 1.45;
    }

    .very-small-card h3 {
        font-size: 16px;
        line-height: 1.45;
    }

    .sub-menu-header {
        font-size: 20px;
    }

    .font-size-28 { font-size: 22px !important; }
    .font-size-22 { font-size: 18px !important; }
    .font-size-18 { font-size: 16px !important; }
}

@media (max-width: 575.98px) {
    .big-heading {
        font-size: 21px;
    }

    .news-para {
        font-size: 17px;
    }
}

/* ==================================================== 5. CARDS ====== */

@media (max-width: 991.98px) {
    /* width-lg-31 only has a width above 1200px; make the intent explicit
       rather than relying on the fallback. */
    .width-lg-31 {
        width: 100% !important;
    }

    .small-card,
    .very-small-card {
        margin-bottom: 1rem;
    }

    /* The thumbnail/text split reads better a little wider on a phone. */
    .very-small-card .col-3 {
        width: 30%;
    }

    .very-small-card .col-9 {
        width: 70%;
    }
}

/* Cards are links; give them a visible response to touch and hover. */
.small-card,
.very-small-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.small-card:hover,
.very-small-card:hover {
    transform: translateY(-2px);
}

.small-card:hover h4,
.very-small-card:hover h3 {
    color: #d11329;
}

a:focus-visible {
    outline: 2px solid #d11329;
    outline-offset: 2px;
}

/* ============================================== 6. TAP TARGETS ====== */
/* Anything tappable should be comfortably hittable on a phone. */

@media (max-width: 767.98px) {
    .navbar .nav-link,
    .news-tab .nav-link,
    .footer-social-link a,
    .pagination .page-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar-toggler {
        padding: .5rem .75rem;
    }
}

/* ============================================ 7. READ MORE / MISC === */
/* "আরও পড়ুন" was rendering on a yellow highlight, which reads as a stray
   <mark> rather than a deliberate style. */

.read-more {
    background: transparent !important;
    color: #d11329;
    font-weight: 600;
    white-space: nowrap;
}

.read-more:hover {
    text-decoration: underline;
}

/* Pagination on small screens */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .small-card,
    .very-small-card {
        transition: none;
    }

    .small-card:hover,
    .very-small-card:hover {
        transform: none;
    }
}

/* ============================================== 8. SHARE BUTTONS ==== */
/* Replaces the ShareThis widget: no third-party script, no consent dialog. */

.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 1rem 0;
    margin-top: .5rem;
    border-top: 1px solid #e9ecef;
}

.article-share__label {
    font-weight: 700;
    margin-right: .25rem;
    color: #444;
}

.article-share__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .4rem .85rem;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    background: #fff;
    color: #2b2f36;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.article-share__btn:hover,
.article-share__btn:focus-visible {
    color: #fff;
    text-decoration: none;
}

.article-share__btn.is-facebook:hover, .article-share__btn.is-facebook:focus-visible { background: #1877f2; border-color: #1877f2; }
.article-share__btn.is-whatsapp:hover, .article-share__btn.is-whatsapp:focus-visible { background: #25d366; border-color: #25d366; }
.article-share__btn.is-x:hover,        .article-share__btn.is-x:focus-visible        { background: #000;    border-color: #000; }
.article-share__btn.is-telegram:hover, .article-share__btn.is-telegram:focus-visible { background: #229ed9; border-color: #229ed9; }
.article-share__btn.is-copy:hover,     .article-share__btn.is-copy:focus-visible     { background: #6c757d; border-color: #6c757d; }
.article-share__btn.is-print:hover,    .article-share__btn.is-print:focus-visible    { background: #d11329; border-color: #d11329; }

.article-share__btn.is-copied {
    background: #198754;
    border-color: #198754;
    color: #fff;
}

/* On a phone the labels crowd the row; icons carry the meaning. */
@media (max-width: 575.98px) {
    .article-share__btn span { display: none; }
    .article-share__btn { padding: .5rem .8rem; }
    .article-share__btn i { font-size: 16px; }
}

/* ========================================= 9. CONTINUOUS SCROLL ===== */

.read-next-divider {
    margin: 2.5rem 0 2rem;
    border: 0;
    border-top: 4px double #e3e6ea;
}

/* Each appended article gets a little breathing room from the previous one. */
.article-item + .article-item,
.read-next-divider + .article-item {
    padding-top: .5rem;
}

.read-next-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.25rem 0;
    color: #6c757d;
    font-size: .95rem;
}

.read-next-status.is-done .read-next-spinner { display: none; }

.read-next-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #dfe3e8;
    border-top-color: #d11329;
    border-radius: 50%;
    animation: read-next-spin .7s linear infinite;
}

@keyframes read-next-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .read-next-spinner { animation: none; border-top-color: #dfe3e8; }
}