/* Desktop layout only. The existing phone styles stay in their own files. */
@media (min-width: 1024px) {
    body {
        --desktop-content-max: clamp(80rem, 92vw, 144rem);
    }

    /* The glass frame follows the screen; its navigation stays comfortably sized. */
    .site-header {
        max-width: none;
    }

    main .max-w-7xl,
    main .cases-grid {
        max-width: var(--desktop-content-max);
    }

    .hero-photo-section > .hero-reveal {
        max-width: var(--desktop-content-max) !important;
    }

    main .diensten-hero-inner {
        width: min(100%, var(--desktop-content-max));
    }

    .over-ons-page .workflow-shell {
        width: min(max(92rem, var(--desktop-content-max)), calc(100% - 2rem));
    }
}

/* Remove the large type floor on smaller desktop/tablet windows only. */
@media (min-width: 768px) and (max-width: 1100px) {
    .hero-photo-section .hero-title {
        font-size: clamp(4.25rem, 10.4vw, 7.1rem);
    }
}

/* Growing image columns keep their shape instead of getting progressively flatter. */
@media (min-width: 1440px) {
    .over-ons-page .workflow-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 5vw, 7rem);
        align-items: center;
    }

    .over-ons-page .workflow-meta {
        grid-column: 1 / -1;
    }

    .over-ons-page .workflow-title {
        margin-bottom: 0;
    }

    .case-media {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .service-detail-media,
    .about-story-hero .about-image-wide,
    .case-detail-photo:not(.is-square) {
        width: 100%;
        min-height: 0;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .case-detail-photo.is-wide {
        aspect-ratio: 16 / 9;
    }
}