/* nnl-basis layout (from nnl-child-theme assets/css/layout.css): container and section spacing from the layout tokens, width of the fallback parts. Handle jutso-basis-layout. */
/* Defining the overall layout parameters */

/*
 * Outer Elementor container paddings 
 * Using clamp() to set a minimum and maximum padding value
 * the clamp calculator can be found here: https://www.marcbacon.com/tools/clamp-calculator/
 */

 .e-con:not(.e-child) {
    --padding-left: var(--content-padding);
    --padding-right: var(--content-padding);
}

/* Refactor with custom class */
.default-section-spacing > .e-con-inner,
.default-section-spacing.e-con-full {
    --padding-block-start: var(--section-padding-top);
    --padding-block-end: var(--section-padding-bottom);
}

.nnl-sds-top > .e-con-inner,
.nnl-sds-top.e-con-full {
    --padding-block-start: var(--section-padding-top-seperator);
}

.nnl-sds-bottom > .e-con-inner,
.nnl-sds-bottom.e-con-full {
    --padding-block-end: var(--section-padding-bottom-seperator);
}


@media screen and (max-width: 1024px) {
    .default-section-spacing > .e-con-inner,
    .default-section-spacing.e-con-full {
        --padding-block-start: var(--section-padding-top-tablet);
        --padding-block-end: var(--section-padding-bottom-tablet);
    } 

    .nnl-sds-top > .e-con-inner,
    .nnl-sds-top.e-con-full {
        --padding-block-start: var(--section-padding-top-seperator-tablet);
    }

    .nnl-sds-bottom > .e-con-inner,
    .nnl-sds-bottom.e-con-full {
        --padding-block-end: var(--section-padding-bottom-seperator-tablet);
    }
}

@media screen and (max-width: 767px) {
    .default-section-spacing > .e-con-inner,
    .default-section-spacing.e-con-full {
        --padding-block-start: var(--section-padding-top-mobile);
        --padding-block-end: var(--section-padding-bottom-mobile);
    }
    
    .nnl-sds-top > .e-con-inner,
    .nnl-sds-top.e-con-full {
        --padding-block-start: var(--section-padding-top-seperator-mobile);
    }

    .nnl-sds-bottom > .e-con-inner,
    .nnl-sds-bottom.e-con-full {
        --padding-block-end: var(--section-padding-bottom-seperator-mobile);
    }
    
}

/* .page > .e-con:not(.e-child){
    --padding-left: 0;
    --padding-right: 0;
} */

/* Define Layout outside of Elementor Template (For example default archive pages) */
/**
 * Responsive layouts. Overwriting the hello-elementor theme's default layout settings (from theme.css)
 */
  
@media (max-width: 575px) {
    .site-header .header-inner, .site-header:not(.dynamic-header), .site-footer .footer-inner, .site-footer:not(.dynamic-footer), body:not([class*=elementor-page-]) .site-main, .page-header .entry-title {
        padding-inline-start: 0px;
        padding-inline-end: 0px;
    }
}
.site-header .header-inner, .site-header:not(.dynamic-header), .site-footer .footer-inner, .site-footer:not(.dynamic-footer), body:not([class*=elementor-page-]) .site-main {
    padding-inline-start: var(--content-padding);
    padding-inline-end: var(--content-padding);
}

.site-header .header-inner, .site-header:not(.dynamic-header), .site-footer .footer-inner, .site-footer:not(.dynamic-footer), body:not([class*=elementor-page-]) .site-main, .page-header .entry-title {
    max-width: calc(var(--jutso-core-content-width) + var(--content-padding) + var(--content-padding));    
}

/**
 * Fixes
 */

body { overflow-x:hidden; }

/* Removing margin-bottom from last paragraphs */
body[class*="elementor-kit-"] p:last-child {
    margin-bottom: 0;
}

/**
 * Featured first post (1.4.0, container switch "Erster Beitrag in voller Breite"): inside a container
 * with the class nnl-loop-featured-first the first item of a Loop Grid spans the whole row, the
 * others keep the grid's columns. Covers Elementor's CSS grid (grid-column) and the theme's flex
 * layout of .elementor-loop-container.elementor-grid (base.css: item width from --grid-columns).
 * :first-of-type because Elementor may print a <style> element before the first item. Below the
 * mobile breakpoint the grid has one column, so every item is full width anyway. The wide image
 * ratio is the one the NNL post archive sets in its element CSS (starter archive-post.json).
 */
.nnl-loop-featured-first .elementor-loop-container > .e-loop-item:first-of-type {
	grid-column: 1 / -1;
	width: 100%;
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.nnl-loop-featured-first .elementor-loop-container > .e-loop-item:first-of-type img {
		aspect-ratio: 1279 / 517;
	}
}