/* ==================================================
PAGE: RESUME
================================================== */

#pageResume {
    main {
        background-color: var(--color-white-mute);
        border-radius: .5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
        transition: box-shadow .3s ease;

        &:hover {
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
        }
    }

    .cv-header {
        display: grid;
        gap: .5rem;

        h2 {
            font-size: 2.25rem;
            font-weight: bold;
            text-align: center;
            text-decoration: underline;
            text-transform: uppercase;
            white-space: nowrap;
        }

        div {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem 1rem;
            justify-content: center;

            h3 {
                font-size: .8rem;
                font-weight: bold;
                text-transform: uppercase;
                white-space: nowrap;
            }
        }

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
            align-items: center;

            h2 {
                text-align: left;
            }

            div {
                flex-direction: column;
                gap: 0;

                h3 {
                    text-align: right;
                    font-size: 1.3rem;
                }
            }
        }
    }

    .intro-section {
        display: flex;
        flex-direction: column;
        gap: .5rem;

        .intro-content {
            display: flex;
            flex-direction: column;

            strong {
                font-size: 1.25rem;
            }

            .email-container {
                position: relative;
                display: inline-block;
            }

            .email-link {
                cursor: pointer;
            }

            .email-link:hover,
            .social-link:hover {
                color: var(--theme-color);
                text-decoration: underline;
            }
        }

        .greeting {
            display: flex;
            flex-direction: column;
            gap: .5rem;

            .greeting-title {
                font-size: 1.25rem;
                font-weight: bold;
                padding-left: 1.5rem;
            }

            .greeting-text {
                text-align: center;
                text-wrap: balance;
            }
        }

        @media (min-width: 768px) {
            flex-direction: row;

            .intro-content {
                width: 50%;
            }

            .greeting {
                width: 50%;
            }
        }

        @media print and (min-width: 700px) {
            flex-direction: row;

            .intro-content {
                width: 50%;
            }

            .greeting {
                width: 50%;
            }
        }
    }

    .layout-container {
        display: flex;
        flex-direction: column;
        gap: .5rem;


        .layout-header {
            text-align: center;
            font-weight: bold;
            font-size: 1.875rem;
            text-transform: uppercase;
        }

        .grid-container {
            display: grid;
            gap: 1rem;

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

            @media print and (min-width: 700px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    @media print {
        /* .card {
            break-inside: avoid;
        }

        .work-card {
            cursor: default;
        } */
    }

    @media (max-width: 768px) {}

    @media (min-width: 768px) {
        main {
            padding: 1rem 2rem;
        }
    }
}

#pageResume.dark {
    main {
        background-color: var(--color-black-mute);

        &:hover {
            box-shadow: 0px 0px 10px rgba(255, 255, 255, .9);
        }
    }
}

.work-card {
    display: grid;
    cursor: pointer;

    h4 {
        font-size: 1.5rem;
        font-weight: bold;
        text-wrap: balance;
    }

    h5 {
        font-size: 1.25rem;
        text-wrap: balance;
    }

    time {
        font-size: 0.75rem;
        text-align: right;
        font-style: italic;
    }
}

.education-card {
    h4 {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        text-wrap: balance;
    }

    p {
        font-size: 1.25rem;
        text-align: center;
        text-wrap: balance;
    }
}