/* ==========================================================
   PROFILE RESPONSIVE MASTER FIX
   Loaded LAST (after fb-profile.css) on:
     - profile/index.html        (own profile, #fbProfileHeader)
     - profile/user-profile.html (other users, generic .fb-header)

   Breakpoints (platform spec):
     - mobile  : max-width 767px
     - tablet  : 768px - 1023px
     - desktop : min-width 1024px

   Rules:
     - no negative margins except the avatar-over-cover
       overlap (flexbox aligned, adaptive to content)
     - no hardcoded pixel positions
     - no 100vw tricks
   ========================================================== */


/* ==========================================================
   1. GLOBAL GUARDS
   ========================================================== */

html,
body {
    overflow-x: hidden;
}

/* Kill the legacy edge-to-edge trick:
   "width:100vw; margin-left:calc(50% - 50vw)" caused
   horizontal overflow + a shifted cover whenever a
   vertical scrollbar existed. */

.fb-header .cover-photo,
#fbProfileHeader .cover-photo {
    width: 100%;
    margin-left: 0;
}

/* Keep the avatar/name row painted above the cover
   gradient while it overlaps the cover bottom. */

.fb-header-row,
#fbProfileHeader .fb-header-row {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   2. HEADER — DESKTOP (>= 1024px)
   ========================================================== */

@media (min-width: 1024px) {

    .fb-header,
    #fbProfileHeader {
        position: relative;
        height: auto;
        overflow: visible;
        padding-bottom: 12px;
    }

    .fb-header .cover-photo,
    #fbProfileHeader .cover-photo {
        height: 380px;
        border-radius: 12px 12px 0 0;
    }

    /* Row: avatar overlaps the cover bottom via a single
       negative margin. Name/actions start BELOW the cover
       line (margin-top = overlap) so they can never be
       pushed onto the cover, no matter how tall the
       bio/details block grows. */

    .fb-header-row,
    #fbProfileHeader .fb-header-row {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 18px;
        margin-top: -76px;
        padding: 0 28px;
    }

    .fb-avatar-wrap,
    #fbProfileHeader .fb-avatar-wrap {
        position: static;
        flex: 0 0 auto;
    }

    .fb-avatar-wrap .profile-photo,
    #fbProfileHeader .fb-avatar-wrap .profile-photo {
        width: 168px;
        height: 168px;
        margin: 0;
        padding: 0;
    }

    .fb-header-info,
    #fbProfileHeader .fb-header-info {
        flex: 1;
        min-width: 0;
        margin-top: 88px;
        padding-top: 0;
    }

    .fb-header-actions,
    #fbProfileHeader .fb-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
        margin-top: 88px;
        padding-top: 0;
    }

    .fb-header-bio,
    #fbProfileHeader .fb-header-bio {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fb-info-row,
    #fbProfileHeader .fb-info-row {
        flex-wrap: wrap;
        gap: 6px 14px;
    }
}


/* ==========================================================
   3. HEADER — TABLET (768px - 1023px)
   ========================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .fb-header,
    #fbProfileHeader {
        position: relative;
        height: auto;
        overflow: visible;
        padding-bottom: 10px;
    }

    .fb-header .cover-photo,
    #fbProfileHeader .cover-photo {
        height: 300px;
        border-radius: 10px 10px 0 0;
    }

    .fb-header-row,
    #fbProfileHeader .fb-header-row {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 14px;
        margin-top: -40px;
        padding: 0 18px;
    }

    .fb-avatar-wrap,
    #fbProfileHeader .fb-avatar-wrap {
        position: static;
        flex: 0 0 auto;
    }

    .fb-avatar-wrap .profile-photo,
    #fbProfileHeader .fb-avatar-wrap .profile-photo {
        width: 132px;
        height: 132px;
        margin: 0;
        padding: 0;
    }

    .fb-header-info,
    #fbProfileHeader .fb-header-info {
        flex: 1;
        min-width: 0;
        margin-top: 48px;
        padding-top: 0;
    }

    .fb-header-name,
    #fbProfileHeader .fb-header-name {
        font-size: 26px;
    }

    .fb-header-actions,
    #fbProfileHeader .fb-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-left: auto;
        margin-top: 48px;
        padding-top: 0;
        gap: 8px;
    }

    .fb-header-bio,
    #fbProfileHeader .fb-header-bio {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fb-info-row,
    #fbProfileHeader .fb-info-row {
        flex-wrap: wrap;
        gap: 6px 12px;
    }
}


/* ==========================================================
   4. HEADER — MOBILE (<= 767px)
   Single column: cover -> avatar/name -> actions -> tabs
   ========================================================== */

@media (max-width: 767px) {

    .profile-container {
        padding: 0;
    }

    .fb-header,
    #fbProfileHeader {
        border-radius: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .fb-header .cover-photo,
    #fbProfileHeader .cover-photo {
        height: 150px;
        border-radius: 0;
    }

    /* Line 1: avatar + name/bio side by side (avatar overlaps
       the cover bottom, name starts below the cover).
       Line 2: full-width action buttons. */

    .fb-header-row,
    #fbProfileHeader .fb-header-row {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: -40px;
        padding: 0 14px;
    }

    .fb-avatar-wrap,
    #fbProfileHeader .fb-avatar-wrap {
        position: static;
        flex: 0 0 auto;
    }

    .fb-avatar-wrap .profile-photo,
    #fbProfileHeader .fb-avatar-wrap .profile-photo {
        width: 108px;
        height: 108px;
        margin: 0;
        padding: 0;
    }

    .fb-avatar-wrap .profile-photo > *,
    #fbProfileHeader .fb-avatar-wrap .profile-photo > * {
        border-width: 3px;
    }

    .fb-header-info,
    #fbProfileHeader .fb-header-info {
        flex: 1 1 0%;
        width: auto;
        min-width: 0;
        margin-top: 44px;
        padding-top: 0;
    }

    .fb-header-name,
    #fbProfileHeader .fb-header-name {
        font-size: 22px;
    }

    .fb-header-bio,
    #fbProfileHeader .fb-header-bio {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
    }

    /* Chips row (location/education/...) is hidden on mobile —
       the same data lives in the About / Personal Details pane. */

    .fb-info-row,
    #fbProfileHeader .fb-info-row {
        display: none;
    }

    .fb-header-actions,
    #fbProfileHeader .fb-header-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-left: 0;
        padding: 10px 0 0;
        gap: 8px;
    }

    .fb-header-actions .fb-primary-btn,
    #fbProfileHeader .fb-header-actions .fb-primary-btn {
        flex: 1;
        min-width: 0;
    }

    /* Header more-menu becomes a fixed bottom sheet
       (kept in sync with the existing <=700px sheet). */

    .fb-header-actions .fb-more-wrap .fb-more-menu,
    #fbProfileHeader .fb-header-actions .fb-more-wrap .fb-more-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-height: 75vh;
        overflow-y: auto;
        margin: 0;
        padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        z-index: 1300;
        animation: fbSheetUp 0.22s ease;
    }

    .fb-more-cancel {
        display: block;
        width: 100%;
        margin-top: 6px;
        padding: 12px 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        border: none;
        border-radius: 10px;
        background: #e4e6eb;
        color: #1c1e21;
        cursor: pointer;
    }

    /* ---- DIVIDER + TABS ---- */

    .fb-header-divider,
    #fbProfileHeader .fb-header-divider {
        margin: 14px 14px 0;
    }

    .fb-tabs-bar,
    #fbProfileHeader .fb-tabs-bar {
        height: 60px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 4px;
        -webkit-overflow-scrolling: touch;
    }

    .fb-tabs-bar button,
    #fbProfileHeader .fb-tabs-bar button {
        height: 60px;
        padding: 0 13px;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Tabs dropdowns escape the scroll container:
       position fixed bottom sheets so the tabs bar's
       overflow-y:hidden can no longer clip them. */

    .fb-tabs-bar .fb-more-menu,
    .fb-tabs-dots-wrap .fb-more-menu,
    #fbTabsMoreMenu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-height: 75vh;
        overflow-y: auto;
        margin: 0;
        padding: 14px 10px calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
        z-index: 1300;
        animation: fbSheetUp 0.22s ease;
    }

    #fbProfileHeader + .fb-body {
        margin-top: 16px;
    }
}


/* ==========================================================
   5. BODY LAYOUT — two columns only on desktop
   ========================================================== */

@media (min-width: 1024px) {

    .fb-posts-layout {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 16px;
        align-items: start;
    }

    .fb-posts-layout .fb-main {
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 1023px) {

    .fb-posts-layout .fb-left {
        display: none;
    }

    .fb-posts-layout .fb-main {
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================================
   6. ABOUT / PERSONAL DETAILS — mobile (<= 767px)
   ========================================================== */

@media (max-width: 767px) {

    .about-layout {
        flex-direction: column;
        gap: 16px;
    }

    .about-sidebar {
        width: 100%;
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        position: static;
        padding-bottom: 6px;
    }

    .about-sidebar button {
        width: auto;
        white-space: nowrap;
    }

    .fb-about-layout {
        flex-direction: column;
    }

    .fb-about-side {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        position: static;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        overflow-x: auto;
        gap: 4px;
        padding: 0 16px 12px;
    }

    body:not(.dark-mode) .fb-about-side {
        border-bottom-color: #ced0d4;
    }

    .fb-about-title {
        display: none;
    }

    .fb-about-side button {
        width: auto;
        white-space: nowrap;
    }

    .fb-about-content {
        padding: 16px;
    }

    .fb-stack-card .photo-grid,
    #videosCard .photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .fb-timeline-photos-card .fb-mini-photos {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .fb-stack-head {
        flex-wrap: wrap;
    }

    .pd-row,
    .pd-birthday-row,
    .pd-family-add {
        flex-wrap: wrap;
    }
}


/* ==========================================================
   7. AVATAR RING — consistent on BOTH profile pages
   (fixes the dark ring that vanished against the cover
   gradient on user-profile.html in dark mode)
   ========================================================== */

body:not(.dark-mode) .fb-avatar-wrap .profile-photo > *,
body:not(.dark-mode) #fbProfileHeader .fb-avatar-wrap .profile-photo > * {
    border-color: #ffffff;
}

body.dark-mode .fb-avatar-wrap .profile-photo > *,
body.dark-mode #fbProfileHeader .fb-avatar-wrap .profile-photo > * {
    border-color: #242526;
}