/* Standalone case-study page additions. Existing portfolio styling remains in agency.css. */
html { scroll-behavior: smooth; }
body.project-detail { padding-top: 0; }
.project-page { display: block; position: relative; width: 100%; min-height: 100vh; background: #fff; }
.project-page .modal-content { display: block; visibility: visible; opacity: 1; }
.project-page .close-modal { display: block; z-index: 1100; text-decoration: none; }
.project-page .close-modal:hover { opacity: .45; }
.project-navigation {
    max-width: 1170px;
    margin: 0 auto;
    padding: 30px 15px 70px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid #e5e5e5;
    font-family: Bricolage Grotesque, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.project-navigation a { color: #222; text-decoration: none; }
.project-navigation a:hover { color: #81A4FF; }
.project-navigation-home { font-size: 14px; }
.project-navigation-next { text-align: right; display: flex; flex-direction: column; gap: 5px; }
.project-navigation-next span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.project-navigation-next strong { font-family: 'Pridi', serif; font-size: 22px; font-weight: 500; }
@media (max-width: 767px) {
    .project-page .modal-content { padding-top: 85px; }
    .project-page .close-modal { top: 15px; right: 15px; transform: scale(.8); transform-origin: top right; }
    .project-navigation { align-items: flex-start; flex-direction: column; padding-bottom: 45px; }
    .project-navigation-next { text-align: left; }
}


/* Avoid confusing the project-level close control with the image lightbox close action. */
.project-page:has(.lightbox:target) .close-modal { display: none !important; }

/* Previous-project link shares the same visual treatment as next-project navigation. */
.project-navigation-previous { display: flex; flex-direction: column; gap: 5px; }
.project-navigation-previous span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #777; }
.project-navigation-previous strong { font-family: 'Pridi', serif; font-size: 22px; font-weight: 500; }

/* Ensure both project navigation links remain visible at every viewport width. */
.project-page > .project-navigation > .project-navigation-next { display: flex !important; visibility: visible; opacity: 1; }

/* Phase 1 image optimization: preserve intrinsic proportions in expanded lightboxes.
   HTML width/height attributes reserve layout space, but must not force lightbox dimensions. */
.project-page .lightbox img {
    width: auto !important;
    height: auto !important;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
}