@layer compositions, blocks, utilities, exceptions;

@layer compositions {
    .c-about {
        display: grid;
        gap: var(--block-unit);

        @media (min-width: 1080px) {
            grid-template-columns: 1fr 2fr;
        }
    }

    .c-international {
        display: grid;
        gap: var(--block-unit);

        & > *:first-child {
            order: 2;
        }

        & > *:last-child {
            order: 1;
        }

        @media (min-width: 1080px) {
            grid-template-columns: 1.25fr 1fr;
            align-items: center;
        }
    }
}

@layer blocks {
    .intro {
        position: relative;
        display: grid;
        align-items: end;
        border-radius: var(--border-radius);
        overflow: hidden;

        .intro__text,
        .intro__carousel {
            grid-area: 1 / 1 / 2 / 2;
        }

        .intro__text {
            padding: 1rem;

            h1 {
                margin-block-end: .25em;
                max-width: 15ch;
                line-height: 1;
                font-size: 3.5rem;
                color: var(--white);
            }

            p {
                max-width: 75ch;
                text-wrap: balance;
                font-size: 1.125rem;
                color: var(--white);

                a {
                    &:hover {
                        text-decoration: underline;
                    }
                }

                &:not(:first-of-type) {
                    margin-block-start: .5em;
                }
            }
        }

        .intro__carousel {
            z-index: -1;
            display: grid;
            align-items: center;
            width: 100%;
            height: 50dvh;
            background-color: hsl(240, 2%, 90%);
            
            picture {
                grid-area: 1 / 1 / 2 / 2;
                width: 100%;
                height: 100%;
                opacity: 0;
                transform: scale(1.02);
                animation-name: fade-carousel;
                animation-duration: 15s;
                animation-timing-function: ease-in-out;
                animation-iteration-count: infinite;
                animation-fill-mode: forwards;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }     

                &:nth-child(1) {
                    animation-delay: 0s;
                }

                &:nth-child(2) {
                    animation-delay: 5s;
                }

                &:nth-child(3) {
                    animation-delay: 10s;
                }                
            }
        }
    }

    @media (min-width: 1080px) {
        .intro {
            margin-block-start: unset;

            .intro__text {
                padding: var(--block-unit) 1rem;
            }

            .intro__carousel {
                height: calc(100dvh - var(--logo-size) - 5 * 1rem);
            }
        }
    }

    @media (min-width: 1600px) {
        .intro {
            .intro__text {
                margin-block-end: 1rem;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .intro__carousel {
            picture {
                animation: none;
                opacity: 1;

                &:not(:first-child) {
                    display: none;
                }
            }
        }
    }

	@keyframes fade-carousel {
		0% {
			opacity: 0;
			transform: scale(1.02);
		}
		5% {
			opacity: 1;
			transform: scale(1);
		}
		30% {
			opacity: 1;
			transform: scale(1);
		}
		35% {
			opacity: .5;
			transform: scale(1.01);
		}
		40% {
			opacity: 0;
			transform: scale(1.02);
		}
		100% {
			opacity: 0;
			transform: scale(1.02);
		}
	}

    .home-header {
        h2 {
            font-size: 2rem;

            &:has(+ div), &:has(+ p) {
                 margin-block-end: .25em;
            }

            &:has(+ div) {
                font-size: 1.25rem;
                color: var(--gray);
            }
        }

        div {
            max-width: 25ch;
            line-height: 1;
            text-wrap: balance;
            font-family: 'Stag', serif;
            font-weight: 500;
            font-size: 2rem;
            color: var(--black);

            &:has(+ p) {
                margin-block-end: .5em;
            }      
        }

        p, ul {
            font-size: 1rem;

            a {
                color: var(--blue);
                transition: color .5s;

                &:hover {
                    color: var(--black);
                }
            }

            &:not(:first-of-type) {
                margin-block-start: .5em;
            }
        }
    }

    .home-section {
        &:not(:first-of-type) {
            margin-block-start: var(--block-unit);
        }
    }

    @media (min-width: 768px) {
        .home-header[data-home-header="center"] {
            h2, div, p {
                text-align: center;
            }

            div, p {
                margin-inline: auto;
            }

            p {
                max-width: 90ch;
            }
        }
    }

    .companies-video {
        position: relative;
        margin-block-start: 3rem;
        margin-inline: auto;
        max-width: 50rem;
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius);
        overflow: hidden;

        a {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: var(--white);

            span {
                font-size: 5rem;
            }
        }

        video {
            z-index: -1;
            position: relative;
            display: block;
        }
    }
}