/* =====================================================================
     MOBILE POLISH (≤640px) — phone-only refinements, appended last so they
     win on source order without touching the desktop/tablet layout above.
     Targets the reported issues: hero top breathing room, the two hero CTAs
     wrapping out of one row, the search bar overflowing the feed frame,
     feed-card spacing, the detail-sheet header, the export popover overflow,
     a single-row filter strip, and the footer copyright line.
     ===================================================================== */
  /* The filter-chip wrapper is transparent on desktop/tablet (children stay
     direct flex children of .feed-filter-row, so the layout is identical to
     before this wrapper existed); the mobile block below turns it into a
     scroll container. */
  .feed-filter-chips { display: contents; }

  @media (max-width: 640px) {
    /* 1) Hero — add breathing room above the headline. The section ships
          pt-6 (24px) which sits too tight under the 68px sticky nav on a
          phone, so the big headline feels glued to the bar. */
    .hero-shell > section {
      padding-top: 36px;
    }
    .hero-headline { line-height: 1.08; }

    /* 1b) Hero background — desktop anchors the canvas at 72% so the lighthouse
           island stays in frame. On a narrow phone `cover` crops hard to a ~30%
           horizontal slice, and 72% lands that slice on the busy island/right
           side — directly behind the headline, which then reads as muddy. Pull
           the anchor left (18%) so the visible slice is the open sky/sea on the
           left of the scene; the island moves off-screen to the right and the
           copy sits on clean, low-contrast sky. Overrides both light and the
           html.dark rule (the dark selector is listed so it wins on specificity
           + source order). Position only — background-size stays `cover`. */
    .hero-bg-glow,
    html.dark .hero-bg-glow {
      background-position: 18% center;
    }

    /* 2) Hero CTAs — now three pills（岛上机会 / 发布岛讯 / AI Agent 接入）。
          手机上三个等宽挤一行会让「AI Agent 接入」溢出，所以改为换行（内容宽度的
          胶囊自然折行：通常前两个一行、第三个落到次行）。 */
    .hero-cta-row {
      flex-wrap: wrap;
      width: 100%;
      gap: 10px;
    }
    .hero-cta-row .btn-secondary {
      justify-content: center;
      padding: 11px 16px;
      gap: 6px;
      font-size: 13.5px;
      white-space: nowrap;
    }
    /* The trailing chevron/↗ is decorative — drop it on phones so the label
       has room to stay on one line inside the narrowed pill. */
    .hero-cta-row .btn-secondary .btn-secondary-arrow { display: none; }

    /* 3) Feed control bar — the search bar carries min-width:320px, which is
          wider than the feed frame's inner width on a phone, so its right
          edge gets clipped by the frame's overflow:hidden. Drop it onto its
          own full-width row below the filter chips. */
    .search-bar {
      min-width: 0;
      width: 100%;
      margin-left: 0;
      border-radius: 14px;
      box-sizing: border-box;
    }
    /* Give the filter chips a touch more vertical rhythm now that they wrap
       above the full-width search bar. */
    #handpicked .filter-chip { padding: 8px 12px; }

    /* Keep filter popovers from spilling off the right edge on a phone, and
       pin them with position:fixed so they escape the horizontally-scrolling
       .feed-filter-chips container (overflow-x:auto forces overflow-y to clip,
       which would otherwise swallow an absolutely-positioned menu — making the
       chip tap look dead). Coords come from openFilterAt() via CSS vars. */
    .filter-menu {
      position: fixed;
      top: var(--fx-top, 0);
      left: var(--fx-left, 0);
      min-width: 160px;
      max-width: calc(100vw - 48px);
    }

    /* 4) Feed cards — single column already; tighten the min-height so short
          postings don't leave a tall empty gap, and ensure long role strings
          wrap instead of forcing horizontal width. */
    .job-card { min-height: 0; }
    .job-card-body-wrap { padding: 14px 16px 16px; }

    /* 5) Job-detail bottom sheet header — the role title now sits on its own
          full-width line (the company name + action pills share the first line
          above it), so the title column is no longer squeezed and the buttons
          no longer need to be pulled out of the flex flow. Keep the share /
          favourite / export pills icon-only on phones so the first line stays
          compact beside the company name; the close × rides at the far right
          of that row. */
    .sheet-share-btn span,
    .sheet-export-btn span,
    .sheet-fav-btn span { display: none; }
    .sheet-share-btn,
    .sheet-export-btn,
    .sheet-fav-btn {
      padding: 7px;
      gap: 0;
    }
    .sheet-org-row { gap: 6px; }
    /* Promote the published-at suffix to its own line under the title.
       The inline lockup ("AI 产品经理 · 2026-05-28") still broke awkwardly
       across two lines on a narrow CJK title; a clean line break reads
       calmer and matches the visual rhythm of the meta-pill row below. */
    .sheet-title-date {
      display: block;
      margin-left: 0;
      margin-top: 4px;
    }
    /* Compact meta pills so the 5–6-tag postings (company tag + location +
       2–4 employment types) settle into 2 rows instead of 3. */
    .sheet-meta { gap: 5px; margin-top: 10px; }
    .sheet-meta .job-card-badge,
    .sheet-meta .meta-pill {
      font-size: 10.5px;
      padding: 3px 8px;
    }
    /* Belt-and-suspenders: never let the role title collapse below a usable
       width. (The company name on the first line truncates with an ellipsis
       instead — see .sheet-org.) */
    .sheet-title { overflow-wrap: anywhere; }

    /* 6) Filter strip — keep all four category chips on ONE row (the wrapper
          becomes a horizontally-scrollable flex row) and force the search bar
          onto its own full-width row below. Previously the chips wrapped to
          two lines while the search bar shared the row. */
    .feed-filter-chips {
      display: flex;
      flex: 1 1 100%;
      min-width: 0;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .feed-filter-chips::-webkit-scrollbar { display: none; }
    .feed-filter-chips .filter-pop { flex: 0 0 auto; }

    /* 7) Export popover — fixed at 380px, it overflows the left edge on
          narrow phones (anchored to the right-side trigger). Pin it to both
          side margins so it always fits; !important beats the inline right/
          width that toggleExportPopover() writes. */
    .sheet-export-popover {
      left: 12px !important;
      right: 12px !important;
      width: auto !important;
      max-width: none;
    }
    /* Long-image preview fallback zoom for phones — onPreviewLoad refines this
       to fill the exact wrap width, but a conservative floor here keeps the
       540px card from overflowing (and getting right-clipped) before the JS
       runs or if it can't measure. Card mode keeps its CSS zoom:1 via the more
       specific .is-card-mode selector. */
    .sheet-export-preview-frame { zoom: 0.56; }

    /* 8) Footer — put the copyright on its own line, with the legal/contact
          links wrapping to the row below it. */
    .footer-copyright { flex-basis: 100%; text-align: center; }
    .footer-sep-first { display: none; }
  }