/* ==========================================================================
   PRESS TV — responsive-news.css
   Responsive + layout polish layer for PHONES and TABLETS only.

   *** Everything in this file lives inside  @media (max-width: 991.98px)  ***
   *** so the DESKTOP version (992px and wider) is NOT touched at all.   ***
   To move the cut-off, search & replace 991.98px (and keep it equal to the
   value used in mobile-menu.css, which switches at 992px).

   WHERE:   wwwroot/new/styles/components/responsive-news.css
   LOAD:    LAST in <head> — AFTER  @RenderSection("script_top")  so that it
            also wins over the inline <style> blocks inside some pages.
   NOTE:    It is an override layer. Layout properties use !important on
            purpose (the old CSS uses fixed pixel widths like 372/574/760px).
            Needs a modern browser (CSS :has() and aspect-ratio).

   BREAKPOINTS
     base      < 576   phones
     ≥ 576             large phones
     ≥ 768             tablets            (up to 991.98px)
     ≥ 992             DESKTOP — not styled by this file

   INDEX
     0  Tokens
     1  Base / reset
     2  Typography (see 13)
     3  Page width + gutters
     4  Header strips (trending, breaking news, section tabs)
     5  Home — top headlines
     6  Home — blocks (live strip, newsroom, features, shows, stories …)
     7  Section / Tag / Newsroom pages
     8  Card grids, rows, load-more
     9  Article page + video page
    10  Search, Live, Schedule, Multimedia, About, Documentaries
    11  Footer
    12  Polish (hover, focus, motion)
    13  TYPE SYSTEM + spacing rhythm  (all font sizes live here)
   ========================================================================== */

/* ==========================================================================
   0. TOKENS
   ========================================================================== */

@media (max-width: 991.98px) {
    :root {
        --r-max: 1200px;
        --r-gutter: clamp(12px, 3.4vw, 28px);
        --r-gap: clamp(14px, 2.2vw, 26px);
        --r-gap-lg: clamp(22px, 4vw, 44px);
        --r-accent: var(--ptv-accent, #e4002b);
        --r-line: rgba(128, 128, 128, .28);
        --r-radius: 8px;
        --r-ease: cubic-bezier(.22, .8, .26, 1);
    }
}

/* ==========================================================================
   1. BASE / RESET
   ========================================================================== */

@media (max-width: 991.98px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: clip; /* no sideways scroll, keeps sticky working */
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    main {
        display: block;
        min-width: 0;
    }

    img, svg, video, canvas, iframe, embed, object {
        max-width: 100%;
    }

    img, video {
        height: auto;
    }

    iframe {
        border: 0;
    }

    h1, h2, h3, h4, h5, h6, p, li, a, figcaption, time {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    table {
        max-width: 100%;
    }
}

/* Old bootstrap-style grid: stack on phones (swiper slides are excluded) */

@media (max-width: 767.98px) {
    [class*="col-md-"]:not(.swiper-slide):not(.items-list-h):not(.items-list-b):not(.items-h-time):not(.items-h-desc):not(.items-b-time):not(.items-b-data),
    [class*="col-sm-"]:not(.swiper-slide),
    [class*="col-lg-"]:not(.swiper-slide) {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   2. TYPOGRAPHY
   -> moved to section 13 (TYPE SYSTEM) at the end of this file, so that
      every font size on the site comes from ONE scale.
   ========================================================================== */

/* clamp long headlines in grids so cards keep an even rhythm */

@media (max-width: 991.98px) {
    .section-home-card .title-grade-2,
    .section-home-card .title-grade-2-featured,
    .newsroom-row-container .title-grade-2,
    .container-372 .title-372,
    .section-home-beyond-headlines-mini-column .title-grade-2,
    .section-home-features-kid-column .title-grade-2,
    .column-259 .title-grade-3,
    .iran-first-column-372 .title-372,
    .documentaries-home-latest-title,
    .in-pictures-title,
    .video-related-card-title,
    .video-bottom-related-card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
}

/* ==========================================================================
   3. PAGE WIDTH + GUTTERS
   One rule centres every top-level <section>; the old containers inside are
   neutralised so gutters are never doubled.
   ========================================================================== */

@media (max-width: 991.98px) {
    main section:not(section section) {
        width: 100%;
        max-width: calc(var(--r-max) + 2 * var(--r-gutter));
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

    .container-1, .container-2, .container-4, .index-container,
    .container-flex-1148, .iran-section-home, .investigations,
    .featured-container, .family-primary-container,
    .in-pictures-family-container, .documentaries-home-bar-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        border-radius: var(--r-radius);
    }

    .container-column {
        min-width: 0;
    }

    .container-1 > .container-column, .container-2 > .container-column {
        width: 100%;
    }

    .container-flex {
        flex-wrap: wrap;
        min-width: 0;
    }
}

/* the old fixed-width columns become fluid */

@media (max-width: 991.98px) {
    .column-372, .column-372-no-gap, .column-574, .column-558, .column-305,
    .column-259, .column-760, .container-372, .iran-first-column-372,
    .iran-first-column-372-container, .iran-first-column1, .mini-column-384,
    .shows-column1, .shows-kid-column, .shows-kid-column-2,
    .container-flex-372, .section-home-760, .section-home-newsroom-760,
    .section-home-760-gapped, .section-home-760-gapped-kid,
    .section-home-760-gapped-grand-kid, .inv-family-container-768,
    .family-mini-container-column, .family-mini-container-column-no-gap,
    .interviewer-760, .interviewer-372, .interviewer-384 {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 260px;
    }
}

/* every fixed-size photo class → fluid 16:9 */

@media (max-width: 991.98px) {
    .img-760, .img-574, .img-372, .img-384, .img-305, .img-259,
    .newsroom, .newsroom-img, .infographic-poster {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .img-760, .img-574, .img-372, .img-384, .img-305, .img-259,
    .newsroom, .newsroom-img {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

/* ==========================================================================
   4. HEADER STRIPS
   ========================================================================== */

/* trending – one scrollable line */

@media (max-width: 991.98px) {
    .trending {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px 18px;
        overflow-x: auto;
        white-space: nowrap;
        padding: 8px var(--r-gutter);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .trending::-webkit-scrollbar {
            display: none;
        }

        .trending h6 {
            flex: 0 0 auto;
            margin: 0;
        }
}

/* breaking news */

@media (max-width: 991.98px) {
    .breaking-news-container {
        align-items: center;
        gap: 12px;
        padding: 8px var(--r-gutter);
        overflow: hidden;
    }

    .breaking-news-tableau-container {
        flex: 0 0 auto;
    }

    #typewriter {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* desktop navbar between 992 and 1199 – keep it on one line */

/* section tabs (Newsroom › World › Middle East …) */

@media (max-width: 991.98px) {
    .section-home-tableau-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 22px;
        padding-block: var(--r-gap);
    }

    .section-home-tableau {
        margin: 0;
        flex: 0 0 auto;
    }

    .section-home-tableau-item-container {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px 14px;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .section-home-tableau-item-container::-webkit-scrollbar {
            display: none;
        }

    .section-home-tableau-item {
        flex: 0 0 auto;
        margin: 0;
        font-size: clamp(.85rem, .82rem + .2vw, .98rem);
    }
}

@media (max-width: 575.98px) {
    .section-home-tableau-item-container {
        flex-basis: 100%;
    }
}

@media (max-width: 991.98px) {
    .section-home-sub-tableau-container {
        margin-block: var(--r-gap) calc(var(--r-gap) * .6);
    }

    .section-home-sub-tableau, .section-home-tableau, .tableau {
        margin-block: 0;
    }
}

/* ==========================================================================
   5. HOME — TOP HEADLINES  (header › .on-open-section)
   ========================================================================== */

@media (max-width: 991.98px) {
    .on-open-section {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) var(--r-gap) !important;
        width: 100%;
        max-width: var(--r-max);
        margin: 0 auto;
        padding: var(--r-gap) var(--r-gutter) var(--r-gap-lg);
    }
}

/* phones: lead story first, then the stack, then Editor's Picks */

@media (max-width: 991.98px) {
    .on-open-section > .main-headlines-column1 {
        order: 1 !important;
    }

    .on-open-section > .column-372 {
        order: 2 !important;
    }

    .on-open-section > .column-editors-picks {
        order: 3 !important;
    }

    .on-open-section > .column-372 {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
        align-content: start;
    }

        .on-open-section > .column-372 > div {
            min-width: 0;
        }

        .on-open-section > .column-372 .title-grade-2 {
            margin-top: 10px;
        }

    .tiny-title-container {
        display: flex !important;
        align-items: flex-start;
        gap: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--r-line);
    }

    .tiny-pic-180 {
        flex: 0 0 104px;
        width: 104px !important;
        height: 72px !important;
        object-fit: cover;
        border-radius: 6px;
    }

    .tiny-title-container .title-grade-3 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }

    .main-headlines-column1 {
        min-width: 0;
    }

        .main-headlines-column1 .title-grade-1 {
            margin: 14px 0 10px;
        }

    .related-live-column-container {
        display: grid;
        gap: 4px;
        margin-bottom: 6px;
    }

    .related-live-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .related-icon {
        flex: 0 0 10px;
        width: 10px;
        height: 10px;
        margin-top: .55em;
    }

    .related-live-item h3 {
        font-size: clamp(.98rem, .92rem + .3vw, 1.15rem);
        margin: 0;
        padding: 0;
    }

    .more-headlines-tableau {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .more-headlines-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px var(--r-gap);
        padding-block: 12px;
        border-top: 1px solid var(--r-line);
    }

        .more-headlines-row .column-372-no-gap {
            flex: none;
        }

    .container-flex-timeago {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 4px;
        margin-bottom: 4px;
    }

    .column-editors-picks {
        min-width: 0;
        padding-top: var(--r-gap);
        border-top: 1px solid var(--r-line);
    }

        .column-editors-picks .title-grade-2 {
            padding-inline: 0 !important;
        }

    .column-beyond-headlines-h-p {
        display: block;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .more-headlines-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .on-open-section > .column-372 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .on-open-section > .column-372 > .tiny-title-container {
            grid-column: 1 / -1;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .on-open-section {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .on-open-section > .main-headlines-column1 {
            grid-column: 1 / -1;
        }

        .on-open-section > .column-372 {
            grid-template-columns: minmax(0, 1fr);
            order: 2 !important;
        }

        .on-open-section > .column-editors-picks {
            order: 3 !important;
            border-top: 0;
            padding-top: 0;
        }
}

/* ---- Home: the lead story is the very first thing under the menu bar ---- */

@media (max-width: 991.98px) {
    header:has(.on-open-section) {
        display: flex;
        flex-direction: column;
    }

        header:has(.on-open-section) > .trending {
            order: 5;
        }

        header:has(.on-open-section) > .breaking-news-container {
            order: 6;
        }

        header:has(.on-open-section) > .on-open-section,
        header:has(.on-open-section) > .mode-section {
            order: 1;
        }

    .on-open-section > .main-headlines-column1 > a:first-child img {
        aspect-ratio: 16 / 10;
    }

    .on-open-section {
        padding-top: 12px;
    }
}

/* ==========================================================================
   6. HOME — BLOCKS
   ========================================================================== */

/* live mini strip (ad + small player) */

@media (max-width: 991.98px) {
    .container-1 > .container-flex:has(> .right-content) {
        gap: 14px;
        align-items: center;
    }

    .left-banner {
        flex: 1 1 280px;
        min-width: 0;
    }

        .left-banner img {
            display: block;
            width: 100%;
            height: auto;
        }

    .right-content {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .video-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 100%;
    }

        .video-wrapper .info {
            flex: 1 1 auto;
            min-width: 0;
        }

        .video-wrapper .controls {
            display: flex;
            gap: 6px;
        }
}

@media (max-width: 767.98px) {
    .right-content {
        flex: 1 1 100%;
    }
}

/* Newsroom / generic card rows */

@media (max-width: 991.98px) {
    .newsroom-row-container,
    .most-pop-row,
    .featured-row,
    .section-home-container:has(> .section-home-card),
    .section-home-newsroom-sub-tableau-container + .featured-row {
        --r-card-min: 240px;
    }

    .section-home-beyond-headlines-container,
    .documentaries-home-latest-row-2,
    .documentaries-home-latest-row-1,
    .section-home-features-children-container,
    .family-primary-container-row,
    .live-home-latest-row,
    .most-pop-row-article {
        --r-card-min: 290px;
    }

    .newsroom-row-container,
    .most-pop-row,
    .featured-row,
    .section-home-container:has(> .section-home-card),
    .section-home-beyond-headlines-container,
    .documentaries-home-latest-row-2,
    .documentaries-home-latest-row-1,
    .section-home-features-children-container,
    .family-primary-container-row,
    .live-home-latest-row,
    .most-pop-row-article,
    div:has(> .section-home-features-kid-column) {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--r-card-min, 260px)), 1fr)) !important;
        gap: var(--r-gap) !important;
        align-items: start;
        width: 100%;
    }

    .newsroom-kid-1, .section-home-card, .container-372,
    .section-home-beyond-headlines-mini-column, .section-home-features-kid-column,
    .card-with-title, .iran-first-column-372 {
        min-width: 0;
    }

    .newsroom-kid-1 {
        position: relative;
    }

        .newsroom-kid-1 .text-box {
            max-width: 100%;
        }
}

/* Feature + Opinion */

@media (max-width: 991.98px) {
    .feature-opinion {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
        width: 100%;
    }

    .features .container-flex-1148 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap) !important;
    }

    .features .column-558 {
        display: flex;
        flex-direction: column;
        gap: var(--r-gap);
    }

        .features .column-558 > div {
            padding-bottom: var(--r-gap);
            border-bottom: 1px solid var(--r-line);
        }

            .features .column-558 > div:last-child {
                border-bottom: 0;
            }

    .opinion {
        min-width: 0;
        padding: 0 !important;
    }

    .opinion-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-block: 14px;
        border-bottom: 1px solid var(--r-line);
    }

    .opinion-ellipse {
        flex: 0 0 72px;
    }

        .opinion-ellipse img {
            display: block;
            width: 72px !important;
            height: 72px !important;
            border-radius: 50%;
            object-fit: cover;
        }

    .opinion-title {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .features .container-flex-1148 {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
    }
}

/* Shows (big tile + two small tiles) */

@media (max-width: 991.98px) {
    .container-flex.gap-md:has(> .shows-column1) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap) !important;
    }

    .image-wrapper, .kid-image-wrapper, .docs-image-wrapper, .section-home-newsroom-760-img-container,
    .video-container, .in-pictures-card, .inv-family-image-overlay-container {
        position: relative;
        overflow: hidden;
        border-radius: var(--r-radius);
        height: inherit;
    }

        .image-wrapper img, .kid-image-wrapper img, .docs-image-wrapper img,
        .section-home-newsroom-760-img-container img, .video-container img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

    .title-overlay, .kid-title-overlay, .text-overlay, .overlay-text,
    .inv-family-image-overlay-text {
        max-width: 100%;
    }

    .show-title {
        margin: 0;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .container-flex.gap-md:has(> .shows-column1) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .container-flex.gap-md:has(> .shows-column1) > .shows-column1 {
            grid-column: 1 / -1;
        }
}

@media (max-width: 575.98px) {
    .title-overlay .show-title, .kid-title-overlay .show-title {
        font-size: 1.05rem;
    }
}

/* Web stories + any horizontal strip */

@media (max-width: 991.98px) {
    .web-stories-carousel-container {
        position: relative;
        width: 100%;
    }

    .web-stories-carousel {
        display: flex !important;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .web-stories-carousel::-webkit-scrollbar {
            display: none;
        }

    .web-stories-item {
        flex: 0 0 clamp(150px, 42vw, 220px) !important;
        width: auto !important;
        scroll-snap-align: start;
        border-radius: var(--r-radius);
        overflow: hidden;
    }

    .reel-video {
        display: block;
        width: 100%;
        aspect-ratio: 9 / 16;
        object-fit: cover;
    }
}

@media (max-width: 767.98px) {
    .web-stories-carousel-container > .arrow {
        display: none !important;
    }
}

/* Investigations (home) */

@media (max-width: 991.98px) {
    .investigations > .container-flex:has(> img) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap) !important;
        align-items: start;
    }

    .investigations .ml-lg {
        margin-left: 0 !important;
    }

    .investigations-h1, .investigations-p, .investigations-title {
        padding-inline: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .investigations > .container-flex:has(> img) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .investigations > .container-flex:has(> img) > .column-372 {
            grid-column: 1 / -1;
        }
}

/* Iran section (home) */

@media (max-width: 991.98px) {
    .iran-section-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
    }

        .iran-section-wrapper > div {
            min-width: 0;
        }

    .iran-section-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--r-gap);
        margin-bottom: var(--r-gap);
    }

    .iran-section-wrapper .column-574 .column-574 {
        padding: 0;
    }
}

@media (max-width: 479.98px) {
    .iran-section-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .iran-section-wrapper-2 {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
        gap: var(--r-gap) !important;
    }
}

/* Infographics + Iran First + ad */

@media (max-width: 991.98px) {
    .most-recent-and-company {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
        width: 100%;
        max-width: 100% !important;
    }

    .most-recent {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .infographic-poster-container {
        min-width: 0;
    }

    .infographic-column, .iran-first-container {
        min-width: 0;
        width:100%;
    }

    .iran-first-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
    }

    .advertisement-box-fact img {
        display: block;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .most-recent {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .iran-first-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Discover Iran (home) */

@media (max-width: 991.98px) {
    .discover-iran-img-text {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
        width: 100%;
        align-items: center;
    }

        .discover-iran-img-text .column-372 {
            padding: 0;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .discover-iran-img-text {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* In pictures (home grid) */

@media (max-width: 991.98px) {
    .in-pictures-row-container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important;
        gap: var(--r-gap) !important;
    }

        .in-pictures-row-container .container {
            position: relative;
            overflow: hidden;
            border-radius: var(--r-radius);
        }

            .in-pictures-row-container .container img {
                display: block;
                width: 100%;
                aspect-ratio: 4 / 3;
                object-fit: cover;
            }
}

/* Documentaries strip (home) */

@media (max-width: 991.98px) {
    .docs-main-container {
        width: 100%;
    }

    siteitemsmall {
        display: block;
    }

    .docs-image-wrapper img {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 991.98px) {
    .text-overlay {
        padding: clamp(10px, 2.5vw, 28px);
    }

        .text-overlay .title-grade-1 {
            margin: 6px 0 0 !important;
            padding: 0 !important;
        }
}

@media (max-width: 575.98px) {
    .text-overlay .title-grade-1 {
        font-size: 1.1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
}

/* "View all" link */

@media (max-width: 991.98px) {
    .view-all-container {
        display: flex;
        justify-content: flex-end;
        margin-top: var(--r-gap);
    }

    .view-all {
        margin: 0;
    }
}

/* ==========================================================================
   7. SECTION / TAG / NEWSROOM PAGES
   ========================================================================== */

/* hero block: lead story + headline list + supporting cards */

@media (max-width: 991.98px) {
    .section-home-container:has(> .section-home-760),
    .section-home-container:has(> .section-home-newsroom-760) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) var(--r-gap) !important;
    }

    .section-home-760-gapped {
        display: contents !important;
    }

    .section-home-760-gapped-kid:first-child,
    .section-home-760-gapped-kid:first-child:not(:last-child) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
        align-content: start;
    }

    .section-home-760-gapped-kid:last-child:not(:first-child) {
        display: block;
    }

        .section-home-760-gapped-kid:last-child:not(:first-child) .section-home-760-gapped-grand-kid {
            padding-block: 12px;
            border-bottom: 1px solid var(--r-line);
        }

            .section-home-760-gapped-kid:last-child:not(:first-child) .section-home-760-gapped-grand-kid:first-child {
                padding-top: 0;
            }

    .section-home-760-gapped-grand-kid img,
    .section-home-760 > a img,
    .section-home-newsroom-760-img-container img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }

    .section-home-760 .title-grade-1, .section-home-newsroom-760 .title-grade-1 {
        margin: 12px 0 8px;
    }

    .section-home-760-gapped-grand-kid .title-grade-2 {
        margin: 8px 0 4px;
    }

    .section-home-editors-picks-row {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding-bottom: var(--r-gap);
        border-bottom: 1px solid var(--r-line);
    }

    .section-home-editors-picks-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-home-editors-picks-img {
        flex: 0 0 clamp(96px, 30vw, 150px);
    }

        .section-home-editors-picks-img img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: 6px;
        }
}

/* newsroom sub-section hero row */

@media (max-width: 991.98px) {
    .section-home-newsroom-1080-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap-lg) var(--r-gap);
        width: 100%;
    }

        .section-home-newsroom-1080-column, .section-home-newsroom-1080-row > * {
            min-width: 0;
        }

    .section-home-newsroom-760-img-overlay, .section-home-newsroom-760-img-overlay-sm {
        display: flex;
        align-items: center;
        gap: 6px;
        max-width: calc(100% - 16px);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-home-760-gapped-kid:first-child:not(:last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section-home-newsroom-1080-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* list + "most popular" sidebar */

@media (max-width: 991.98px) {
    .section-home-container:has(> .section-home-more-news-container) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
    }

    .section-home-more-news-container, .section-home-most-pop-container {
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .section-home-more-news {
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-block: 16px;
        border-bottom: 1px solid var(--r-line);
    }

    .section-home-more-news-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-home-more-news-image {
        flex: 0 0 clamp(112px, 32vw, 240px);
    }

        .section-home-more-news-image img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 3 / 2;
            object-fit: cover;
            border-radius: 6px;
        }

    .section-home-more-news-title {
        margin: 4px 0 6px;
    }
}

@media (max-width: 575.98px) {
    .section-home-more-news-sum {
        display: none;
    }

    .section-home-more-news {
        gap: 12px;
        padding-block: 14px;
    }
}

@media (max-width: 991.98px) {
    .section-home-most-pop-with-number, .most-pop-row-container {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding-block: 12px;
        border-bottom: 1px solid var(--r-line);
    }

    .svg-icon {
        flex: 0 0 auto;
    }

        .svg-icon img {
            display: block;
            width: 30px;
            height: 30px;
        }

    .section-home-most-pop-title, .section-home-most-pop-with-number > div:last-child {
        min-width: 0;
        margin: 0;
    }
}

/* feature hero (image + text) */

@media (max-width: 991.98px) {
    .section-home-features-container-background {
        width: 100%;
    }

    .section-home-features-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px var(--r-gap-lg) !important;
        align-items: start;
        width: 100% !important;
        max-width: 100% !important;
    }

        .section-home-features-container > a:first-child img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: var(--r-radius);
        }

        .section-home-features-container .title-grade-1-features-home {
            margin: 4px 0 0;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-home-features-container {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
        align-items: center;
    }

        .section-home-features-container > a:first-child {
            grid-column: 1;
            grid-row: 1 / span 4;
        }

        .section-home-features-container > :not(a:first-child) {
            grid-column: 2;
        }
}

@media (max-width: 991.98px) {
    .section-home-features-kid-column img, .container-372 img, .section-home-beyond-headlines-mini-column img,
    .section-home-card > img, .section-home-card .video-container img, .iran-first-column-372 img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

/* opinion */

@media (max-width: 991.98px) {
    .section-home-opinion-children-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
    }

    .section-home-opinion-kid-column {
        min-width: 0;
        width: auto !important;
    }

    .section-home-opinion-kid-row {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-block: 14px;
        border-bottom: 1px solid var(--r-line);
    }

    .section-home-opinion-kid-row-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .section-home-opinion-kid-row-img {
        flex: 0 0 clamp(72px, 20vw, 110px);
    }

        .section-home-opinion-kid-row-img img {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 50%;
            object-fit: cover;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .section-home-opinion-children-container {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    }
}

/* smaller rows (thumb + text) */

@media (max-width: 991.98px) {
    .container-flex:has(> .section-home-beyond-headlines-smaller) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 0 var(--r-gap-lg);
        width: 100%;
    }

    .section-home-beyond-headlines-smaller {
        min-width: 0;
        width: auto !important;
    }

    .section-home-beyond-headlines-smaller-row {
        display: grid;
        grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding-block: 14px;
        border-bottom: 1px solid var(--r-line);
    }

    .section-home-beyond-headlines-smaller-row-img img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 6px;
    }

    .section-home-beyond-headlines-smaller-row-text-column {
        min-width: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .container-flex:has(> .section-home-beyond-headlines-smaller) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* authors */

@media (max-width: 991.98px) {
    .authors-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .author-portrait {
        flex: 0 0 clamp(88px, 22vw, 140px);
    }

        .author-portrait img {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 50%;
            object-fit: cover;
        }

    .authors-group-text-column {
        flex: 1 1 220px;
        min-width: 0;
    }
}

/* investigations page */

@media (max-width: 991.98px) {
    .inv-family-image-overlay-container img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .inv-family-image-overlay-text {
        padding: clamp(12px, 3vw, 32px);
    }

    .inv-family-twin-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
    }

    .inv-family-container-768 img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .inv-family-image-overlay-container img {
        aspect-ratio: 21 / 9;
    }

    .inv-family-twin-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .inv-family-image-overlay-text .inv-family-sum {
        display: none;
    }

    .inv-family-text {
        font-size: 1.15rem;
    }
}

/* conversations page: big card + side list */

@media (max-width: 991.98px) {
    .family-primary-container-row:has(> .family-mini-container-column-no-gap) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) !important;
    }

    .family-mini-container-column {
        display: grid;
        gap: var(--r-gap);
        align-content: start;
    }

    .family-mini-container {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: 14px;
        align-items: start;
    }

        .family-mini-container img {
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            border-radius: 6px;
        }

    .family-mini-container-column-no-gap img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

/* Iran First page */

@media (max-width: 991.98px) {
    .iran-first-container-flex {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap-lg) var(--r-gap) !important;
    }

        .iran-first-container-flex > .column-760 {
            order: -1;
        }

        .iran-first-container-flex .column-760 img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: var(--r-radius);
        }

    .iran-first-column-372-container {
        display: grid;
        gap: var(--r-gap);
        align-content: start;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .iran-first-container-flex {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        .iran-first-container-flex > .column-760 {
            grid-column: 1 / -1;
        }
}

/* In-pictures page */

@media (max-width: 991.98px) {
    .in-pictures-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap);
        align-items: center;
    }

        .in-pictures-hero > img {
            order: -1;
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
            border-radius: var(--r-radius);
        }

    .in-pictures-hero-column-1 {
        min-width: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .in-pictures-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) !important;
    }

        .in-pictures-hero > img {
            order: 0;
        }
}

@media (max-width: 991.98px) {
    .in-pictures-carousel-btns-container {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .in-pictures-carousel-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .in-pictures-carousel-wrapper::-webkit-scrollbar {
            display: none;
        }

    .in-pictures-family-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 14px;
    }

        .in-pictures-card, .in-pictures-family-row > .iran-first-column-372 {
            flex: 0 0 clamp(210px, 62vw, 300px) !important;
            width: auto !important;
            scroll-snap-align: start;
        }

            .in-pictures-card img {
                display: block;
                width: 100%;
                aspect-ratio: 4 / 3;
                object-fit: cover;
            }

    .carousel-btn {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .carousel-btn {
        display: none !important;
    }
}

/* Discover-Iran page label */

@media (max-width: 991.98px) {
    .discover-iran-family-label, .discover-iran-family-mini-label {
        margin-block: 6px;
    }
}

/* ==========================================================================
   8. CARD GRIDS, ROWS, LOAD MORE
   ========================================================================== */

/* load-more targets receive whole wrappers (rows, grids…) → keep them block */

@media (max-width: 991.98px) {
    .section-home-load-more-container {
        display: block !important;
        width: 100%;
    }

        .section-home-load-more-container > .section-home-container,
        .section-home-load-more-container > .featured-row,
        .section-home-load-more-container > div {
            margin-top: var(--r-gap);
        }

    .load-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 46px;
        min-width: min(100%, 220px);
        margin: var(--r-gap-lg) auto;
        padding: 0 28px;
        border-radius: 999px;
        cursor: pointer;
    }

    .section-home-videos-bg {
        width: 100%;
        padding-block: var(--r-gap);
    }

    .featured-home, .featured-container {
        width: 100%;
    }

    .documentaries-home-latest-card img, .documentaries-home-latest-card .card-image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }

    .card-with-title {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .documentaries-home-latest-title {
        margin-top: 10px;
    }
}

/* pagination */

@media (max-width: 991.98px) {
    .pagination-sm, .news-page-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 0;
        margin: var(--r-gap) auto;
        list-style: none;
    }

        .pagination-sm li a, .pagination-sm li span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
            padding: 0 10px;
        }
}

/* ==========================================================================
   9. ARTICLE PAGE + VIDEO PAGE
   ========================================================================== */

@media (max-width: 991.98px) {
    .layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--r-gap) !important;
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        padding-block: var(--r-gap);
    }

        .layout > main.content, .layout > .content {
            width: 100% !important;
            max-width: 780px;
            min-width: 0;
            margin-inline: auto;
            padding:0;
        }

    .sidebar.left {
        display: none !important;
    }
}

/* share buttons: a row on phones, a sticky column on desktop */

@media (max-width: 991.98px) {
    .sidebar.right {
        order: 3;
    }

    .in-sidebar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

        .in-sidebar h1 {
            margin: 0;
            font-size: 1rem;
            line-height: 1;
        }

            .in-sidebar h1 a {
                display: grid;
                place-items: center;
                width: 44px;
                height: 44px;
                border: 1px solid var(--r-line);
                border-radius: 50%;
            }
}

@media (max-width: 991.98px) {
    .article-location {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        margin-bottom: 10px;
    }

        .article-location h1, .article-location span {
            margin: 0;
            font-size: clamp(.74rem, .72rem + .12vw, .85rem);
            letter-spacing: .05em;
        }

    .article-1 {
        margin: 6px 0 12px;
        font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.5rem) !important;
        line-height: 1.16;
    }

    .article-summary {
        font-size: clamp(1.02rem, .96rem + .3vw, 1.2rem);
        line-height: 1.5;
        margin: 0 0 14px;
    }

    .article-flex {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 16px;
        padding-block: 10px;
        margin-bottom: 14px;
        border-block: 1px solid var(--r-line);
    }

    .article-flex-div-1, .article-flex-div-2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
    }

    .article-date {
        margin: 0;
        font-size: .82rem;
    }

    .news-attachment-container, .article-img {
        width: 100%;
        max-width: 100%;
    }

    .article-img {
        display: block;
        height: auto !important;
        border-radius: var(--r-radius);
    }

    .article-caption-container {
        margin: 8px 0 18px;
    }

    .article-caption {
        margin: 0;
        font-size: .82rem;
        line-height: 1.5;
        opacity: .8;
    }

    .article-content {
        max-width: 100%;
        font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem);
        line-height: 1.75;
    }

        .article-content p {
            margin: 0 0 1.1em;
            font-size:16px;
        }

        .article-content h2, .article-content h3, .article-content h4 {
            line-height: 1.25;
            margin: 1.6em 0 .6em;
        }

        .article-content img, .article-content video, .article-content figure {
            max-width: 100% !important;
            height: auto;
        }

        .article-content iframe, .article-content .video-embed {
            width: 100% !important;
            max-width: 100%;
            aspect-ratio: 16 / 9;
            height: auto;
        }

        .article-content table {
            display: block;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .article-content blockquote {
            margin: 1.4em 0;
            padding: .2em 0 .2em 1.1em;
            border-left: 4px solid var(--r-accent);
            font-size: 1.05em;
        }

        .article-content a {
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .article-content .twitter-tweet, .article-content .instagram-media {
            margin-inline: auto !important;
            max-width: 100% !important;
        }

    .keywords, .video-dark-keywords {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 20px 0;
    }

    .keyword {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 14px;
        border: 1px solid var(--r-line);
        border-radius: 999px;
        font-size: .85rem;
    }

    .container-column-article {
        width: 100%;
    }

    .read-more-tableau {
        display: inline-block;
        margin-bottom: var(--r-gap);
    }

    .related-embedded, .related-column {
        max-width: 100%;
    }

    .related-embedded-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .notifi-register {
        max-width: 100%;
    }
}

/* video article (dark theme) */

@media (max-width: 991.98px) {
    .video-dark-layout {
        flex-wrap: wrap;
    }
}

@media (max-width: 991.98px) {
    .video-dark-layout {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 12px var(--r-gutter) 8px !important;
    }

    .video-main-section, .video-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .video-related-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important;
        gap: 14px !important;
    }
}

@media (max-width: 991.98px) {
    .video-dark-title {
        font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem) !important;
    }

    .video-player-container iframe, .video-player-container video {
        width: 100% !important;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .video-dark-social {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .video-related-card {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .video-related-thumb {
        flex: 0 0 clamp(120px, 38%, 168px);
    }

        .video-related-thumb img, .video-bottom-related-thumb img {
            display: block;
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

    .video-bottom-related-scroll {
        display: flex !important;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .video-bottom-related-scroll::-webkit-scrollbar {
            display: none;
        }

    .video-bottom-related-card {
        flex: 0 0 clamp(200px, 60vw, 280px) !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 767.98px) {
    .video-bottom-related-nav {
        display: none !important;
    }
}

/* ==========================================================================
   10. SEARCH, LIVE, SCHEDULE, MULTIMEDIA, ABOUT, DOCUMENTARIES
   ========================================================================== */

/* ---- Search ---- */

@media (max-width: 991.98px) {
    .search-container {
        width: 100%;
        max-width: var(--r-max);
        margin-inline: auto;
        padding: var(--r-gap) var(--r-gutter);
    }

        .search-container .container {
            padding-inline: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

    .search-toolbar .searchrow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin-bottom: 12px;
    }

        .search-toolbar .searchrow.first {
            flex-wrap: nowrap;
        }

    .search-conten {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        min-height: 46px;
    }

    .search-toolbar select, .search-toolbar .date-box, .search-toolbar .datetimepicker-container {
        min-height: 42px;
        max-width: 100%;
    }

    .search-toolbar .clear {
        display: none;
    }

    .results-container-parent, .results-container, .results-page {
        width: 100%;
        max-width: 100%;
    }

    .result-item-link {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .result-item {
        padding-block: 16px;
        border-bottom: 1px solid var(--r-line);
    }

    .result-item-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
    }

    .result-item-title {
        font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
        line-height: 1.3;
    }

    .result-item-summery {
        font-size: .95rem;
        line-height: 1.55;
    }

    .captcha-container, #ExampleCaptcha1, .actions {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .search-toolbar .searchrow:not(.first) > * {
        flex: 1 1 100%;
    }

    input, select, textarea {
        font-size: max(16px, 1rem);
    }
    /* no iOS zoom */
}

/* ---- Live ---- */

@media (max-width: 991.98px) {
    .live-section-wrapper {
        width: 100%;
        max-width: var(--r-max);
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

        .live-section-wrapper section {
            padding-inline: 0 !important;
        }

    .live-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-block: 12px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .live-tabs::-webkit-scrollbar {
            display: none;
        }

    .live-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 42px;
    }

    .live-screen-container {
        width: 100%;
    }

    .live-player-wrapper {
        position: relative;
        width: 100%;
        height: auto !important;
        aspect-ratio: 16 / 9;
        background: #000;
        overflow: hidden;
        border-radius: var(--r-radius);
    }

    .live-player-section {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

        .live-player-section iframe, .live-player-section video, .live-player-section .video-js {
            width: 100% !important;
            height: 100% !important;
        }

    .live-home-tableau-container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        padding-block: var(--r-gap);
    }

    .live-home-up-next-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: var(--r-gap);
    }

        .live-home-up-next-container > .up-next {
            grid-column: 1 / -1;
            margin: 0;
        }

    .live-home-latest-featured-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap-lg);
    }

    .live-home-latest-row-card img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

/* ---- Schedule ---- */

@media (max-width: 991.98px) {
    .schedule-page {
        width: 100%;
        max-width: 1000px;
        margin-inline: auto;
        padding: var(--r-gap) var(--r-gutter) !important;
    }

        .schedule-page.container {
            float: none !important;
        }

    .date-inside {
        max-width: 100%;
        overflow: hidden;
        margin-bottom: var(--r-gap);
    }

    .date-items {
        min-height: 44px;
    }

    .items-list {
        width: 100%;
    }

    .items-list-h, .items-list-b {
        display: flex !important;
        align-items: flex-start;
        gap: 14px;
        float: none !important;
        width: 100% !important;
        padding-block: 12px;
        border-bottom: 1px solid var(--r-line);
        text-decoration: none;
        color: inherit;
    }

    .items-h-time, .items-b-time {
        flex: 0 0 82px;
        width: 82px !important;
        float: none !important;
        padding: 0 !important;
    }

    .items-h-desc, .items-b-data {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        float: none !important;
        padding: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .items-h-time, .items-b-time {
        flex-basis: 150px;
        width: 150px !important;
    }
}

/* ---- Multimedia / legacy landing pages ---- */

@media (max-width: 991.98px) {
    .Multimedia-page .container, .home-page-slider, .Top-news-p {
        max-width: var(--r-max);
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

        .Multimedia-page img, .Top-news-p img, .home-page-slider img {
            max-width: 100%;
        }

    .Multimedia-page .banner-election {
        width: 100%;
        height: auto;
    }

    .topnews-title, .news-title {
        font-size: clamp(1rem, .94rem + .35vw, 1.3rem);
        line-height: 1.3;
    }

    .topnews-summery {
        font-size: .95rem;
        line-height: 1.5;
    }

    .tophits img, .small-items img, .larg-item img, .latest-side img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: var(--r-radius);
    }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .tophits [class*="col-md-6"] {
        width: 50% !important;
        float: left !important;
        padding-inline: 6px;
    }

    .tophits [class*="col-md-4"] {
        width: 33.333% !important;
        float: left !important;
        padding-inline: 6px;
    }
}

@media (max-width: 991.98px) {
    .Top-news-p .fill-box, .slider-item .fill-box {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .home-page-slider .swiper-container {
        max-width: 100%;
    }
}

/* ---- About / static pages ---- */

@media (max-width: 991.98px) {
    .about-menu {
        display: flex;
        align-items: center;
        gap: 6px 16px;
        overflow-x: auto;
        padding: 8px var(--r-gutter);
        white-space: nowrap;
        scrollbar-width: none;
    }

        .about-menu::-webkit-scrollbar {
            display: none;
        }

        .about-menu > * {
            flex: 0 0 auto;
        }

    .bg-about .container, .about-page .container {
        max-width: var(--r-max);
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

    .about-us-base-row-container, .terms-of-use-base, .careers-base-container,
    .careers-base, .about-us-base, .ceo-base-row, .staff-page-details, .martyrs-page {
        width: 100% !important;
        max-width: 960px;
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

    .about-us-base {
        padding-inline: 0;
    }

    .about-us-paragraph, .terms-of-use-base p {
        font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
        line-height: 1.75;
    }

    .inside-footer-main-title, .inside-footer-main-title-careers {
        font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
        line-height: 1.2;
    }

    .inside-footer-sub-title {
        font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
        line-height: 1.25;
    }

    .careers-banner, .ceo-img {
        width: 100%;
        height: auto;
    }

    .ceo-base-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
    }

    .inside-footer-hiring-process-card-container, .inside-footer-featured-jobs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: var(--r-gap);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .ceo-base-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: start;
    }
}

/* contact form */

@media (max-width: 991.98px) {
    .testimonials-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px var(--r-gap);
    }

    .contact-info-family {
        min-width: 0;
    }

    .contact-info-input, .testimonial-input, .form-control {
        width: 100% !important;
        max-width: 100%;
        min-height: 46px;
    }

    .testimonial-input {
        min-height: 140px;
    }

    .testimonial-submit {
        min-height: 48px;
    }

    .testimonials-container > .testimonial-input, .testimonials-container > .testimonial-submit,
    .testimonials-container > .contact-info-family:has(.captcha-container) {
        grid-column: 1 / -1;
    }

    .modal-dialog {
        max-width: min(92vw, 520px);
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .testimonials-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* employment / brochure forms */

@media (max-width: 991.98px) {
    .form-emp, .formpress, .applybox {
        max-width: 100%;
    }

    .form-group {
        margin-bottom: 14px;
    }
}

/* ---- Documentaries (Doc layout) ---- */

@media (max-width: 991.98px) {
    .documentaries-home-bar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 20px;
        padding-inline: var(--r-gutter) !important;
    }

    .documentaries-home-bar-schedule {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
    }

    .documentaries-home-search-box {
        display: flex;
        gap: 6px;
        flex: 1 1 220px;
        min-width: 0;
    }

        .documentaries-home-search-box input {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 42px;
        }

    .documentaries-home-bar-on-air {
        margin: 0;
    }

    .on-air-items {
        white-space: nowrap;
    }

    .documentaries-home-latest {
        width: 100%;
        max-width: var(--r-max);
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

    #shows-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
        gap: var(--r-gap);
    }

    .documentaries-sub-main-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--r-gap);
    }

    .documentaries-sub-big-card img, .documentaries-item-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .doc-banner-slide {
        position: relative;
    }

    .doc-banner-content {
        max-width: 100%;
        padding: clamp(12px, 3vw, 40px);
    }

    .doc-banner-title {
        font-size: clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
        line-height: 1.15;
    }

    .doc-banner-description {
        font-size: clamp(.9rem, .86rem + .2vw, 1rem);
    }
}

@media (max-width: 575.98px) {
    .doc-banner-description {
        display: none;
    }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

@media (max-width: 991.98px) {
    .footer-family, .newsletter {
        width: 100%;
        max-width: var(--r-max);
        margin-inline: auto;
        padding-inline: var(--r-gutter);
    }

    .footer-family {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px var(--r-gap-lg);
        padding-block: var(--r-gap-lg) var(--r-gap);
    }

    .follow-column {
        min-width: 0;
        width: auto !important;
    }

    .footer-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
    }

        .footer-row > a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            min-height: 40px;
        }

        .footer-row img {
            display: block;
            height: 28px;
            width: auto;
            max-width: 100%;
        }

        .footer-row i {
            font-size: 1.35rem;
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .footer-family {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    .newsletter {
        text-align: center;
        padding-block: var(--r-gap-lg);
    }

        .newsletter h3 {
            margin: 0 0 14px;
            font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
        }

    .email-entry {
        display: flex;
        gap: 8px;
        max-width: 520px;
        margin-inline: auto;
    }

        .email-entry input {
            flex: 1 1 auto;
            min-width: 0;
            min-height: 46px;
        }

        .email-entry button {
            flex: 0 0 auto;
            min-height: 46px;
            padding-inline: 20px;
        }
}

@media (max-width: 479.98px) {
    .email-entry {
        flex-direction: column;
    }

        .email-entry button {
            width: 100%;
        }
}

@media (max-width: 991.98px) {
    main > .container-flex.justified {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 20px;
        padding: var(--r-gap) var(--r-gutter);
    }

    main > .container-flex {
        justify-content: center;
    }

    .copyright-and-company {
        margin: 0;
        font-size: .82rem;
        line-height: 1.6;
    }

        .copyright-and-company.centered {
            text-align: center;
            padding: 0 var(--r-gutter) var(--r-gap-lg);
        }

        .copyright-and-company a {
            display: inline-block;
            padding-block: 4px;
        }
}

/* PWA install hint */

@media (max-width: 991.98px) {
    .mobile-notify > div {
        max-width: min(92vw, 420px);
        margin-inline: auto;
    }
}

/* ==========================================================================
   12. POLISH
   ========================================================================== */

/* consistent hover on card images */

/* keyboard focus */

@media (max-width: 991.98px) {
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible {
        outline: 2px solid var(--r-accent);
        outline-offset: 2px;
    }
}

/* touch comfort */

@media (max-width: 991.98px) {
    a, button {
        -webkit-tap-highlight-color: transparent;
    }

    button, .btn, .load-more {
        touch-action: manipulation;
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   13. TYPE SYSTEM + SPACING RHYTHM   (final word on every font size)
   --------------------------------------------------------------------------
   One fluid scale for the whole site. Values are in px on purpose, so they
   do not depend on the root font-size of the old CSS (html { font-size } /
   62.5% tricks). Phone → desktop:

     label    11 → 12.5     tiny uppercase tags (section names)
     meta     12 → 13.5     time, dates, captions
     small    13 → 14.5     bylines, links, tabs
     body-sm  14.5 → 16     summaries
     body     16 → 17.5     paragraphs
     h4       14.5 → 16
     h3       16 → 18       small headlines
     h2       17.5 → 22     card headlines
     h1       23 → 38       lead headlines
     display  26 → 44       article title
     section  18 → 24       section headings (Newsroom, Features …)
   ========================================================================== */

@media (max-width: 991.98px) {
    :root {
        --rfs-label: clamp(11px, 10.5px + .14vw, 12.5px);
        --rfs-meta: clamp(12px, 11.5px + .15vw, 13.5px);
        --rfs-small: clamp(13px, 12.5px + .2vw, 14.5px);
        --rfs-body-sm: clamp(14.5px, 14px + .2vw, 16px);
        --rfs-body: clamp(16px, 15.5px + .2vw, 17.5px);
        --rfs-h4: clamp(14.5px, 14px + .2vw, 16px);
        --rfs-h3: clamp(16px, 15px + .3vw, 18px);
        --rfs-h2: clamp(17.5px, 16px + .5vw, 22px);
        --rfs-h1: clamp(23px, 18.5px + 1.7vw, 38px);
        --rfs-display: clamp(26px, 20px + 2vw, 44px);
        --rfs-section: clamp(18px, 16px + .7vw, 24px);
        --rfs-section-sub: clamp(16.5px, 15px + .55vw, 21px);
        --rlh-tight: 1.2;
        --rlh-title: 1.28;
        --rlh-snug: 1.38;
        --rlh-body: 1.6;
    }
}

/* ---- 13.1 baseline: nothing on the site is left at a browser default ---- */

@media (max-width: 991.98px) {
    body {
        font-size: var(--rfs-body);
        line-height: var(--rlh-body);
    }

    main h1, main h2, main h3, main h4, main h5, main h6,
    header h1, header h2, header h3, header h4, header h5, header h6,
    footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
        font-size: var(--rfs-h3);
        line-height: var(--rlh-title);
        margin-block: 0;
    }

    main p, footer p {
        margin-block: 0;
        line-height: var(--rlh-snug);
    }

    main li, main label, main td, main th, main a, main span, main button {
        line-height: inherit;
    }
}

/* paragraphs of plain text pages keep their breathing space */

@media (max-width: 991.98px) {
    .about-us-paragraph, .inside-footer-paragraph, .inside-footer-sub-paragraph,
    .inside-footer-list-in-paragraph, .inside-footer-address-paragraph,
    .terms-of-use-base p, .about-page p, .related-article-p, .shows-episode-about-paragraph {
        margin-block: 0 1em;
    }
}

/* ---- 13.2 old utility classes now follow the scale ---- */

@media (max-width: 991.98px) {
    .text-sm {
        font-size: var(--rfs-small) !important;
    }

    .text-base {
        font-size: var(--rfs-body-sm) !important;
    }

    .text-lg {
        font-size: var(--rfs-h3) !important;
    }

    .text-xl {
        font-size: var(--rfs-h2) !important;
    }
}

/* ---- 13.3 body copy ---- */

@media (max-width: 991.98px) {
    .about-us-paragraph, .inside-footer-paragraph, .inside-footer-sub-paragraph,
    .inside-footer-list-in-paragraph, .inside-footer-address-paragraph,
    .inside-footer-hiring-process-card-text, .text-inside, .items-b-data,
    .shows-episode-about-paragraph, .author-name, .terms-of-use-base p {
        font-size: var(--rfs-body) !important;
        line-height: 1.7 !important;
    }
}

/* ---- 13.4 summaries / standfirsts ---- */

@media (max-width: 991.98px) {
    .section-home-sum, .section-home-sum-feature, .sum-372, .sum-372-in-featured,
    .sum-384, .sum-760, .section-home-more-news-sum, .section-home-beyond-kid-sum,
    .section-home-editors-picks-sum, .investigations-p, .inv-family-sum,
    .inv-family-sum-768, .in-pictures-hero-sum, .section-home-opinion-kid-sum,
    .topnews-summery, .sh-card-summary, .documentaries-home-latest-summary,
    .doc-banner-description, .shows-episode-sum, .shows-episode-about,
    .video-dark-summary, .video-dark-summary p {
        font-size: var(--rfs-body-sm) !important;
        line-height: 1.55 !important;
    }
}

/* ---- 13.5 small: bylines, tabs, links, list text ---- */

@media (max-width: 991.98px) {
    .interviewer-372, .interviewer-372-in-featured, .interviewer-384, .interviewer-760,
    .interviewer-at-end, .interviewer-featured, .section-home-author,
    .section-home-feature-kid-author, .inv-family-author, .film-maker,
    .author-name-p, .article-bold, .article-sub-location, .view-all, .view-all a,
    .trend, .trend a, .on-air-items, .keyword, .doc-more, .documentaries-home-schedule,
    .documentaries-home-sub-see-more, .section-home-tableau-item, .date-items,
    .items-b-time, .items-h-time, .items-h-desc, .watch-film-doc, .item-icon-text,
    .result-item-summery, .pagination-sm a, .pagination-sm span, .live-tab,
    .copyright-and-company a, .footer-row span {
        font-size: var(--rfs-small) !important;
        line-height: 1.4 !important;
    }
}

/* ---- 13.6 meta ---- */

@media (max-width: 991.98px) {
    time, .timeago, .timeago-peer, .container-flex-timeago, .article-date, .age,
    .news-modifydate-container, .text-box-content, .text-box-content-kid,
    .result-item-puddate, .duration, .big-duration, .time-gmt, .sh-card-episodes,
    .sh-card-rating, .year, .shows-episode-date-time-content, .article-caption,
    .copyright-and-company, .video-dark-date, .image-counter {
        font-size: var(--rfs-meta) !important;
        line-height: 1.4 !important;
    }
}

/* ---- 13.7 labels (tiny uppercase tags) ---- */

@media (max-width: 991.98px) {
    .section-home-tag, .explainer-tag, .author-tag, .section-home-newsroom-760-tag,
    .section-home-newsroom-760-tag-sm, .discover-iran-family-label,
    .discover-iran-family-mini-label, .result-item-tag, .sh-card-category, .big-label,
    .breaking-news-tableau, .items-list-h, .live-ups-tableau, .doc-banner-badge {
        font-size: var(--rfs-label) !important;
        line-height: 1.3 !important;
        letter-spacing: .06em;
    }
}

/* ---- 13.8 headlines ---- */

@media (max-width: 991.98px) {
    .title-grade-4, .topnews-summery.title-grade-4 {
        font-size: var(--rfs-h4) !important;
        line-height: var(--rlh-snug) !important;
    }

    .title-grade-3, .title-grade-3-most-pop, .section-home-most-pop-title,
    .video-related-card-title, .video-bottom-related-card-title,
    .related-live-item h3, .tiny-title-container .title-grade-3 {
        font-size: var(--rfs-h3) !important;
        line-height: var(--rlh-title) !important;
    }

    .title-grade-2, .title-grade-2-featured, .title-grade-2-article,
    .title-grade-2-section-home-newsroom-gapped, .title-grade-2-section-home-newsroom-most-pop,
    .related-title-grade-2-article, .section-home-more-news-title, .title-372,
    .title-372-in-featured, .title-384, .title-grade-1-opinion-grand-kid,
    .inv-family-title-768, .investigations-title, .documentaries-home-latest-title,
    .documentaries-home-latest-title-related, .in-pictures-title, .show-title,
    .news-title, .topnews-title, .sh-card-title, .shows-episode-title,
    .up-next-card-text-1, .up-next-card-text-2, .result-item-title,
    .inside-footer-featured-jobs-card-title, .inside-footer-featured-jobs-card-title-2,
    .inside-footer-hiring-process-card-title, .title-grade-2.p-md, h4.title-grade-2, h5.title-grade-2 {
        font-size: var(--rfs-h2) !important;
        line-height: var(--rlh-title) !important;
    }

        .title-grade-1, .title-grade-1-features-home, .title-grade-1-opinion-kid,
        .title-760, .inv-family-text, .doc-banner-title, .in-pictures-hero-title,
        .documentaries-home-latest-title-1, .inside-footer-main-title,
        .inside-footer-main-title-careers, .heading-inside, .show-title.title-grade-1 {
            font-size: var(--rfs-h1) !important;
            line-height: var(--rlh-tight) !important;
            letter-spacing: -.01em;
        }

    .article-1, .video-dark-title {
        font-size: var(--rfs-display) !important;
        line-height: 1.16 !important;
        letter-spacing: -.015em;
    }

    .article-summary {
        font-size: clamp(17px, 15.5px + .5vw, 20px) !important;
        line-height: 1.5 !important;
    }

    .article-content {
        font-size: clamp(17px, 16.2px + .25vw, 19px) !important;
        line-height: 1.75 !important;
    }

        .article-content h2 {
            font-size: clamp(21px, 18px + .9vw, 28px);
        }

        .article-content h3 {
            font-size: clamp(18.5px, 16.5px + .6vw, 23px);
        }

        .article-content h4 {
            font-size: var(--rfs-h3);
        }
}

/* ---- 13.9 section headings ---- */

@media (max-width: 991.98px) {
    .tableau, .section-home-tableau, .section-home-columns-tableau, .live-home-tableau,
    .documentaries-home-tableau, .documentaries-item-tableau, .up-next, .tableau-related,
    .read-more-tableau, .investigations-h1.tableau {
        font-size: var(--rfs-section) !important;
        line-height: var(--rlh-tight) !important;
    }

    .section-home-sub-tableau, .section-home-newsroom-sub-tableau, .live-home-tableau-secondary,
    .documentaries-home-sub-tableau, .also-watch-tableau, .inside-footer-sub-title,
    .inside-footer-hiring-process-main-title, .inside-footer-testimonials-title,
    .documentaries-home-bar-on-air {
        font-size: var(--rfs-section-sub) !important;
        line-height: var(--rlh-title) !important;
    }
}

/* ---- 13.10 forms and buttons ---- */

@media (max-width: 991.98px) {
    input, select, textarea {
        font-size: var(--rfs-body-sm);
        line-height: 1.3;
    }
}

@media (max-width: 767.98px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* no iOS zoom */

@media (max-width: 991.98px) {
    .btn, .load-more, .apply-btn, .testimonial-submit, .btn-more, .btn-watch, .do-search,
    .email-entry button, .update-btn, .doc-watch-btn, .election-live-btn, .live-tab {
        font-size: var(--rfs-small) !important;
        line-height: 1.2 !important;
    }

    .contact-info, label {
        font-size: var(--rfs-small);
    }
}

/* ---- 13.11 text that sits ON images (phones need to be smaller) ---- */

@media (max-width: 575.98px) {
    .title-overlay .show-title {
        font-size: 19px !important;
    }

    .kid-title-overlay .show-title {
        font-size: 16px !important;
    }

    .inv-family-text {
        font-size: 19px !important;
    }

    .text-overlay .title-grade-1 {
        font-size: 18px !important;
    }

    .doc-banner-title {
        font-size: 22px !important;
    }

    .section-home-newsroom-760-img-overlay-sm .section-home-newsroom-760-tag-sm {
        font-size: 11px !important;
    }

    .overlay-text, .overlay-text a {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    .tiny-title-container .title-grade-3 {
        font-size: 15.5px !important;
    }
}

/* ---- 13.12 spacing rhythm: one gap between a photo, headline, text, time ---- */

@media (max-width: 991.98px) {
    main :where( .section-home-card, .container-372, .newsroom-kid-1, .section-home-beyond-headlines-mini-column, .section-home-features-kid-column, .column-372, .column-372 > div, .column-372-no-gap, .column-259, .column-305, .column-574, .iran-first-column-372, .iran-first-column1, .section-home-760, .section-home-newsroom-760, .section-home-760-gapped-grand-kid, .section-home-newsroom-1080-column, .section-home-760-gapped-kid, .inv-family-container-768, .family-mini-container-column-no-gap, .mini-column-384, .section-home-more-news-text, .section-home-beyond-headlines-smaller-row-text-column, .section-home-opinion-kid-column, .opinion-title, .card-with-title, .up-next-card, .column-editors-picks > div, .iran-section-wrapper .column-574 ) > :is(h1, h2, h3, h4, h5, h6, p, time, a):where(:not(:first-child)) {
        margin-top: 8px;
    }
}

/* a little air between stacked page blocks (utility paddings still win) */

@media (max-width: 991.98px) {
    main section:not(section section) {
        padding-block: clamp(8px, 1.6vw, 16px);
    }

    .view-all a {
        display: inline-block;
        padding-block: 6px;
    }
}
