/*
 * Editorial card widths
 * Normal: reading column · Wide: editorial stage · Full: article canvas
 */
.gh-content > .kg-card.kg-width-wide,
.gh-content > figure.kg-width-wide,
.gh-content > .kg-width-wide{
    position:relative!important;
    left:auto!important;
    width:min(850px,calc(100vw - 64px))!important;
    max-width:none!important;
    margin-left:50%!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
}
.gh-content > .kg-card.kg-width-full,
.gh-content > figure.kg-width-full,
.gh-content > .kg-width-full{
    position:relative!important;
    left:auto!important;
    width:min(962px,calc(100vw - 32px))!important;
    max-width:none!important;
    margin-left:50%!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
}

.gh-content > .kg-image-card.kg-width-wide,
.gh-content > .kg-image-card.kg-width-full,
.gh-content > .kg-gallery-card.kg-width-wide,
.gh-content > .kg-gallery-card.kg-width-full,
.gh-content > .kg-video-card.kg-width-wide,
.gh-content > .kg-video-card.kg-width-full,
.gh-content > .kg-embed-card.kg-width-wide,
.gh-content > .kg-embed-card.kg-width-full{
    overflow:hidden;
    background:#fff;
}
.gh-content > .kg-image-card.kg-width-wide img,
.gh-content > .kg-image-card.kg-width-full img,
.gh-content > .kg-video-card.kg-width-wide video,
.gh-content > .kg-video-card.kg-width-full video{
    display:block;
    width:100%!important;
    max-width:100%!important;
}
.gh-content > .kg-width-wide figcaption,
.gh-content > .kg-width-full figcaption{
    box-sizing:border-box;
    margin:0;
    padding:9px 12px 2px;
    background:#fff;
    text-align:left;
}

/* Header cards stay inside the editorial canvas. */
.gh-content > .kg-header-card.kg-width-full{
    width:min(962px,calc(100vw - 32px))!important;
}
.gh-content > .kg-header-card.kg-width-wide{
    width:min(850px,calc(100vw - 64px))!important;
}

/*
 * Signup cards deliberately break out across the viewport.
 * Ghost retains full ownership of the internal image/form layout.
 */
.gh-content > .kg-signup-card,
.gh-content > .kg-signup-card.kg-width-wide,
.gh-content > .kg-signup-card.kg-width-full,
.page-template .gh-content > .kg-signup-card{
    position:relative!important;
    left:auto!important;
    width:100vw!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:52px 0 52px 50%!important;
    overflow:hidden!important;
    border:5px solid var(--accent)!important;
    border-radius:0!important;
    outline:1px solid rgba(0,0,0,.12);
    box-shadow:0 18px 50px rgba(0,0,0,.24),0 4px 12px rgba(0,0,0,.16)!important;
    transform:translateX(-50%)!important;
}

/* Standalone pages use the same contained full-width canvas. */
.page-template .gh-content > .kg-card.kg-width-full:not(.kg-signup-card),
.page-template .gh-content > figure.kg-width-full,
.page-template .gh-content > .kg-width-full:not(.kg-signup-card){
    width:min(962px,calc(100vw - 32px))!important;
}

@media(max-width:700px){
    .gh-content > .kg-card.kg-width-wide:not(.kg-signup-card),
    .gh-content > figure.kg-width-wide,
    .gh-content > .kg-width-wide:not(.kg-signup-card),
    .gh-content > .kg-card.kg-width-full:not(.kg-signup-card),
    .gh-content > figure.kg-width-full,
    .gh-content > .kg-width-full:not(.kg-signup-card),
    .gh-content > .kg-header-card.kg-width-wide,
    .gh-content > .kg-header-card.kg-width-full,
    .page-template .gh-content > .kg-card.kg-width-full:not(.kg-signup-card),
    .page-template .gh-content > figure.kg-width-full,
    .page-template .gh-content > .kg-width-full:not(.kg-signup-card){
        width:calc(100vw - 32px)!important;
    }
    .gh-content > .kg-signup-card,
    .gh-content > .kg-signup-card.kg-width-wide,
    .gh-content > .kg-signup-card.kg-width-full,
    .page-template .gh-content > .kg-signup-card{
        width:calc(100vw - 16px)!important;
        margin-top:36px!important;
        margin-bottom:36px!important;
        border-width:3px!important;
        box-shadow:0 12px 30px rgba(0,0,0,.22),0 3px 9px rgba(0,0,0,.14)!important;
    }
}
