/* 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;
}


/* Project Overview */

.project-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  margin: -15px auto 0px;
  padding-left: 20px;
  padding-right: 20px;
}

.project-overview__item {
  min-width: 0;
}

/* Responsibilities takes up 2 columns */
.project-overview__item--wide {
  grid-column: span 2;
}


.project-overview__item h3 {
  margin: 0 0 8px !important;
  color: #707078;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left !important;
}

.project-overview__item p,
.project-overview__item li {
  margin: 0;
  color: #222530;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.project-overview__item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
  .project-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 24px;
  }

  .project-overview__item--wide {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .project-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 24px;
    margin: -8px 0;
  }

  .project-overview__item--wide {
    grid-column: span 2;
  }

  .project-overview__item h3 {
    margin-bottom: 8px;
    font-size: 14px;
    text-align: left !important;
  }

  .project-overview__item p,
  .project-overview__item li {
    font-size: 12px;
  }
}