/* Match Lay's current desktop breakpoint; keep the approved mobile spacing. */
@media (min-width: 1231px) {
    body .snm-project > .snm-project-main > .snm-project-media {
        /* The existing ResizeObserver updates this height as text and fonts
           reflow. Retain the negative margin so media scrolls behind the info. */
        padding-top: calc(var(--snm-info-height, 80px) + 30px);
    }
}

/* The project already has a 10px outer margin. Reserve the 39px menu rail
   inside that width, leaving another 10px between copy and the menu. */
@media (max-width: 1230px) {
    body .snm-project .snm-project-info > h1,
    body .snm-project .snm-project-info > .snm-project-meta {
        box-sizing: border-box;
        width: calc(100% - 39px);
        max-width: calc(100% - 39px);
        min-width: 0;
    }
    body .snm-project .snm-project-info dd,
    body .snm-project .snm-project-description {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (min-width:1231px) {
    /* Keep title/client on their existing starts; extend copy through column 11. */
    body .snm-project .snm-project-info {
        grid-template-columns:repeat(12,minmax(0,1fr));
    }
    body .snm-project .snm-project-info > h1 {grid-column:1 / 4;}
    body .snm-project .snm-project-info > .snm-project-meta {
        grid-column:4 / 12;
        grid-template-columns:repeat(8,minmax(0,1fr));
    }
    body .snm-project .snm-project-meta > dl {grid-column:1 / 4;}
    body .snm-project .snm-project-meta > .snm-project-description {
        grid-column:4 / 9;
        min-width:0;
    }
}

/* Videos sit directly in the media stack, unlike images inside a figure.
   Their generic 100% player width must not override the chosen content width. */
@media (min-width:1231px) {
    body .snm-project .snm-project-media > video.snm-project-width-mini {width:calc((100% - 20px)/3);}
    body .snm-project .snm-project-media > video.snm-project-width-half {width:calc((100% - 10px)/2);}
    body .snm-project .snm-project-media > video.snm-project-width-large {width:calc((100% - 20px)/3 * 2 + 10px);}
    body .snm-project .snm-project-media > video.snm-project-width-full {width:100%;}
}
@media (max-width:1230px) {
    body .snm-project .snm-project-media > video.snm-project-video {width:100%;}
}