/* ==========================================================
   WN CONTENT MEDIA V1
   Unified compact thumbnails for openable content media
========================================================== */

:root {
    --wn-content-media-w: 120px;
    --wn-content-media-h: 90px;
    --wn-content-media-radius: 11px;
    --wn-content-media-gap: 8px;
}

/* Activity gallery */
.wn4d-gallery {
    grid-template-columns:
        repeat(auto-fill, minmax(110px, var(--wn-content-media-w))) !important;
    gap: var(--wn-content-media-gap) !important;
    justify-content: start !important;
}

.wn4d-gallery img {
    width: var(--wn-content-media-w) !important;
    height: var(--wn-content-media-h) !important;
    object-fit: cover !important;
    border-radius: var(--wn-content-media-radius) !important;
}

/* Public profile permanent posts / yawmiyat */
.wn-profile-contribution-media {
    width: var(--wn-content-media-w) !important;
    height: var(--wn-content-media-h) !important;
    margin: 10px 0 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: var(--wn-content-media-radius) !important;
}

.wn-profile-contribution-media img,
.wn-profile-contribution-media video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* Public profile media grid */
.wn-profile-media-grid {
    grid-template-columns:
        repeat(auto-fill, minmax(110px, var(--wn-content-media-w))) !important;
    gap: var(--wn-content-media-gap) !important;
    justify-content: start !important;
}

.wn-profile-media-card {
    width: var(--wn-content-media-w) !important;
    height: var(--wn-content-media-h) !important;
    aspect-ratio: auto !important;
    border-radius: var(--wn-content-media-radius) !important;
}

.wn-profile-media-card > img,
.wn-profile-media-card > video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Tawasul photo grid */
.wn-photo-grid {
    grid-template-columns:
        repeat(auto-fill, minmax(110px, var(--wn-content-media-w))) !important;
    gap: var(--wn-content-media-gap) !important;
    justify-content: start !important;
}

.wn-photo-card {
    width: var(--wn-content-media-w) !important;
    height: var(--wn-content-media-h) !important;
    aspect-ratio: auto !important;
    border-radius: var(--wn-content-media-radius) !important;
}

.wn-photo-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Saved content */
.saved-media {
    width: var(--wn-content-media-w) !important;
    height: var(--wn-content-media-h) !important;
    overflow: hidden !important;
    border-radius: var(--wn-content-media-radius) !important;
}

.saved-media img,
.saved-media video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --wn-content-media-w: 96px;
        --wn-content-media-h: 72px;
        --wn-content-media-radius: 10px;
        --wn-content-media-gap: 7px;
    }

    .wn4d-gallery,
    .wn-profile-media-grid,
    .wn-photo-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(90px, var(--wn-content-media-w))) !important;
    }
}

/* WN_YAWMIYAT_FEED_V3_START
   Facebook-like single-post media presentation
---------------------------------------------------------- */

.yawmiyat-feed .yawmiyat-thread-post,
.yawmiyat-feed .yawmiyat-thread-post.is-portrait,
.yawmiyat-feed .yawmiyat-thread-post.is-landscape,
.yawmiyat-feed .yawmiyat-thread-post.is-square {
    width: 400px !important;
    max-width: calc(100% - 16px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
}

/* الصورة أو الفيديو هو العنصر البصري الرئيسي */
.yawmiyat-feed .yawmiyat-thread-post .yawmiyat-thread-media,
.yawmiyat-feed .yawmiyat-thread-post.is-portrait .yawmiyat-thread-media,
.yawmiyat-feed .yawmiyat-thread-post.is-landscape .yawmiyat-thread-media,
.yawmiyat-feed .yawmiyat-thread-post.is-square .yawmiyat-thread-media {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* لا نقص الصورة: نحافظ على نسبتها الأصلية */
.yawmiyat-feed .yawmiyat-thread-post .yawmiyat-thread-media img,
.yawmiyat-feed .yawmiyat-thread-post .yawmiyat-thread-media video,
.yawmiyat-feed .yawmiyat-thread-post.is-portrait .yawmiyat-thread-media img,
.yawmiyat-feed .yawmiyat-thread-post.is-portrait .yawmiyat-thread-media video,
.yawmiyat-feed .yawmiyat-thread-post.is-landscape .yawmiyat-thread-media img,
.yawmiyat-feed .yawmiyat-thread-post.is-landscape .yawmiyat-thread-media video,
.yawmiyat-feed .yawmiyat-thread-post.is-square .yawmiyat-thread-media img,
.yawmiyat-feed .yawmiyat-thread-post.is-square .yawmiyat-thread-media video {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: 560px !important;

    margin: 0 !important;
    object-fit: contain !important;

    cursor: pointer !important;
    background: #000 !important;
}

/* الجوال: المنشور يأخذ عرض الشاشة تقريبًا */
@media (max-width: 767px) {
    .yawmiyat-feed .yawmiyat-thread-post,
    .yawmiyat-feed .yawmiyat-thread-post.is-portrait,
    .yawmiyat-feed .yawmiyat-thread-post.is-landscape,
    .yawmiyat-feed .yawmiyat-thread-post.is-square {
        width: calc(100% - 16px) !important;
        max-width: 430px !important;
    }

    .yawmiyat-feed .yawmiyat-thread-post .yawmiyat-thread-media img,
    .yawmiyat-feed .yawmiyat-thread-post .yawmiyat-thread-media video {
        max-height: 520px !important;
    }
}

/* WN_YAWMIYAT_FEED_V3_END */


/* WN_YAWMIYAT_PORTRAIT_4X5_V4_START */

/* معاينة الصورة العمودية داخل الـ Feed فقط */
.yawmiyat-feed
.yawmiyat-thread-post.is-portrait
.yawmiyat-thread-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: #000 !important;
}

.yawmiyat-feed
.yawmiyat-thread-post.is-portrait
.yawmiyat-thread-media img,
.yawmiyat-feed
.yawmiyat-thread-post.is-portrait
.yawmiyat-thread-media video {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* WN_YAWMIYAT_PORTRAIT_4X5_V4_END */

/* WN_YAWMIYAT_MEDIA_BACKGROUND_FIX_V1_START */

/* الصور: لا تظهر أي زوايا أو فراغات سوداء */
.yawmiyat-feed .yawmiyat-thread-media:has(img) {
    background: #ffffff !important;
}

.yawmiyat-feed .yawmiyat-thread-media img {
    background: #ffffff !important;
}

/* WN_YAWMIYAT_MEDIA_BACKGROUND_FIX_V1_END */

/* WN_YAWMIYAT_IMAGE_CORNERS_FINAL_V2_START */

/* الصور المنشورة: خلفية بيضاء نهائيًا مهما كان اتجاه الصورة */
.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media:has(img),

.yawmiyat-feed
.yawmiyat-thread-post.is-portrait
.yawmiyat-thread-media:has(img),

.yawmiyat-feed
.yawmiyat-thread-post.is-landscape
.yawmiyat-thread-media:has(img),

.yawmiyat-feed
.yawmiyat-thread-post.is-square
.yawmiyat-thread-media:has(img) {
    background: #ffffff !important;
}

/* الصورة نفسها لا تحمل أي خلفية سوداء */
.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media img,

.yawmiyat-feed
.yawmiyat-thread-post.is-portrait
.yawmiyat-thread-media img,

.yawmiyat-feed
.yawmiyat-thread-post.is-landscape
.yawmiyat-thread-media img,

.yawmiyat-feed
.yawmiyat-thread-post.is-square
.yawmiyat-thread-media img {
    background: #ffffff !important;
}

/* WN_YAWMIYAT_IMAGE_CORNERS_FINAL_V2_END */

/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_V1_START */

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #ffffff !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid img {
    display: block !important;
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    background: #ffffff !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="1"] {
    display: block !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="1"] img {
    height: auto !important;
    max-height: 420px !important;
    object-fit: contain !important;
}

/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_V1_END */

/* WN_YAWMIYAT_MULTI_IMAGE_GRID_V1_START */

.yawmiyat-feed
.yawmiyat-thread-media-grid {
    display: grid !important;
    gap: 3px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-grid img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    background: #ffffff !important;
}

/* صورة واحدة */
.yawmiyat-feed
.yawmiyat-thread-media-count-1 {
    display: block !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-1 img {
    height: auto !important;
    max-height: 720px !important;
    object-fit: contain !important;
}

/* صورتان */
.yawmiyat-feed
.yawmiyat-thread-media-count-2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-2 img {
    height: 230px !important;
    object-fit: cover !important;
}

/* 3 صور */
.yawmiyat-feed
.yawmiyat-thread-media-count-3 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
        repeat(2, 150px) !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-3 img {
    height: 100% !important;
    object-fit: cover !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-3 img:first-child {
    grid-row: 1 / span 2 !important;
}

/* 4 صور */
.yawmiyat-feed
.yawmiyat-thread-media-count-4 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
        repeat(2, 170px) !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-4 img {
    height: 100% !important;
    object-fit: cover !important;
}

/* 5 صور */
.yawmiyat-feed
.yawmiyat-thread-media-count-5 {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    grid-template-rows:
        185px 125px !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-5 img {
    height: 100% !important;
    object-fit: cover !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-5 img:nth-child(1),
.yawmiyat-feed
.yawmiyat-thread-media-count-5 img:nth-child(2) {
    grid-column: span 3 !important;
}

.yawmiyat-feed
.yawmiyat-thread-media-count-5 img:nth-child(n+3) {
    grid-column: span 2 !important;
}

@media (max-width: 480px) {

    .yawmiyat-feed
    .yawmiyat-thread-media-count-2 img {
        height: 190px !important;
    }

    .yawmiyat-feed
    .yawmiyat-thread-media-count-3 {
        grid-template-rows:
            repeat(2, 125px) !important;
    }

    .yawmiyat-feed
    .yawmiyat-thread-media-count-4 {
        grid-template-rows:
            repeat(2, 145px) !important;
    }

    .yawmiyat-feed
    .yawmiyat-thread-media-count-5 {
        grid-template-rows:
            155px 105px !important;
    }
}

/* WN_YAWMIYAT_MULTI_IMAGE_GRID_V1_END */


/* WN_YAWMIYAT_MULTI_IMAGE_GRID_PRIORITY_V1_START */

.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media.yawmiyat-thread-media-grid {
    display: grid !important;
}

.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media.yawmiyat-thread-media-grid.yawmiyat-thread-media-count-1 {
    display: block !important;
}

/* WN_YAWMIYAT_MULTI_IMAGE_GRID_PRIORITY_V1_END */

/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_3_V1_START */

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="3"] {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
        repeat(2, 150px) !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="3"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="3"] img:first-child {
    grid-row: 1 / span 2 !important;
}

/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_3_V1_END */


/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_5_V1_START */

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="5"] {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    grid-template-rows:
        150px 110px !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="5"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="5"] img:nth-child(1),
#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="5"] img:nth-child(2) {
    grid-column: span 3 !important;
}

#yawmiyatPreviewMedia.yawmiyat-preview-media-grid[data-count="5"] img:nth-child(n+3) {
    grid-column: span 2 !important;
}

/* WN_YAWMIYAT_MULTI_IMAGE_PREVIEW_5_V1_END */


/* WN_YAWMIYAT_MULTI_IMAGE_ASPECT_RESET_V1_START */

.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media.yawmiyat-thread-media-grid:not(.yawmiyat-thread-media-count-1) {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-content: start !important;
}

/* WN_YAWMIYAT_MULTI_IMAGE_ASPECT_RESET_V1_END */


/* WN_YAWMIYAT_FEED_5_IMAGE_FILL_V1_START */

.yawmiyat-feed
.yawmiyat-thread-post
.yawmiyat-thread-media.yawmiyat-thread-media-grid.yawmiyat-thread-media-count-5
img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* WN_YAWMIYAT_FEED_5_IMAGE_FILL_V1_END */