@view-transition {
  navigation: auto;
}

@font-face {
    font-family: "AvenirNext";
    src: url("../assets/fonts/AvenirNext/AvenirNextLTPro-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "AvenirNext";
    src: url("../assets/fonts/AvenirNext/AvenirNextLTPro-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AvenirNext Fallback";
    src: local("Arial");
    ascent-override: 92.5%;
    descent-override: 22.5%;
    line-gap-override: 0%;
    size-adjust: 103.5%;
}

:root {
    --sp-color-black: #000;
    --sp-color-white: #fff;
    --sp-color-grey-dark: #363636;
    --sp-color-grey-light: #e8e5de;
    --sp-color-sand: #b9b09b;
    --sp-color-red: #ff4b4f;
    --sp-color-green-emerald: #2a654a;
    --sp-color-green-yes: #c1d850;
    --sp-color-green-mild: #94c29d; 

    --sp-text-color: white;
    --sp-inverted-text-color: black;

    --sp-page-bg-color: black;
    --sp-inverted-bg-color: white;
    --sp-soft-bg-color: var(--sp-color-grey-dark);
    --sp-hard-bg-color: var(--sp-color-sand);

    --sp-interactive-color: var(--sp-color-red);

    --sp-link-color: var(--sp-interactive-color);
    --sp-link-hover-color: color-mix(in srgb, var(--sp-link-color), white 15%);

    --sp-border-radius: 1rem;
    --sp-border-radius-lg: max(2rem, 5%);
    --sp-tile-border-radius: 1.5625rem;
    
    --sp-layout-max-width: 1500px;
    --sp-layout-grid-columns: 1;
    --sp-layout-grid-gap: 2rem;

    --sp-fx-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.8);
    --sp-fx-bounce2: cubic-bezier(0.68, -0.6, 0.32, 1.3);

    @media (min-width: 380px) {
        --sp-layout-grid-columns: 2;
    }

    @media (min-width: 512px) {
            --sp-layout-grid-columns: 3;
    }

    @media (min-width: 768px) {
            --sp-layout-grid-columns: 4;
    }
    
    @media (min-width: 1024px) {
            --sp-layout-grid-columns: 5;
    }

    @media (min-width: 1280px) {
            --sp-layout-grid-columns: 6;
    }
}

* {
    box-sizing: border-box;
}

html:not(.root-context) {
    overflow: hidden !important;

    .page-footer {
        display: none;
    }
}

body {
    background-color: var(--sp-page-bg-color);
    /* background-image: url('../assets/images/sp-grid.png');
    background-size: cover; */
    color: var(--sp-text-color);
    margin: 0;
    font-family: 'AvenirNext', 'AvenirNext Fallback', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    text-transform: uppercase;
}

a svg, 
button svg {
    pointer-events: none;
}

html,
body,
.briefing-main,
[data-tf-live],
[data-tf-widget],
.tf-v1-widget,
iframe[src*="typeform.com"] {
    height: 100% !important;
}

html.root-context .page-container {
    min-height: 100% !important;
    display: flex;
    flex-direction: column;
}

html:not(.root-context) .page-container {
    height: 100%;
}

.page-main {
    flex-grow: 1;
    min-height: 0;
}

::selection {
    background-color: var(--sp-link-hover-color);
    color: var(--sp-inverted-text-color);
}

[href] {
    color: var(--sp-link-color);
    font-weight: bold;
    text-decoration: none;

    &:hover {
        color: var(--sp-link-hover-color);
    }
}

.wp-block-site-logo {
    .custom-logo-link {
        grid-column-end: -1;
        width: 100%;
        display: block;
    }
    
    img {
        width: 100% !important;
        display: block;
        transition: filter 0.4s ease-in-out;

        &:hover {
            filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
        }
    }
}

.brickgate-item {
    color: var(--sp-interactive-color);
    border: 2px solid var(--sp-interactive-color);
    border-radius: var(--sp-tile-border-radius);
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1;
    position: relative;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);

    &:hover {
        background-color: var(--sp-interactive-color);
        color: var(--sp-text-color);
    }

    &:has(a:active) {
        transition: translate 0.1s ease-in-out;
        translate: 0 0.5rem !important;
    }

    html.js-enabled & {
        opacity: 0;
        transform: translateY(50%) scale(0.25);
    }
}

.tele-horst-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    isolation: isolate;
    pointer-events: none;
    overflow: clip;
    mix-blend-mode: hard-light;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        translate: 0 10%;
        user-select: none;
    }
}

.brickgate-item .wp-block-post-title {
    margin: 0;
    /* font-weight: normal; */
}

.brickgate-item .wp-block-read-more {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-indent: -9999rem;
    overflow: hidden;
}

.wp-block-site-logo,
.briefing-collection,
.acf-innerblocks-container {
    display: contents;
}

/* .sp-section,
.briefing-collection {
    .brickgate-tab-container,
    .hero,
    .wp-block-post-template {
        grid-column: 1 / -1;
        grid-template-columns: subgrid !important;
        gap: var(--sp-layout-grid-gap);
    }
} */

html {
    .sp-layout-grid {
        display: grid;
        grid-template-columns: repeat(var(--sp-layout-grid-columns), minmax(0, 1fr));
        gap: var(--sp-layout-grid-gap);
    }
    
    .briefing-collection .sp-layout-grid {
        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    }

    .wp-block-image.aligncenter {
        display: flex;
        justify-content: center;
    }
}

.page-header > *,
.sp-section > * {
    max-width: var(--sp-layout-max-width);
    margin-inline: auto;
    padding-block: 2rem;
    padding-inline: 2rem;
    box-sizing: initial;
}

.page-header > * {
    padding-block: 1rem;
}

.page-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem 1rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.page-footer .wrapper {
    margin: auto;
    max-width: var(--sp-layout-max-width);
}

.page-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem 2rem;
    align-items: baseline;
    justify-content: center;
}

.page-footer .claim {
    @media (max-width: 500px) {
        font-size: 0.875rem;
    }
}

.footer-nav {
    margin-bottom: 1rem;
}

.screen-height {
    height: 100vh;
}

/* .home {
    .page-container {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .page-main {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
} */

.home .hero {
    grid-template-columns: 1fr 1fr !important;

    .wp-block-media-text__media {
        justify-self: start;
        animation: pop-in 0.9s var(--sp-fx-bounce2) 0.7s forwards, rotate 0.9s ease-out 0.6s forwards;
        opacity: 0;

        img {
            max-height: 100vh;
            object-fit: contain;
        }
    }

    .hero-content-container {
        min-width: 40ch;
        translate: 0 -20%;

        .wp-block-group__inner-container {
            container-type: inline-size;
        }
    }

    .wp-block-media-text__content {
        /* max-width: max-content; */
        width: 100%;
        justify-self: end;

        figure {
            max-width: 10rem;
            margin: 0 !important;
            animation: slide-in-left 0.8s var(--sp-fx-bounce) forwards;
        }

        .has-x-large-font-size {
            --_font-size-ideal: 5cqw;
            font-size: clamp(2rem, var(--_font-size-ideal), 6.5rem) !important;
            font-weight: bold;
            margin: 0;
            text-transform: uppercase;
            animation: slide-in-right 0.8s var(--sp-fx-bounce) 0.3s forwards;
            opacity: 0;
        }
    }

    @media (max-width: 500px) {
        .hero-content-container {
            min-width: 0;
        }

        .wp-block-media-text__media {
            img {
                max-height: 60vh;
            }
        }

        .wp-block-media-text__content {
            .has-x-large-font-size {
                --_font-size-ideal: 13cqw !important;
            }
        }
    }

    @media (orientation: portrait) {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr auto;

        .wp-block-media-text__content {
            justify-self: start;
        }
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-top {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pop-in {
    from {
        scale: 0.5;
        opacity: 0;
    }

    to {
        scale: 1;
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        rotate: 30deg;
    }

    to {
        rotate: 0deg;
    }
}