/*
 * Feed post cards: photos that keep their shape and fit the screen, and a
 * card style matching header-simple.css / publisher-simple.css.
 *
 * Why photos looked shrunk or squashed: style.css gave every feed image
 * `#fullsizeimg img { min-height: 300px }` with the default object-fit
 * (fill) and fixed-width grid cells, so a wide photo was stretched to 300px
 * tall and a square photo in a 4-photo grid was squeezed into a 152x300 strip.
 *
 * Part 1 (photos) applies in light and dark mode: it is layout, not colour.
 * Part 2 (card look) is light mode only, like the other *-simple.css files.
 */

/* =====================================================================
   Part 1 — Photos
   ===================================================================== */

.post #fullsizeimg {
    max-height: none;
}

.post #fullsizeimg img {
    min-height: 0 !important;
}

/* ---- One photo: whole picture, never distorted, never taller than the
        screen. Letterboxing (if any) is a neutral grey. ---- */

.post #fullsizeimg > img:only-of-type,
.post #fullsizeimg > a > img:only-of-type:not(.fund) {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(680px, 80vh);
    object-fit: contain;
    background: #f3f4f6;
    border: 0 !important;
    margin: 0 auto;
}

/* ---- Two photos side by side; six or more: a 3-across grid with "+N" ---- */

.post #fullsizeimg:has(> img.width-2),
.post #fullsizeimg:has(> img.width-3) {
    display: grid;
    gap: 2px;
}

.post #fullsizeimg:has(> img.width-2) {
    grid-template-columns: 1fr 1fr;
}

.post #fullsizeimg:has(> img.width-3) {
    grid-template-columns: repeat(3, 1fr);
}

.post #fullsizeimg:has(> img.width-2) > .clear,
.post #fullsizeimg:has(> img.width-3) > .clear {
    display: none;
}

.post #fullsizeimg > img.width-2,
.post #fullsizeimg > img.width-3,
.post #fullsizeimg > .album-collapse > img {
    width: 100% !important;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border: 0 !important;
    margin: 0;
}

.post #fullsizeimg > .album-collapse {
    position: relative;
    width: 100% !important;
    margin: 0;
    float: none;
}

/* ---- Three, four and five photos: one big photo plus smaller ones.
        Real grids instead of floats + fixed heights, so columns always end
        level and every cell crops (object-fit: cover) instead of stretching. ---- */

.post .wo_adaptive_media,
.post .wo_adaptive_media_4,
.post .wo_adaptive_media_5 {
    display: grid !important;
    gap: 2px;
    width: 100%;
    height: auto !important;
    max-height: min(600px, 80vh);
    overflow: hidden;
}

/* 3: big left (2/3), two stacked right */
.post .wo_adaptive_media {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 3 / 2;
}

.post .wo_adaptive_media > .album-image:first-child {
    grid-row: 1 / 3;
}

/* 4: big left (3/4), three stacked right */
.post .wo_adaptive_media_4 {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    aspect-ratio: 4 / 3;
}

.post .wo_adaptive_media_4 > .album-image:first-child {
    grid-row: 1 / 4;
}

/* 5: two stacked left, three stacked right */
.post .wo_adaptive_media_5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 1 / 1;
}

.post .wo_adaptive_media_5 > .album-image:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.post .wo_adaptive_media_5 > .album-image:nth-child(2) { grid-column: 1; grid-row: 4 / 7; }
.post .wo_adaptive_media_5 > .album-image:nth-child(3) { grid-column: 2; grid-row: 1 / 3; }
.post .wo_adaptive_media_5 > .album-image:nth-child(4) { grid-column: 2; grid-row: 3 / 5; }
.post .wo_adaptive_media_5 > .album-image:nth-child(5) { grid-column: 2; grid-row: 5 / 7; }

.post .wo_adaptive_media > .album-image,
.post .wo_adaptive_media_4 > .album-image,
.post .wo_adaptive_media_5 > .album-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none;
    overflow: hidden;
}

.post .wo_adaptive_media > .album-image > img,
.post .wo_adaptive_media_4 > .album-image > img,
.post .wo_adaptive_media_5 > .album-image > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: 0 !important;
    margin: 0;
}

.post #fullsizeimg .image-file {
    cursor: zoom-in;
}

/* =====================================================================
   Part 2 — Card look (light mode)
   ===================================================================== */

html:not(:has(#night-mode-css)) .post > .panel:not(.sun_pub_box) {
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin-bottom: 14px;
}

/* Photos run edge to edge inside the card. */
html:not(:has(#night-mode-css)) .post > .panel:not(.sun_pub_box) #fullsizeimg {
    margin-bottom: 0;
}

/* Header: avatar, name, time */
html:not(:has(#night-mode-css)) .post .post-heading {
    padding: 14px 16px 8px !important;
}

html:not(:has(#night-mode-css)) .post .post-heading .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

html:not(:has(#night-mode-css)) .post .post-heading .meta .title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

html:not(:has(#night-mode-css)) .post .post-heading .meta .time,
html:not(:has(#night-mode-css)) .post .post-heading .meta h6 {
    font-size: 12px;
    color: #6b7280 !important;
}

html:not(:has(#night-mode-css)) .post .post-heading .dropdown-toggle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #6b7280;
}

html:not(:has(#night-mode-css)) .post .post-heading .dropdown-toggle:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Post text */
html:not(:has(#night-mode-css)) .post .post-description > p,
html:not(:has(#night-mode-css)) .post .post-description .post-text {
    font-size: 15px;
    line-height: 1.55;
    color: #111827;
}

/* Like / Comment / Share */
html:not(:has(#night-mode-css)) .post .stats > .stat-item.btn,
html:not(:has(#night-mode-css)) .post .stats > .wo-reaction {
    border-radius: 8px !important;
    color: #4b5563 !important;
    font-weight: 600;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html:not(:has(#night-mode-css)) .post .stats > .stat-item.btn:hover,
html:not(:has(#night-mode-css)) .post .stats > .wo-reaction:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* Comment area */
html:not(:has(#night-mode-css)) .post .post-footer.post-comments {
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-radius: 0 0 12px 12px;
}