/*
 * LIU-specific mobile overrides on top of PSC.Blazor.Components.NewsTemplate.
 * Targets the public layout chrome (TopNavbar + MainNavbar). Scoped to <992px
 * so the desktop layout — which the template was originally tuned for — is
 * untouched.
 */

@media (max-width: 991.98px) {

    /* ── MainNavbar: shrink the mobile logo + tidy the spacing ─────────────
     * The template ships `class="logo-brand d-block d-lg-none w-50 my-4"`
     * on the mobile-only logo, which renders a half-viewport-wide owl with
     * 1.5rem vertical margin on every iPhone. Cap height instead so the
     * three flex children (offcanvas toggle / logo / navbar collapser) sit
     * in a normal phone header band. */
    .navbar .mob-nav-toggles .logo-brand {
        width: auto !important;
        max-width: 60%;
        margin: 0.5rem auto !important;
        text-align: center;
    }
    .navbar .mob-nav-toggles .logo-brand img {
        max-height: 44px;
        width: auto;
        height: auto;
    }

    /* The two flex siblings (offcanvas + navbar-toggler) were getting squeezed
     * off-screen by the 50%-wide logo. Force them to a fixed footprint and
     * let the logo take the remaining centre space. */
    .navbar .mob-nav-toggles {
        gap: 0.5rem;
        padding: 0 0.25rem;
    }
    .navbar .mob-nav-toggles .navbarList-icon,
    .navbar .mob-nav-toggles .navbar-toggler {
        flex: 0 0 auto;
    }

    /* ── TopNavbar: hide the empty columns ─────────────────────────────────
     * On <lg, the three Bootstrap columns (date / logo / subscribe-darklight)
     * stack vertically. LIU disables Subscribe + DarkLight and the logo
     * column is `d-none d-lg-block`, so on mobile two of the three columns
     * are empty stripes with vertical padding — that's the white gap above
     * the article. Hide them. */
    .top-navbar .col-lg-4:nth-child(2),
    .top-navbar .col-lg-4:nth-child(3) {
        display: none;
    }

    /* Compress the remaining date row */
    .top-navbar {
        padding: 0.5rem 0;
    }
    .top-navbar .date-weather {
        margin-bottom: 0 !important;
    }
}