body {
    overflow-x: hidden;
    background-color: #fff1e5;
    color: #33302e;
}

body,
figure {
    padding: 0 !important;
    margin: 0 !important;
}

@import '@financial-times/o-grid/main';
@import '@financial-times/o3-foundation/css/core.css';
@import "@financial-times/o-teaser/main";
@import "@financial-times/o3-editorial-typography/css/core.css";
@import '@financial-times/cp-content-pipeline-styles/main';

.article__media {
    margin-bottom: 20px;

    audio,
    video {
        width: 100%;
    }
}

//Give a background to responsive graphics so they appear above sticky elements
.n-content-picture {
    background-color: var(--o3-color-use-case-page-background);
}

//Full bleed elements - amend the positioning to match grid
.n-content-layout[data-layout-width='full-grid'] {
    @include oGridRespondTo(L) {
        left: calc(50% + 120px);
        z-index: 2; // keep above share button & ads
    }
}

// Full bleed elements on centered template
.article-grid--centered {
    .n-content-layout[data-layout-width='full-grid'] {
        @include oGridRespondTo(L) {
            left: 50%;
            z-index: 2; // keep above share button & ads
        }
    }
}


// Contains grid container setup, and positioning of elements within the grid.

//This file is included in multiple places, so don't include actual CSS

@mixin articleGrid() {
    @include oGridContainer();
    max-width: 100%;
    display: flex;
    flex-direction: column;

    @include oGridRespondTo(L) {
        display: grid;
        grid-template-columns: 40px 40px minmax(500px, 700px) minmax(20px, 1fr) 300px;

        grid-template-areas: 'lhr . image . rhr-top'
            'lhr . content . rhr-top'
            'lhr . content . rhr-bottom'
            '. . tools . rhr-bottom'
            'more-articles more-articles more-articles more-articles more-articles'
            '. . onward . onward-rhr'
            '. . second-onward . onward-rhr'
            '. . promoted-content . .'
            '. . comments . comments-rhr';
        width: 100%;
    }

    @include oGridRespondTo(XL) {
        grid-template-columns: 40px 80px minmax(600px, 700px) minmax(20px, 1fr) 300px;
    }
}

@mixin articleGridCentered() {
    @include oGridRespondTo(L) {
        grid-template-columns: 40px 1fr minmax(500px, 700px) 1fr 40px;
    }

    @include oGridRespondTo(XL) {
        grid-template-columns: 1fr 40px minmax(500px, 700px) 40px 1fr;
    }
}

@mixin liveBlogArticleGrid() {
    @include oGridRespondTo(L) {
        grid-template-areas: 'lhr . content . rhr-top'
            'lhr . content . rhr-bottom'
            '. . comments . comments-rhr';
    }
}


.article-content {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas: 'topper'
        'article-body';
}

.article-grid {
    grid-area: article-body;

    @include articleGrid();
    margin: 20px auto;

    .main-image {
        grid-area: image;
    }

    .share-nav {
        grid-area: lhr;
        z-index: 7;
    }

    .article__content {
        margin-bottom: var(--o3-spacing-s);
        grid-area: content;
        max-width: 700px;
        width: 100%;
        position: relative; //so scroll depth tracking works

        @supports (display: grid) {
            max-width: auto;
        }
    }

    .article__right {
        grid-area: rhr-top;
        margin: 0 auto;
        width: 100%;
        display: flex;
        flex-direction: column;

        // Create a stacking context to prevent ad content from setting a z-index that overlays our content
        position: relative;
        z-index: 1;

        >.sidebar-advert {
            margin-bottom: var(--o3-spacing-s);
        }

        >.sidebar-advert.o-ads-sticky {

            // HACK: @supports (position: sticky) is misreported by MSEdge
            // @supports (-webkit-appearance:none) allows us to target the browsers
            // that do support it more accurately
            // Further details:
            // <https://github.com/Financial-Times/next-article/pull/3466>
            @supports (-webkit-appearance: none) {
                position: sticky;
                top: 80px;
            }
        }

        @include oGridRespondTo($until: L) {
            display: none;
        }
    }

    .article__right--live {
        display: flex; // always show it, on mobile as well

        .live-latest,
        .live-milestones {
            order: -1; // move this above the ad
        }
    }

    .article__right--live-splash {
        order: -1; // on mobile, move this column above the content (visually only)
    }

    .article-tools {
        margin-bottom: var(--o3-spacing-m);
        padding: var(--o3-spacing-s) 0 var(--o3-spacing-s) 0;
        grid-area: tools;
        border-bottom: 1px solid #ccc1b7;
        border-top: 1px solid #ccc1b7;

        @include oGridRespondTo($from: M) {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    }

    .promoted-content__container {
        grid-area: promoted-content;
    }

    .bottom-advert {
        @include oGridRespondTo($until: L) {
            display: none;
        }
    }

    .show-in-large-and-above {
        @include oGridRespondTo($until: L) {
            display: none;
        }
    }

    .ad-rhr-bottom {
        display: flex;
        flex: 1;
        align-items: flex-end;
        padding-bottom: 60px;
    }

    @mixin tintedBackgroundBefore() {
        position: relative;

        &:before {
            content: '';
            position: absolute;
            background: var(--o3-color-palette-black-5);
            width: 100vw;
            margin-left: -50vw;
            left: 50%;
            height: 100%;
            z-index: -1;
        }
    }

    .article__right-bottom {
        grid-area: rhr-bottom;
        align-self: start;
        z-index: 1; // grid & flex items both support `z-index` directly

        display: flex;
        flex-direction: column;

        padding: 0 10px;

        @include oGridRespondTo($until: L) {
            @include tintedBackgroundBefore();
        }

        .article-grid--centered & {
            @include oGridRespondTo(L) {
                @include tintedBackgroundBefore();
            }
        }
    }

    // Increased specificity to fix IE11 issue where generated CSS was targetting incorrect elements
    &.article-grid--centered,
    &.article-grid--full-width-graphics {
        >.article__right-bottom {
            grid-area: second-onward;
            padding: 0;
        }
    }
}

.article-grid--centered {
    @include articleGridCentered();

    .article__right,
    .bottom-advert,
    .onward-myft {
        display: none;
    }
}

.hidden {
    display: none !important;
}

.article-grid--live-blog {
    @include liveBlogArticleGrid();
}

$desktop-breakpoint: 980px;

.demo__content-container {
    margin: auto !important;
}

.o-grid-row {
    @media screen and (max-width: $desktop-breakpoint) {
        max-width: 100%;
    }

    max-width: 700px;
}

.o-normalise-visually-hidden {
    display: none;
}

@include oTeaser(
	$opts: (
		'elements': (
			'default',
			'images',
			'timestamp',
			'syndication',
			'promoted'
		),
		'themes': (
			'standard',
			'small',
			'audio',
			'large',
			'hero',
			'package'
		)
	)
);