:root {
    --gradient-void-blue: linear-gradient(135deg,
            var(--blue-void-blue-80) -20%,
            var(--blue-void-blue-95),
            var(--blue-void-blue-97) 30% 70%,
            var(--blue-void-blue-95),
            var(--blue-blue-heather-90) 120%);

    --gradient-deep-sea: linear-gradient(135deg,
            var(--blue-deep-sea-90) -20%,
            var(--blue-deep-sea-95) 15% 85%,
            var(--blue-deep-sea-90) 120%);
}

#project-details {
    inline-size: 100%;
    max-inline-size: 37rem;
    margin-inline: auto;
}

#project-details section:not(h2 + section) {
    margin-block-start: var(--size-2);
}

header {
    background: var(--gradient-void-blue);
}

#project-summary {
    display: grid;
    margin-block-start: var(--size-2);
    margin-block-end: var(--size-0);
    column-gap: var(--size-1);
    margin-inline: auto;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
}

#project-description {
    grid-column: 1 / span 8;
    grid-row: 1 / span 1
}

#project-description>p {
    margin-block-end: 0;
}

#project-links {
    display: flex;
    gap: var(--size-0);
    list-style: none;
    grid-column: 1 / span 8;
    grid-row: 2 / span 1;
    align-self: start;
}

#project-meta {
    --stack-gap: var(--size-0);
    --project-meta-border: 0.2rem solid var(--accent-colour);
    font-size: 90%;
    border-inline-start: var(--project-meta-border);
    padding-block: var(--size--1);
    padding-inline: var(--size-1) 0;
    color: var(--text-secondary-colour);
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

#project-meta label {
    display: block;
    margin-block-end: var(--size--1);
    font-weight: bold;
    color: var(--text-heading-colour);
}

#project-stack-pills {
    gap: 0.3rem;
}

#project-stack .project-stack-pill {
    border: 0.1rem solid var(--text-secondary-colour);
    border-radius: var(--border-size-3);
    padding: 0.1rem 0.6rem;
}

#project-links-end {
    display: flex;
    flex-direction: column;
}

#explore-projects {
    padding-block: var(--size-3);
    background: var(--gradient-deep-sea);
}

#explore-projects .grid {
    --min: 17rem;
}

.project-card {
    padding: var(--size-1);
    border-radius: var(--radius-sm);
    color: var(--text-body-colour);
}

.project-card:hover,
.project-card:focus {
    background-color: var(--blue-deep-sea-99);
    outline-color: var(--blue-pop-blue-30);
}

a:has(>.project-card):hover,
a:has(>.project-card):focus {
    text-decoration: none;
    cursor: pointer;
}

.project-card .frame {
    background-color: var(--blue-deep-sea-99);
    border-radius: var(--radius-sm);
    padding: 0.5rem;
}

.project-card h3 {
    margin-block-start: var(--size-1);
    margin-block-end: var(--size--1);
    color: var(--text-heading-colour);
}

/* Project-specific styles */
#iphone-mockups-caresync {
    align-items: center;
    justify-content: center;
    --gap: var(--size-1-5);
}

#iphone-mockups-caresync .frame {
    --numerator: 9;
    --denominator: 16;
    min-inline-size: 17rem;
}

/* Media Queries */
@media screen and (max-width: 768px) {
    #project-summary {
        row-gap: var(--size-1);
    }

    #project-description {
        grid-column: 1 / -1;
        grid-row: 1 / span 1;
    }

    #project-description>p {
        margin-block-end: 0;
    }

    #project-links {
        grid-column: 1 / -1;
        grid-row: 2 / span 1;
        flex-direction: column;
        gap: var(--size--1);
    }

    #project-meta {
        --stack-gap: var(--size--1);
        grid-column: 1 / -1;
        grid-row: 3 / span 1;
        padding: var(--size-0);
        border-inline-start: none;
        border-block-start: var(--project-meta-border);
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        padding-block-start: var(--size-1);
    }

    #project-meta label {
        display: inline-block;
    }
}

@media screen and (min-width: 769px) and (max-width: 976px) {
    #project-summary {
        row-gap: var(--size--1);
    }

    #project-description {
        grid-column: 1 / span 6;
        grid-row: 1 / span 1;
    }

    #project-links {
        grid-column: 1 / span 12;
        grid-row: 2 / span 1;
        margin-block-start: var(--size--1);
    }

    #project-meta {
        grid-column: 7 / span 6;
        grid-row: 1 / span 1;
    }
}

/* Colour Mode */
body.dark-mode header {
    background: var(--gradient-deep-purple);
}

body.dark-mode .project-link:hover,
body.dark-mode .project-link:focus {
    background-color: transparent;
}

body.dark-mode #project-meta {
    color: var(--text-secondary-colour-light);
}

body.dark-mode #project-meta label,
body.dark-mode .project-card h3 {
    color: var(--text-heading-colour-light);
}

body.dark-mode #project-stack .project-stack-pill {
    border-color: var(--text-secondary-colour-light);
}

body.dark-mode #explore-projects {
    background: var(--gradient-deep-purple);
}

body.dark-mode .project-card {
    color: var(--text-body-colour-light);
}

body.dark-mode .project-card:hover,
body.dark-mode .project-card:focus {
    background-color: var(--blue-blue-heather-05);
    outline-color: var(--blue-pop-blue-70);
}