/*
Theme Name: Le Projet Eskape
Author: Mathurin Roulier
Author URI: https://mathurinrlr.fr
Description: A custom theme for the Eskape project website.
Version: 1.0
License: All rights reserved
*/

html, body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}


.full-width {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fixed-flex {
    flex-grow: 0;
    flex-shrink: 0;
}

.max-height-viewport {
    /* height: 100vh; */
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;

    img {
        max-height: 100vh;
        max-width: 100vh;
        width: 100%;
        height: auto;
    }
}

.max-80vh {
    max-height: 80vh;
}

.circle-background {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
        box-sizing: border-box;
        border-width: 1.5vw;
        border-style: solid;
        border-color: black;
        /* filter: brightness(95%); */
        opacity: 10%;
        border-radius: 50%;
        z-index: -1;
    }
}


@media (min-width: 1200px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        background-color: inherit;
        display: block;
        position: relative;
        width: 100%;
        z-index: auto;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
}

@media (min-width: 600px ) and (max-width: 1199px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: block;
    }
}


footer .wp-block-columns {
    justify-content: space-evenly;
}

.home-post > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 30rem;
    min-width: 20rem;
    border-radius: 1rem;

    .wp-block-post-featured-image {
        position: absolute;
        top: 0; left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 1rem;
            /* filter: grayscale(20%) brightness(90%) contrast(90%) saturate(90%); */
        }
    }

    & > div {
        padding: 1rem;
        background: rgba(0, 0, 0, 0.5);
        position: relative;
        border-radius: 0 0 1rem 1rem;

        &::before {
            content: "";
            position: absolute;
            top: -3rem; left: 0;
            width: 100%;
            height: 3rem;
            z-index: -1;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
        }

        .wp-block-post-excerpt__more-text {
            margin: 0;

            .wp-block-post-excerpt__more-link {
                margin-top: 1rem;
                text-decoration: none;
                font-weight: bold;
                color: white;
                background-color: var(--wp--preset--color--primary) !important;
                border-radius: .5rem;
                padding: .5rem 1.5rem;
                transition: background-color .3s ease;

                &:hover {
                    background-color: var(--wp--preset--color--secondary) !important;
                }
            }
        }
    }
}

.has-text-align-right {
    text-align: right;

    @media (max-width: 782px) {
        text-align: center;
    }
}

.hero-header-home-page > div {
    padding-bottom: calc(var(--wp--preset--spacing--50) + 3rem) !important;
}

.main-title-home-page {
    font-size: max(5vw, 3rem);
}

.is-layout-flow > .alignright {
    margin-inline-start: 0;
}

.max-50-vw {
    max-width: max(50vw, 10rem);
}

.diaporama {
    width: 50%;

    @media (max-width: 800px) {
        width: 100%;
        padding: 0 3rem;
    }
}

.hover-grow {
	> .wp-block-column[style*=flex-basis] {
		position: relative;
		flex-grow: 1 !important;
		transition: flex-grow .25s ease-in-out;
		
		&:hover {
			flex-grow: 3 !important;
		}
		> div::before {
			content: "";
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background-color: rgba(0,0,0,0.3)
		}
	}
}

.wp-block-ctrb-counters .ctrbCounters>div {
	align-items: start !important;
}