/* ═══════════════════════════════════════════════════════════════════════════
   BACHPAN MOBILE RESPONSIVE OVERRIDES
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST in _Layout.cshtml — every rule here intentionally wins the
   cascade against earlier desktop-first declarations. Keep mobile-only
   tweaks here so they remain co-located and easy to diff/rollback.

   Breakpoints used:
     ≤767px  → phones (single column, full-width CTAs, hide topbar tagline)
     ≤480px  → tight phones (smaller hero typography, reduce paddings)
     ≤360px  → ultra-narrow (extra padding cuts)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global guards ────────────────────────────────────────────────────────
   img/iframe/embed should never punch through their parent on mobile —
   prevents random embedded content (advertisements, share previews) from
   widening the document past 100vw and triggering the bp-utilities
   horizontal-scroll clip. */
@media (max-width: 767px) {
    img, iframe, embed, object, video, svg {
        max-width: 100%;
        height: auto;
    }
    /* Long unbreakable strings (slugs, URLs, sanskrit) should wrap rather
       than push the column wider than the viewport. */
    .bp-hero-name,
    .bp-hero-name-native,
    .bp-hero-deva,
    .bp-hero-meaning,
    .bmc-name,
    .bmc-deva,
    .bmc-meaning {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 1 — Rashi/Nakshatra calculator (/find-rashi-nakshatra)
   ─── The submit CTA was clipping past the form-card's right edge because
   ─── btn-bp-lg (52px tall, 28px side padding) was wider than the card on
   ─── 360-390px phones. Shrink the card padding and let the CTA grow full
   ─── width with shorter side padding so the icon + label always fit.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bp-form-card { padding: 16px; }
    .bp-calc-form .btn-bp-lg {
        width: 100%;
        padding: 14px 16px;
        font-size: .95rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 3 — /advertise (StaticPages/Advertise.cshtml)
   ─── The 4-up stat row, the country-code phone group, and the textarea
   ─── all push the form past the right edge on mobile. The base @media in
   ─── bachpan-utility.css already collapses the 2-col grid to 1-col, but a
   ─── few children still need explicit width: 100% so they don't overflow.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .adv-form-card { padding: 1.25rem; }
    .adv-form-card .util-input,
    .adv-form-card .util-select,
    .adv-form-card .util-textarea { width: 100%; min-width: 0; }
    /* Country-code select must shrink to flag+code only (e.g. "🇮🇳 +91")
       so the phone-number input keeps usable width. */
    .util-phone-group { display: flex; gap: .4rem; }
    .util-phone-group .util-phone-cc { flex: 0 0 96px; min-width: 0; }
    .util-phone-group .util-phone-num { flex: 1 1 auto; min-width: 0; }
    /* Stat row already 2x2 from the existing rule — just ensure the cards
       don't have a fixed pixel width that breaks the grid. */
    .adv-stat { padding: .65rem .4rem; min-width: 0; }
    .adv-stat-num { font-size: 1rem; }
    /* Submit button — full width is cleaner on phones than inline. */
    .adv-form-card .util-btn-submit { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 5 — /search "Best Match" card (Views/Search/Index.cshtml .bmc-*)
   ─── .bmc-actions is a non-wrapping flex row; the "View full details"
   ─── pill + two outline pills ("Meaning", "Numerology") overflow on
   ─── phones, and the round border-radius clips the text inside the CTA.
   ─── Allow wrapping, let the primary CTA take the full first row, and
   ─── put the secondary tabs on the second row.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .bmc-inner { padding: 1rem; }
    .bmc-name { font-size: 1.65rem; line-height: 1.1; }
    .bmc-actions {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .75rem 1rem;
    }
    .bmc-cta {
        flex: 1 1 100%;
        justify-content: center;
        height: 40px;
        padding: 0 .75rem;
        white-space: nowrap;
    }
    .bmc-tab {
        flex: 1 1 calc(50% - .25rem);
        justify-content: center;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 6 — Name detail (/baby-names/{slug}) and language-prefixed variant
   ─── (/{lang}/baby-names/{slug}). Both share .bp-page--detail + .bp-name-
   ─── hero markup, so a single set of overrides covers both.
   ─── Issues fixed:
   ─── • hero padding too wide on phones (1.5rem each side)
   ─── • absolute-positioned share/favourite buttons collide with the name
   ─── • Devanagari/native script font (1.2rem) wraps past the card edge
   ─── • prev/next sibling navigation cramped on small screens
   ─── • astro strip (Rashi · Nakshatra · Lucky No.) doesn't fold cleanly
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Page wrapper — keep horizontal padding usable but tighter than desktop. */
    .bp-page--detail { padding-top: .75rem; padding-bottom: 2rem; }
    .bp-page { padding: 0 1rem; }

    /* Hero card */
    .bp-name-hero {
        padding: 1rem 1rem .85rem;
        margin-bottom: 1rem;
    }
    /* Promote actions out of absolute positioning at ≤480 already — extend
       that to ≤767 so the share/favourite buttons no longer overlap long
       names. Inline at top-right with the rest of the hero content. */
    .bp-name-actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: .35rem;
        gap: .4rem;
    }
    .bp-hero-name { padding-right: 0; font-size: 2rem; }
    .bp-hero-name-native { font-size: 1.85rem; line-height: 1.2; }
    .bp-hero-deva { font-size: 1rem; }
    .bp-hero-english-label { font-size: .9rem; }
    .bp-hero-meaning { font-size: .92rem; padding: .6rem .8rem; }

    /* Badges — smaller, tighter so 5+ chips fit two rows max */
    .bp-hero-badges { gap: .25rem; }
    .bp-hbadge { padding: .2rem .55rem; font-size: .65rem; }

    /* Prev/next sibling nav — names can be long; let them ellipsize rather
       than push the centre label off-screen. */
    .bp-name-nav { padding: .6rem .75rem; gap: .4rem; }
    .bp-nnav-btn { font-size: .72rem; padding: .25rem .5rem; max-width: 38%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .bp-nnav-center { font-size: .65rem; text-align: center; flex: 1 1 auto; min-width: 0; }

    /* Astro strip — the design-system CSS already folds the 3-up row to
       2-up at ≤500px (line ~1532 in bachpan-design-system.css). Don't
       duplicate that here; just guard the labels from clipping at 501-767. */
    .bp-as-item { padding: .5rem .65rem; }
    .bp-as-val { font-size: .78rem; }

    /* Sections — reduce side padding so content sits closer to the screen
       edge without losing all breathing room. */
    .bp-section { padding: 1rem 1.1rem; margin-bottom: 1rem; }

    /* Variant + Similar names grids — ensure cards never exceed viewport */
    .variant-names-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .45rem; }
    .sim-names-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }

    /* Stat dashboard — keep 2-up on small screens (base CSS already does
       this), just shrink the card padding. */
    .bp-stat-card { padding: .7rem .55rem; }
    .bp-stat-icon { width: 34px; height: 34px; font-size: 1rem; }

    /* Inline ad placeholder — never push the layout wider than parent */
    .bp-inline-ad { height: 60px; margin-bottom: 1rem; }
    .bp-inline-ad,
    .bp-inline-ad * { max-width: 100%; overflow: hidden; }

    /* Language context bar (LanguageDetail) — stack the link below the
       label rather than crowding the row. */
    .bp-lang-context-bar { flex-wrap: wrap; gap: .35rem; padding: .55rem .85rem; font-size: .8rem; }
}

@media (max-width: 480px) {
    .bp-hero-name { font-size: 1.7rem; }
    .bp-hero-name-native { font-size: 1.55rem; }
    .bp-name-hero { padding: .85rem .9rem .75rem; }
}

/* ── Fix 31 (2026-05-21 mobile audit issue #23): Name Detail page
   responsive overhaul ──
   Existing mobile rules above shrink padding + font sizes, but several
   elements still bled past viewport on the live site:
   - Prev/next sibling nav (.bp-name-nav) — the right-hand link with a
     long next-name overflowed because flex was nowrap.
   - Hero meaning box (.bp-hero-meaning) — long English words like
     "responsible" weren't breaking, content clipped.
   - Badge row (.bp-hero-badges, .bp-hbadge) — the "Mesha Rashi" chip
     wrapped to a wider second row but the row itself overflowed because
     the badges weren't allowed to stretch line-width-wise.
   - Astro/Lucky stat cards (.bp-stat-grid) — at 3-up on a 360px viewport
     the third card got clipped. Force 1 col below 420px so each card
     gets full breathing room. */
@media (max-width: 575.98px) {
    .bp-name-nav {
        flex-wrap: wrap;
        row-gap: .35rem;
    }
    .bp-nnav-btn { max-width: 100%; flex: 1 1 auto; }
    .bp-nnav-center { flex-basis: 100%; order: -1; }
    .bp-hero-meaning,
    .bp-hbadge,
    .bp-stat-val,
    .bp-as-val {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .bp-hero-badges { flex-wrap: wrap; max-width: 100%; }
    /* Both Detail.cshtml (.bp-astro-strip) and LanguageDetail.cshtml
       (.bp-stat-grid) house the Rashi / Nakshatra / Lucky cards; treat
       them the same. .bp-astro-strip is a flex container — its base CSS
       already 50%-stacks at <=500px so it's fine; just guard the values
       from clipping at 501-575. */
    .bp-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .bp-astro-strip { flex-wrap: wrap; }
    .bp-astro-strip .bp-as-item { min-width: 0; flex: 1 1 50%; }
}
@media (max-width: 419px) {
    /* Very narrow phones — drop the stat row to 1-up so labels + values
       fit without truncation. */
    .bp-stat-grid { grid-template-columns: 1fr; }
    .bp-astro-strip .bp-as-item { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--bp-border); }
    .bp-astro-strip .bp-as-item:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 8 — Home topbar / header polish
   ─── The pending uncommitted change in bachpan-design-system.css already
   ─── hides the left-side tagline + Advertise/Suggest links on phones and
   ─── hides .nav-register below 960px. This block adds the remaining
   ─── breathing room and ensures Preferences + Language dropdown both
   ─── remain reachable without clipping.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Right cluster — squeeze gaps so the Preferences pill + Language
       dropdown both fit on a 344px viewport. */
    .bp-topbar-right { flex-wrap: nowrap; gap: .35rem; }
    /* Preferences = icon only on mobile (label hidden, square tap target). */
    .bp-topbar-prefs { padding: .3rem; font-size: .65rem; }
    .bp-topbar-prefs span { display: none; }
    .bp-topbar-prefs svg { width: 15px; height: 15px; }
    /* Language dropdown — keep visible inside the viewport. The dropdown
       panel itself needs to anchor to the right edge so the open menu
       doesn't overflow off-screen to the right. */
    .bp-lang-wrap .bp-lang-dropdown,
    .bp-lang-wrap .bp-nav-dropdown {
        right: 0;
        left: auto;
        max-width: calc(100vw - 1rem);
    }

    /* Header row — login/register row tightening. .nav-login is already
       hidden below 576px and .nav-register below 960px (existing rules);
       just make sure the remaining right-cluster (search/saved/recently-
       viewed/hamburger) doesn't crowd. */
    .bp-nav-right { gap: .3rem; }
    .nav-icon-btn { width: 36px; height: 36px; }

    /* Mobile nav drawer must surface Login/Register since the header
       button is hidden — add the two links to the existing drawer
       header section. Markup change in _Header.cshtml. */
    .bp-mob-drawer-auth {
        display: flex;
        gap: .5rem;
        padding: 12px 16px;
        border-bottom: 1px solid var(--bp-border-light, #e5e7eb);
    }
    .bp-mob-drawer-auth a {
        flex: 1 1 50%;
        text-align: center;
        padding: .55rem .75rem;
        border-radius: var(--r-md, 10px);
        font-size: .82rem;
        font-weight: 600;
        text-decoration: none;
    }
    .bp-mob-drawer-auth .bp-mob-login {
        border: 1.5px solid var(--bp-border-md, #D0CBC3);
        color: var(--bp-text-1, #1A1A1A);
        background: transparent;
    }
    .bp-mob-drawer-auth .bp-mob-register {
        background: var(--bp-register, #e08d12);
        color: #fff;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Misc utility — long form titles ("Suggest a Baby Name", "Reach 2M+…")
   keep wrapping cleanly on phones without ragged ugly breaks.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .contact-info-title,
    .adv-hero-title,
    .suggest-form-title { line-height: 1.25; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCREEN 7 — Browse listing (/hindu, /muslim, etc., /{religion}/baby-{gender}-names)
   ─── The page renders Views/Names/NameList.cshtml. Three problem areas:
   ───   1. The alphabet grid (.bp-lf / .bp-lf--counts) wraps to 5-6 rows,
   ───      eating most of the first scroll.
   ───   2. Religion (.religion-strip / .rs-chip) + Gender (.bp-gender-tabs)
   ───      wrap with the Sikh chip landing alone on row 2.
   ───   3. Pagination spreads across two rows and the "Per page" selector
   ───      pushes off-screen.
   ─── Convert the dense rows to horizontal scroll snaps + hide non-essential
   ─── pagination chrome on phones.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Religion strip — one horizontal scroll row, no wrap. Same treatment
       for the .bp-gender-tabs pill group that sits beside it. */
    .religion-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .35rem;
        padding-bottom: .25rem;
    }
    .religion-strip::-webkit-scrollbar { display: none; }
    .religion-strip .rs-chip {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: .7rem;
        padding: .28rem .7rem;
    }
    .religion-strip .rs-label { flex-shrink: 0; }

    /* Gender tabs — keep on their own line below any sibling controls.
       Underline style stays left-aligned (do not stretch full-width — the
       baseline border is meant to stop at the last tab, not span the row). */
    .bp-gender-tabs { width: 100%; margin-top: .35rem; flex-wrap: wrap; }
    .bp-gender-tabs__btn {
        padding: .42rem .8rem;
        font-size: .7rem;
    }
    .bp-gender-tabs__hint { font-size: .55rem; padding-bottom: .35rem; }
    .bp-lang-controls__left { width: 100%; }
    .bp-lang-controls { flex-direction: column; gap: .35rem; }

    /* Alphabet / syllable grid — wraps to multiple rows on phones (header
       optimization 2026-05-23). Previously this row was forced to
       horizontal-scroll on phones to save vertical space; the header
       redesign requires every option visible without panning, so the row
       wraps the same way it does on desktop. */
    .bp-lf,
    .bp-lf--counts {
        gap: .3rem;
        margin-bottom: .75rem;
    }
    .bp-lf--counts .bp-lf-btn__count { font-size: .5rem; }

    /* Sort pills — horizontal scroll if they exceed the viewport width. */
    .bp-sort-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }
    .bp-sort-pills::-webkit-scrollbar { display: none; }
    .bp-sort-pill { flex-shrink: 0; white-space: nowrap; }

    /* Pagination (2026-05-21 mobile audit issue #17) — unified across
       Search, Browse, Name list, Rashi/Nakshatra/Numerology detail
       (they all share Views/Shared/_Pagination.cshtml; the partial wraps
       the "Prev"/"Next" word in .bp-page-label and the chevron in
       .bp-page-arrow, so on phones we hide the word and show only the
       chevron to keep the row fitting one line). Bumps button tap
       targets to 36×36 with .35rem gap for finger-friendly spacing. */
    .bp-pagination-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        padding: 1rem 0 .5rem;
    }
    .bp-pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: center;
        gap: .35rem;
        padding-bottom: .15rem;
    }
    .bp-pagination::-webkit-scrollbar { display: none; }
    .bp-page-btn {
        flex-shrink: 0;
        min-width: 36px;
        height: 36px;
        font-size: .82rem;
        padding: 0 .5rem;
    }
    .bp-page-btn.prev-next { min-width: 36px; padding: 0; }
    .bp-page-btn.prev-next .bp-page-label { display: none; }
    .bp-page-btn.prev-next .bp-page-arrow { font-size: 1.1rem; font-weight: 600; line-height: 1; }
    .bp-page-info { font-size: .75rem; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL hardening (Fix 12 in prompt-mobile-fixes.md)
   ─── These rules apply on every mobile page regardless of route, catching
   ─── edge cases like wide images, ad iframes, native form-control zoom on
   ─── iOS Safari, and inline width:Npx styles inherited from third-party
   ─── snippets. bp-utilities.css already provides `html, body { overflow-x:
   ─── hidden }` so we don't repeat that — but we DO ensure form controls
   ─── default to ≥16px font-size so iOS doesn't auto-zoom on focus, which
   ─── triggers the "ng.bachpan.com" address bar overlap users reported.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* iOS zoom-on-focus prevention — fires when input font-size < 16px.
       Excludes range inputs (which size from track height, not text). */
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 1rem;
    }
    /* Tables — scroll horizontally inside their wrapper rather than push the
       page wider. Keeps tabular data legible on phones. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* Ad slots / iframes — never wider than the viewport (catches Google
       AdSense responsive units that occasionally inject a fixed width). */
    iframe,
    [class*="advertisement"],
    [class*="ad-slot"],
    [id*="google_ads"] {
        max-width: 100%;
        overflow: hidden;
    }
    /* Inline width on a stray element shouldn't break the page — clamp to
       100% so legacy style="width:1000px" snippets render safely. */
    [style*="width:"][style*="px"] { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 2 — prompt-mobile-fixes-2.md (Screens 9–28)
   ───────────────────────────────────────────────────────────────────────────
   Each block below is keyed to a screen in errors/mobile/ and uses real class
   names from the codebase (NOT the speculative ones from the prompt).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix 9: floating feedback launcher overlaps bottom-nav + right CTAs ──
   .bp-fb__launcher base CSS sits at bottom: 1.75rem (28px), which falls
   *inside* the 56px .bachpan-bottom-nav. On phones we raise it above the
   nav AND move it to the bottom-LEFT so it stops covering right-side
   primary CTAs (hero "Search" button, ❤ favourite, "Next ›" pagination).
   Also drop the pulsing ring on phones — it draws the eye away from
   primary content on small screens. */
@media (max-width: 767px) {
    .bp-fb__launcher {
        bottom: 4.75rem;
        left: 1rem;
        right: auto;
        width: 40px;
        height: 40px;
        z-index: 1100;
    }
    .bp-fb__launcher-icon { width: 18px; height: 18px; }
    .bp-fb__launcher::after { display: none; }
}

/* ── Fix 10: per-page selector compact on mobile ──
   The first pass hid .bp-per-page entirely (display: none). Show it as a
   compact horizontal row instead so users can still bump page size. */
@media (max-width: 767px) {
    .bp-pagination-wrap .bp-per-page {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .68rem;
        color: var(--bp-text-3);
        justify-content: center;
    }
    .bp-pagination-wrap .bp-per-page .bp-page-btn {
        min-width: 28px;
        height: 28px;
        font-size: .68rem;
        padding: 0 .35rem;
    }
}

/* ── Fix 11: feedback modal — Cloudflare Turnstile pushes Submit off-screen ──
   The modal opens with progressive panels + the Turnstile widget at the
   bottom. On phones the modal sits at the bottom edge (per feedback-widget
   .bp-fb__overlay { align-items: flex-end }), so the footer scrolls off
   below the bottom-nav. Cap the modal height, allow inner scroll, and
   pin the footer (Skip / Back / Next) so the primary button stays tappable. */
@media (max-width: 767px) {
    .bp-fb__modal {
        max-height: calc(100vh - 4rem);
        display: flex;
        flex-direction: column;
    }
    .bp-fb__panel { overflow-y: auto; }
    .bp-fb__captcha { transform: scale(.9); transform-origin: left center; }
    /* Footer pinned to the bottom of the modal — always visible regardless
       of how far the user scrolls through chip lists or success banners. */
    .bp-fb__footer {
        position: sticky;
        bottom: 0;
        background: var(--bp-surface, #fff);
        border-top: 1px solid var(--bp-border, #EAE6E1);
        padding: .65rem .75rem;
        z-index: 2;
    }
}

/* ── Fix 13 + 16: logged-in user dropdown + truncated name in topbar ──
   .bp-user-wrap is in the main nav row (Components/Navigation/Default.cshtml).
   .bp-user-name "chetan" overflows to "C ch..." on narrow phones, and the
   dropdown panel opens beyond the right edge. Hide the name (avatar is
   self-explanatory), and anchor the open dropdown to the right side so
   the menu stays inside the viewport. */
@media (max-width: 767px) {
    .bp-user-wrap .bp-user-name { display: none; }
    .bp-user-wrap .bp-user-chevron { display: none; }
    /* Match the 30x30 icon-button cluster (.nav-icon-btn / .bp-rv-btn). */
    .bp-user-wrap .bp-user-avatar { width: 30px; height: 30px; font-size: .72rem; flex-shrink: 0; }
    .bp-user-wrap .bp-user-btn { padding: 0; gap: 0; background: transparent; border: none; }
    .bp-user-wrap .bp-user-dropdown {
        right: 0;
        left: auto;
        min-width: 220px;
        max-width: calc(100vw - 1.25rem);
        z-index: 1050;
    }
}

/* ── Fix 14: regional language alphabet grids (Vowels + Consonants) ──
   Compact 40x38 tiles wrap across multiple rows. Header optimization
   2026-05-23: wraps on phones (no horizontal scroll) per spec Change 4
   and the mock — Consonants take 3–4 rows on phones, expected. */
@media (max-width: 767px) {
    .bp-lang-alpha-grid {
        gap: 4px;
        padding: .15rem 0 .5rem;
        margin-bottom: 1rem;
    }
    .bp-lang-section-label { margin: .5rem 0 .3rem; font-size: .58rem; }
}

/* ── Fix 15: list-view name row — lucky number clipped at right edge ──
   _NameRow.cshtml flex layout: name + badge + meaning(flex:1) + share +
   fav + num. On phones the meaning expands too far and pushes the lucky
   number past the viewport. Tighten paddings, drop the meaning's min-width
   so it can shrink, and ensure the lucky-num box stays put. */
@media (max-width: 767px) {
    .bp-name-row {
        padding: .55rem .6rem;
        gap: .5rem;
    }
    .bp-name-row .bp-row-name { font-size: .9rem; min-width: 0; flex-shrink: 1; }
    /* Meaning stays visible on phones (header optimization fixes 2026-05-23).
       The 575.98px wrap rule (Wave 9 below) reflows it onto its own line so it
       reads cleanly without truncation. */
    .bp-name-row .bp-row-badge { font-size: .55rem; padding: 2px 6px; }
    .bp-name-row .bp-row-fav,
    .bp-name-row .bp-row-share { width: 26px; height: 26px; }
    .bp-name-row .bp-row-num { min-width: 26px; height: 26px; font-size: .68rem; margin-right: 2px; }
}

/* ── Fix 17: footer grid — 1 col → 2 col on phones ──
   .bp-footer-grid base is 1-col below 576px (no breakpoint). Force 2-col
   on phones so the 5 link columns occupy 3 rows instead of 5. First child
   (brand + tagline) keeps the full width. */
@media (max-width: 575.98px) {
    .bp-footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem .85rem;
    }
    .bp-footer-grid > :first-child {
        grid-column: 1 / -1;
    }
    .bp-footer-link { font-size: .78rem; line-height: 1.85; }
    .bp-footer-col-title { font-size: .68rem; margin-bottom: .35rem; }
    .bp-footer-bottom { flex-direction: column; gap: .35rem; text-align: center; }
}

/* ── Fix 19: NameDetail numerology section — circle position + truncation ──
   .bp-num-detail is a flex row; on phones the description block (.bp-num-
   info) can run 12+ visual lines, pushing the entire next section below
   the fold. Clamp to 4 lines by default; the See more toggle below it
   (added via bachpan-ui.js inside the same fix) flips the .expanded class. */
@media (max-width: 767px) {
    .bp-num-detail {
        flex-direction: row;
        align-items: flex-start;
        gap: .75rem;
    }
    .bp-num-circle { flex-shrink: 0; width: 44px; height: 44px; align-self: flex-start; }
    .bp-num-big { font-size: 1.35rem; }
    .bp-num-info { flex: 1; min-width: 0; }
    .bp-num-info > p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .85rem;
        line-height: 1.55;
    }
    .bp-num-info > p.expanded {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }
    .bp-num-traits { gap: .3rem; }
    .bp-num-trait { font-size: .65rem; padding: .2rem .55rem; }
    .bp-num-see-more {
        background: none; border: none; padding: .25rem 0;
        color: var(--bp-nav, #0077B6);
        font: 600 .75rem/1 'Poppins', sans-serif;
        cursor: pointer; margin-top: .2rem;
    }
}

/* ── Fix 20: NameDetail Krishna — badge row + meaning chips overflow ──
   Already covered the hero overflow in round 1; this strengthens the
   guard for very long Religion / Origin / Lucky-No combinations. */
@media (max-width: 767px) {
    .bp-hero-badges { max-width: 100%; }
    .bp-hero-badges .bp-hbadge {
        max-width: calc(50vw - 1.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Meaning section chips (Water / Rivers, Celebrity Inspired, Short &
       Sweet) sit in .bp-sort-pills on the detail page too — same wrap. */
    .bp-section .bp-sort-pills { flex-wrap: wrap; }
}

/* ── Fix 21: horizontal-scroll fade affordance ──
   .religion-strip and .bp-sort-pills hide their scrollbars on phones; a
   fade gradient on the right edge signals "more to swipe."
   (.bp-lf / .bp-lf--counts / .bp-lang-alpha-grid wrap on phones now, so
   they no longer need the fade — header optimization 2026-05-23.) */
@media (max-width: 767px) {
    .religion-strip,
    .bp-sort-pills {
        position: relative;
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
}

/* ── Fix 23: hub hero card too tall on mobile ──
   Views/Shared/_HubHero.cshtml renders .bp-page-hero with title, desc,
   stats, and an optional pills row (.bp-hub-quick-browse). On phones the
   hero fills 80%+ of the first viewport. Shrink padding/typography and
   hide the secondary pills row on phones (the pills are duplicated below
   the hero card on every hub page, so hiding them here is loss-free). */
@media (max-width: 767px) {
    .bp-page-hero { padding: 1rem 1.1rem; }
    .bp-page-hero .bp-hero-icon { width: 38px; height: 38px; font-size: 1.1rem; flex-shrink: 0; }
    .bp-page-hero .bp-hero-title { font-size: 1.15rem; line-height: 1.2; }
    .bp-page-hero .bp-hero-desc {
        font-size: .8rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .bp-page-hero .bp-hero-stats { gap: .85rem; margin-bottom: .65rem; }
    .bp-page-hero .bp-hero-stat-num { font-size: 1.15rem; }
    .bp-page-hero .bp-hero-stat-lbl { font-size: .62rem; }
    .bp-page-hero .bp-hub-quick-browse { display: none; }
}

/* ── Fix 24: My Profile page paddings ──
   Account/Profile.cshtml uses .bp-page wrapper. Just tighten the avatar
   block + ensure form fields stretch full width on mobile. */
@media (max-width: 767px) {
    .bp-page .bp-form-card { padding: 1rem; }
    .bp-page .form-control,
    .bp-page select.form-select { font-size: 1rem; height: 44px; }
    .bp-page textarea.form-control { height: auto; min-height: 100px; }
}

/* ── Fix 25/26: Contact Us + Cloudflare Turnstile inline ──
   .util-form-row-2 already collapses on phones (see bachpan-utility.css).
   Just constrain Turnstile widget to the form width so it doesn't push
   the Submit button off the right edge on very narrow viewports. */
@media (max-width: 767px) {
    .cf-turnstile,
    [class*="turnstile"] {
        max-width: 100%;
        overflow: hidden;
    }
    .cf-turnstile iframe,
    [class*="turnstile"] iframe { max-width: 100%; }
}

/* ── Fix 27: home page — Name of the Day + Trending ──
   .bp-notd is the hero card; date badge wraps oddly on phones. .bp-trending
   list rows put meaning beside name — meaning should ellipsize. */
@media (max-width: 767px) {
    .bp-notd { padding: 1rem; }
    .bp-notd-hdr { flex-wrap: wrap; gap: .35rem; }
    .bp-notd-date { font-size: .65rem; }
    .bp-notd-name { font-size: 1.6rem; line-height: 1.1; }
    .bp-notd-meaning {
        font-size: .82rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Grid shrink guard — .bp-two-col collapses to a single 1fr column on
       phones, but grid items default to min-width:auto (= min-content), so the
       track sized to the Trending cell's min-content (the white-space:nowrap
       meaning + the Boys/Girls tab row) and that over-wide track applied to
       BOTH cells — dragging the Name-of-the-Day AND Trending cards past 100vw
       (right edge + "Girls" tab clipped in the screenshot). Same root cause +
       fix as Fix 28b. Let the cells and trend rows shrink to the container so
       the meaning ellipsizes inside the card instead of widening it.
       Scoped to .bp-two-col, which is used only on the homepage. */
    .bp-two-col > * { min-width: 0; }
    .bp-two-col .bp-trend-item { min-width: 0; }
    .bp-two-col .bp-trend-name { min-width: 0; }
    /* Trending rows — keep number circle + name visible, ellipsize meaning */
    .bp-trending .bp-trend-meaning,
    .bp-trending [class*="meaning"] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .72rem;
    }
}

/* ── Fix 28: Advertise — body copy clipping at right ──
   Body copy was clipping because adv-hero-sub had no padding guard. The
   .adv-layout mobile rule (bachpan-utility.css @media) already gives the
   container 1rem horizontal padding, but long unbreakable words (e.g.
   "engaged" + comma) still pushed past via overflow:hidden on the page.
   Add overflow-wrap to all advertise hero text. */
@media (max-width: 767px) {
    .adv-hero-sub,
    .adv-feat-sub,
    .adv-feat-title {
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .contact-info-sub,
    .sug-step-text,
    .sug-stats-list,
    .sug-stats-list li {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* ── Fix 28b: /advertise + /community/suggest-name — grid item shrink guard ──
   Both pages use a 2-col CSS grid that collapses to 1-col on mobile. Grid
   items default to `min-width: auto` (= min-content), so when the form
   column contains a min-content-wide child (Turnstile widget at 300px,
   .adv-form-card with 2rem padding, .util-select min-content from longest
   option, etc.) the grid track expands beyond 100vw. With a single 1fr
   column, that expanded track width applies to BOTH grid items, so the
   info/pitch column above the form inherits the over-wide track and its
   paragraph text overflows the viewport. The page-level overflow-x:hidden
   guard on html/body then clips the right edge — visible as "engage[d]",
   "purchasing", "review and ad[d]" etc. cut off in the screenshots. Force
   each grid item to allow shrinking below its min-content size. */
@media (max-width: 767px) {
    .adv-layout > *,
    .suggest-layout > * {
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ROUND 3 — prompt-mobile-fixes-3.md
   ───────────────────────────────────────────────────────────────────────────
   Three persistent issues:
     A. Submit / Sign-In buttons crowded by the 56px .bachpan-bottom-nav.
     B. .bp-fb__launcher floating button half-hidden behind the bottom nav
        (root cause: feedback-widget.css was loading AFTER this file, so the
        base bottom: 1.75rem rule won the cascade. Fixed in _Layout.cshtml by
        re-ordering the stylesheet links — this file is now loaded last.)
     C. Name detail page horizontal overflow on long names (Krishna, Aafa).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix A: Bottom-nav clearance for ALL pages and content modals ──
   Existing rule at line 2207 of bachpan-design-system.css sets
   `body { padding-bottom: 56px }` below 991px — exactly equal to the nav
   height. Submit buttons sitting near the bottom of a card therefore press
   flush against the nav with zero breathing room. Bump to 84px (56 nav +
   28 breathing room + safe-area-inset for notched devices). */
@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(56px + 28px + env(safe-area-inset-bottom, 0px));
    }
    /* Auth pages — Sign In / Register / Forgot Password all share .auth-page
       and put the submit CTA inside .auth-card. The card already has its own
       padding, but on phones the card sits hard against the screen edge, so
       give the page wrapper a final 1rem buffer below the card. */
    .auth-page {
        padding-bottom: 1rem;
    }
    /* Preferences page (Account/Preferences.cshtml) lives inside a .bp-page
       wrapper. The "Save Preferences" button is the last child, so the body
       padding above already protects it — no extra rule needed here. */
}

/* ── Fix A2: Suggest-an-Edit modal — submit footer crowded by bottom nav ──
   `.se-overlay` z-index is 1000, but `.bachpan-bottom-nav` is 1030 → the
   bottom 56px of every modal sits *behind* the nav, including the Submit
   button when the form scrolls down. Two-part fix:
     1. Raise modal z-index above the nav so nothing covers it.
     2. Cap modal height to leave nav room, scroll only the form body, and
        pin the footer so Cancel / Submit are always visible.
   The base CSS in bachpan-suggest-edit.css already gives .se-form
   `overflow-y: auto`, so we just need to constrain the parent height. */
@media (max-width: 767.98px) {
    .se-overlay {
        z-index: 1100; /* > .bachpan-bottom-nav (1030) */
        padding: .5rem;
        align-items: flex-end; /* bottom-sheet feel on phones */
    }
    .se-modal {
        max-height: calc(100vh - 1rem); /* nav-clear: body padding handles 84px */
        max-width: 100%;
        border-radius: 14px 14px 0 0;
    }
    .se-form {
        flex: 1 1 auto;
        min-height: 0; /* lets the form actually scroll inside the flex column */
        padding-bottom: 1rem;
    }
    .se-foot {
        position: sticky;
        bottom: 0;
        background: var(--bp-bg, #FAFAF7);
        z-index: 2;
        padding: .65rem .85rem calc(.65rem + env(safe-area-inset-bottom, 0px));
    }
    .se-foot-left { flex: 1 1 100%; font-size: .65rem; }
    .se-foot-right { flex: 0 0 auto; }
}

/* ── Fix A3: Feedback widget modal — same z-index treatment as suggest-edit ──
   .bp-fb__overlay sits at z-index 900 in base CSS, also below the bottom
   nav. Round 2 already pinned the .bp-fb__footer; here we just bump the
   overlay above the nav so the modal isn't visually clipped at the bottom. */
@media (max-width: 767.98px) {
    .bp-fb__overlay {
        z-index: 1100; /* > .bachpan-bottom-nav (1030) */
    }
}

/* ── Fix C: Name detail — defensive overflow guards ──
   Round 1 (Screen 6) and Round 2 (Fix 20) handle the hero card and badge
   row. Long names like "Krishna" still trigger horizontal scroll on the
   .bp-page--detail wrapper when a child sibling section (variant grid,
   numerology trait pills, etc.) escapes its column. Clamp at the wrapper. */
@media (max-width: 767.98px) {
    .bp-page--detail {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .bp-page--detail .bp-name-hero,
    .bp-page--detail .bp-section {
        max-width: 100%;
        overflow-x: hidden; /* trap any unruly child that escapes its row */
    }
    /* Stat dashboard cards (Rashi · Nakshatra · Lucky No) — ensure the
       value cell can shrink below its content size so long values like
       "Purva Bhadrapada" ellipsize instead of pushing the grid wider. */
    .bp-page--detail .bp-stat-card,
    .bp-page--detail .bp-as-item {
        min-width: 0;
        overflow: hidden;
    }
    .bp-page--detail .bp-as-val {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Fix D: Advertise — feature-row text shrinking ──
   .adv-feature is `display: flex` with .adv-feat-icon (flex-shrink: 0) and
   an unnamed inner `<div>` holding .adv-feat-title + .adv-feat-sub. The
   inner div defaults to min-width: auto, which prevents long words from
   wrapping — Fix 28 already adds `overflow-wrap: anywhere` to the children,
   but they can't actually shrink until the flex parent allows it. */
@media (max-width: 767.98px) {
    .adv-feature > div:not(.adv-feat-icon) {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ── Fix E: Hamburger hidden behind viewport edge when logged in ──
   nav-right has 5 children when authenticated (search · heart · recently-
   viewed · user-avatar · hamburger). Fix 8 above accidentally enlarged
   .nav-icon-btn to 36px on mobile (base is 34px) which, combined with the
   user avatar, pushes the trailing .nav-hamburger off the right edge on
   a 360px viewport. Shrink the icons, tighten the gap, pin the hamburger
   with flex-shrink: 0, and hide the two icons that duplicate bottom-nav
   entries when authenticated. */
@media (max-width: 767.98px) {
    .bp-nav-right {
        gap: .2rem;
        flex-wrap: nowrap;
        min-width: 0;
    }
    /* Override Fix 8 — 36px was wider than the base 34px and pushed the
       cluster past the viewport edge. 30px keeps a usable tap target via
       SVG padding without widening the cluster. */
    .nav-icon-btn,
    .bp-heart-btn,
    .bp-rv-btn {
        width: 30px !important;
        height: 30px !important;
    }
    .nav-icon-btn svg,
    .bp-heart-btn svg,
    .bp-rv-btn svg {
        width: 16px;
        height: 16px;
    }
    /* Hamburger must always be the last visible element, never clipped */
    .nav-hamburger {
        flex-shrink: 0;
        width: 34px;
        height: 34px;
        padding: 0;
        display: flex !important; /* base CSS hides only at min-width: 960px */
        align-items: center;
        justify-content: center;
    }
    .nav-hamburger svg { width: 26px; height: 26px; stroke-width: 2.4; }
    /* When logged in, hide the redundant top-bar Search + Saved icons.
       Bottom nav already provides Search and Saved, and these two were the
       heaviest contributors to nav-right overflow. Recently-viewed stays
       (no bottom-nav equivalent). Applies only when <body> carries
       data-authenticated="true" so guests keep their entry points. */
    body[data-authenticated="true"] .bp-nav-right .nav-icon-btn[data-action="search"],
    body[data-authenticated="true"] .bp-nav-right .bp-heart-wrap {
        display: none;
    }
}

/* ── Fix F: My Profile page — mobile padding + card overflow ──
   .up-page has .75rem horizontal padding on phones (bachpan-user.css line
   986), and the .up-card / .profile-section children all have 1.5rem inner
   padding, leaving multi-line form labels pressed against the card border.
   Loosen the inner padding, clamp every profile child to 100% of its
   column, and make form-action buttons full width. */
@media (max-width: 767.98px) {
    .up-page {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }
    .up-page .profile-layout {
        max-width: 100%;
        min-width: 0;
    }
    .up-page .profile-layout > aside,
    .up-page .profile-layout > div {
        min-width: 0;
        max-width: 100%;
    }
    .up-page .profile-sidebar,
    .up-page .up-card,
    .up-page .profile-section,
    .up-page .danger-zone {
        padding: 1rem;
        max-width: 100%;
        overflow: hidden;
    }
    /* Profile nav links — let them break inside the highlight box instead of
       refusing to shrink. The active item's background was widening past the
       card edge because the flex <a> defaulted to min-width: auto. */
    .up-page .profile-nav__item {
        min-width: 0;
        width: 100%;
    }
    /* Phone prefix + input — give the input a min-width: 0 so iOS doesn't
       expand it to its placeholder's intrinsic width and push the wrap
       past its container. */
    .up-page .up-phone-wrap { min-width: 0; }
    .up-page .up-phone-wrap input { min-width: 0; }
    /* Stats row — 3 columns squeeze well on 320px when each cell can shrink. */
    .up-page .profile-stats {
        gap: .5rem;
        flex-wrap: nowrap;
    }
    .up-page .profile-stat { min-width: 0; flex: 1 1 0; }
    /* Form action row — stack Save Changes / Cancel / Delete on phones. */
    .up-page .up-btn-submit,
    .up-page .up-btn-ghost,
    .up-page .up-btn-danger {
        width: 100%;
        justify-content: center;
    }
}

/* ── Fix N: hero search box — orange Search button hidden on phones ──
   .bp-search-input is a flex child but has no min-width override, so the
   browser's intrinsic min-content size (~20em for inputs) refuses to shrink.
   On a 360-400px viewport that pushes .bp-search-btn past the container's
   right edge, where overflow:hidden on .bp-search-box clips it entirely.
   Letting the input shrink + tightening the button restores the orange CTA. */
@media (max-width: 767px) {
    .bp-search-input { min-width: 0; }
    .bp-search-icon-wrap { padding: 0 .55rem 0 .85rem; }
    .bp-search-btn { padding: 0 .9rem; font-size: .78rem; gap: .3rem; }
    .bp-search-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 419px) {
    /* Very narrow viewports: drop the "Search" label, keep the magnifier. */
    .bp-search-btn { padding: 0 .8rem; }
    .bp-search-btn-label { display: none; }
}

/* ── Fix 28 (2026-05-21 mobile audit issue #14): hub pages — 1 column on phones ──
   The shared .bp-hub-card-grid base rule is repeat(2,1fr) which gives two
   narrow stretched cards per row on phones. Force a single full-width column
   below 576px so each deity / goddess / rashi / nakshatra / theme card has
   room to breathe and meaning text doesn't get squeezed into 5-word columns. */
@media (max-width: 575.98px) {
    .bp-hub-card-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── Fix 29 (2026-05-21 mobile audit issues #19 + 7.1): Name-of-the-Day +
   Trending Names cards overflow the viewport. Constrain the .bp-notd-hdr
   right-padding so the absolute-positioned .bp-notd-fav heart doesn't push
   the header text off-screen, and clamp .bp-trending to viewport width with
   overflow:hidden so its inner toggle row can't bleed past the right edge. */
@media (max-width: 575.98px) {
    .bp-notd { max-width: 100%; }
    .bp-notd-hdr { padding: .65rem 2.5rem .65rem .9rem; }
    .bp-notd-date { font-size: .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bp-notd-fav { right: .55rem; top: .3rem; width: 28px; height: 28px; }
    .bp-notd-fav svg { width: 14px; height: 14px; }
    .bp-trending { max-width: 100%; overflow: hidden; }
}

/* ── Fix 30 (rewritten 2026-05-23): list view distortion on mobile ──
   .bp-name-row uses `display: grid` (4-col template:
   minmax(110px,auto) 1fr auto auto) on desktop. On phones the previous
   override used flex-wrap properties — a no-op against grid — so the
   4-col template was being squeezed into a 375px viewport, collapsing
   the meaning column into a 40px-wide vertical strip (see
   errors/mobile/4.jpeg).

   Override with a grid-native 3-col template:
     Row 1  | Name (1fr)            | Share | Fav  |
     Row 2  | Meaning (spans 3 cols)               |
     Row 3  | Deva / English-name   | Chips (cols 2-3) |
   Same .bp-name-row wrapper is used by _NameRow.cshtml and
   _NameRowLang.cshtml, so this fix lands on both. */
@media (max-width: 575.98px) {
    .bp-name-row {
        /* Mobile layout (≤575.98px):
           Row 1 packs name + share + fav together on the left; the 4th
           1fr column absorbs the remaining width as empty space so the
           actions don't drift to the right edge. Rows 2-4 (meaning, deva,
           chips) each span the full grid (1 / -1).
           !important defeats any same-specificity desktop rule lingering
           in the cascade. */
        grid-template-columns: auto auto auto 1fr !important;
        column-gap: 6px !important;
        row-gap: 6px !important;
        padding: .65rem .75rem !important;
        align-items: center !important;
    }
    /* Row 1 — name (flexes to fill) + share + fav */
    .bp-row-name,
    .bp-row-name-native {
        grid-row: 1 !important; grid-column: 1 !important;
        min-width: 0 !important;
        font-size: .95rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bp-row-share { grid-row: 1 !important; grid-column: 2 !important; margin: 0 !important; }
    .bp-row-fav   { grid-row: 1 !important; grid-column: 3 !important; margin: 0 !important; }
    /* Optional popular badge — keep on its own row before meaning so it
       doesn't fight share/fav for row 1 space. */
    .bp-row-tag {
        grid-row: 2; grid-column: 1 / -1;
        justify-self: start;
    }
    /* Row 2 — meaning full-width, wraps naturally */
    .bp-row-meaning {
        grid-row: 2 !important; grid-column: 1 / -1 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: .82rem;
        line-height: 1.45;
    }
    /* Row 3 — Devanagari / English-name on its own full-width row.
       Spans 1 / -1 so its content can't be cramped against the chips
       spanning rule on the next row. */
    .bp-row-deva,
    .bp-row-name-en {
        grid-row: 3 !important; grid-column: 1 / -1 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Row 4 — chip strip on its own full-width row, left-aligned so the
       layout reads naturally top-to-bottom (mirrors desktop, where chips
       sit visually under the meaning). */
    .bp-row-chips {
        grid-row: 4 !important; grid-column: 1 / -1 !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 9 (2026-05-22) — NameDetail "content cut in half on real mobile"
   ───────────────────────────────────────────────────────────────────────────
   Reproduction: user screenshot at errors/mobile/1.jpeg shows the name detail
   page rendering with desktop-size hero padding, desktop badge sizes, and
   a 3-column astro strip — all clipped at the right viewport edge with no
   horizontal scrollbar (because `html, body { overflow-x: hidden }` swallows
   the overflow silently). Yet some mobile rules (topbar tagline hidden,
   bottom nav visible) ARE applying.

   Root causes:
   1. CSS Grid min-width: auto — .bp-detail-layout's main column defaults to
      min-content sizing. A long badge row, long meaning paragraph, or any
      non-shrinkable inner element causes the grid track to expand BEYOND
      its declared 1fr, pushing the hero card wider than the viewport.
   2. Breakpoint cliff at 768px — bottom nav is shown up to 991px, but the
      "phone" hero/badge rules stop at 767.98px. So 768-991px (tablet portrait,
      phablet landscape, or any device reporting >767px CSS viewport) gets
      desktop padding + bottom nav, an inconsistent middle ground.
   3. Badge / meaning wrap rules are media-scoped — if any of the above goes
      wrong, text doesn't wrap and silently overflows.

   These three fixes are layered defenses so the page renders correctly even
   if any single one fails on a given device. *Universal* (no @media) rules
   are intentional — `flex-wrap: wrap` and `min-width: 0` are safe at every
   viewport including desktop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* W9.1 — DEFENSIVE: grid items must not expand beyond their declared track.
   Applies universally; min-width: 0 on a grid item is the standard fix for
   the min-content expansion bug. Does not affect desktop layout because the
   tracks are still 1fr / 1fr 300px from the grid-template-columns rule. */
.bp-detail-layout { min-width: 0; }
.bp-detail-layout > div,
.bp-detail-layout > aside { min-width: 0; max-width: 100%; }

/* W9.2 — DEFENSIVE: hero card and its key children can never exceed parent.
   Universal because there's no scenario where overflow is desired here. */
.bp-name-hero,
.bp-page--detail .bp-section,
.bp-page--detail .bp-astro-strip,
.bp-page--detail .bp-stat-grid,
.bp-page--detail .bp-rashi-detail,
.bp-page--detail .bp-num-detail,
.bp-page--detail .bp-lang-variants,
.bp-page--detail .bp-internal-links {
    max-width: 100%;
    min-width: 0;
}

/* W9.3 — DEFENSIVE: hero meaning + badges must always wrap, regardless of
   viewport. The mobile-scoped rules above set sizes; these set wrappability. */
.bp-hero-meaning {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.bp-hero-badges {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
}
.bp-hero-badges .bp-hbadge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* W9.4 — Extend the "phone" hero/badge/stat sizing to 991.98px so any device
   that shows the bottom nav (display:none only kicks in at min-width:992px)
   gets phone-appropriate padding, font sizes, and stat grid. Catches:
     - tablets in portrait (768-1024 typical)
     - phablets in landscape (660-900)
     - Samsung phones with browser "Web page zoom" set to anything <100%
     - Chrome "Request Desktop Site" on a regular phone
   Values intentionally mirror the existing @media (max-width: 767px) block;
   this is a breakpoint extension, not a redesign. */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Page wrapper tightening */
    .bp-page--detail { padding-top: .75rem; padding-bottom: 2rem; }
    .bp-page--detail.bp-page,
    .bp-page--detail { padding-left: 1rem; padding-right: 1rem; }

    /* Hero card sized for phone-like viewports */
    .bp-page--detail .bp-name-hero {
        padding: 1rem 1rem .85rem;
        margin-bottom: 1rem;
    }
    .bp-page--detail .bp-name-actions {
        position: static;
        justify-content: flex-end;
        margin-bottom: .35rem;
        gap: .4rem;
    }
    .bp-page--detail .bp-hero-name { padding-right: 0; font-size: 2rem; }
    .bp-page--detail .bp-hero-name-native { font-size: 1.85rem; line-height: 1.2; }
    .bp-page--detail .bp-hero-deva { font-size: 1rem; }
    .bp-page--detail .bp-hero-meaning { font-size: .92rem; padding: .6rem .8rem; }
    .bp-page--detail .bp-hero-badges { gap: .25rem; }
    .bp-page--detail .bp-hbadge { padding: .2rem .55rem; font-size: .65rem; }

    /* Stat grid — single col on narrow tablet, 2-col above 600px-ish.
       Overrides the desktop repeat(4, 1fr) which would render 4 cards
       at ~180px each, pushing past viewport when the column itself is
       narrowed by the 2-col detail layout that kicks in at 900+. */
    .bp-page--detail .bp-stat-grid { grid-template-columns: repeat(2, 1fr); }

    /* Astro strip — 2-up, no nowrap on long values */
    .bp-page--detail .bp-astro-strip { flex-wrap: wrap; }
    .bp-page--detail .bp-astro-strip .bp-as-item { flex: 1 1 50%; min-width: 0; }
    .bp-page--detail .bp-as-val {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Sections — tighter padding to match the narrower viewport */
    .bp-page--detail .bp-section { padding: 1rem 1.1rem; margin-bottom: 1rem; }

    /* Prev/next sibling nav — wrap so long sibling names don't push the
       center label off-screen */
    .bp-page--detail .bp-name-nav { flex-wrap: wrap; row-gap: .35rem; padding: .6rem .75rem; gap: .4rem; }
    .bp-page--detail .bp-nnav-btn { max-width: 100%; flex: 1 1 auto; font-size: .8rem; }
    .bp-page--detail .bp-nnav-center { flex-basis: 100%; order: -1; text-align: center; }

    /* Rashi/Nakshatra side-by-side boxes — stack into a single column when
       the layout column is narrow */
    .bp-page--detail .bp-rashi-detail { grid-template-columns: 1fr; }
}

/* W9.5 — Extend the .bp-page--detail overflow guard to 991.98px so even
   if a child escapes the grid track, the page wrapper clips it cleanly
   rather than letting it bleed past the viewport. The existing rule at
   line ~855 only covers <=767.98px. */
@media (max-width: 991.98px) {
    .bp-page--detail {
        overflow-x: hidden;
        max-width: 100%;
    }
}