/* =====================================================================
   mobile-responsive.css  -  The Silicon Review (edition homepages)
   Load this LAST in <head> (after header-style.css and the inline <style>).
   It only overrides layout/spacing. Colours, fonts and branding are untouched.
   Breakpoints: 1199 / 991 / 767 / 575 / 400
   ===================================================================== */

/* ---------- 0. Base safety ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, a { overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

/* If your fixed header overlaps the first block on some phones, set the real
   header height here and uncomment:
   @media (max-width:767px){ .container-fluid.fluid-edit{ margin-top: 110px !important; } } */

/* ---------- 1. Image cards: one consistent ratio everywhere ----------
   The old 2:1 placeholder GIF made every card a different height once the
   real image loaded. Lock them all to 16:9 and crop with object-fit. */
.card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #eee;
}
.card-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.latest-news-div a[style*="aspect-ratio"] { aspect-ratio: 16 / 9 !important; }

/* Category pill: percentage padding scaled with container width */
.news-category {
    padding: 3px 8px;
    line-height: 1.4;
    margin: 10px 0 6px;
}

/* Equal-looking headlines in card grids */
.latest-news-div .heading-small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Ads never overflow their column */
.adsbygoogle { max-width: 100%; overflow: hidden; }
.tsr-banner img {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
}
.row.mb-3 > [class*="col-"] { margin-bottom: 12px; }

/* Load more buttons */
.load-more-button { min-height: 44px; padding: 10px 24px; }

/* Edition switcher: swipeable, no scrollbar */
.edition-switch-box {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.edition-switch-box::-webkit-scrollbar { display: none; }

/* Testimonials: equal height cards, no fixed bootstrap container width */
.testimonial-box .container { width: 100%; max-width: 100%; }
.owl-carousel .owl-stage { display: flex; }
.owl-carousel .owl-item { display: flex; }
.owl-carousel .single-box { width: 100%; height: auto; }

/* Videos: real 16:9 thumbnails instead of fixed 30rem height */
.yt-img img {
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
}
.yt-img { margin-bottom: 15px; }
@media (hover: none) {
    .videodiv:hover { transform: none; border: 0; }
}

/* ---------- 2. Desktop (>=992): flex rows so uneven titles never break the grid ---------- */
@media (min-width: 992px) {
    #ln, #costum-ln, #tech-ln, #sponsoredContainer {
        display: flex;
        flex-wrap: wrap;
    }
    #ln > .latest-news-div,
    #costum-ln > .latest-news-div,
    #tech-ln > .latest-news-div,
    #sponsoredContainer > .latest-news-div {
        float: none;
        padding: 0 12px 20px 0;
    }
}

/* ---------- 3. Tablet and below (<=991) ---------- */
@media (max-width: 991px) {

    /* All article grids become tidy 2-column grids */
    #ln, #costum-ln, #tech-ln, #sponsoredContainer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }
    #ln > .latest-news-div,
    #costum-ln > .latest-news-div,
    #tech-ln > .latest-news-div,
    #sponsoredContainer > .latest-news-div {
        width: auto !important;
        float: none !important;
        padding: 0 !important;
        margin: 0;
    }
    #ln > .latest-news-div > [class*="col-"],
    #costum-ln > .latest-news-div > [class*="col-"],
    #tech-ln > .latest-news-div > [class*="col-"],
    #sponsoredContainer > .latest-news-div > [class*="col-"] {
        width: 100%;
        float: none;
        padding-left: 0;
        padding-right: 0;
    }
    #costum-ln { margin-top: 30px !important; }

    /* Recent news: lead story full width, the two columns side by side */
    .flex { display: flex; flex-wrap: wrap; }
    .flex > .recent-left,
    .flex > .recent-right { float: none; }
    .flex > .recent-left { width: 100%; margin-bottom: 20px; }
    .flex > .recent-right { width: 50%; }

    /* "Featured Articles" title offset */
    h1.column-border { left: 15px !important; font-size: 22px !important; }

    /* Opinion: 2 per row (sidebar has the same bootstrap classes, so match the inline padding) */
    .col-md-3[style*="padding-left:0px"] {
        float: left;
        width: 50%;
        padding-right: 10px;
        margin-bottom: 15px;
    }

    /* Video thumbnails: 2 per row */
    .yt-img { width: 50%; float: left; }
    .yt-img > div > svg { width: 52px; height: 52px; }

    /* Politics / Sports / Entertainment / Lifestyle */
    .news-two-col .ln { display: flex; flex-wrap: wrap; }
    .news-two-col .ln > .latest-news-div { float: none; }

    /* Header date/time had margin-left:175% which breaks narrow screens */
    .header-datetime { margin-left: 0 !important; min-width: 0 !important; }

    /* Footer legal links */
    .foot-last {
        position: static !important;
        left: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 14px;
        padding: 0;
        list-style: none;
    }
    .last-footer { padding-bottom: 70px; } /* clears the sticky bottom ticker */
    .row.plpr > .col-sm-9::after { content: ""; display: table; clear: both; }

    /* Pre-footer banner */
    .imgfluid { margin-top: 4rem; }
    .headin { font-size: 28px !important; }
    .descrip { font-size: 16px !important; }
}

/* ---------- 4. Phones (<=767) ---------- */
@media (max-width: 767px) {

    .container-fluid.fluid-edit { padding-left: 12px; padding-right: 12px; }
    .row { margin-left: -12px; margin-right: -12px; }

    .column-heading.column-border { margin: 28px 0 16px; }
    .column-heading { font-size: 20px; }
    h2.column-heading > a[style*="float"] {
        float: none !important;
        display: block;
        margin-top: 4px;
    }

    .heading-big { font-size: 22px; line-height: 1.3; }
    .heading-small { font-size: 15px; line-height: 1.35; }
    .latest-news-div .heading-small { -webkit-line-clamp: 4; }

    /* Lead story */
    .recent-left{
        padding-top:0 !important;
    }
    .recent-left .heading-small {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 12px !important;
    }
    .recent-left .content {
        font-size: 14px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
    .flex > .recent-right { width: 50%; padding-left: 6px; padding-right: 6px; }
    .flex > .recent-left { padding-left: 0; padding-right: 0; }

    /* Featured: big story on top, two small ones side by side */
    h1.column-border { left: 0 !important; font-size: 20px !important; margin-bottom: 14px; }
    h1.column-border + .col-sm-12 > .col-sm-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 16px;
    }
    h1.column-border + .col-sm-12 > .col-sm-4 > .col-sm-12 {
        width: auto;
        float: none;
        padding: 0;
    }
    h1.column-border + .col-sm-12 > .col-sm-8,
    h1.column-border + .col-sm-12 > .col-sm-4 { padding-left: 0; padding-right: 0; }

    /* Opinion: still 2 up, tighter */
    .col-md-3[style*="padding-left:0px"] { padding-right: 8px; }

    /* Politics / Sports etc.: stack the two sections, 2-up cards inside */
    .news-two-col .ln {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }
    .news-two-col .ln > .latest-news-div {
        width: auto !important;
        padding: 0 !important;
    }
    .news-two-col .ln > .latest-news-div > [class*="col-"] {
        width: 100%;
        float: none;
        padding: 0;
    }
    .news-col { margin-bottom: 10px; }

    /* Magazines block spacing */
    .mag-home__desc { -webkit-line-clamp: 3; }

    /* Videos */
    .yt-img > div > svg { width: 44px; height: 44px; }
    .row.mt-5 { margin-top: 0; }

    /* Featured companies */
    .featured-grid { gap: 10px; }
    .smw { max-height: 64px; }

    /* Pre-footer banner: text sits over the mobile image, never clipped */
    .imgfluid {
        display: block !important;
        position: relative;
        overflow: hidden;
        margin: 3rem 0;
    }
    .imgfluid .mobbkgrndimg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }
    .imgfluid .textdisplay {
        position: relative;
        z-index: 1;
        height: auto;
        min-height: 320px;
        justify-content: center;
        padding: 32px 20px;
    }
    .headin { padding: 0 0 12px !important; margin: 0 !important; font-size: 22px !important; text-align: center; }
    .descrip { padding: 0 !important; font-size: 14px !important; line-height: 1.55; }
    h3{
        margin-top:0 !important;
    }
    .you-may-like-div h4 {
        font-size:19px !important;
    }
    /* Footer */
    .footer_div { padding-left: 5%; padding-right: 5%; }
    .footer-quicklinks { width: 50%; float: left; }
    .footer-quicklinks:nth-child(3) { width: 100%; }
    .footer-quicklinks ul { padding-left: 0; list-style: none; }
    .social-media { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
}

/* ---------- 5. Small phones (<=575) ---------- */
@media (max-width: 575px) {
    .recent-left{padding-top:0 !important;}
    .header-datetime { display: none; }          /* header is too tight for the clock */
    .edition-switch-label { font-size: 15px; }
    .edition-switch-links a { font-size: 13px; padding: 4px 12px 4px 5px; }
    .sidebar-tab, .sidebar-tab-divider { font-size: 18px; }
    h3{
        margin-top:0 !important;
    }
}

/* ---------- 6. Very small phones (<=400) ---------- */
@media (max-width: 400px) {
    .recent-left{padding-top:0 !important;}
    #ln, #costum-ln, #tech-ln, #sponsoredContainer { gap: 18px 12px; }
    .heading-small { font-size: 14px; }
    .news-category { font-size: 11px; }
    h3{
        margin-top:0 !important;
    }
    .you-may-like-div h4 {
        font-size:19px !important;
    }
}

/* ---------- 7. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    
    .ticker-bounce, .sticky-img, .sticky-img::before { animation: none !important; }
    .card-image.is-loaded, .videodiv:hover { transition: none; }
    h3-top{
        margin:0 !important;
    }
    
}

/* =====================================================================
   8. PHONE OVERRIDE: one card per row, larger images and type
   (kept last on purpose so it wins over the rules above)
   ===================================================================== */
@media (max-width: 767px) {

    /* --- single column everywhere --- */
    #ln, #costum-ln, #tech-ln, #sponsoredContainer,
    .news-two-col .ln,
    h1.column-border + .col-sm-12 > .col-sm-4 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }
    .flex > .recent-right,
    .flex > .recent-left,
    .col-md-3[style*="padding-left:0px"],
    .yt-img,
    .footer-quicklinks,
    .footer-quicklinks:nth-child(3) {
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .flex > .recent-right { margin-bottom: 4px; }
    .col-md-3[style*="padding-left:0px"] { margin-bottom: 26px; }
    .yt-img { margin-bottom: 22px; }

    /* --- bigger images: full width, taller ratio --- */
    .card-image { aspect-ratio: 3 / 2; }
    .latest-news-div a[style*="aspect-ratio"] { aspect-ratio: 3 / 2 !important; }
    .yt-img img { aspect-ratio: 16 / 9; }
    .yt-img > div > svg { width: 64px; height: 64px; }

    /* --- bigger, consistent type; no truncated titles --- */
    .latest-news-div .heading-small,
    .heading-small {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
        font-size: 19px !important;
        line-height: 1.35;
        
    }
    .recent-left .heading-small { font-size: 23px; line-height: 1.3; }
    .heading-big { font-size: 25px; line-height: 1.3; }
    .recent-left .content {
        font-size: 16px;
        line-height: 1.65;
        -webkit-line-clamp: 5;
    }
    .news-category { font-size: 13px; padding: 4px 10px; margin: 12px 0 8px; }
    .column-heading { font-size: 24px; }
    h1.column-border { font-size: 24px !important; }
    .mag-home__desc { font-size: 15px; -webkit-line-clamp: 5; }
    .heading-smallest { font-size: 17px; line-height: 1.4; }

    /* --- footer: stacked and centred --- */
    .footer-quicklinks { text-align: center; margin-bottom: 18px; }
    .footer-quicklinks ul { padding-left: 0; }
    h3-top{
        margin:0 !important;
    }
}

@media (max-width: 400px) {
    .heading-small { font-size: 18px; }
    .recent-left .heading-small { font-size: 21px; }
    h3-top{
        margin:0 !important;
    }
}