/**
 * Meridian — Mobile Responsiveness Fixes
 * -----------------------------------------------------------------------
 * This file only ever loads AFTER every other stylesheet on a page and every
 * rule inside it is wrapped in a max-width media query. That means the
 * desktop experience (anything above 768px) is completely untouched — this
 * file exists purely to patch up small-screen (phone / narrow tablet)
 * layout issues without changing the existing visual design anywhere else.
 * -----------------------------------------------------------------------
 */

/* ==========================================================================
   0. Universal small-screen safety net
   Prevents horizontal scroll / overflow no matter what page or component
   is on screen. Doesn't change colors, spacing, or design — just stops
   things from spilling past the viewport edge.
   ========================================================================== */
@media (max-width: 768px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  img, svg, video, canvas {
    max-width: 100%;
  }

  /* Any leftover fixed-width containers from desktop layouts collapse to
     the viewport instead of forcing a horizontal scrollbar. */
  .feed-container,
  .network-container,
  .jobs-container,
  .notifications-container,
  .settings-container,
  .profile-main-grid,
  .studio-main,
  .messaging-container,
  .search-container,
  .company-container,
  main {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   1. Header — Messages lives at the top-right on mobile, not in the bottom
   tab bar. The chat-bubble icon next to search (#nav-item-messaging,
   already positioned top-right by header.css) is the one place to reach
   Messages on mobile; the bottom tab bar drops its Messages tab so it
   isn't duplicated in two places.
   ========================================================================== */
@media (max-width: 768px) {
  .mobile-bottom-nav-item[href="messaging.html"] {
    display: none !important;
  }
}

/* ==========================================================================
   2. Home feed — hide both sidebars on mobile, posts only
   ========================================================================== */
@media (max-width: 960px) {
  /* On the phone feed page only the post stream matters — the profile
     snapshot / quick links (left) and "Add to your network" / Smart Match /
     Trending (right) used to stack below every post, turning "scroll the
     feed" into "scroll past a wall of sidebar cards". Those already live in
     the avatar drawer and the Network/AI Hub tabs, so on mobile they're
     hidden here entirely — the feed page shows only the composer, filters,
     and posts. */
  .feed-sidebar,
  .feed-sidebar-right {
    display: none !important;
  }

  .feed-container {
    display: block !important;
  }

  .feed-main-col {
    width: 100%;
    max-width: 100%;
  }

  .sidebar-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .widget-profile-body {
    box-sizing: border-box;
  }

  .widget-stats-list,
  .sidebar-quicklinks {
    width: 100%;
    box-sizing: border-box;
  }

  .sidebar-quicklink-item {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   3. "People you may know" header row — AI Scoring badge + Smart Match
   toggle. On narrow phones the title, badge and toggle no longer fit on
   one line, so let the row wrap cleanly instead of overlapping/overflowing.
   ========================================================================== */
@media (max-width: 640px) {
  .smart-match-header-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .smart-match-title-group {
    flex-wrap: wrap;
    row-gap: 6px;
    min-width: 0;
  }

  .smart-match-title-group > div {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .smart-toggle-wrapper {
    flex-shrink: 0;
  }
}

@media (max-width: 360px) {
  .smart-match-header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .smart-toggle-wrapper {
    width: 100%;
    justify-content: space-between;
  }
}

/* Same header pattern used inside the Home feed sidebar's own
   "Smart Match AI" card (feed.html inline block). */
@media (max-width: 480px) {
  .smart-toggle-wrapper[for="toggle-smart-match-feed"] {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* ==========================================================================
   4. Jobs — top tab bar (Explore Jobs / Application Tracker / Job Alerts /
   Saved). Forcing all four controls onto one line meant every label had to
   be truncated with an ellipsis ("Appli…", "Explor…") which read as broken.
   Instead: a clean 2x2 grid with short, whole labels — nothing is cut off,
   nothing wraps mid-word.
   ========================================================================== */
@media (max-width: 480px) {
  .jobs-top-nav-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 6px;
    padding: 8px !important;
  }

  .jobs-tab-group {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
    width: 100%;
  }

  .jobs-saved-btn-wrap {
    width: 100%;
  }

  .jobs-tab-btn,
  #btn-quick-saved-jobs {
    flex: none;
    width: 100%;
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    padding: 9px 6px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    border: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md);
    background: var(--bg-app);
  }

  .jobs-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
  }

  .jobs-tab-btn.active svg {
    color: #ffffff;
  }

  /* Swap in the short label on phones; the full label stays for desktop. */
  .jobs-tab-btn .tab-label-full {
    display: none;
  }

  .jobs-tab-btn .tab-label-short {
    display: inline;
  }

  .jobs-tab-btn span,
  #btn-quick-saved-jobs span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .jobs-tab-btn svg,
  #btn-quick-saved-jobs svg {
    flex-shrink: 0;
    width: 15px !important;
    height: 15px !important;
    margin-right: 0 !important;
  }

  .jobs-tab-btn .network-badge-pill {
    flex-shrink: 0;
    width: auto;
    font-size: 0.625rem;
    padding: 1px 6px;
  }

  #btn-quick-saved-jobs {
    justify-content: center !important;
  }
}

/* ==========================================================================
   4b. Header search autocomplete dropdown
   header.css hard-codes this at 340px with left:0 inside a much narrower
   mobile search field, so on any phone under ~360px it hangs off the right
   edge of the screen and forces horizontal scroll. Clamp it to the
   viewport instead (matches the pattern already used on the Search page).
   ========================================================================== */
@media (max-width: 600px) {
  .nav-search-autocomplete {
    width: min(340px, calc(100vw - 24px)) !important;
    left: 0;
    right: auto;
  }
}

/* ==========================================================================
   4c. Messaging — "more options" menu & group-info drawer
   Fixed pixel widths that can run past the edge of very narrow phones.
   ========================================================================== */
@media (max-width: 480px) {
  .msg-more-menu {
    max-width: calc(100vw - 24px);
  }

  .group-info-drawer {
    width: min(280px, 100vw);
    max-width: 100vw;
  }
}

/* ==========================================================================
   4d. Notifications bell dropdown
   notifications.css re-declares `.nav-notifications-dropdown` at a fixed
   360px (no viewport clamp) and loads after header.css's mobile version,
   so on notifications.html specifically the dropdown reverts to a fixed
   width that can overflow narrow phones. Re-assert the safe mobile layout.
   ========================================================================== */
@media (max-width: 768px) {
  .nav-notifications-dropdown {
    position: fixed !important;
    top: 54px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  }
}

/* ==========================================================================
   4e. Network — "People you may know" suggestion cards.
   These collapsed to a single full-width card per row on phones, making
   each one huge. Show two smaller cards per row instead, like the rest
   of the mobile card grids on this site.
   ========================================================================== */
@media (max-width: 480px) {
  .people-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .person-card-cover {
    height: 32px;
  }

  .person-card-avatar {
    width: 48px;
    height: 48px;
    margin: -24px auto 4px auto;
    border-width: 2px;
  }

  .person-card-body {
    padding: 0 8px;
  }

  .person-card-name {
    font-size: 0.8125rem;
  }

  .person-card-headline {
    font-size: 0.6875rem;
    margin-bottom: 4px;
    min-height: 0;
    -webkit-line-clamp: 1;
  }

  .person-card-mutuals {
    font-size: 0.625rem;
    margin-bottom: 6px;
  }

  .smart-reason-pill {
    font-size: 0.625rem;
    padding: 2px 6px;
    margin-bottom: 6px;
  }

  .person-card-footer {
    padding: 0 8px;
  }

  .person-card-footer .btn {
    padding: 5px 8px;
    font-size: 0.6875rem;
  }
}

/* ==========================================================================
   4f. AI Hub — top nav tabs (Overview / Career Coach / Resume Maker /
   Interview Prep). These used a horizontally-scrolling row with no scroll
   affordance, so extra tabs were silently cut off at the screen edge
   instead of being reachable. A 2x2 grid keeps every tab visible at once.
   ========================================================================== */
@media (max-width: 480px) {
  .studio-nav {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow: visible !important;
    gap: 6px !important;
  }

  .studio-nav-btn {
    justify-content: center;
    padding: 7px 6px !important;
    font-size: 0.75rem !important;
  }
}

/* ==========================================================================
   4g. AI Hub — Career Coach thread, full-screen on mobile.
   The chat used to sit inside the normal page padding + a bordered/shadowed
   card, so on phones it looked like a small boxed panel instead of a full
   chat screen. While a conversation is open, drop the page chrome (tab
   row, bottom nav, panel border) so the thread fills the viewport, the
   same way the Messaging chat pane already does.
   ========================================================================== */
@media (max-width: 768px) {
  body.in-mobile-coach {
    padding-bottom: 0 !important;
  }

  body.in-mobile-coach .mobile-bottom-nav {
    display: none !important;
  }

  body.in-mobile-coach .studio-sidebar {
    display: none !important;
  }

  body.in-mobile-coach .studio-main {
    padding: 0 !important;
    max-height: none;
    overflow: visible;
  }

  body.in-mobile-coach .coach-layout {
    height: calc(100dvh - 54px) !important;
    min-height: 0;
    gap: 0;
  }

  body.in-mobile-coach #coach-thread-panel {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   4h. Home feed — mobile stacking order for the two sidebar widgets.
   On mobile both sidebars drop below the post stream (see feed.css), but
   the "Smart Match AI / Trending" widget landed ABOVE the profile snapshot
   card, splitting the two sidebar blocks apart with unrelated post
   content in between. Group them together at the bottom, profile card
   first, so it reads as one section instead of two disconnected ones.
   Desktop (>768px) keeps its original three-column layout untouched.
   ========================================================================== */
@media (max-width: 768px) {
  .feed-sidebar { order: 2 !important; }
  .feed-sidebar-right { order: 3 !important; }
}

/* ==========================================================================
   4i. Settings — section list, always a vertical list on phones.
   Under 480px settings.css switches this list into a horizontal
   scrolling strip of pill buttons, which hides most of the label text and
   makes it much harder to see and pick a section. Keep it the same clear,
   full-width vertical list used between 480–820px at every mobile width.
   ========================================================================== */
@media (max-width: 480px) {
  .settings-sidebar-card {
    flex-direction: column !important;
    overflow-x: visible !important;
    padding: 6px !important;
    gap: 0 !important;
  }

  .settings-nav-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    min-height: 0;
  }

  .settings-nav-btn:last-child {
    border-bottom: none;
  }
}

/* ==========================================================================
   4j. General spacing pass — tighter gaps between stacked cards on phones.
   The shared mobile card system (header.css "Universal Mobile Page Shell")
   put a flat 16px gap and 16px padding on every card everywhere, which on
   narrow phones with lots of short, sparse cards (sidebar widgets, list
   items) reads as excessive empty space between things. Pull it in a bit
   at true phone widths; tablets (481–768px) are unaffected.
   ========================================================================== */
@media (max-width: 480px) {
  .mobile-page-shell,
  .feed-container,
  .network-container,
  .jobs-container,
  .notifications-container,
  .settings-container,
  .profile-main-grid,
  .studio-main {
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 16px !important;
  }

  .mobile-page-card,
  .composer-trigger-card,
  .post-card,
  .feed-sidebar-network,
  .network-card,
  .network-nav-card,
  .jobs-search-card,
  .carousel-section-card,
  .job-card,
  .jobs-results-card,
  .notifications-main-card,
  .studio-hero,
  .studio-card,
  .profile-card,
  .profile-intro-card,
  .profile-section-card,
  .settings-card {
    padding: 12px !important;
  }

  .feed-sidebar,
  .feed-sidebar-right {
    gap: 10px !important;
  }
}

/* ==========================================================================
   5. Generic form / button overflow guard
   Covers any composer, filter, or settings form fields that might still
   carry a fixed desktop width.
   ========================================================================== */
@media (max-width: 480px) {
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    white-space: normal;
  }
}

/* ==========================================================================
   6. Inline two-column form grids (Settings, Profile experience/education
   forms, Company edit forms) collapse to one column on phones. These grids
   are written as inline styles in the HTML, so they need an attribute
   selector + !important to be overridden here — nothing else in this file
   touches inline styles.
   ========================================================================== */
@media (max-width: 560px) {
  [style*="grid-template-columns"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   7. Mobile bottom tab bar — label safety net
   Every label (including the two-word "AI Hub") stays on one line and
   never overflows its tab, no matter the exact device width.
   ========================================================================== */
@media (max-width: 480px) {
  .mobile-bottom-nav-item {
    padding: 3px 0;
  }

  .mobile-nav-label {
    font-size: 0.625rem;
    letter-spacing: -0.01em;
    padding: 0 1px;
  }
}

@media (max-width: 360px) {
  .mobile-nav-label {
    font-size: 0.5625rem;
  }

  .mobile-bottom-nav-item svg {
    width: 18px;
    height: 18px;
  }
}