/* For tablets in landscape orientations */
/* @media (min-width: 600px) and (max-width: 1280px) and (min-height: 600px) and (orientation: landscape) { */
@media (min-width: 901px) and (max-width: 1280px) and (min-height: 600px) and (orientation: landscape) and (pointer: coarse) {
    .debug #tablets-landscape {
        display: flex;
        background-color: orange;
    }

    body > header,
    body > footer {
        & > nav > ul > li {
            margin: 0.2em;

            & a {
                padding: 0.2em;
            }
        }
    }

    #about > main {
        & .value-panel p {
            margin-top: 0.5rem;
            font-size: clamp(1rem, 0.75vw, 1.25rem);
            line-height: 1.5;
        }

        & .value-panel img {
            width: 60%;
        }

        & #empathy h3 {
            font-size: clamp(2.5rem, max(3.55cqw, 6.75cqh), 5rem);
        }
    }

    #projects > main {
        & > .project-card {
            & .figure-card {
                & figure figcaption {
                    padding: 0.5rem;
                }
            }
        }
    }

    /* @container projects (min-height: 650px) {
        #projects > main > .project-card {
            flex-direction: column;
            justify-content: center;

            &:nth-child(odd) {
                flex-direction: column;
            }

            &:nth-child(4),
            &:nth-child(5) {
                flex-direction: column-reverse;

                & h2,
                & h2 {
                    margin-bottom: 0;
                    margin-top: clamp(1rem, 3cqh, 2rem);
                }
            }

            & h2 {
                height: revert;
                margin-bottom: clamp(1rem, 3cqh, 2rem);

                & a {
                    padding: clamp(1rem, 1cqh, 2rem) 0;
                    font-size: clamp(2rem, min(6cqw, 4.7cqh), 4rem);
                    writing-mode: revert;

                    &::before,
                    &::after {
                        top: auto;
                        bottom: 0;
                        height: 2px;
                        width: 100%;
                        transform-origin: right;
                        transform: scaleX(1);
                    }

                    &::before {
                        top: 0;
                        bottom: auto;
                        transform: scaleX(0);
                        transform-origin: left;
                    }

                    &:hover {
                        &::before {
                            transform: scaleX(1);
                        }

                        &::after {
                            transform: scaleX(0);
                        }
                    }
                }
            }

            &:nth-child(even) h2 a {
                transform: rotate(0deg);
            }
        }
    } */

    #resume {
        & > header {
            & > nav {
                & > ul {
                    & li {
                        font-size: clamp(1rem, 1.5cqh, 2rem);

                        @media (min-height: 800px) {
                            font-size: clamp(1.5rem, 2cqh, 2.5rem);
                        }
                    }
                }
            }

            & h1 {
                font-size: clamp(1.5rem, 5cqh, 2rem);
            }
        }

        & > main {
            & .resume-section {
                padding: clamp(0.35em, 0.5em, 0.75em);

                &#summary {
                    padding: clamp(0.25em, 0.5em, 1em);
                }

                &#education {
                    font-size: calc((5cqw + 6.55cqh) / 2);

                    & > ul > li.academics {
                        & > details {
                            & > summary {
                                font-size: clamp(0.45em, 0.6em, 0.85em);

                                & span.college-location {
                                    font-size: clamp(0.65em, 0.9em, 1.15em);
                                }
                            }

                            & > ul.education-details {
                                font-size: clamp(0.25em, 0.5em, 0.75em);

                                & > li {
                                    &.academic-credential {
                                        font-size: 1em;
                                        white-space: nowrap;
                                    }
                                }
                            }
                        }
                    }
                }

                &#relevant-experience {
                    padding: clamp(0.125em, 0.25em, 0.75em);

                    & > ul {
                        @media (max-height: 799px) {
                            display: flex;
                            flex-direction: column;
                            flex-wrap: nowrap;
                        }

                        justify-content: space-between;
                        align-items: flex-start;
                        column-gap: clamp(0.5em, 1em, 1.5em);
                        width: 100%;
                        padding: clamp(0.0625em, 0.125em, 0.1875em);
                        font-size: calc((4cqw + 5.4cqh) / 2);

                        & > li {
                            width: 100%;
                            margin-bottom: 0.25em;

                            & details {
                                & summary {
                                    padding-bottom: 0;
                                    font-size: clamp(0.5em, 0.75em, 1.25em);

                                    & > span:first-child {
                                        font-weight: 800;
                                    }

                                    & > span:last-child {
                                        font-weight: 600;
                                        font-variation-settings: "wght" 600;
                                    }
                                }

                                &[name][open] > summary {
                                    color: var(--creativity-color);
                                    font-size: clamp(0.75em, 1em, 1.5em);
                                }

                                &:not([open]) > summary {
                                    justify-content: flex-start;
                                    align-items: flex-start;

                                    &::before {
                                        content: "\25B6\FE0E";
                                        margin-right: 0.5em;
                                    }

                                    &::after {
                                        content: "";
                                        width: 12cqmin;
                                        height: 14cqmin;
                                        margin-top: -2cqh;
                                        margin-left: 1em;
                                        background-size: contain;
                                        background-repeat: no-repeat;
                                    }

                                    &.liberty::after {
                                        background-image: url("/images/resume/projects/statue_of_liberty.png");
                                    }

                                    &.calendar::after {
                                        background-image: url("/images/resume/projects/calendar.png");
                                    }
                                    &.flight::after {
                                        background-image: url("/images/resume/projects/airplane.png");
                                    }

                                    &.wordpress::after {
                                        background-image: url("/images/resume/projects/wordpress_plugin.png");
                                    }
                                    &.pirate::after {
                                        background-image: url("/images/resume/projects/pirate_ship_and_map.png");
                                    }
                                }

                                & > div.project-details {
                                    & ul.web-technologies-used {
                                        display: grid;
                                        grid-template-rows: repeat(2, min-content);
                                        grid-template-columns: repeat(2, 1fr);
                                        column-gap: 0.5em;

                                        @media (min-height: 800px) {
                                            grid-template-columns: 1fr;
                                        }

                                        &.game {
                                            display: grid;
                                            grid-template-rows: repeat(3, min-content);
                                            grid-template-columns: repeat(2, 1fr);
                                            column-gap: 0.5em;

                                            @media (min-height: 800px) {
                                                grid-template-columns: 1fr;
                                            }
                                        }

                                        & li img {
                                            height: 1em;
                                        }
                                    }

                                    & p {
                                        font-size: clamp(0.6em, 0.75em, 1em);

                                        @media (min-height: 800px) {
                                            font-size: clamp(0.4em, 0.55em, 0.7em);
                                        }

                                        & img.project-logo {
                                            width: calc((8cqw + 10.64cqh) / 2);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &#professional-experience {
                    font-size: calc((4cqw + 8.44cqh) / 2);
                    padding: clamp(0.125em, 0.35em, 0.75em);

                    @media (min-height: 700px) {
                        font-size: calc((3cqw + 6.33cqh) / 2);
                    }

                    & > ul {
                        flex-wrap: nowrap;
                        justify-content: space-between;
                        align-items: flex-start;
                        width: 100%;

                        & > li.job {
                            align-items: center;
                            width: 100%;
                            margin-bottom: clamp(0.125em, 0.25em, 0.4em);

                            &:has(details[open]) {
                                align-items: flex-start;
                                margin-bottom: 0;
                                padding-bottom: 0;
                            }

                            &:has(details[name]:not([open])) > img {
                                visibility: visible;
                            }

                            & > details {
                                justify-content: center;
                                width: 90cqw;
                                height: fit-content;

                                & > summary {
                                    font-size: clamp(0.25em, 0.65em, 0.9em);

                                    @media (min-height: 800px) {
                                        font-size: clamp(0.15em, 0.55em, 0.8em);
                                    }

                                    & span.job-title {
                                        font-weight: 600;
                                    }
                                }

                                &[name][open] {
                                    padding-bottom: calc((1cqw + 1.31cqh) / 2);

                                    & > summary {
                                        & > span.job-title {
                                            font-weight: 800;
                                        }

                                        & > span.employment-dates {
                                            font-weight: 400;
                                            font-variation-settings: "wght" 500;
                                        }
                                    }
                                }

                                & > ul.job-details {
                                    font-size: clamp(0.25em, 0.5em, 0.9em);

                                    @media (min-height: 800px) {
                                        font-size: clamp(0.2em, 0.45em, 0.9em);
                                    }

                                    & > li {
                                        &.employer {
                                            border-bottom: 1px solid var(--empathy-color);

                                            & > span.employer-name {
                                                flex-direction: row;

                                                & > span.parent-company::before {
                                                    content: ", ";
                                                }
                                            }
                                        }

                                        &.employment-dates {
                                            color: var(--empathy-color);
                                        }

                                        &.job-duties {
                                            & > ul {
                                                @media (max-width: 1200px) {
                                                    column-count: 1;
                                                }
                                                & > li {
                                                    font-size: clamp(1rem, calc((1.35cqw + 3.13cqh) / 2), 1.5rem);
                                                    line-height: clamp(1.5, 1.75, 2);

                                                    @media (min-height: 800px) {
                                                        font-size: clamp(0.75em, calc((1cqw + 1.33cqh) / 2), 1em);
                                                        line-height: clamp(1.3, 1.55, 1.8);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            & > img {
                                width: calc((12cqw + 15.96cqh) / 2);
                                height: auto;
                                margin-left: calc((2cqw + 2.62cqh) / 2);

                                &[src$="kimpton_palomar_logo.png"] {
                                    height: 15cqh;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #email {
        width: 80%;

        & form {
            grid-column: 1 / 4;
            display: block;
            width: 100%;            

            & h2 {
                margin: 0;
                font-size: calc((4cqw + 5.32cqh) / 2);
                white-space: nowrap;
            }

            & fieldset {
                display: grid;
                grid-template-rows: repeat(4, 1fr);
                grid-template-columns: repeat(2, 1fr);
                row-gap: 3cqh;
                column-gap: 5cqw;

                & .form-field {
                    & label,
                    & input {
                        font-size: calc((3cqw + 3.99cqh) / 2);
                    }

                    &:has(input#name) {
                        grid-row: 1;
                        grid-column: 1;
                    }

                    &:has(input#email) {
                        grid-row: 2;
                        grid-column: 1;
                        align-self: end;
                        margin-bottom: 0;
                    }

                    &:has(input#subject) {
                        grid-row: 3;
                        grid-column: 1;
                    }

                    &:has(textarea#body) {
                        grid-row: 1 / 4;
                        grid-column: 2 / 4;
                        display: flex;
                        flex-direction: column;
                        width: revert;
                        margin-bottom: 0;
                        
                        & > label {
                            flex: 0 0 auto;
                        }
                        
                        & > textarea {
                            flex: 1 1 auto;
                        }
                    }                   
                }

                & > span {
                    grid-row: 4;
                    grid-column: 1 / 4;
                    display: flex;
                    justify-content: center;
                    align-self: center;
                    width: revert;

                    & > span {
                        display: none;
                    }

                    & > button {
                        width: 30%;
                        margin-top: 0;
                        padding: 1cqh 4cqw;
                    }
                }
            }
        }
    }
}