/* ==========================================================================
   RESPONSIVE FIXES (Oct 29 2026)
   Loaded on every page (component/meta.php). Fixes found by checking each page
   at phone (360–430px), tablet (768–1024px), laptop (1100–1440px) and large
   desktop (1920px) widths. Selectors start with "html body" so they win over
   the page stylesheets that load after this file.
   ========================================================================== */

/* 1. "Keep together" phrases (.nx-nowrap) only stay on one line on wide screens.
      On tablets and phones they were forced onto one line and ran past the edge
      (e.g. "daily macroeconomic noise." on the home page at 768px). */
@media (max-width: 991.98px) {
    html:not(#nx-home) body .nx-nowrap,
    html body .nx-nowrap { white-space: normal !important; }
}

/* 2. Home page blog card 3 title ("India's Manufacturing Transformation: …") was
      forced onto one line and was cut off on phones and on 992–1199px screens. */
@media (max-width: 1199.98px) {
    html body .nx-blog-card .nx-nowrap-inline { white-space: normal !important; }
}

/* 3. Home page research funnel: the last step ("Ideas that pass the work enter a
      portfolio…") was wider than the screen on small phones. */
html body .nx-research-funnel-wrap .nx-opt3-tier-left,
html body .nx-research-funnel-wrap .nx-opt3-tier-info { min-width: 0; max-width: 100%; }
html body .nx-research-funnel-wrap .nx-opt3-tier-info p { max-width: 100%; overflow-wrap: break-word; }

/* 3b. Home page "Fund at a Glance": the four figures need about 1,240px in one row.
       On small laptops and landscape tablets (992–1259px) the 4th box (Team
       experience) ran off the right edge, so they sit two by two there. */
@media (min-width: 992px) and (max-width: 1259.98px) {
    html body .nx-numbers-band .nx-numbers-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 42px !important; }
}

/* 4. Investor Guide comparison table (AIF vs PMS vs MF): on tablets and phones the
      820px-wide table had to be swiped sideways and the PMS / MF columns were off
      screen. Below 992px each row becomes a card with the three funds stacked,
      each labelled. */
@media (max-width: 991.98px) {
    html body .nxw-compare .nxw-table-wrap { overflow: visible !important; border: 0 !important; border-radius: 0 !important; }
    html body .nxw-compare .nxw-table { display: block !important; min-width: 0 !important; width: 100% !important; overflow: visible !important; }
    html body .nxw-compare .nxw-table thead { display: none !important; }
    html body .nxw-compare .nxw-table tbody { display: block !important; }
    html body .nxw-compare .nxw-table tbody tr {
        display: block !important;
        margin: 0 0 20px;
        border: 1px solid #e0eaf1;
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
        opacity: 1 !important;
        transform: none !important;
    }
    html body .nxw-compare .nxw-table tbody tr:last-child { margin-bottom: 0; }
    html body .nxw-compare .nxw-table tbody th[scope="row"] {
        display: block !important;
        width: auto !important;
        padding: 14px 18px !important;
        background: #0a1322 !important;
        color: #fff !important;
        font-size: 13px !important;
        letter-spacing: .14em;
        text-transform: uppercase;
        border: 0 !important;
    }
    html body .nxw-compare .nxw-table tbody td {
        display: block !important;
        width: auto !important;
        padding: 14px 18px 16px !important;
        border: 0 !important;
        border-top: 1px solid #eef3f7 !important;
        background: #fff !important;
    }
    html body .nxw-compare .nxw-table tbody td[data-col="a"] { background: #f0f7fb !important; }
    html body .nxw-compare .nxw-table tbody td::before {
        display: block;
        margin: 0 0 6px;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #2b6c93;
    }
    html body .nxw-compare .nxw-table tbody td[data-col="a"]::before { content: "Alternative Investment Funds (AIFs)"; }
    html body .nxw-compare .nxw-table tbody td[data-col="b"]::before { content: "Portfolio Management Services (PMS)"; }
    html body .nxw-compare .nxw-table tbody td[data-col="c"]::before { content: "Mutual Funds (MFs)"; }
    html body .nxw-compare .nxw-table tbody tr:hover th,
    html body .nxw-compare .nxw-table tbody tr:hover td { background: inherit; }
}

/* 5. Very small text on phones: lift the smallest labels to at least 12px. */
@media (max-width: 767.98px) {
    html body .nexus-footer-legal,
    html body .nexus-footer-legal a,
    html body .nexus-footer-updated { font-size: 12px !important; }
    html body .nx-form-reassurance span { font-size: 12px !important; }
    html body .nxa-film-role { font-size: 12px !important; }
}

/* 6. Long words / URLs never push a page wider than the screen. */
html body .blog-details-content,
html body .nxg-hero-title,
html body .footer-widget-section { overflow-wrap: break-word; }

/* 7. Blog posts: less empty space between the title and the start of the article.
      It was about 220px (96px under the title + 100px at the top of the article
      section + 26px above the first paragraph). The sidebar ("Share Now") was also
      pushed 100px lower than the text; it now lines up with the first paragraph
      and stays in view while reading. Only pages with a blog article are affected. */
html body.nxg-page:has(.blog-details) .nxg-hero { padding-bottom: clamp(30px, 3vw, 48px); }
html body.nxg-page section.blog-details.sec-pad { padding-top: clamp(30px, 3.5vw, 56px) !important; }
html body.nxg-page .blog-details .blog-details-content .text-box > p:first-child,
html body.nxg-page .blog-details .blog-details-content > :first-child { margin-top: 0 !important; }
html body.nxg-page .blog-details .row > .sidebar-side { position: sticky; top: 110px; }
@media (max-width: 991.98px) {
    html body.nxg-page .blog-details .row > .sidebar-side { position: static; top: auto; margin-top: 30px; }
}
/* the first paragraph of each post is indented 80px; on phones that left a wide empty strip */
@media (max-width: 767.98px) {
    html body.nxg-page .blog-details .blog-details-content .text-box > p:first-child { padding-left: 0 !important; }
}