/* National Facade Drafting CSS */

:root {
    --colour-white: #ffffff;
    --colour-black: #000000;
    --colour-grey: #3f3f3f;
    --colour-grey-mid: #e4e6e9;
    --colour-grey-light: #f7f7f7;
    --colour-orange: #e4701e;
    --colour-orange-dark: #b95a16;
    --border-radius-small: 4px;
    --border-radius-medium: 6px;
    --border-radius-large: 10px;
    --box-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.18);
    --box-shadow-2: 0 3px 2px rgba(0, 0, 0, 0.3);
    --content-spacing: 1.5em;

    --10px: 0.625rem;
    --18px: 1.125rem;
    --20px: 1.25rem;
    --30px: 1.875rem;
}

/* https://www.joshwcomeau.com/css/custom-css-reset/ */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html, body {
    height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* end css reset */

body {
    font-family: sans-serif;
    background-color: var(--colour-white);
    color: var(--colour-grey);
}

/* layout */
.section-samples {
    background-color: var(--colour-grey-light);
}

.wrapper {
    padding: var(--30px);
    margin-left: auto;
    margin-right: auto;
    max-width: 62.5rem; /* 1000px */
}

/* container for the main content */
.content {
    display: grid;
    gap: var(--30px);
    grid-template-areas:
        "logo"
        "bio"
        "services";
}

.content-logo {
    grid-area: logo;
}

.content-bio {
    grid-area: bio;
    border-top: 4px solid var(--colour-grey-light);
    padding-top: var(--30px);
}

.content-services {
    grid-area: services;
}

.nfd-logo {
    width: 9.375rem;
}


/* footer copyright notice */
footer {
    padding: var(--30px);
}

footer p {
    font-size:var(--10px);
    color: var(--colour-grey);
    text-align: center;
    margin: 0;
}


/* typography */
h1 {
    font-size: var(--30px);
    margin-bottom: 1em;
}

h2 {
    font-size: var(--20px);
    margin-bottom: 1em;
}

h4 {
    margin-bottom: 0.5em;
}

p {
    margin-bottom: var(--content-spacing);
}

a {
    color: var(--colour-orange);
    text-decoration: underline;
}

a:hover {
    color: var(--colour-orange-dark);
    text-decoration: none;
}

address {
    font-style: normal;
    margin-bottom: var(--content-spacing);
}

.address-postal {
    margin-bottom: 0;
}

.sample-images-title {
    margin-bottom: 1.5em;
    text-align: center;
}

/* services panel */
.services-panel {
    background-color: var(--colour-grey-light);
    border: 1px solid var(--colour-grey-mid);
    border-radius: var(--border-radius-small);
    padding: var(--20px);
    box-shadow: var(--box-shadow-1);
}

.services-title {
    font-size: var(--18px);
    margin-bottom: 0.8em;
}

.services-list {
    padding-left: var(--20px);
    list-style: square;
}

.services-list li {
    margin-bottom: 0.3em;
}

.services-list li:last-of-type {
    margin-bottom: 0;
}


/* sample images list */
.sample-images {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--30px);
}

.sample-images img {
    border: 2px solid var(--colour-black);
    box-shadow: var(--box-shadow-1);
    margin-left: auto;
    margin-right: auto;
    transition: all .2s ease-in-out;
}

.sample-images img:hover {
    transform: translateY(-3px);
}

/* MEDIA QUERIES */

/* 590px */
@media (min-width: 36.875rem) {
    .contact-details {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: calc(var(--30px) * 2);
    }

    .contact-details address {
        margin-bottom: 0;
    }

    .sample-images {
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--30px) * 1.5);
    }
}

/* 800px */
@media (min-width: 50rem) {
    .content {
        grid-template-columns: 17rem auto;
        grid-template-rows: 12.5rem 1fr;
        grid-template-areas:
            "logo bio"
            "services bio";
    }

    .content-bio {
        border-top: none;
        padding-top: calc(var(--30px) * 1.5);
        padding-left: calc(var(--30px) * .5);
    }

    .content-logo {
        justify-self: center;
    }

    .nfd-logo {
        width: 12rem;
    }
}

/* 900px */
@media (min-width: 56.25rem) {

    .wrapper {
        padding: calc(var(--30px) * 2);
    }

    .content {
        grid-template-columns: 20rem auto;
        grid-template-rows: 14rem 1fr;
    }

    .content-bio {
        padding-top: 0;
    }

    .nfd-logo {
        width: 14rem;
    }

    .contact-details {
        gap: calc(var(--30px) * 3);
    }

    .sample-images {
        grid-template-columns: repeat(3, 1fr);
    }

}