/*
 * Homepage UI consistency layer.
 * Keeps existing section queries/layouts while providing one responsive system.
 */
:root {
    --np-home-accent: #b30611;
    --np-home-ink: #111827;
    --np-home-muted: #64748b;
    --np-home-line: #e5e7eb;
    --np-home-surface: #ffffff;
    --np-home-soft: #ffffff;
    --np-home-radius: 10px;
    --np-home-shadow: 0 3px 14px rgba(15, 23, 42, .07);
}

body.home {
    background: #ffffff;
    color: var(--np-home-ink);
    font-family: "Mukta", "Noto Sans Devanagari", sans-serif;
    text-rendering: optimizeLegibility;
}

body.home #main {
    background: #ffffff;
    overflow: clip;
}

body.home #main section {
    scroll-margin-top: 76px;
}

body.home #main section h2,
body.home #main .section-title,
body.home #main .section-title-desktop,
body.home #main .headline-section-title,
body.home #main .important-news-title-button {
    font-family: "Mukta", "Noto Sans Devanagari", sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
}

body.home #main h3,
body.home #main h4,
body.home #main h3 a,
body.home #main h4 a {
    font-family: "Mukta", "Noto Sans Devanagari", sans-serif !important;
}

body.home #main img {
    background: #eef1f4;
}

body.home #main section a,
body.home .np-home-hero a {
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}

body.home #main section a:focus-visible,
body.home .np-home-hero a:focus-visible {
    outline: 3px solid rgba(179, 6, 17, .25);
    outline-offset: 3px;
    border-radius: 4px;
}

body.home .np-home-hero {
    max-width: 1210px;
}

body.home .np-hero-story {
    padding-top: 12px;
}

body.home .np-hero-story + hr {
    border-color: var(--np-home-line);
}

body.home .hero-post-title a {
    font-family: "Mukta", "Noto Sans Devanagari", sans-serif !important;
    font-size: 62px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
}

body.home .hero-post-excerpt {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
    color: var(--np-home-muted) !important;
    font-size: 19px !important;
    line-height: 1.55;
}

body.home .hero-image-container,
body.home .hero-video-container {
    border-radius: var(--np-home-radius);
    box-shadow: var(--np-home-shadow);
}

body.home .hero-image-watermark {
    width: fit-content;
    max-width: calc(100% - 32px);
    margin: 0 auto;
    padding: 2px 8px;
    color: #b30611;
    background: rgba(255, 255, 255, .72);
    border-radius: 999px;
    text-shadow: none;
}

body.home .important-news-section {
    border: 1px solid #e9edf2;
    border-radius: 14px;
}

body.home .important-news-card {
    border: 1px solid #edf0f3;
    box-shadow: var(--np-home-shadow);
}

body.home .province-scroll,
body.home [class*="tabs"],
body.home .overflow-x-auto {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
}

body.home .province-scroll > *,
body.home [class*="tabs"] > *,
body.home .overflow-x-auto > * {
    scroll-snap-align: start;
}

@media (max-width: 1023px) {
    body.home {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    body.home #main {
        background: #ffffff;
    }

    body.home #mobile-menu-toggle,
    body.home .auth-btn {
        width: 44px !important;
        height: 44px !important;
    }

    body.home #mobile-menu-toggle svg {
        width: 28px !important;
        height: 28px !important;
    }

    body.home .auth-btn svg {
        width: 34px !important;
        height: 34px !important;
    }

    body.home #mobile-menu-toggle + div img,
    body.home .mobile-header-logo-img {
        max-height: 70px !important;
    }

    body.home #main > .container,
    body.home #main > section.container,
    body.home #main section.container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    body.home #main section {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    body.home #main section h2,
    body.home #main .section-title,
    body.home #main .section-title-desktop,
    body.home #main .headline-section-title,
    body.home #main .important-news-title-button {
        font-size: 22px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    body.home #main section h2::after,
    body.home #main .section-title::after,
    body.home #main .section-title-desktop::after {
        max-width: 72px;
    }

    body.home #main section h3,
    body.home #main section h3 a {
        line-height: 1.32 !important;
    }

    body.home #main section h4,
    body.home #main section h4 a {
        line-height: 1.35 !important;
    }

    body.home #main section img {
        border-radius: 8px;
    }

    body.home #main section .grid {
        gap: 12px;
    }

    body.home #main section [class*="shadow"] {
        box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    }

    body.home #main section [class*="tabs"] a,
    body.home #main section .province-link,
    body.home #main section .economy-tab,
    body.home #main section .overflow-x-auto > a,
    body.home .no-scrollbar > a,
    body.home #main section a[class*="rounded-full"] {
        min-height: 40px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    body.home #main section a.text-sm.font-semibold,
    body.home #main section a[class*="whitespace-nowrap"][class*="font-semibold"],
    body.home #main section a.ml-4.flex {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    body.home #main section a.block.group,
    body.home #main section a.block.text-gray-900,
    body.home #main section a.hover\:text-\[\#d11b28\],
    body.home #main section a.transition-colors:not([class*="rounded"]):not([class*="absolute"]) {
        min-height: 36px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    body.home #main section a.flex.items-start.gap-3.group {
        min-height: 44px;
        align-items: center;
    }

    body.home .np-home-hero {
        padding-right: 12px;
        padding-left: 12px;
        background: #fff;
    }

    body.home .np-hero-story {
        margin-bottom: 18px !important;
        padding: 12px 0 14px;
    }

    body.home .hero-post-title {
        padding-right: 0;
        padding-left: 0;
    }

    body.home .hero-post-title a {
        font-size: 30px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    body.home .hero-post-excerpt {
        font-size: 16px !important;
        line-height: 1.55;
        color: #526176 !important;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(148, 163, 184, .25);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .06);
        text-align: left;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) .hero-post-title {
        order: 1;
        margin: 0 !important;
        text-align: left;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) .hero-post-title a {
        font-size: 21px !important;
        line-height: 1.28 !important;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) .hero-image-container,
    body.home .np-hero-story:not(.np-hero-story-lead) .hero-video-container {
        order: 0;
        margin-top: 0 !important;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) .hero-featured-image,
    body.home .np-hero-story:not(.np-hero-story-lead) .hero-video-container {
        width: 100%;
        max-height: 184px !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) > .flex {
        order: 2;
        justify-content: flex-start;
        margin: 0 !important;
        font-size: 13px;
    }

    body.home .np-hero-story:not(.np-hero-story-lead) .hero-post-excerpt {
        order: 3;
        margin: 0 !important;
        text-align: left;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    body.home .np-home-hero > hr {
        display: none;
    }

    body.home .important-news-section {
        background: var(--np-home-soft) !important;
        border-radius: 12px;
        border-color: rgba(148, 163, 184, .25);
    }

    body.home .important-news-card {
        min-height: 0 !important;
        border-radius: 10px !important;
    }

    body.home .important-news-card .h-64 {
        height: 210px !important;
    }

    body.home .important-news-card .text-gray-600.leading-relaxed {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    body.home .live-news-scroll-container {
        max-height: none !important;
    }

    body.home .mobile-sticky-footer-shell {
        box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
    }


}

@media (max-width: 640px) {
    body.home #main section h3,
    body.home #main section h3 a {
        font-size: 18px !important;
    }

    body.home #main section h4,
    body.home #main section h4 a {
        font-size: 16px !important;
    }

    body.home #main section p,
    body.home #main section .text-gray-600,
    body.home #main section .text-gray-700 {
        font-size: 15px;
        line-height: 1.5;
    }

    body.home .np-hero-story-lead .hero-post-title a {
        font-size: 28px !important;
        line-height: 1.16 !important;
    }

    body.home .np-hero-story-lead .hero-video-container,
    body.home .np-hero-story-lead .hero-featured-image {
        max-height: 245px !important;
    }

    body.home .np-hero-story-lead .hero-post-excerpt {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        margin-top: 12px !important;
    }

    body.home .hero-image-watermark {
        max-width: calc(100% - 40px);
        padding: 1px 7px;
        font-size: 10.5px !important;
        background: rgba(255, 255, 255, .78);
    }

    body.home #main section .grid-cols-2:not(.horoscope-grid) {
        gap: 10px;
    }

    body.home .np-footer {
        margin-top: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home *,
    body.home *::before,
    body.home *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}