/*
 * Desktop fit layout.
 *
 * Wide/maximized desktop windows use one viewport-sized grid: both side panels,
 * the centerpiece, and the social row always fit inside the visible browser
 * area. Narrow or short windows continue to use the existing responsive/mobile
 * rules from index.css.
 */

.project-item,
.cactus-item,
.project-text,
.book-content,
.book-info,
.cactus-container {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 90rem) and (min-height: 46rem) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
    }

    body {
        justify-content: flex-start;
    }

    .main-content {
        display: grid;
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(0, 1.4fr)
            minmax(0, 0.95fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas:
            "projects centerpiece cactus"
            "social social social";
        width: min(100%, 160rem);
        max-width: 160rem;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        margin: 0 auto;
        padding: clamp(0.75rem, 1.4vh, 1.5rem)
                 clamp(0.75rem, 1.35vw, 2rem);
        column-gap: clamp(1rem, 1.7vw, 2.5rem);
        row-gap: clamp(0.75rem, 1.4vh, 1.5rem);
        align-items: center;
        overflow: hidden;
    }

    .left-section,
    .right-section,
    .center-section,
    .social-links {
        min-width: 0;
        max-width: 100%;
    }

    .left-section,
    .right-section {
        align-self: center;
        max-height: 100%;
        padding: clamp(1.1rem, 2.2vh, 1.9rem)
                 clamp(1.1rem, 1.55vw, 2rem);
        overflow: hidden;
    }

    /* Intentionally render this title as “My other” / “projects:”. */
    .projects-header .rainbow-letter[data-index="8"] {
        display: block;
        width: 0;
        height: 0;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
        animation: none !important;
        color: transparent !important;
        text-shadow: none !important;
        transform: none !important;
    }

    .projects-header,
    .cactus-header {
        max-width: 100%;
        margin-top: 0;
        margin-bottom: clamp(0.75rem, 1.7vh, 1.25rem);
        padding-bottom: clamp(0.3rem, 0.65vh, 0.5rem);
        font-size: clamp(1.5rem, 3.3vh, 2.4rem);
        line-height: 1.12;
        white-space: nowrap;
    }

    .project-item,
    .cactus-item {
        min-width: 0;
        max-width: 100%;
        margin-bottom: clamp(0.4rem, 0.85vh, 0.7rem);
        padding: clamp(0.55rem, 1.15vh, 0.85rem)
                 clamp(0.5rem, 0.65vw, 0.8rem);
        font-size: clamp(1.05rem, 2.45vh, 1.75rem);
        line-height: 1.38;
        overflow: hidden;
    }

    .project-link,
    .cactus-link {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .book-content {
        align-items: center;
        gap: clamp(0.65rem, 1vw, 1rem);
    }

    .book-cover-placeholder {
        width: clamp(3.25rem, 6.5vh, 4.75rem);
        height: clamp(4.4rem, 8.8vh, 6.4rem);
    }

    .book-info,
    .project-text {
        overflow-wrap: anywhere;
    }

    .center-section {
        align-self: stretch;
        min-height: 0;
        justify-content: center;
        overflow: hidden;
    }

    #welcome {
        max-width: 100%;
        margin: 0 0 clamp(1.25rem, 3.5vh, 2.8rem);
        font-size: clamp(2.1rem, 4.3vh, 3.35rem);
        line-height: 1.12;
        white-space: nowrap;
    }

    #wrap {
        width: min(100%, calc(100dvh - 13.5rem), 58rem);
        max-width: 100%;
        min-width: 0;
    }

    #output {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .cactus-image-wrapper {
        margin-bottom: clamp(0.6rem, 1.3vh, 1rem);
        padding: clamp(1rem, 2.6vh, 2rem);
    }

    .cactus-image {
        width: clamp(6.5rem, 13vh, 9.5rem);
        height: clamp(6.5rem, 13vh, 9.5rem);
    }

    .cactus-container {
        gap: clamp(0.45rem, 0.9vh, 0.75rem);
    }

    .social-links {
        align-self: end;
        flex-wrap: nowrap;
        justify-content: center;
        gap: clamp(0.7rem, 1.45vw, 2rem);
        width: 100%;
        margin: 0;
        padding: 0.2rem clamp(0.4rem, 0.8vw, 1rem);
        overflow: visible;
        white-space: nowrap;
    }

    .social-links a {
        flex: 0 0 auto;
        font-size: clamp(1.8rem, 3.55vh, 2.75rem);
        line-height: 1;
    }
}