/* PositoAI — mobile-responsive rules
   Real, external CSS — not inline patches. Applied site-wide via base.html.
   Organized by component; add new mobile fixes here as they're found. */

/* --- Recently-searched card carousel (landing page) ---
   Real bug: flex items have a hidden default of min-width:auto, which lets
   a card's CONTENT (specifically the company name, which has
   white-space:nowrap so it doesn't break awkwardly) override any explicit
   pixel width set on the card — even one set directly via JavaScript.
   A long name like "Tara Chand Infralogistic Solutions Limited" was
   forcing the whole card wider than the phone screen, showing slivers of
   neighboring cards on both edges instead of one clean card.
   min-width:0 is the standard, correct CSS override for this exact
   flexbox behavior — it's what actually lets the JS-set width (and the
   already-coded ellipsis truncation on the name) take effect. */
/* --- Prevent whole-page horizontal scroll on mobile ---
   Real issue: on narrow screens, if any single element anywhere on the
   page is even slightly wider than the viewport (a few px is enough),
   the ENTIRE page becomes horizontally swipeable, letting a user
   accidentally scroll sideways into blank space. This is the standard,
   correct fix — constrains the page as a whole, while elements that are
   INTENTIONALLY horizontally scrollable (like the rank page's tier
   navigator, which uses its own overflow-x:auto) are unaffected, since
   this only applies to the page root, not individual components. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.recent-card {
  min-width: 0;
}

/* --- Shared share button style ---
   Used on landing and rank pages (company page next). Centralized here
   instead of duplicated per-page, same reasoning as .btn-primary. */
.share-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--gold-soft);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 8px 8px;
  cursor: pointer;
}
.share-btn:hover {
  border-color: var(--gold-soft);
}

/* --- Shared "Partner" label style ---
   Used wherever ad/partner content appears (currently the company
   page's two ad slots). Centralized so the label's look only needs
   updating in one place. Uses --gold-accent (a genuine muted gold,
   not the blue-mapped --gold/--gold-soft leftover from before the
   Groww rebrand) so Partner labels read as gold as intended.
   border-color uses !important deliberately — each page's own
   extra_style block still has its own ".ad-card .partner-label"
   rule with the old border color, and since those per-page <style>
   blocks load AFTER this file, a normal-specificity rule here can't
   reliably win. This is the one, real central override. */
.partner-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-accent);
  font-weight: 600;
  border-color: var(--gold-accent-light, #E0C878) !important;
}

/* --- Shared primary button style ---
   Real fix: color/shape properties (background, text color, border-radius,
   font-weight, cursor) were previously duplicated across three separate
   CSS rules in three different files (base.html, landing.html, rank.html)
   — meaning a single color change had to be hunted down and repeated in
   three places. This is the one, real, centralized definition; each
   button only needs this class plus whatever page-specific SIZE it
   needs (font-size/padding), not its own full color/shape rule. */
.btn-primary {
  background: var(--brand-blue);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  cursor: pointer;
}

/* --- Header search bar: full width on mobile ---
   On narrow screens, the search bar (rendered via header_extra) now
   lives in its own row below the icon+wordmark row, structurally
   separate from the two icon buttons — this media query lets it use the
   full screen width instead of the header-center's constrained max-width,
   since there's no longer anything else sharing that row on mobile. */
@media (max-width: 479px) {
  .header-extra-row {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Rank page: combined Country/Marks column (mobile only) ---
   On the World rank page, mobile screens don't have room for 4 separate
   columns (Rank, Company, Country, Marks) — Marks was getting pushed
   off-screen. Combines Country and Marks into one column, stacked as
   2 lines, matching the existing name+ticker sub-line pattern already
   used elsewhere on this page. Desktop is untouched — this class is only
   ever added to the DOM when the page's own JS detects a narrow screen. */
.cell-combined {
  text-align: right;
  vertical-align: middle;
}
.cell-combined .cc-country {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--paper-dim);
  margin-bottom: 2px;
}

/* --- Shared "Enhance Your Knowledge" book-recommendation card ---
   Originally built only on company.html; centralized here so
   blog_index.html and blog_post.html can use the exact same card
   (populated from static/js/books_am.js) without duplicating the CSS
   in three places, same reasoning as .btn-primary/.share-btn above.
   Matches the real, established "Partner" ad-card pattern: only the
   small identifying badge/heading is gold (like the "PARTNER" label
   itself) — the actual content (title/author/language/button) stays
   in normal, readable colors, not gold. Making everything gold read
   as an overcorrection (tried once, reverted) — it looked monotone
   and lost visual hierarchy.
   book-heading's color needs !important for the same reason as
   .partner-label above: each page's own ".card h2" rule (used by
   every card heading, not just this one) loads after this file and
   would otherwise win. */
.book-heading { margin-bottom:10px; color:var(--gold-accent) !important; }
.book-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; text-decoration:none; }
.book-card .book-title { font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:14px; color:var(--rust);
  line-height:20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.book-card .book-author { font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:500; color:var(--brand-green); }
.book-card .book-meta-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; max-width:280px; margin-top:2px; }
.book-card .book-lang { display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px;
  font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--brand-green);
  flex:0 0 auto; }
.book-card .book-link { display:inline-block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:14px;
  font-weight:600; color:var(--gold-soft); text-decoration:none; border:1px solid var(--line-strong);
  border-radius:999px; padding:8px 20px; }
.book-card .book-link:hover { border-color:var(--gold-soft); }

/* --- "Special Deals" card ---
   Genuinely distinct pool/section from the book card above (different
   rotation pool — deals_am.js — different heading text, different
   placement), but shares the book card's exact "only the heading/
   border signals ad, the actual content stays neutral/readable"
   convention — same reasoning as .book-card and .partner-label: an
   earlier attempt at making ALL content gold read as monotone and was
   reverted, so this new section deliberately follows the already-
   established restrained pattern instead of repeating that mistake. */
.deal-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; text-decoration:none; }
.deal-card .deal-title { font-family:'IBM Plex Sans', sans-serif; font-weight:700; font-size:15px; color:var(--paper);
  line-height:20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deal-card .deal-desc { font-family:'IBM Plex Sans', sans-serif; font-size:13.5px; font-weight:500; color:var(--paper-dim);
  line-height:19px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.deal-card .deal-link { display:inline-block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:14px;
  font-weight:600; color:var(--gold-soft); text-decoration:none; border:1px solid var(--line-strong);
  border-radius:999px; padding:8px 20px; }
.deal-card .deal-link:hover { border-color:var(--gold-soft); }

/* --- Ad/sponsored card box borders — gold, site-wide ---
   Every card that's ad/sponsored content gets a gold outer border, so
   the box itself (not just an inner badge) signals "this is an ad" —
   covers the Partner-style injected ad cards (.ad-card, populated via
   ads.js) and the book-recommendation card specifically (targeted by
   its content via :has(), since its outer container is otherwise a
   plain, generic .card shared with non-ad cards like About). Both use
   !important for the same cross-file loading-order reason as above. */
.ad-card { border-color: var(--gold-accent-light, #E0C878) !important; }
.card:has(.book-heading) { border-color: var(--gold-accent-light, #E0C878) !important; }

/* --- Reserved space for JS-filled ad blocks (layout-shift fix, Sep 2026) ---
   The book and Special Deals cards are filled by site.js AFTER the page
   loads; their containers started empty (zero height), so everything
   below jumped down when they appeared. min-height reserves the space
   from the first paint. Titles/descriptions are line-clamped above, so
   the content can't grow past these heights. Values = clamped line
   heights + link button + gaps; adjust together if the cards change. */
#bookCardAm { min-height:132px; }
#dealCardAm { min-height:134px; }

/* --- Site-wide ad slot reservation (layout-shift fix, Sep 2026) ---
   Partner ad slots on the list pages (Explore, Flows, Actions,
   Screeners, Rankings, Senty, News, Red Flags, Learn, RBI, Watchlist)
   started EMPTY and were filled by JS after load, pushing table rows
   down (PageSpeed: Actions CLS 0.141). Same fix as the company page:
   every slot reserves 150px from first paint, and every card is exactly
   150px (title 1 line, description 2 lines, "…" beyond), so nothing
   below ever moves. !important only on the sizes, because each page's
   own <style> loads after this file. */
.ad-card-slot { min-height:150px !important; box-sizing:border-box; }
.ad-card { height:150px !important; box-sizing:border-box; overflow:hidden; justify-content:center; }
.ad-card .ad-title { line-height:21px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.ad-card .ad-desc { line-height:20px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }