@layer reset, openprops, base, custom, utilities;

@import url('reset.css') layer(reset);

@import url('open-props.min.css') layer(openprops);

@import url('base.css') layer(base);

@import url('utilities.css') layer(utilities);

@layer custom {

    /* YouTube video on Project subpage */

    iframe {
        aspect-ratio: var(--ratio-widescreen);
        max-width: 100%;
        height: auto;
    }

    /* calendar */

    h2:has(+ dl) {
        font-size: var(--size-3);
        font-weight: var(--font-weight-6);
    }

    dt {
        margin-block-end: var(--size-1);
        font-weight: var(--font-weight-6);
    }

    dd {
        margin-block-end: var(--size-1);
    }

    dd + dd,
    figcaption {
        margin-block-end: var(--size-4);
        color: var(--gray-6);
        font-weight: var(--font-weight-5);
    }

    dd ul ::marker,
    dd ul time {
        color: var(--primary);
    }

    /* Partners subpage */

    .partner {
        display: grid;
        grid-template-areas:
            "heading"
            "img"
            "text";
        gap: var(--size-3) var(--size-6);
    }

    .partner h2 {
        grid-area: heading;
        margin-block-end: 0;
        line-height: var(--font-lineheight-1);
    }

    .partner p:first-of-type {
        grid-area: img;
    }

    .partner p:latst-child {
        grid-area: text;
    }

    @media screen and (min-width: 500px) {

        .partner {
            grid-template-columns: 150px 3fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "img heading"
                "img text";
        }

        .partner h2 {
            margin-block-start: 0;
        }
    }

    /* research */

    .research-trip time {
        color: var(--gray-6);
        font-weight: var(--font-weight-6);
    }

    /* press */

    .picnic-partners {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--size-5);
    }

    @media screen and (min-width: 500px) {

        .picnic-partners {
            flex-wrap: nowrap;
        }
    }

    blockquote {
        padding: var(--size-3);
        border-left: var(--border-size-4) solid var(--gray-4);
        margin-block: var(--size-4);
        font-style: italic;

        & p {
            margin-bottom: 0;
        }

        & footer {
            text-align: right;
        }
    }

    li {
        &:has(> p + details) {
            margin-bottom: 0.5lh;
        }

        & > p:has(+ details) {
            margin-bottom: 0;
        }
    }

    /* gallery */

    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--size-3);
    }

    .gallery a {
        padding: 0;
    }

    .gallery img {
        height: 120px;
        object-fit: cover;
    }

    /* footer */

    nav {
        padding-block-start: var(--size-7);
        padding-block-end: var(--size-3);
        border-block: var(--border-size-1) solid var(--primary);
        margin-block: var(--size-7);
    }

    figure {
        max-width: var(--size-content-2);
        padding-block-end: var(--size-3);
        margin-block-end: 0;
    }

    figure a {
        display: block;
        padding: var(--size-3);
    }

    figcaption p {
        color: var(--gray-6);
        font-size: var(--font-size-0);
    }

    footer h2 {
        margin-block: 0;
    }

    footer > p {
        padding-block-start: var(--size-7);
        border-block-start: var(--border-size-1) solid var(--primary);
    }
}