/*
 * Final compatibility layer for native Ghost/Koenig cards.
 * Ghost owns each card's internal layout. This file only normalizes its
 * position, width and responsive behaviour inside the narrow article column.
 */
.gh-content > .kg-card,
.gh-content > figure,
.gh-content > .kg-width-wide,
.gh-content > .kg-width-full{
    box-sizing:border-box;
    float:none;
    clear:both;
}

/* Default cards remain in the readable article column. */
.gh-content > .kg-card:not(.kg-width-wide):not(.kg-width-full){
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* Wide cards are centred independently from the article column. */
.gh-content > .kg-width-wide{
    position:relative;
    left:auto;
    width:min(1100px,calc(100vw - 48px));
    max-width:none;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
}

/* Full cards reach both viewport edges without being shifted to the right. */
.gh-content > .kg-width-full{
    position:relative;
    left:auto;
    width:100vw;
    max-width:none;
    margin-left:50%;
    margin-right:0;
    transform:translateX(-50%);
}

/* Images and galleries */
.gh-content .kg-image-card img,
.gh-content .kg-gallery-card img{
    display:block;
    max-width:100%;
}
.gh-content .kg-image-card:not(.kg-width-full) img{margin-inline:auto}
.gh-content .kg-image-card.kg-width-wide img,
.gh-content .kg-image-card.kg-width-full img{width:100%}
.gh-content .kg-gallery-container,
.gh-content .kg-gallery-row{max-width:100%}

/* Embeds: YouTube, Vimeo and other responsive providers */
.gh-content .kg-embed-card{overflow:hidden}
.gh-content .kg-embed-card iframe{
    display:block;
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:16/9;
    min-height:0!important;
    height:auto!important;
    margin:0 auto!important;
}
.gh-content .kg-embed-card > div,
.gh-content .kg-embed-card > iframe{
    max-width:100%!important;
}

/* Native video and audio */
.gh-content .kg-video-card,
.gh-content .kg-audio-card{overflow:hidden}
.gh-content .kg-video-card video{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}
.gh-content .kg-audio-card,
.gh-content .kg-audio-card *{max-width:100%}

/* Header card: retain Ghost's inner card design, normalize outer placement. */
.gh-content > .kg-header-card{
    overflow:hidden;
    isolation:isolate;
    min-height:clamp(340px,52vw,680px);
}

/* Signup card: do not replace Ghost's flex/grid layout. */
.gh-content > .kg-signup-card{
    overflow:hidden;
    isolation:isolate;
    min-height:380px;
}

/* Textual and utility cards */
.gh-content .kg-bookmark-card,
.gh-content .kg-file-card,
.gh-content .kg-product-card,
.gh-content .kg-callout-card,
.gh-content .kg-toggle-card,
.gh-content .kg-button-card,
.gh-content .kg-audio-card{
    overflow-wrap:anywhere;
}
.gh-content .kg-bookmark-container,
.gh-content .kg-file-card-container,
.gh-content .kg-product-card-container{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}
.gh-content .kg-button-card a{max-width:100%}
.gh-content pre{
    max-width:100%;
    overflow-x:auto;
    white-space:pre;
}
.gh-content table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    border-collapse:collapse;
}
.gh-content hr{width:100%}

@media(max-width:600px){
    .gh-content > .kg-width-wide{
        width:calc(100vw - 32px);
    }
    .gh-content > .kg-header-card,
    .gh-content > .kg-signup-card{
        width:100vw;
        min-height:340px;
    }
    .gh-content .kg-gallery-row{gap:4px}
}