@import "reset.css";

@font-face {
    font-display: swap;
    font-family: "Geologica";
    src: url("../fonts/Geologica-VariableFont.woff2") format("woff2");
    font-style: normal;
}

/*
// ==========================================================================
// Typography and core elements
// ==========================================================================
*/
/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1820,20,1.414,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
    --step--1: clamp(0.8333rem, 0.8208rem + 0.0555vw, 0.884rem);
    --step-0: clamp(1rem, 0.9384rem + 0.274vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.0601rem + 0.6219vw, 1.7675rem);
    --step-2: clamp(1.44rem, 1.1788rem + 1.1608vw, 2.4992rem);
    --step-3: clamp(1.728rem, 1.2827rem + 1.9791vw, 3.5339rem);
    --step-4: clamp(2.0736rem, 1.3528rem + 3.2037vw, 4.997rem);
    --step-5: clamp(2.4883rem, 1.3596rem + 5.0163vw, 7.0657rem);

    /* Color settings daylight mode */
    --bg: hsl(0, 0%, 96%);
    --c: hsl(0, 0%, 16%);
    --red: hsl(0, 80%, 48%);
    --dropshadow: 2px 2px 6px rgba(0, 0, 0, .6);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--c);
    font-family: "Geologica", sans-serif;
    font-size: var(--step-0);
    font-variation-settings: "wght"400;
    hyphens: auto;
    line-height: 1.25;
    overscroll-behavior: none;
}

h1 {
    font-family: "Geologica", sans-serif;
    font-size: var(--step-4);
    font-variation-settings: "wght"875, "slnt"-7;
    color: var(--red);
    line-height: 1.1;
    text-wrap: balance;
}

h2 {
    font-family: "Geologica", sans-serif;
    font-size: var(--step-3);
    font-variation-settings: "wght"875, "slnt"-7;
    margin-block-end: .5em;
    text-wrap: balance;
}

h3 {
    font-family: "Geologica", sans-serif;
    font-size: var(--step-2);
    font-variation-settings: "wght"875, "slnt"-7;
    margin-block-end: .1em;
    text-wrap: balance;
}

h4 {
    font-family: "Geologica", sans-serif;
    font-size: var(--step-1);
    font-variation-settings: "wght"875, "slnt"-7;
    text-wrap: balance;
}

p {
    margin-block-end: .66em;
}

a {
    color: var(--c);
    transition: opacity ease .4s;

    &:focus,
    &:hover {
        opacity: .7;
    }
}

small,
figcaption {
    font-size: var(--step--1);
}

.btn {
    background-color: var(--red);
    color: var(--bg);
    display: inline-block;
    font-variation-settings: "wght"875;
    padding: .4em .8em;
    text-decoration: none;
    transform: skewx(-7deg);
    transition: scale ease .4s;

    &:focus,
    &:hover {
        opacity: 1;
        scale: 1.1;
    }
}

.summary {
    font-variation-settings: "wght"650;
    margin-block-end: 1.33em;
}

/*
// ==========================================================================
// Layout
// ==========================================================================
*/

.wrapper {
    container-name: wrapper;
    container-type: inline-size;
    inline-size: clamp(16rem, 92dvi, 88rem);
    margin-inline: auto;
}

.page__header {
    block-size: 70dvb;
    margin-block-end: 4rem;

    .wrapper {
        block-size: inherit;
        position: relative;
    }

    h1 {
        max-inline-size: 22ch;
        padding-block: 15dvb .2em;
        text-shadow: var(--dropshadow);
    }

    .btn {
        box-shadow: var(--dropshadow);
    }
}

main {
    section {
        margin-block-end: 8rem;
    }
}

.site-logo {
    inline-size: clamp(9.465rem, 4.4274rem + 13.5004dvi, 19.784rem);
    inset-block-end: calc(0rem - var(--step-4));
    inset-inline-end: 4dvi;
    position: absolute;

    img {
        filter: drop-shadow(var(--dropshadow));
    }
}

.hero {
    block-size: 70dvb;
    inline-size: 100%;
    inset-block-start: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;

    img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: 35% 50%;
    }
}

.section__header,
.section__copy {
    max-inline-size: 50ch;
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style-type: none;
    padding: 0;

    .article-list__item {
        border-top: solid 1px var(--c);
        padding-block-start: 1rem;

        img {
            inline-size: 100%;
        }
    }
}

@container wrapper (width > 32rem) {
    .article-list {
        .article-list__item {

            article {
                display: flex;
                flex-wrap: wrap;

                header {
                    flex-shrink: 0;
                    inline-size: 100%;
                }

                .article__image {
                    inline-size: 40%;
                }

                .article__copy {
                    inline-size: 60%;
                    padding-inline-start: 2rem;
                }
            }
        }
    }
}

.article__image {
    aspect-ratio: 1.5;
    inline-size: 100%;
    margin-block-end: 1rem;
    overflow: hidden;
}

.section__image {
    box-shadow: var(--dropshadow);
    margin-block: 2rem;
    max-inline-size: 50ch;
    padding: min(2vw, 1rem) min(2vw, 1rem) min(4vw, 2rem) min(2vw, 1rem);
    rotate: var(--rotation);
}

.trainer-list {
    list-style-type: none;
    padding: 0;

    .trainer-list__item {
        display: flex;

        &:not(:last-of-type) {
            margin-block-end: 2rem;
        }
    }
}

.portrait__image {
    background: var(--bg);
    block-size: clamp(6rem, 4rem + 12vw, 16rem);
    border: solid .4rem var(--bg);
    border-radius: 50%;
    box-shadow: var(--dropshadow);
    display: block;
    flex-shrink: 0;
    inline-size: clamp(6rem, 4rem + 12vw, 16rem);
    overflow: hidden;
}


.portrait__content {
    margin-inline-start: 1rem;
    max-inline-size: 40ch;
    padding-block-start: 2rem;
}

@container wrapper (width > 48rem) {
    @supports (display: grid) {
        .copy-grid {
            align-items: start;
            display: grid;
            grid-template-columns: [grid-start] 1fr [padding-start] 5dvi [padding-end] 1fr [grid-end];

            .section__image {
                grid-column: 3 / 4;
                margin-block-start: -1rem;
            }

            .section__aside {
                grid-row: 2;
            }
        }

        .list-grid {
            align-items: start;
            display: grid;
            grid-template-columns: [grid-start] 1fr [padding-start] 5dvi [grid-start] 5dvi [grid-center] 5dvi [grid-end] 5dvi [padding-end] 1fr [grid-end];

            .trainer-list__item {
                &:nth-of-type(odd) {
                    margin-inline-end: 2rem;
                }

                &:nth-of-type(even) {
                    margin-inline-start: 2rem;
                }

                &:nth-of-type(1) {
                    grid-column: 1 / 4;
                    grid-row: 1 / span 3;
                }

                &:nth-of-type(2) {
                    grid-column: 4 / 7;
                    grid-row: 2 / span 3;
                }

                &:nth-of-type(3) {
                    grid-column: 1 / 4;
                    grid-row: 5 / span 3;
                }

                &:nth-of-type(4) {
                    grid-column: 4 / 7;
                    grid-row: 6 / span 3;
                }

                &:nth-of-type(5) {
                    grid-column: 1 / 4;
                    grid-row: 9 / span 3;
                }

                &:nth-of-type(6) {
                    grid-column: 4 / 7;
                    grid-row: 10 / span 3;
                }

                &:nth-of-type(7) {
                    grid-column: 1 / 4;
                    grid-row: 13 / span 3;
                }

                &:nth-of-type(8) {
                    grid-column: 4 / 7;
                    grid-row: 14 / span 3;
                }
            }
        }


    }

    .article-list {
        flex-direction: row;
        justify-content: space-between;

        .article-list__item {
            max-inline-size: 50ch;
        }
    }

    .portrait__image {
        border-width: .66rem;
    }
}

footer {
    background-color: var(--c);
    color: var(--bg);

    .wrapper {
        padding-block: 4rem;
    }

    a {
        color: var(--bg);
    }
}

/*
// ==========================================================================
// Helper classes
// ==========================================================================
*/

.nowrap {
    white-space: nowrap;
}