/* PLAN-06：Campaign Detail 封面依 ExtJson.cover.layout
   固定框高 + object-fit:cover（以圖就框；避免 width:100%+max-height+height:auto 橫向拉扁）。 */

.camp-cover--bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    height: min(56vh, 520px);
    overflow: hidden;
    background: var(--site-surface-muted, #0f172a);
}

.camp-cover--bleed .camp-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.camp-cover--contained {
    width: 100%;
    height: 320px;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--site-surface-muted, #0f172a);
}

.camp-cover--contained .camp-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.camp-cover--portrait {
    display: flex;
    justify-content: center;
}

.camp-cover--portrait .camp-cover-img {
    display: block;
    width: auto;
    max-width: min(100%, 420px);
    height: auto;
    max-height: 560px;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* 命名比例（CampaignCover）；與 ExtJson layout 可並存 */
.camp-cover--ar-16x9 { aspect-ratio: 16 / 9; }
.camp-cover--ar-4x3 { aspect-ratio: 4 / 3; }
.camp-cover--ar-1x1 { aspect-ratio: 1 / 1; }
.camp-cover--ar-3x4 { aspect-ratio: 3 / 4; }

.camp-cover--bleed.camp-cover--ar-16x9,
.camp-cover--bleed.camp-cover--ar-4x3,
.camp-cover--bleed.camp-cover--ar-1x1,
.camp-cover--bleed.camp-cover--ar-3x4 {
    height: auto;
    max-height: min(56vh, 520px);
}