@font-face {
    font-family: "MedievalSharp";
    src: url("./fonts/MedievalSharp-Regular.woff2") format("woff2")
}

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --font-heading: "MedievalSharp", serif;
    --font-body: Georgia, sans-serif;

    --parchment: oklch(0.94 0.03 95);
    --parchment-2: oklch(0.91 0.03 95);

    --leather: oklch(0.33 0.07 55);
    --leather-2: oklch(0.28 0.07 55);

    --ink: oklch(0.20 0.02 70);

    --parchment-ink: oklch(0.93 0.03 95);

    --gold: oklch(0.78 0.12 85);


    --radius-sm: 0.5rem;
    --radius-md: 1rem;

    --shadow-sm: 0 0.25rem 0.5rem oklch(0% 0 0 / 0.15);
    --shadow-md: 0 0.5rem 1rem oklch(0% 0 0 / 0.2);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;

    --book-cover: oklch(0.32 0.07 55);
    --book-cover-2: oklch(0.26 0.06 55);
    --book-edge: oklch(0.90 0.03 95);
    --book-edge-2: oklch(0.84 0.03 95);
}

body {
    font-family: var(--font-body);
    background-color: var(--parchment);
    margin: 0;
}


.container {
    max-width: 30rem;
    padding-inline: 1rem;
    margin-inline: auto;

    @media (min-width: 768px) {
        max-width: 48rem;
        padding-inline: 1.5rem;
    }

    @media (min-width: 1024px) {
        max-width: 70rem;
        padding-inline: 2rem;
    }

    @media (min-width: 1280px) {
        max-width: 80rem;
    }
}



header {
    padding: 1rem;
    background: var(--leather);
    color: var(--parchment-ink);

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .branding {
        font-family: var(--font-heading);
        color: var(--parchment-ink);
        text-decoration: none;
        font-weight: bold;
        font-size: 3rem;
    }

    nav {
        width: 100%;

        ul {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            margin: 0;
            padding: 0;
            list-style: none;
            align-items: flex-start;
        }

        a {
            display: block;
            width: 100%;
            padding: 0.5rem 1rem;
            color: var(--parchment-ink);
            text-decoration: none;
            border-radius: var(--radius-sm);
            transition: background-color 0.2s ease, color 0.2s ease;

            &:hover {
                background: var(--leather-2);
            }

            &:focus-visible {
                outline: 3px solid var(--gold);
                outline-offset: 4px;
            }
        }
    }

    @media (min-width: 1024px) {
        padding-block: 1.5rem;
    }

}



main {

    section {
        margin-block: 3rem;

        @media (min-width: 768px) {
            margin-block: 4rem;
        }

        @media (min-width: 1024px) {
            margin-block: 6rem;
        }
    }

    .latest-exercises {
        margin-top: 5rem;
    }


    h1 {
        font-family: var(--font-heading);
        font-size: 2rem;
    }

    h2 {
        font-family: var(--font-heading);
        font-size: 1.5rem;
    }

    p {
        max-width: 60ch;
        font-size: 1rem;
    }

    a {
        color: oklch(0 0 0);
    }

    .latest-exercises {
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin: 1rem;
        }
    }
}

.teasers{
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;

    grid-template-columns: 1fr;

    @media (min-width: 768px){
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    @media (min-width: 1024px){
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }

    li{
        max-width: 28rem;
        margin-inline: auto;
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        min-heigth: 14rem;


        background:

                linear-gradient(90deg,
                transparent 0 88%,
                var(--book-edge) 88% 94%,
                var(--book-edge-2) 94% 100%
                ),

                linear-gradient(135deg,
                color-mix(in oklch, var(--book-cover), black 10%),
                var(--book-cover-2)
                );

        border: 1px solid color-mix(in oklch, var(--gold), var(--book-cover) 65%);

        box-shadow:
                0 0.6rem 1.4rem oklch(0% 0 0 / 0.18),
                0 0.2rem 0.3rem oklch(0% 0 0 / 0.12);

        padding: 1.25rem 1.25rem 1.1rem;
        min-height: 12rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        transition: transform 180ms ease, box-shadow 180ms ease;
    }

    li:hover{
        transform: translateY(-0.2rem);
        box-shadow:
                0 1rem 2.2rem oklch(0% 0 0 / 0.22),
                0 0.3rem 0.5rem oklch(0% 0 0 / 0.14);
    }

    li::before{
        content:"";
        position:absolute;
        inset: 0;
        width: 12px;
        background: linear-gradient(
                180deg,
                color-mix(in oklch, var(--book-cover), black 20%),
                color-mix(in oklch, var(--book-cover-2), black 20%)
        );
        opacity: 0.9;
    }

    h2, h3 {
        font-family: var(--font-heading);
        color: var(--parchment-ink);
        font-size: 1.5rem;
        line-height: 1.15;
        margin: 0;
        letter-spacing: 0.02em;
        text-shadow: 0 1px 0 oklch(0% 0 0 / 0.35);
    }

    p{
        color: color-mix(in oklch, var(--parchment-ink), white 10%);
        margin: 0;
        max-width: 48ch;
        opacity: 0.95;
    }

    a:not(.overlay-link){
        margin-top: auto;
        align-self: start;

        color: var(--gold);
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 0.02em;

        padding: 0.4rem 0.65rem;
        border-radius: 0.6rem;
        background: color-mix(in oklch, var(--leather-2), black 10%);
        border: 1px solid color-mix(in oklch, var(--gold), var(--leather-2) 70%);

        transition: transform 160ms ease, background-color 160ms ease;
    }

    a:not(.overlay-link):hover{
        transform: translateY(-0.05rem);
        background: color-mix(in oklch, var(--leather), black 8%);
    }


    .tag{
        align-self: start;
        font-size: 0.85rem;
        font-weight: 700;

        color: oklch(0.20 0.02 70);
        background: var(--parchment);
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        border: 1px solid color-mix(in oklch, var(--gold), var(--parchment) 60%);
    }

}



.overlay-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
}

footer {
    padding: 3rem;
}


@media (min-width: 768px) {
    header {
        .container {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-2);
        }

        nav ul {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap: var(--space-1);
        }

        nav a {
            width: auto;
            padding: 0.5rem 0.75rem;
        }
    }

    .container {
        max-width: 48rem;
    }


    .teasers {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    .teasers li {
        height: 100%;
    }

    .latest-exercises{
        margin-top: var(--space-5);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 64rem;
    }

    header .branding {
        font-size: 3.2rem;
    }

    .teasers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}