/* Post media follows X's feed card: one attachment sits in a single fixed card,
   a pair shares one frame, three or more become a two-up slide reel. The card is
   sized by the site, never by the file — a tall photo or reel cannot stretch it.
   The only exception is a landscape attachment, which gets the wide frame.
   Inside the frame the whole attachment is shown, letterboxed on a matte, so a
   post never looks cropped or cut off. */
.mtv-post__media {
    --mtv-media-h: clamp(210px, 46vw, 400px);
    --mtv-media-matte: #eef1f5;
}

/* One clip: a portrait card for portrait/square clips, a wide card for landscape
   ones, and the clip is letterboxed inside that card, never cropping or resizing it. */
.mtv-post__media.is-video {
    display: block;
    height: auto;
    background: #0b141c;
}
.mtv-post__media.is-video.is-portrait,
.mtv-post__media.is-video.is-unknown {
    aspect-ratio: 5 / 4;
}
.mtv-post__media.is-video.is-landscape {
    aspect-ratio: 16 / 9;
}
.mtv-post__media.is-video .mtv-post__video,
.mtv-post__media.is-video.is-portrait .mtv-post__video,
.mtv-post__media.is-video.is-landscape .mtv-post__video,
.mtv-post__media.is-video.is-unknown .mtv-post__video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    border-radius: 0;
}
.mtv-post__media.is-video .mtv-post__still img,
.mtv-post__media.is-video.is-portrait .mtv-post__still img,
.mtv-post__media.is-video.is-unknown .mtv-post__still img,
.mtv-post__media.is-video.is-landscape .mtv-post__still img {
    object-fit: contain;
}
/* Single photo: the card is shaped by the shot — never taller than 4:5 — so a
   portrait photo fills the card edge to edge instead of floating small on a
   matte, and the card cannot eat the phone screen. Nothing is cut. */
.mtv-post__media.count-1.is-framed {
    display: block;
    aspect-ratio: var(--mtv-media-ratio, 1.25);
    background: var(--mtv-media-matte);
}
/* A portrait or square photo is fitted whole on the matte, never cut; a wide
   shot keeps its own wide card. */
.mtv-post__media.count-1.is-framed.is-portrait {
    aspect-ratio: 5 / 4;
}
.mtv-post__media.count-1.is-framed img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
}
.mtv-post__media.count-1 img {
    object-fit: contain;
    object-position: center;
}
/* The post page is where a photo is actually looked at, so there the card grows
   to the shot's own height (still capped) instead of the feed frame. */
.mtv-thread .mtv-post__media.count-1.is-framed {
    aspect-ratio: auto;
}
.mtv-thread .mtv-post__media.count-1.is-framed img {
    height: auto;
    max-height: 78vh;
    object-fit: contain;
}
/* Two attachments: both visible at once, the way X shows a pair, each shown whole.
   The pair frame is a fifth taller than the shared frame so two photos do not look
   like a strip next to a full card. */
.mtv-post__media.count-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    height: calc(var(--mtv-media-h) * 1.2);
    background: var(--mtv-media-matte);
}
.mtv-post__pairitem {
    position: relative;
    overflow: hidden;
    background: var(--mtv-media-matte);
}
.mtv-post__pairitem img,
.mtv-post__pairitem video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
}

/* Three or more: same frame, two slides in view, the rest behind the swipe. The
   reel frame is two 15% steps taller than the shared frame so a swipe card does
   not read as a strip beside a full card. */
.mtv-post__media.mtv-post__carousel {
    height: auto;
}
.mtv-post__carousel .mtv-post__viewport {
    height: calc(var(--mtv-media-h) * 1.3225);
}
.mtv-post__carousel .mtv-post__track {
    height: 100%;
}
.mtv-post__carousel .mtv-post__slide {
    flex: 0 0 calc(50% - 1px);
    aspect-ratio: auto;
    height: 100%;
    background: var(--mtv-media-matte);
}
.mtv-post__carousel .mtv-post__slide + .mtv-post__slide {
    margin-left: 2px;
}
/* A slide shows its whole attachment on the matte rather than filling the cell. */
.mtv-post__carousel .mtv-post__slide img,
.mtv-post__carousel .mtv-post__slide video,
.mtv-post__carousel .mtv-post__slide video.mtv-post__video--tile {
    object-fit: contain;
    object-position: center;
}
.mtv-post__carousel .mtv-post__slide video {
    background: #0b141c;
}
/* The post page is where a clip is actually watched, and its card is narrow, so
   there one slide takes the whole frame instead of sharing it with a neighbour. */
.mtv-thread .mtv-post__carousel .mtv-post__slide {
    flex: 0 0 100%;
}
.mtv-thread .mtv-post__carousel .mtv-post__slide + .mtv-post__slide {
    margin-left: 0;
}
/* The opened post keeps the standard frame; the taller reel belongs to the feed. */
.mtv-thread .mtv-post__carousel .mtv-post__viewport {
    height: var(--mtv-media-h);
}

/* Dark theme: the matte and the letterbox blend into the card. */
:root[data-theme="dark"] .mtv-post__media {
    --mtv-media-matte: #101a22;
}
:root[data-theme="dark"] .mtv-post__media.is-video {
    background: #000;
}

@media (max-width: 820px) {
    .mtv-post__media {
        --mtv-media-h: clamp(200px, 56vw, 340px);
    }
    /* A phone column is narrow, so a 4:5 card left a portrait photo small on a
       wide matte. The phone card now takes the shot's own shape, capped at 4:5
       so it stays shorter than the screen; the photo fills it edge to edge. */
    .mtv-post__media.count-1.is-framed.is-portrait {
        aspect-ratio: var(--mtv-media-ratio-phone, 4 / 5);
    }
    /* A lone reel keeps the site's fixed phone frame. */
    .mtv-post__media.is-video.is-portrait,
    .mtv-post__media.is-video.is-unknown {
        aspect-ratio: 4 / 5;
    }
    /* The post page still grows to the photo's own height, so nothing is cut. */
    .mtv-thread .mtv-post__media.count-1.is-framed.is-portrait {
        aspect-ratio: auto;
    }
    /* Older rules frame a portrait reel as a 4:5 card on phones; the fixed
       frame above replaces that, so the clip stays inside the card. */
    .mtv-post__media.is-video.is-portrait .mtv-post__video,
    .mtv-post__media.is-video.is-unknown .mtv-post__video {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }
    .mtv-post__media.is-video.is-portrait .mtv-post__still img,
    .mtv-post__media.is-video.is-unknown .mtv-post__still img {
        object-fit: contain;
    }
    /* The post page had its own full-frame reel rule; the frame wins there too. */
    .mtv-thread .mtv-post__media.is-video.is-portrait .mtv-post__video,
    .mtv-thread .mtv-post__media.is-video.is-unknown .mtv-post__video {
        width: 100%;
        height: 100%;
        max-height: 100%;
        aspect-ratio: auto;
        object-fit: contain;
    }
    /* An older phone rule let a single photo stand up to 80vh tall and cropped it. */
    .mtv-post__media.count-1.is-framed img {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }
    .mtv-thread .mtv-post__media.count-1.is-framed img {
        height: auto;
        max-height: 78vh;
        object-fit: contain;
    }
    /* A phone column cannot give half-width cells more width, so on the feed a
       multi-photo cell is filled edge to edge instead of letterboxed — the photo
       reads at full cell size. The opened post still shows the whole shot. */
    .mtv-post__media.count-2:not(.is-video) .mtv-post__pairitem > img,
    .mtv-post__media.count-2:not(.is-video) .mtv-post__pairitem > video,
    .mtv-post__media.mtv-post__carousel:not(.is-video) .mtv-post__slide > img,
    .mtv-post__media.mtv-post__carousel:not(.is-video) .mtv-post__slide > video {
        object-fit: cover;
        object-position: center;
    }
    .mtv-thread .mtv-post__media.count-2 .mtv-post__pairitem > img,
    .mtv-thread .mtv-post__media.count-2 .mtv-post__pairitem > video,
    .mtv-thread .mtv-post__media.mtv-post__carousel .mtv-post__slide > img,
    .mtv-thread .mtv-post__media.mtv-post__carousel .mtv-post__slide > video {
        object-fit: contain;
    }
}