/* ============================================================================
   private-seller-i18n-growth.css
   ----------------------------------------------------------------------------
   PURPOSE
     Some of South Africa's 11 official languages render UI labels noticeably
     longer than English (e.g. isiZulu / Sepedi / Tshivenḓa). The Private
     Seller selector pills hard-coded `white-space: nowrap`, so longer
     translations were CLIPPED instead of wrapping — the exact "truncated
     selectors" reported on the property-type and feature scenes.

     This file lets a pill GROW ROWS to fit its translated label, and
     guarantees the pill container can SCROLL when the stacked pills exceed
     the available height. It is purely additive and tightly scoped under
     `#psModuleRoot` so it can never affect other modules.

   LOAD ORDER (in _Layout.cshtml) — AFTER private-seller.css and the
   scene-extra / mobile sheets, so these relaxations win the cascade:
     <link rel="stylesheet" href="~/css/private-seller.css" />
     <link rel="stylesheet" href="~/css/private-seller-scenes-extra.css" />
     <link rel="stylesheet" href="~/css/private-seller-mobile-redesign.css" />
     <link rel="stylesheet" href="~/css/private-seller-i18n-growth.css" />  ← here

   No colours, fonts or palette tokens are introduced — geometry only.
   ============================================================================ */

/* ── 1. PROPERTY-TYPE CHIPS (Scene 2) ─────────────────────────────────────
   `.ps-chip` was `white-space: nowrap`. Allow the label to wrap onto extra
   lines and let the pill height follow its content. The pill stays
   content-sized (it does not stretch to fill the row) and centres its text.
   `.ps-chip-grid` already provides `overflow-y:auto; min-height:0`, so taller
   wrapped chips simply scroll — no layout fix needed there. */
#psModuleRoot .ps-chip {
    white-space: normal;            /* was nowrap — the truncation source */
    height: auto;                   /* grow with wrapped lines             */
    min-height: 0;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;        /* break a single very long token too  */
    word-break: break-word;
    /* Cap width on wide viewports so a long label wraps inside the pill
       rather than producing one ultra-wide chip. Content still sizes the
       pill below this cap. */
    max-width: min(100%, 22rem);
}

/* Keep the wrapped grid scrollable with a subtle, discoverable scrollbar so
   sellers know more chips exist once the stack grows. (Base rule hides it.) */
#psModuleRoot .ps-chip-grid {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
#psModuleRoot .ps-chip-grid::-webkit-scrollbar {
    display: block;
    width: 6px;
}
#psModuleRoot .ps-chip-grid::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 999px;
}

/* ── 2. FEATURE / ATTRIBUTE PILLS (swimlane chips) ────────────────────────
   `.ps-lane-chip` and its label were `white-space: nowrap`. Let the label
   wrap so longer-language feature names ("Izindlu zabasebenzi basendlini")
   stack onto a second line and the pill grows taller. Top-align the icon so
   it sits beside the first line of a wrapped label. */
#psModuleRoot .ps-lane-chip {
    white-space: normal;
    height: auto;
    min-height: 0;
    align-items: flex-start;        /* icon aligns to first line of label */
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Cap pill width so the label wraps instead of forcing an enormous chip
       in the horizontal track. */
    max-width: min(80vw, 18rem);
}
#psModuleRoot .ps-lane-chip > i {
    margin-top: 0.12em;             /* nudge icon to baseline of line 1    */
    flex: 0 0 auto;
}
#psModuleRoot .ps-lane-chip-label {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    letter-spacing: -0.01em;
}

/* The horizontal swimlane track holds `flex: 0 0 auto` chips. When a chip
   wraps to two lines the row gets taller — align the row to the top and let
   the track scroll (both axes) so growth never clips. */
#psModuleRoot .ps-swimlane,
#psModuleRoot .ps-lane-track {
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ── 3. REVEAL-ADDRESS PILLS (Scene 3) ───────────────────────────────────
   The Yes / No reveal-address pills carry two text spans (short + long
   descriptor). With a longer language these were clipping. Allow wrapping so
   the full translated phrase shows. */
#psModuleRoot .ps-reveal-pill {
    white-space: normal;
    height: auto;
    min-height: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
#psModuleRoot .ps-reveal-long,
#psModuleRoot .ps-reveal-short {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── 4. SUBTYPE DROPDOWN TRIGGER LABEL (mobile bottom-sheet) ──────────────
   The mobile subtype trigger label could ellipsis-truncate a long translated
   property-type. Allow a second line; the trigger height follows. */
#psModuleRoot .ps-subtype-trigger-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ── 5. TWIN CARD CHIPS (right-rail digital-twin summary) ─────────────────
   These echo the chosen subtype/category and can also overflow on longer
   languages. Let them wrap rather than clip the card. */
#psModuleRoot .ps-twin-chip {
    white-space: normal;
    height: auto;
    line-height: 1.2;
    overflow-wrap: anywhere;
}