/* ==========================================================================
   Phone homepage: one strong lead story, then headlines.
   Loaded last so it settles the theme's earlier mobile rules.
   ========================================================================== */

/* Headlines under the lead story: phones only. */
.editorial-home__lead-list { display: none; }

/* The lead's standfirst: under the headline on every screen. */
.editorial-story__dek {
    margin: 10px auto 0;
    max-width: 640px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.5;
}
.editorial-story__live {
    margin-bottom: 8px;
    font-size: 12px;
}

@media (max-width: 767px) {

    /* ---- Breaking / Latest bar: one slim row instead of two boxes ---- */
    .maan-breaking-news-section {
        padding: 8px 0 !important;
        border-bottom: 1px solid #e5e7eb;
    }
    .maan-breaking-news-section > .container > .row {
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
    }
    .maan-breaking-news-section > .container > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0;
    }
    .maan-breaking-news-section > .container > .row > [class*="col-"]:first-child { flex: 0 0 auto; }
    .maan-breaking-news-section > .container > .row > [class*="col-"]:last-child { flex: 1 1 auto; min-width: 0; }
    .maan-breaking-news-section .maan-slide-title {
        min-height: 0 !important;
        height: auto !important;
        padding: 4px 8px !important;
        border-radius: 3px;
        box-shadow: none !important;
    }
    .maan-breaking-news-section .maan-slide-title::before,
    .maan-breaking-news-section .maan-slide-title::after,
    .maan-breaking-news-section .maan-slide-title .icon { display: none !important; }
    .maan-breaking-news-section .maan-slide-title h6 {
        margin: 0;
        color: #fff;
        font-size: 11px !important;
        letter-spacing: .06em;
        line-height: 1.4;
        white-space: nowrap;
    }
    .maan-breaking-news-section .maan-slide-text {
        margin: 0 !important;
        padding: 0 0 0 10px !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    .maan-breaking-news-section .maan-slide-text p {
        margin: 0;
        font-size: 14px;
        line-height: 1.35 !important;
    }
    .maan-breaking-news-section .maan-slide-text p a { font-weight: 700; -webkit-line-clamp: 2; }
    .maan-breaking-news-section .news-alert__time { margin-left: 0; font-size: 12px; }
    .maan-breaking-news-section .slick-arrow { display: none !important; }

    /* ---- Lead story: full width photo, label, headline, standfirst ---- */
    .editorial-home { padding-top: 0 !important; }
    .editorial-home__lead > .editorial-home__carousel-panel {
        margin-right: -16px;
        margin-left: -16px;
    }
    .editorial-home__lead > .editorial-home__carousel-panel .editorial-home__slide + .editorial-home__slide { display: none; }
    .editorial-home__carousel-controls { display: none !important; }

    .editorial-story--lead { border-radius: 0 !important; }
    .editorial-story--lead::after {
        inset: 25% 0 0 !important;
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .92) 100%) !important;
    }
    .editorial-story--lead .editorial-story__heading {
        bottom: 46px !important;
        padding: 0 16px !important;
    }
    .editorial-story--lead .editorial-story__category,
    .editorial-story--lead .editorial-story__live {
        display: inline-flex;
        padding: 4px 10px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        letter-spacing: .02em !important;
        text-transform: none;
    }
    .editorial-story--lead .editorial-story__heading h1 {
        margin: 10px 0 0 !important;
        font-size: clamp(20px, 5.6vw, 24px) !important;
        font-weight: 800;
        line-height: 1.22 !important;
        letter-spacing: -.01em !important;
    }
    .editorial-story--lead .editorial-story__dek {
        display: -webkit-box;
        margin: 8px 0 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: rgba(255, 255, 255, .88);
        font-size: 15px;
        line-height: 1.4;
    }
    .editorial-story--lead .editorial-story__summary {
        right: 16px !important;
        bottom: 14px !important;
        left: 16px !important;
        font-size: 12px !important;
    }
    /* A small play button in the corner, not over a face. */
    .editorial-story--lead .story-video__icon {
        top: 14px !important;
        right: 14px;
        left: auto !important;
        width: 46px !important;
        height: 46px !important;
        transform: none !important;
    }
    .editorial-story--lead .story-video__icon::after { border-width: 9px 0 9px 15px !important; }

    .editorial-home__lead-list {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .editorial-home__lead-list li {
        padding: 14px 0;
        border-bottom: 1px solid #e5e7eb;
        font-size: 18px;
        line-height: 1.3;
    }
    .editorial-home__lead-list a { color: #111; font-weight: 500; }
    .editorial-home__lead-list a:hover { text-decoration: underline; }

    /* Order on phones: lead, its headlines, "More top stories", then the rest. */
    .editorial-home__lead { display: contents; }
    .editorial-home__lead > .editorial-home__carousel-panel { order: -3; }
    .editorial-home__lead-list { order: -2; }
    .editorial-home__below { order: 5; }

    /* "More stories" (stories 10-15): a plain stack instead of a slider. */
    .editorial-home__below .editorial-home__slide + .editorial-home__slide {
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid #e5e7eb;
    }

    /* ---- Top Categories: a row of section links to swipe through ---- */
    .maan-top-categories-section {
        padding: 18px 0 !important;
        background: #fff !important;
    }
    .maan-top-categories-section .maan-title-border-none { margin-bottom: 10px !important; }
    .maan-top-categories-section .maan-title-text h2 { font-size: 18px !important; }
    .maan-top-categories-section .row {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .maan-top-categories-section .row::-webkit-scrollbar { display: none; }
    .maan-top-categories-section .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding: 0;
    }
    .maan-top-categories-section .maan-card-img {
        width: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    .maan-top-categories-section .topcategories-thumb { display: none !important; }
    .maan-top-categories-section .maan-card-body {
        position: static !important;
        padding: 0 !important;
        background: none !important;
    }
    .maan-top-categories-section .maan-card-body a {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        width: auto !important;
        padding: 8px 14px !important;
        border: 1px solid #d1d5db;
        border-radius: 999px !important;
        background: #fff !important;
        color: #111 !important;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: none !important;
    }
    .maan-top-categories-section .maan-card-body a span + span {
        color: #6b7280;
        font-weight: 400;
        font-size: 12px;
    }
}

/* ---- Wordmark: the name stays on one line beside its badge ---- */
.maan-brand { flex-wrap: nowrap; }
.maan-brand-bottom { white-space: nowrap; }
@media (max-width: 767px) {
    .maan-brand-mobile .maan-brand-bottom { font-size: 19px; letter-spacing: 0; }
}
/* The theme capped the logo link at 180px as a plain block, which pushed
   the name under the badge. */
.maan-logo { max-width: none !important; }
.maan-mid-bar .maan-logo a.maan-brand,
a.maan-brand.maan-brand-mobile,
a.maan-brand.maan-brand-footer {
    display: inline-flex !important;
    align-items: center;
    max-width: none !important;
}