/* ==========================================================================
   Friendse — Mobile / tablet edge fix (MF Team)
   Load LAST in layouts/app.blade.php.

   THE BUG (phone + narrow window)
   1) Between 821px and 1100px the app shell was still a CSS grid whose first
      track is the (hidden) 220–260px left sidebar, so the content column was
      squeezed into that narrow track and the rest of the row stayed empty —
      big blank space on the sides.
   2) fp-center.css caps the shell at 620/680px and centres it, so on tablet
      widths the cards floated in the middle with empty margins left/right.
   3) When the right column (People you may know / Pages / Quick links) drops
      below the feed on small screens it kept sticky/grid/width leftovers, so
      those cards rendered narrower than the feed cards above them.

   THE FIX (layout only — no markup, no links, no scripts, no behaviour)
   Below 1101px the shell is one plain full-width column with the same small
   side padding everywhere, and every card — feed cards and the stacked right
   column cards — spans that full width. Desktop (1101px and up) is untouched.
   ========================================================================== */

@media (max-width: 900px) {
  .friende-app-shell,
  main > .friende-app-shell,
  .friende-app-shell.friende-app-shell-2col {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 10px 12px calc(84px + var(--fp-safe-b, 0px)) !important;
    box-sizing: border-box;
  }

  /* Middle column: full width, never centred inside a narrower box. */
  .friende-app-shell > section,
  .friende-app-shell.friende-app-shell-2col > section {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-width: 0;
  }

  /* Left rail stays a phone/tablet drawer (bottom nav + "More" sheet). */
  .friende-app-shell > .friende-sidebar {
    display: none !important;
  }

  /* Right column flows under the feed as normal, full-width cards. */
  .friende-rightbar {
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
  }

  /* Cards (feed + stacked right column) use the shell padding only. */
  .friende-app-shell .friende-card,
  .friende-app-shell .fp-card,
  .friende-app-shell .fp-post-card,
  .friende-rightbar > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* Narrow laptop / tablet windows (901–1100px): the two-column grid stays,
   but the right column that drops under it must span the full row instead of
   sitting in a narrow track with empty space beside it. */
@media (min-width: 901px) and (max-width: 1100px) {
  .friende-rightbar {
    grid-column: 1 / -1;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 8px !important;
  }
  .friende-app-shell.friende-app-shell-2col > section {
    max-width: none !important;
  }
}

/* Small phones: tighter edges so cards use almost the whole screen. */
@media (max-width: 480px) {
  .friende-app-shell,
  main > .friende-app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ---------- Earnings cards: phone par poori available width ----------
   Bug: balance cards mobile par apne desktop-size ke chhote boxes ban kar
   beech mein stack ho rahe thay, jis se dono taraf bohat khali jagah thi.
   Fix: sirf Earnings summary ko ek full-width column banaya. Har card shell
   ki available width leta hai; tablet/desktop ka 3-column view bilkul same. */
@media (max-width: 639px) {
  .fp-earnings-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .fp-earnings-summary > a.friende-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
}

/* ---------- Follow buttons: mobile par PC jitna hi size ----------
   Bug: fp-mobile.css ka touch-target rule (button min-height 44px)
   rightbar ke chhote Follow pills ko mobile par mota/kar raha tha.
   Fix: sirf Follow buttons ko is rule se exempt karte hain — unka
   padding/font-size wahi rahega jo PC par hai. Baaki buttons ke
   touch targets waise hi rahenge (koi aur cheez nahi badlegi). */
@media (max-width: 900px) {
  .pymk-btn,
  [data-page-suggestion] button[type="submit"] {
    min-height: 0 !important;
    height: auto !important;
  }
}