/*
  Birdly - browser compatibility layer
  Ten plik ładuje się po style.css i stabilizuje wygląd na desktopowych przeglądarkach:
  Chrome, Edge, Firefox, Opera i Safari.
*/

/* Normalizacja bazowa */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    min-width: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
    -webkit-appearance: none;
    appearance: none;
}

input,
textarea,
select {
    min-width: 0;
}

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

/* Backdrop-filter: Safari wymaga prefiksu, Firefox/starsze przeglądarki dostają fallback */
.topbar,
.glass-card,
.composer,
.post-card,
.stories-card,
.events-card,
.suggestion-card,
.online-card,
.groups-card,
.profile-about-card,
.profile-hero,
.friend-section,
.mini-panel,
.pages-hero,
.pages-card,
.ads-hero,
.ads-card,
.company-profile-hero-v4,
.listing-detail-card,
.event-detail-card,
.profile-dropdown,
.reaction-picker,
.mobile-bottom-nav {
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .topbar,
    .glass-card,
    .composer,
    .post-card,
    .stories-card,
    .events-card,
    .suggestion-card,
    .online-card,
    .groups-card,
    .profile-about-card,
    .profile-hero,
    .friend-section,
    .mini-panel,
    .pages-hero,
    .pages-card,
    .ads-hero,
    .ads-card,
    .company-profile-hero-v4,
    .listing-detail-card,
    .event-detail-card,
    .profile-dropdown,
    .reaction-picker {
        background-color: rgba(3, 15, 24, .96) !important;
    }
}

/* Firefox: mniej problemów z prześwitami i sticky panelami */
html.browser-firefox .topbar,
html.browser-firefox .glass-card,
html.browser-firefox .post-card,
html.browser-firefox .composer {
    background-color: rgba(3, 15, 24, .92);
}

html.browser-firefox .left-sidebar,
html.browser-firefox .online-panel,
html.browser-firefox .right-column {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,229,255,.28) rgba(255,255,255,.04);
}

/* Safari: poprawki sticky, inputów i obrazków */
html.browser-safari .topbar {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

html.browser-safari input,
html.browser-safari textarea,
html.browser-safari select {
    border-radius: 14px;
}

html.browser-safari .post-media img,
html.browser-safari .post-image,
html.browser-safari .listing-gallery-main img,
html.browser-safari .event-card img,
html.browser-safari .story img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Edge/Chrome/Opera: stabilniejsze animacje i brak dziwnych repaintów */
html.browser-chromium .post-card,
html.browser-chromium .glass-card,
html.browser-chromium .profile-hero {
    transform: translateZ(0);
}

/* Bezpieczne gridy/flexy na desktopach */
.layout,
.profile-layout,
.pages-layout-v4,
.company-detail-layout,
.company-visual-layout,
.ads-layout,
.listing-detail-layout,
.events-layout,
.event-detail-layout,
.edit-profile-layout,
.user-profile-layout {
    width: 100%;
    min-width: 0;
}

.feed-column,
.profile-main,
.friend-main,
.pages-main,
.ads-main,
.events-main,
.company-detail-main,
.company-visual-main,
.listing-detail-main,
.event-detail-main,
.right-column,
.online-panel,
.left-sidebar {
    min-width: 0;
}

/* Desktop średniej szerokości: nie pozwól kolumnom rozpychać widoku */
@media (min-width: 769px) and (max-width: 1366px) {
    .layout {
        grid-template-columns: 250px minmax(0, 1fr) 340px !important;
        gap: 16px !important;
        padding-inline: 18px !important;
    }

    .online-panel {
        display: none !important;
    }

    .topbar-inner {
        gap: 16px !important;
        padding-inline: 18px !important;
    }

    .topbar .brand {
        width: 245px !important;
        flex-basis: 245px !important;
    }

    .search-bar {
        flex: 1 1 320px !important;
        max-width: 420px !important;
    }

    .right-column,
    .pages-right-v4,
    .events-right,
    .listing-info-panel,
    .event-side-stack {
        width: 340px !important;
        max-width: 340px !important;
    }
}

/* Desktop wąski / okno obok okna */
@media (min-width: 769px) and (max-width: 1120px) {
    .layout,
    .profile-layout,
    .pages-layout-v4,
    .company-detail-layout,
    .company-visual-layout,
    .ads-layout,
    .listing-detail-layout,
    .events-layout,
    .event-detail-layout,
    .edit-profile-layout,
    .user-profile-layout {
        grid-template-columns: 230px minmax(0, 1fr) !important;
        gap: 14px !important;
        padding-inline: 14px !important;
    }

    .right-column,
    .online-panel,
    .pages-right-v4,
    .company-detail-side,
    .company-visual-side,
    .events-right {
        display: none !important;
    }

    .search-bar {
        display: none !important;
    }

    .topbar .brand {
        width: auto !important;
        flex: 1 1 auto !important;
    }
}

/* Awaryjny fallback dla bardzo starych przeglądarek bez CSS Grid */
@supports not (display: grid) {
    .layout,
    .profile-layout,
    .pages-layout-v4,
    .company-detail-layout,
    .company-visual-layout,
    .ads-layout,
    .listing-detail-layout,
    .events-layout,
    .event-detail-layout,
    .edit-profile-layout,
    .user-profile-layout {
        display: flex !important;
        align-items: flex-start;
        gap: 18px;
    }

    .feed-column,
    .profile-main,
    .friend-main,
    .pages-main,
    .ads-main,
    .events-main,
    .company-detail-main,
    .company-visual-main,
    .listing-detail-main,
    .event-detail-main {
        flex: 1 1 auto;
    }

    .left-sidebar {
        flex: 0 0 280px;
    }

    .right-column,
    .online-panel,
    .pages-right-v4,
    .events-right {
        flex: 0 0 340px;
    }
}

/* Zamiennik dla :has() w starszym Firefox/Safari przez klasę dodawaną JS */
.friend-list-row.has-open-menu {
    z-index: 10;
}

/* Bezpieczne focusy, także gdy :focus-visible nie jest dostępne */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid rgba(0,229,255,.55);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

/* Starsze Safari/Firefox potrafią źle liczyć obrazki w kartach */
.post-media,
.post-image-wrap,
.listing-gallery-main,
.event-card,
.story,
.story-thumb {
    min-width: 0;
}

.post-media img,
.post-image,
.listing-gallery-main img,
.event-card img,
.story img,
.story-thumb img {
    image-rendering: auto;
}

/* Stabilniejsze rozwijane menu profilu */
.profile-menu,
.topbar-profile-menu,
.profile-menu-wrap {
    position: relative;
    z-index: 100;
}

.profile-dropdown {
    z-index: 9999;
}

/* Awaryjnie: gdy user ma zmniejszone/przybliżone okno, nie pokazuj poziomego scrolla */
@media (min-width: 769px) {
    html,
    body {
        overflow-x: clip;
    }

    @supports not (overflow: clip) {
        html,
        body {
            overflow-x: hidden;
        }
    }
}