/**
 * Post media — Instagram-style responsive feed images
 * Ratios clamped between 4:5 (portrait) and 1.91:1 (landscape); cover in feed, contain on detail.
 */

:root {
    --post-media-bg: #0c0f0d;
    --post-media-max-height-feed: min(72vw, 480px);
    --post-media-max-height-detail: min(75vh, 720px);
    --post-media-radius-detail: 14px;
}

.post-image-wrap,
.post-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--post-media-bg);
    aspect-ratio: 1 / 1;
    contain: layout style paint;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

a.post-image-wrap--feed {
    color: inherit;
    text-decoration: none;
}

a.post-image-wrap--feed:focus-visible {
    outline: 2px solid var(--brand-500, #2d6a4f);
    outline-offset: 2px;
}

.post-image-wrap--feed {
    border-top: 1px solid var(--border-subtle, rgba(15, 31, 23, 0.08));
    border-bottom: 1px solid var(--border-subtle, rgba(15, 31, 23, 0.08));
}

.post-card > .post-image-wrap--feed,
.dash-content .border.rounded-3 > .post-image-wrap--feed {
    border-left: none;
    border-right: none;
}

.post-image-wrap--detail {
    border-radius: var(--post-media-radius-detail);
    max-height: var(--post-media-max-height-detail);
    min-height: 180px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-subtle, rgba(15, 31, 23, 0.08));
}

.post-media__backdrop {
    position: absolute;
    inset: -28px;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(32px) saturate(1.15) brightness(0.5);
    transform: scale(1.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.post-image-wrap--ready .post-media__backdrop {
    opacity: 1;
}

.post-image-wrap .post-image,
.post-media__img {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.post-image-wrap--loading .post-image,
.post-image-wrap--loading .post-media__img {
    opacity: 0;
}

.post-image-wrap--detail .post-image,
.post-image-wrap--detail .post-media__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: var(--post-media-max-height-detail);
    object-fit: contain;
}

.post-image-wrap--detail.post-image-wrap--ready {
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-image-wrap--detail.post-image-wrap--ready .post-image,
.post-image-wrap--detail.post-image-wrap--ready .post-media__img {
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto;
}

.post-image-wrap--loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.04) 8%,
        rgba(255, 255, 255, 0.12) 18%,
        rgba(255, 255, 255, 0.04) 33%
    );
    background-size: 200% 100%;
    animation: post-media-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}

.post-image-wrap--ready.post-image-wrap--loading::before {
    display: none;
}

@keyframes post-media-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 767.98px) {
    :root {
        --post-media-max-height-feed: min(85vw, 420px);
        --post-media-max-height-detail: min(70vh, 560px);
    }

    .post-card > .post-image-wrap--feed {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    :root {
        --post-media-max-height-feed: min(92vw, 380px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-media__backdrop,
    .post-image-wrap .post-image,
    .post-media__img {
        transition: none;
    }

    .post-image-wrap--loading::before {
        animation: none;
        opacity: 0.06;
    }
}