/*
 * Hlavný obrázok, hlavička a obsah článku používajú rovnaký čitateľský stĺpec.
 * Poradie je vynútené aj cez CSS, aby ho neprepísali štýly nadradenej témy.
 */
.single-post .sg-article {
    --sg-article-content-max-width: 900px;
    --sg-article-content-inline-padding: clamp(22px, 4.5vw, 64px);
    --sg-article-readable-width: calc(
        var(--sg-article-content-max-width)
        - var(--sg-article-content-inline-padding)
        - var(--sg-article-content-inline-padding)
    );
    display: flex !important;
    flex-direction: column;
}

.single-post .sg-article > * {
    order: 4;
}

.single-post .sg-article > .sg-article-hero {
    order: 1;
}

.single-post .sg-article > .sg-article-header {
    order: 2;
}

.single-post .sg-article > .sg-article-content {
    order: 3;
}

.single-post .sg-article-header {
    padding: 0;
}

.single-post .sg-article-header__inner,
.single-post .sg-article-hero {
    width: calc(
        100%
        - var(--sg-article-content-inline-padding)
        - var(--sg-article-content-inline-padding)
    );
    max-width: var(--sg-article-readable-width);
    margin-right: auto;
    margin-left: auto;
}

.single-post .sg-article-header__inner {
    padding-top: clamp(24px, 4vw, 52px);
    padding-bottom: 30px;
}

.single-post .sg-article-title,
.single-post .sg-article-lead {
    max-width: none;
}

.single-post .sg-article-hero {
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    background: #050709;
    border-right: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
    border-left: 1px solid var(--sg-border);
}

.single-post .sg-article-hero img {
    width: 100%;
    height: auto !important;
    max-height: none;
    display: block;
    object-fit: contain;
}

.single-post .sg-article-hero figcaption {
    width: 100%;
    padding: 9px 0;
}

/*
 * Verdikt/hodnotenie používa rovnakú šírku ako text a obrázky článku.
 */
.single-post .sg-review-summary {
    width: calc(
        100%
        - var(--sg-article-content-inline-padding)
        - var(--sg-article-content-inline-padding)
    );
    max-width: var(--sg-article-readable-width);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 680px) {
    .single-post .sg-article-header__inner,
    .single-post .sg-article-hero,
    .single-post .sg-review-summary {
        width: calc(100% - 32px);
    }

    .single-post .sg-article-hero {
        border-right: 0;
        border-left: 0;
    }
}