/* * {
    border: 1px solid red;
} */

:is(.subgrid, .block) {
    display: grid;
    grid-template-columns: subgrid;
}
:is(.subgrid, .block) > * {
    grid-column: 1/-1;
}

.block {
    row-gap: var(--block-row-gap);
    grid-column: content;
    align-items: baseline;
}

.content-subgrid
/* .block-type-text, */
/* .block-type-link, */
/* .block.content  */ {
    display: grid;
    grid-column: content;
    grid-template-columns: subgrid;
    gap: var(--content-row-gap) var(--content-col-gap);
    padding-inline: var(--content-subgrid-pad);
    align-items: start;
    & > *,
    h2,
    h3 {
        min-height: var(--line-height);
        display: grid;
        align-items: center;
    }
}
.no-pad {
    padding: unset;
}

.metadata-value,
.section-content {
    grid-column: content-main;
    align-items: baseline;
}
.metadata-key,
.section-title {
    grid-column: content-title;
}
.content-text {
    grid-column: content-text;
}

.content-block,
.block.content {
    grid-column: content;
}

[class*="block-type-team"] .role {
    grid-column: content-subtitle;
}
[class*="block-type-team"] .people {
    grid-column: content-main;
    align-items: baseline;
}
@media screen and (max-width: 80ch) {
    [class*="block-type-team"] .people {
        grid-template-columns: 1fr;
    }
}

.block-type-video,
.block-type-image {
    grid-column: full-block;
}

.block-type-link,
.block-type-issues,
.block-type-team,
.block-type-team_picker,
.block-type-gallery {
    grid-column: full-width;
}
.centered-with-full-bg {
    --max-image-height: 90vh;
    --max-image-width: 80vw;
    background: var(--background, transparent);
    > figure:not(:has(> img)) {
        grid-column: full-block;
        .gallery-ul {
            display: grid;
            grid-template-columns: subgrid;
            gap: calc(2 * var(--block-row-gap));
            padding-block: calc(2 * var(--block-row-gap));
            picture {
                padding-inline: min(
                    calc((100% - var(--max-image-width, 80vw)) / 2),
                    calc(100vw - var(--max-image-width, 80vw))
                );
                > img {
                    max-height: var(--max-image-height, 90vh);
                    width: auto;
                    margin-inline: auto;
                    filter: drop-shadow(4px 6px 6px #0007);
                }
            }
        }
    }
    > picture {
        padding-inline: calc((100% - var(--max-image-width, 90vw)) / 2);
        > img {
            max-height: var(--max-image-height, 90vh);
            width: auto;
            margin-inline: auto;
        }
    }
}
.block-type-cover {
    --max-image-height: 70vh;
    --max-image-width: calc(100% / 3.5);
    --cover-block-pad: calc((100vh - var(--max-image-height)) / 2);
    --padding-block-start: min(
        var(--section-gap, 8rem),
        min(var(--cover-block-pad), 10vh)
    );
    picture {
        padding-block-start: var(--padding-block-start);
        img {
            filter: drop-shadow(4px 6px 6px #0008);
            border: 2px solid red;
        }
    }
    position: relative;
    &::before {
        position: absolute;
        inset: 0;
        height: calc(100% + var(--padding-block-start));
        content: "";
        background: var(--background, transparent);
        z-index: -1;
    }
}
@media screen and (max-width: 80ch) {
    .block-type-cover {
        --max-image-height: 80vh;
        --max-image-width: calc(100% / 2);
        --padding-block-start: 20%;
    }
}

/* awards */
.section-awards-content {
    grid-column: awards;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--gutter, 1rem);
}
.award-logo img {
    aspect-ratio: 1;
    object-fit: contain;
    /* padding: var(--content-col-gap); */
}
.award-logo {
    padding-inline: 20%;
}
.award-logo:first-child {
    --_skip-cols: var(--skip-cols);
    grid-column-start: var(--_skip-cols);
}

/* testimonials */
.block-type-testimonial {
    .testimonial-image {
        grid-column: testimonial-image;
        padding-inline: 10%;
        img {
            min-height: 4rem;
            object-fit: contain;
            aspect-ratio: 16/9;
            height: max-content;
        }
    }
    .testimonial-quote {
        grid-column: testimonial-quote;
        .quote {
            gap: 1em;
        }
    }
}

[data-debug="true"] .centered-with-full-bg > figure .gallery-ul img {
    outline: 1px solid var(--background-invert, gold);
}

.block-type-gallery li {
    display: grid; /* to get rid of the weird bottom padding */
}
ul.people {
    row-gap: var(--content-row-gap); /* half-size gap inside the category */
}
ul.people li {
    grid-column: auto;
}

/******************************************
issue header
******************************************/
[data-template="issue"] :is(main, main > header, main > header + *) {
    grid-row: 1;
}
/* @media screen and (max-width: 80ch) {
    [data-template="issue"] :is(main > header + *) {
        grid-row: auto;
    }
} */
/* TODO: BLESS THIS MESS 🤐 */
main > .issue-header {
    grid-template-columns: repeat(16, 1fr); /* TODO: bruh */
}
main > :is(.issue-header, .home-header) {
    /* outline: 1px solid red; */
    z-index: 2;
    /* grid-template-rows: repeat(5, 1fr); */
    display: grid;
    /* grid-column: content; */
    height: min-content;
    height: min-intrinsic; /* Ouff... Safari */
    & .issue-number {
        font-weight: 700;
        font-size: inherit;
        display: inline-block;
    }
    margin-block-start: var(--logo-margin-top, 0);
    & .issue-number-container {
        font-size: var(--logo-height, 4.5vw);
        line-height: 1;
        grid-column: var(--issue-number-grid-column, auto);
        font-style: normal;
        margin-block-start: calc(
            var(--logo-top, 2vw) - var(--logo-margin-top, 0px)
        );
        color: var(--c-white);
        h1.issue-number {
            position: absolute;
            left: calc(var(--logo-left) + var(--logo-width) * 1.5);
        }
    }
    .floating-edit-link {
        position: fixed;
        font-size: 0.66em;
        transform: translateY(21%);
        &.edit-page:not([data-template="issue"] *) {
            left: calc(var(--logo-left) + var(--logo-width) * 1.5);
        }
        &:not(.edit-page) {
            transform: translateY(calc(21% + (-1 * var(--line-height))));
            font-size: 1rem;
            top: calc(
                var(--logo-top, 2vw) + (var(--logo-height) - var(--line-height)) /
                    3
            );
            right: calc(var(--layout-pad) + var(--gutter));
        }
    }
}
.error-icon-heading {
    position: fixed;
    left: calc(var(--logo-left) + var(--logo-width) * 1.5);
    top: var(--logo-top, 2vw);
}
.floating-archive-link {
    grid-column: -2;
    position: fixed;
    top: var(--logo-top, 2vw);
    top: calc(var(--logo-top, 2vw) + var(--logo-height) / 2 - 0.5rem);
    top: calc(
        var(--logo-top, 2vw) + (var(--logo-height) - var(--line-height)) / 3
    );
    right: calc(var(--layout-pad) + var(--gutter));
    font-size: 1rem;
    z-index: 10;
}
.invert {
    filter: invert(1);
}
.issue-header {
    mix-blend-mode: exclusion;
}
[data-template="error"] main > h1 {
    grid-column: content;
    padding-inline: var(--content-subgrid-pad);
}

/******************************************
footer
******************************************/

footer {
    margin-block-start: var(--section-gap);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}
footer {
    padding-block-end: var(--footer-bottom-pad);
}
footer .contacts {
    grid-template-rows: repeat(2, auto) 1fr;
}

/******************************************
logo stuff & footer
******************************************/
.komma-logo {
    /* --klogo-comma-hover: var(--c-secondary); */
    /* --klogo-comma: var(--c-black); */
    /* --klogo-comma: var(--c-white); */
    /* --klogo-body: hsla(288, 59%, 58%, 0.578); */
    /* --klogo-hover-outline: var(--c-white); */
    /* --klogo-hover-outline: red; */
    top: var(--logo-margin-top, 0);
}

/* we place the logos twice for the sticky and static parts
this selects only the top level komma logos
aka the sticky part */
/* aka da floater */
body > .komma-logo {
    grid-row: 1;
    position: sticky;
    height: 100%;
    z-index: 9;
    mix-blend-mode: exclusion;
    height: min-content;
    height: min-intrinsic; /* Ouff... Safari */
    /* --klogo-body: #ba55d393; */
    --klogo-comma: var(--c-white);
    --klogo-comma-hover: transparent;
    --klogo-hover-outline: var(--c-white);
    --klogo-body: transparent;
}
.komma-logo {
    grid-column: logo;
    padding-inline: var(--content-subgrid-pad);
}

/* main .komma-logo.mobile {
    --klogo-comma: #00df3fb4;
    --klogo-body: #00df3fb4;
} */

.home-header {
    padding-inline: var(--content-subgrid-pad);
}
.home-header .komma-logo {
    --klogo-body: var(--c-black);
    --klogo-comma: transparent;
}
footer .komma-logo {
    --klogo-body: var(--c-black);
    position: relative;
    a {
        display: none;
        /* --klogo-hover-outline: var(--c-black); */
    }
}
.footer-logo {
    grid-column: logo;
    margin-block-end: calc(
        (var(--section-gap) / 2) + var(--logo-margin-top, 0px)
    );
}
footer .shrimpressum {
    align-self: end;
}
footer .contacts {
    row-gap: var(--mid-gap);
}

.block:empty {
    /* remove margin from empty blocks, only works without whitespace inside !! */
    /* may be safer to not output them at all when empty ?? */
    margin: 0 !important;
    display: none;
}
.block.floater-block,
.block:has(.floater-block) {
    position: absolute;
}

/******************************************
archive
******************************************/
.archive-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    &:hover,
    &:hover * {
        cursor: none !important;
    }
}
@media screen and (max-width: 80ch) {
    .archive-list {
        grid-template-columns: 1fr;
    }
}
.archive-list > * {
    /* ul > li */
    grid-column: auto;
    aspect-ratio: 9/6; /* TODO: magic number */
    height: auto;
    width: 100%;
    max-width: 100%;
    display: grid;
    background-color: var(--bg, transparent);
    /* place-content: center; */
    transition: background 0.35s ease-in-out; /* TODO: magic number */


    a .issue-title {
        display: grid;
        place-content: center;
        transition: all 0.35s ease-in-out; /* TODO: magic number */
        background-color: hsla(50, 100%, 100%, 0.85); /* TODO: refactor */
        opacity: 0;
    }
    a:hover img {
        translate: 0 -0.75%;
        --shadow-color: #0007;
        filter: drop-shadow(4px 9px 11px var(--shadow-color));
    }
    &:hover {
        /* opacity: .2; */
        /* background: rgb(from var(--bg) r g b / 50%); */
    }
}

.archive-list {
    img {
        --shadow-color: #0007;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        transition: 0.15s ease-in;
        filter: drop-shadow(4px 6px 6px var(--shadow-color));

        width: 100%;
        aspect-ratio: 16/9; /* TODO: magic number */
        object-fit: contain;
    }
}

/** Grid-Column Utils */
.full-block {
    grid-column: full-block;
}

.full-width {
    grid-column: full-width;
}