/* PoC-only styles (additive — does not modify the original stylesheets).
   Covers the new content-collection Project detail page + gallery, which the
   original site rendered as Bootstrap modals. Kept intentionally small. */

.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 15px 4%;
  box-sizing: border-box;
}
.project-gallery-item {
  margin: 0;
  text-align: center;
}
.project-gallery-item picture {
  display: block;
}
.project-gallery .my-modal-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.project-body {
  margin-top: 10px;
  line-height: 1.7;
}
.project-body p {
  font-size: 16px;
}

/* Project tiles open a collection-driven version of the original production
   gallery modal. Templates keep gallery images dormant until their tile is
   selected, so the listing preserves lazy-loading instead of downloading
   every project gallery up front. */
body.project-modal-open {
  overflow: hidden !important;
}

.project-modal[hidden] {
  display: none;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1b0808;
  color: #fff;
}

.project-modal-panel {
  min-height: 100%;
  background: #1b0808;
}

.project-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  padding: 10px 15px 1px;
  box-sizing: border-box;
  text-align: center;
  background: #1b0808;
}

.project-modal-close {
  display: inline-block;
  width: min(300px, 80vw);
  padding: 15px 0;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  background: #1792a0;
  font-family: 'Copperplate-Gothic-Light-Regular';
  font-size: 18px;
  font-weight: bold;
  line-height: 1.42857143;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

.project-modal-close:hover {
  color: #fff;
  border-color: #fff;
  background: #137d89;
}

.project-modal-close:focus {
  color: #fff;
  border-color: #fff;
  background: #1792a0;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.project-modal-title {
  margin: 35px auto;
  color: #fff;
  font-family: 'Copperplate-Gothic-Light-Regular';
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
}

.project-modal-title span {
  display: block;
}

.project-modal-gallery {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.project-modal .section-white {
  background: transparent;
}

.project-modal .project-gallery {
  width: 100%;
  padding: 15px 0;
}

.project-modal-footer {
  padding: 30px 15px 45px;
  text-align: center;
}

/* v0.11.0: images now carry explicit width/height attributes (CLS
   prevention). When the legacy stylesheets constrain their width
   (max-width/width rules), height must follow the aspect ratio instead of
   sticking at the attribute value. Standard reset; behaves identically in
   pre-2016 browsers (CSS height beats the height attribute everywhere). */
img[width][height] {
  height: auto;
}

/* Astro project cards wrap the whole tile in one link, while the original
   static site put a nested <a> inside .portfolio-item-desc. Apply the same
   production typography to the CMS-rendered label and allow intentional,
   editor-controlled line breaks through the Display title field. */
.Portfolio-box > a .portfolio-item-desc {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.12;
}

.Portfolio-box > a .portfolio-item-desc .portfolio-title-line {
  display: block;
}

/* Project source images can be landscape or portrait. Keep their originals
   untouched, but crop every grid thumbnail to the same square presentation. */
.Portfolio-box > a .project-card-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1024px) {
  .Portfolio-box > a .portfolio-item-desc {
    font-size: 24px !important;
  }
}

@media (max-width: 767px) {
  .project-modal-header {
    padding-top: 12px;
  }

  .project-modal-title {
    margin: 28px auto;
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: 2px;
  }

  .project-modal-gallery {
    width: calc(100% - 30px);
  }
}

@media screen and (min-width: 1240px) {
  .Portfolio-box > a .portfolio-item-desc {
    font-size: 25px;
  }
}