/* Layout adjustments for smaller screens and touch devices.
   Loaded last so it overrides the section stylesheets. */

/* ---------- touch / no hover ---------- */

@media not ((hover: hover) and (pointer: fine)) {
    /* no hover to reveal the colored underline, so show it */
    .project_title_line {
        transform: scale3d(1, 1, 1);
    }
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
    .projects_inner_container,
    .info_container {
        width: calc(100% - 64px);
        min-width: 0;
    }

    .text_container {
        width: calc(100% - 64px);
    }

    .project {
        width: 75%;
    }

    .info_container {
        flex-direction: column;
        gap: var(--space-12);
    }

    .my_image_scribble {
        width: min(360px, 100%);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .popup-content {
        min-width: 0;
    }
}

/* ---------- phone ---------- */

@media (max-width: 640px) {
    /* space between the content and the screen edges */
    :root {
        --phone-gutter: var(--space-6);
        --header-height: 56px;
    }

    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-lg);
    }

    p {
        font-size: var(--text-base);
    }

    /* header */
    .header_menu {
        padding: 0 var(--phone-gutter);
        gap: var(--space-6);
    }

    .header_button {
        font-size: 15px;
    }

    .header_button_line {
        top: 14px;
    }

    /* playground */
    .playground {
        height: min(520px, 70svh);
    }

    .text_container {
        width: calc(100% - 2 * var(--phone-gutter));
        padding: 88px 0;
    }

    .my_name {
        font-size: clamp(36px, 11vw, 72px);
    }

    .my_title {
        font-size: clamp(22px, 6.5vw, 42px);
    }

    .my_tagline {
        font-size: clamp(17px, 4.8vw, 32px);
        padding-top: var(--space-6);
    }

    /* projects */
    .projects_container {
        padding: var(--space-16) 0;
    }

    .projects_inner_container,
    .info_container {
        width: calc(100% - 2 * var(--phone-gutter));
    }

    .projects_inner_container {
        gap: var(--space-4);
    }

    .project {
        width: 100%;
        gap: 20px;
        padding: 20px 0;
    }

    .number_title {
        width: 44px;
        flex-shrink: 0;
    }

    .project_title {
        font-size: var(--text-lg);
    }

    .project_title_line {
        height: 14px;
    }

    .project_description {
        font-size: var(--text-base);
    }

    /* about */
    .about {
        padding-bottom: var(--space-16);
    }

    .info_inner_container {
        flex-direction: column;
        gap: var(--space-8);
    }

    .my_image_scribble {
        width: 100%;
    }

    /* popup */
    .x_btn {
        top: 8px;
        right: var(--phone-gutter);
    }
}