:root {
    /* --debug-svg: red; */
    --max-content-width: 120ch; /* amounts to 72ch (minus paddings) per 3 main content cols */
    /* 80ch / 3 cols * 5 cols = 133.33ch */
    --layout-pad: calc((100% - min(100%, var(--max-content-width))) / 2);
    --mid-gap: 1rem;
    --small-gap: 0.5rem;

    /* --gap-unit-base: min(calc(2 * 1vmin + 0.25vmax), 1rem); */
    --gap-unit-base: min(calc(1.25vmin + 0.5vmax), 1rem);
    --gap-unit: var(--gap-unit-base, 1rem);
    /* gap between sections */
    --_section-gap: calc(10 * var(--gap-unit));
    --_mobile-section-gap: calc(5 * var(--gap-unit));
    --section-gap: var(--_section-gap);

    /* gap inside blocks */
    --_block-row-gap: calc(2 * var(--gap-unit));
    --_mobile-block-row-gap: calc(1 * var(--gap-unit));
    --block-row-gap: var(--_block-row-gap);
    --footer-bottom-pad: var(--_block-row-gap);

    /* gap between columns & content */
    --_gutter: 1rem;
    --_mobile-gutter: 0.625rem;
    --_content-col-gap: var(--_gutter, 1rem);
    --_mobile-content-col-gap: var(--_mobile-gutter, 0.5rem);
    --_content-row-gap: 0.5rem;

    --gutter: var(--_gutter, 1rem);
    --half-gutter: calc(var(--gutter) / 2);
    --grid-gutter: calc(var(--gutter) / 2);
    --content-subgrid-pad: calc(var(--gutter) / 2);
    --content-col-gap: var(--_content-col-gap, var(--gutter, 1rem));
    --content-row-gap: var(--_content-row-gap, var(--half-gutter, 0.5rem));

    /* especially important for the smaller section-title fonts */
    --line-height: 23px; /* but also a weird magic number */
    /* i trust u, vivi */

    /* padding before logo */
    --logo-margin-top: 2rem;

    --issue-number-grid-column: 4; /* TODO: hacky stuff */
}

@media screen and (max-width: 80ch) {
    :root {
        --content-col-gap: var(
            --_mobile-content-col-gap,
            var(--_content-col-gap)
        );
        --section-gap: var(--_mobile-section-gap, var(--_section-gap));
        --gutter: var(--_mobile-gutter, var(--_gutter));
        --block-row-gap: var(--_mobile-block-row-gap, var(--_block-row-gap));
        --logo-margin-top: 1rem;
    }
}

/** Layout */

.grid /* helper i don't use (?) */,
[class*="grid-"],
[class*="grid"] /* prolly shudn't ?? */ {
    display: grid;
}

.content-grid {
    --content-template-cols: [content-start content-title-start logo-start] 1fr
        [content-title-end content-subtitle-start awards-start
        testimonial-image-start] 1fr [testimonial-image-end content-subtitle-end
        content-main-start content-text-start testimonial-quote-start] 1fr [
        logo-end] 1fr [testimonial-quote-end] 1fr [awards-end content-text-end
        content-main-end content-end];
}

[data-layout="single-column"].content-grid .content-subgrid {
    --content-template-cols: [content-start] 1fr [content-title-start
        content-subtitle-start content-main-start] min(calc(100% - 2rem), 90ch)
        [content-title-end content-subtitle-end content-main-end] 1fr
        [content-end];
    grid-template-columns: var(--content-template-cols);
    display: grid;
}

@media screen and (max-width: 98ch) {
    .content-grid {
        --content-template-cols: [content-start content-title-start logo-start]
            1fr [content-title-end content-subtitle-start awards-start
            testimonial-image-start] 1fr [testimonial-image-end
            content-subtitle-end content-main-start content-text-start
            testimonial-quote-start] 1fr [ logo-end] 1fr 1fr
            [testimonial-quote-end awards-end content-text-end content-main-end
            content-end];
    }
}

@media screen and (max-width: 80ch) {
    .content-grid {
        --content-template-cols: [content-start content-title-start
            content-subtitle-start logo-start content-text-start awards-start
            testimonial-quote-start] 1fr [content-title-end content-subtitle-end
            content-main-start logo-end testimonial-image-start] 1fr
            [testimonial-image-end] 1fr [testimonial-quote-end awards-end
            content-text-end content-main-end content-end];
    }
    [data-layout="single-column"].content-grid .content-subgrid {
        --content-template-cols: [content-start] 1fr [content-title-start
            content-subtitle-start content-main-start]
            min(calc(100% - 2rem), 90ch) [content-title-end content-subtitle-end
            content-main-end] 1fr [content-end];
    }

    .komma-logo-svg.mobile {
        margin-inline-start: -30%;
    }
}

.content-grid {
    --_content-template-cols: var(--content-template-cols, repeat(5, 1fr));
    display: grid;
    grid-template-columns:
        [full-width-start] var(--layout-pad) [full-block-start] var(
            --grid-gutter
        )
        var(--_content-template-cols)
        var(--grid-gutter) [full-block-end] var(--layout-pad) [full-width-end];
    /* border: 1px solid red; */
    /* column-gap: 1rem; */
}

.content-grid > * {
    grid-column: content;
}

main {
    row-gap: var(--section-gap);
    grid-row: 1;
}
main
    > :is(
        .block-type-text,
        .block-type-metadata,
        .block-type-team,
        .block-type-team_picker,
        .block-type-text
    ):first-child,
main:not([data-template="home"] *)
    > header
    + :is(
        .block-type-text,
        .block-type-metadata,
        .block-type-team,
        .block-type-team_picker,
        .block-type-text
    ):first-of-type /* wtf */ {
    margin-block-start: var(--_section-gap);
}

/* Responsive Exekutorz */
html.desktop .mobile {
    display: none;
}
html.mobile .desktop {
    display: none;
}

/** Images/Videos */

img,
video,
svg {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* these fix the weird bottom padding thing on imgs */
figure,
picture {
    display: grid;
}
*:has(> :is(/* img, */ source/* , figure, picture */)) {
    display: grid;
}

.overlap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    /* place-content: center; */
    & > * {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }
}

.jc-end {
    justify-content: end;
}

footer .socials .section-title {
    display: none;
}
[data-layout="single-column"] {
    .footer-logo {
        display: none;
    }
    .home-header .komma-logo {
        display: none;
    }
    footer {
        min-height: unset;
    }
    footer .contacts {
        grid-template-rows: unset;
    }
    footer .socials .section-title {
        display: grid;
    }
}
/** PRE-RELEASE PAGE BROKEN
check the grid-template-columns var.
we not updating it on some case */
/* [data-layout="single-column"]  */
.centered-image.block {
    figure {
        --_max-width: var(--max-figure-width, 80ch);
        --_min-padding: var(--min-figure-padding, 2rem);
        max-height: 90vh;
        height: 100%;
        width: 100%;
        aspect-ratio: var(--aspect-ratio);
        width: min(calc(100% - var(--_min-padding)), var(--_max-width));
        margin-inline: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        & > * {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
        }
        border: 3px solid blue;
    }
    img {
        margin-inline: auto;
        border: 3px solid red;
        max-height: 90vh;
        /* aspect-ratio: var(--aspect-ratio); */
        object-fit: contain;
        /* object-fit: cover; */
        background-color: deeppink;
        background-color: transparent;
    }

    @media (orientation: portrait) {
        img {
            width: var(--portrait-width, 100%);
            height: var(--portrait-height, auto);
            /* vmax maybe somehow? minmax or some units - checking... */
        }
    }

    @media (orientation: landscape) {
        img {
            width: var(--landscape-width, auto);
            height: var(--landscape-height, 100%);
            /* or just set these as the default
		and ditch this rule */
        }
    }
}

figure,
img {
    border: none !important;
}

.shrug {
    position: fixed;
    inset: 0;
    font-size: 30vmin;
    white-space: nowrap;
    text-align: center;
    display: grid;
    place-content: center;
    transform-origin: center center;
    animation: rotate45 30s linear infinite forwards;
    color: var(--c-white);
    mix-blend-mode: exclusion;

    z-index: 9;
    pointer-events: none;
    > span {
        position: relative;

        &::after {
            content: attr(data-content);
            position: absolute;
            text-shadow: 1px 1px 1px #3e3e3e, 2px 2px 1px #3e3e3e,
                3px 3px 1px #3e3e3e, 4px 4px 1px #3e3e3e, 5px 5px 1px #3e3e3e,
                6px 6px 1px #3e3e3e, 7px 7px 1px #3e3e3e, 8px 8px 1px #3e3e3e,
                9px 9px 1px #3e3e3e, 10px 10px 1px #3e3e3e, 1px 18px 6px #7f7f7f,
                1px 22px 10px #2a2a2a99, 1px 25px 35px #10101099;
            mix-blend-mode: exclusion;
            color: var(--c-black);
            inset: 0;
        }
    }
}
@keyframes rotate45 {
    0% {
        rotate: 45deg;
    }
    50% {
        scale: 2;
        transform: rotateY(2turn) skew(-35deg, 20deg);
        rotate: -45deg;
    }
    100% {
        /* transform: skewX(720deg) ; */
        transform: rotateY(4turn);
        rotate: 45deg;
    }
}

@keyframes skew {
    100% {
        transform: rotateZ(360deg);
    }
}