/**
 * Activity Media Grid — Photos, Videos, GIFs
 *
 * All layout rules for activity media grids. Overrides BuddyBoss platform's
 * flex-based grid with gap:2px hairline gutters and 16px rounded card style.
 *
 * Photo grid: relocated from activity.css sections 14 & 22 (unchanged behavior).
 * Video grid: fixes for 3-item layout — kills absolute positioning, uses flex.
 *
 * @package    BUZEECI
 * @version    1.0.0
 * @since      19-03-2026
 */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 1. Shared Wrapper                                                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

#buddypress .bb-item-cover-wrap {
	border-radius: 0!important;
}

.bb-activity-media-elem,
.bb-activity-video-elem {
    padding: 0 !important;
}

.bb-activity-media-wrap,
.bb-activity-video-wrap {
    border-radius: 16px;
    border: 1px solid rgb(207, 217, 222);
    overflow: hidden;
    margin: 0;
    width: 100%;
    gap: 2px;
}

.bb-empty-content :is(.bb-activity-media-wrap, .bb-activity-video-wrap) {
    margin-top: 5px;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 2. Photo Grid                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Single photo ────────────────────────────────────────────────────────── */

.bb-activity-media-wrap.bb-media-length-1 {
    width: fit-content;
    width: -webkit-fit-content;
    overflow: initial;
}

.bb-activity-media-wrap:not(.bb-media-length-1) .media-activity>a {
    border-radius: 0;
}

.bb-media-length-1 :is(.bb-vertical-layout, .bb-horizontal-layout)>a {
    border-radius: 16px !important;
    overflow: hidden;
}

.bb-media-length-1 .bb-activity-media-elem.media-activity {
    min-width: initial;
}

/* ── 2 photos — equal halves ─────────────────────────────────────────────── */

:is(.bb-activity-media-wrap.bb-media-length-2, .bb-activity-video-wrap.bb-video-length-2) :is(.act-grid-1-1, .act-grid-1-2)>a {
    min-height: 290px;
}

/* ── Shared count-based flex sizing (photos + videos) ────────────────────── */

:is(.bb-activity-media-wrap, .bb-activity-video-wrap)>.act-grid-1-2 {
    flex: 0 0 calc(50% - 1px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-2, .bb-activity-video-wrap.bb-video-length-2)>.act-grid-1-1 {
    flex: 0 0 calc(50% - 1px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-4, .bb-activity-video-wrap.bb-video-length-4)>.act-grid-1-2 {
    flex: 0 0 calc(33.33% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-5, .bb-activity-video-wrap.bb-video-length-5)>.act-grid-1-1 {
    flex: 0 0 calc(50% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-5, .bb-activity-video-wrap.bb-video-length-5)>.act-grid-1-1+.act-grid-1-2 {
    flex: 0 0 calc(50% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-5, .bb-activity-video-wrap.bb-video-length-5)>.act-grid-1-2 {
    flex: 0 0 calc(33.33% - 2px) !important;
}

/* ── Portrait-first 3-item (photos) ──────────────────────────────────────── */

:is(.bb-activity-media-wrap.bb-media-length-3, .bb-activity-video-wrap.bb-video-length-3)>.act-grid-1-1.bb-vertical-layout {
    flex: 0 0 calc(64% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-3, .bb-activity-video-wrap.bb-video-length-3)>.act-grid-1-1.bb-vertical-layout~.bb-activity-media-elem {
    flex: 0 0 calc(36% - 2px) !important;
}

/* ── Portrait-first 4-item (photos) ──────────────────────────────────────── */

:is(.bb-activity-media-wrap.bb-media-length-4, .bb-activity-video-wrap.bb-video-length-4)>.act-grid-1-1.bb-vertical-layout {
    flex: 0 0 calc(64% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-4, .bb-activity-video-wrap.bb-video-length-4)>.act-grid-1-1.bb-vertical-layout~ :is(.bb-activity-media-elem, .bb-activity-video-elem) {
    flex: 0 0 calc(36% - 2px) !important;
}

/* ── 5+ / more ───────────────────────────────────────────────────────────── */

:is(.bb-activity-media-wrap.bb-media-length-more, .bb-activity-video-wrap.bb-video-length-more)>.act-grid-1-1 {
    flex: 0 0 calc(50% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-more, .bb-activity-video-wrap.bb-video-length-more)>.act-grid-1-1+.act-grid-1-2 {
    flex: 0 0 calc(50% - 2px) !important;
}

:is(.bb-activity-media-wrap.bb-media-length-more, .bb-activity-video-wrap.bb-video-length-more)>.act-grid-1-2 {
    flex: 0 0 calc(33.33% - 2px) !important;
}

/* ── Portrait-first absolute position corrections (photos) ───────────────── */

.bb-activity-media-wrap.bb-media-length-4 .act-grid-1-1.bb-vertical-layout+.bb-activity-media-elem+.bb-activity-media-elem {
    top: calc(33.4% + 0.6px) !important;
}

.bb-activity-media-wrap.bb-media-length-3 .act-grid-1-1.bb-vertical-layout+.bb-activity-media-elem+.bb-activity-media-elem {
    right: 2px;
    width: calc(36% - 2px);
    border-top: 2px solid var(--bb-content-background-color);
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 3. Video Grid                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

.bb-activity-video-wrap {
    display: flex;
    flex-flow: row wrap;
    max-height: 510px;
}

/* ── Video 1-item ────────────────────────────────────────────────────────── */

.bb-video-length-1 .act-grid-1-1 {
    flex: 0 0 100%;
}

/* ── Video 2-item ────────────────────────────────────────────────────────── */

.bb-video-length-2 .act-grid-1-1,
.bb-video-length-2 .act-grid-1-2 {
    flex: 0 0 calc(50% - 1px) !important;
}

/* ── Video 3+ — layout based on first item orientation ───────────────────── */

/* Landscape first: kill BB's absolute positioning, use flex */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2):has(.act-grid-1-1.bb-horizontal-layout) .bb-activity-video-elem {
    position: static !important;
}

.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-horizontal-layout {
    flex: 0 0 100% !important;
}

.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-horizontal-layout ~ .act-grid-1-2 {
    flex: 0 0 calc(50% - 1px) !important;
}

/* Portrait first: absolute positioning for left column + right stacked */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2):has(.act-grid-1-1.bb-vertical-layout) {
    position: relative;
    height: 400px;
}

/* First item — left column, full height */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-vertical-layout {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(50% - 1px) !important;
    flex: none !important;
}

/* Second item — right top half */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-vertical-layout + .act-grid-1-2 {
    position: absolute !important;
    right: 0;
    top: 0;
    width: calc(50% - 1px) !important;
    height: calc(50% - 1px) !important;
    flex: none !important;
}

/* Third item — right bottom half */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-vertical-layout + .act-grid-1-2 + .act-grid-1-2 {
    position: absolute !important;
    right: 0;
    bottom: 0;
    width: calc(50% - 1px) !important;
    height: calc(50% - 1px) !important;
    flex: none !important;
}

/* Kill padding-top on right column items (BB's aspect-ratio hack) */
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-vertical-layout + .act-grid-1-2 .bb-item-cover-wrap,
.bb-activity-video-wrap:not(.bb-video-length-1):not(.bb-video-length-2) .act-grid-1-1.bb-vertical-layout + .act-grid-1-2 + .act-grid-1-2 .bb-item-cover-wrap {
    padding-top: 0 !important;
}

/* ── Video thumbnails — fill cell ────────────────────────────────────────── */

.bb-activity-video-wrap:not(.bb-video-length-1) .bb-video-cover-wrap,
.bb-activity-video-wrap:not(.bb-video-length-1) .bb-item-cover-wrap {
    width: 100%;
    height: 100%;
}

.bb-activity-video-wrap:not(.bb-video-length-1) .bb-video-cover-wrap img,
.bb-activity-video-wrap:not(.bb-video-length-1) .bb-item-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 4. Reshare Container                                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */

:is(.bb-activity-video-wrap, .bb-activity-media-wrap, .activity-attached-gif-container):has(+.buzeeci-reshare-container) {
    margin-bottom: 4px;
}

.buzeeci-reshare-container :is(.bb-media-length-1, .bb-video-length-1) :is(.bb-vertical-layout, .bb-horizontal-layout) {
    border-radius: 0 0;
    overflow: hidden;
}

.buzeeci-reshare-container :is(.bb-media-length-1, .bb-video-length-1) .act-grid-1-1 {
    flex: 0 0 100%;
}

.buzeeci-reshare-container .bb-media-length-1 .act-grid-1-1>a {
    border-radius: 0 0 16px 16px !important;
    max-height: 350px;
}

.buzeeci-reshare-container .bb-video-length-1 .act-grid-1-1>div {
    border-radius: 0;
}

.buzeeci-reshare-container :is(.bb-activity-media-wrap, .bb-activity-video-wrap) {
    border-radius: 0 0 16px 16px;
}

.buzeeci-reshare-container:has(.bb-activity-media-wrap, .bb-activity-video-wrap) .activity-inner {
    border-radius: 0 !important;
    margin-bottom: 6px !important;
}

.buzeeci-reshare-container:has(.bb-activity-media-wrap, .bb-activity-video-wrap) .activity-inner>p {
    margin-left: 14px;
}

.buzeeci-reshare-container:has(.bb-activity-media-wrap, .bb-activity-video-wrap) .activity-item {
    padding: 12px 0 0 !important;
}

.buzeeci-reshare-container:has(.bb-activity-media-wrap, .bb-activity-video-wrap) .activity-avatar {
    margin-left: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/* 5. GIF Container                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

.activity-content .gif-image-container {
    border-radius: 16px;
    overflow: hidden;
}