/* ==========================================================================
   Projects page
   ========================================================================== */

/* ---------- Intro text ---------- */
.pj-intro { padding: 1em 0 0; overflow: hidden; }
.pj-intro-text { padding: 3em 5em 3em 1em; }
.pj-intro-text strong { font-weight: 700; }
.pj-intro-text p:last-child { margin-bottom: 14.4px; } /* the original text block keeps its paragraph gap */

/* ---------- Construction experience: categories + project accordion ---------- */
.pj-experience { padding: 1em 0 0; overflow: hidden; }
.pj-experience-inner { padding: 10px; }
.pj-exp-title { color: var(--c-red); padding-bottom: 10px; margin-bottom: 27px; } /* 20px widget gap + the widget title's own top margin */

.pj-categories { margin-bottom: 20px; }
.pj-cat-title { margin: 0 0 16px; color: #000; }
.pj-cat-title label { cursor: pointer; }
.pj-categories select {
  display: block; width: 100%; height: 40px; padding: 8px 16px;
  font-family: var(--f-body); font-size: 16px; line-height: 1.5; color: #000;
  background-color: var(--c-white); border: 1px solid #666; border-radius: 3px;
  transition: border-color .3s, box-shadow .3s;
}
.pj-categories select:hover { border-color: var(--c-blue); }
.pj-categories select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(43, 119, 187, .25); }

/* Project accordion: keeps its desktop sizes on every width (as on the original) */
.pj-projects .acc-title { font-size: inherit; letter-spacing: 0; }
.pj-projects .acc-head { font-weight: 700; gap: 2px; }
.pj-projects .acc-head .icon { font-size: 24px; margin: 0 -4px; }
.pj-projects .acc-body { padding: 30px 85px 20px 65px; }
.pj-projects .project-table { font-size: 14.4px; line-height: 1.5; border-color: rgba(128, 128, 128, .502); }
.pj-projects .project-table th, .pj-projects .project-table td { padding: 15px; border-color: rgba(128, 128, 128, .502); }
.pj-projects .project-table tr:nth-child(odd) { background: rgba(128, 128, 128, .071); }
.pj-projects .project-table th { width: 21.5%; font-weight: 700; }
.pj-projects .project-table td p { margin: 0 0 14.4px; }
.pj-projects .project-table td p:last-child { margin-bottom: 0; }
.pj-projects .project-figure { max-width: var(--w, 100%); margin: 15px 0 0; }
.pj-projects .project-figure figcaption { line-height: 1.6; margin: 0 0 8px; }
.pj-photo { margin-top: 15px; max-width: 100%; height: auto; }
.pj-photo-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 15px; }
.pj-photo-row img { max-width: 100%; min-width: 0; }
.pj-photo-pair { display: flex; gap: 16px; align-items: flex-start; margin-top: 15px; }
.pj-photo-pair > div { flex: 1 1 0; min-width: 0; text-align: center; }
.pj-photo-pair img { display: inline-block; max-width: 100%; height: auto; }

/* ---------- Featured projects: title beside a photo ---------- */
.pj-showcase { overflow: hidden; }
.pj-row { display: flex; padding-top: 1em; }
.pj-row-title, .pj-row-media { width: 50%; }
.pj-row-title { display: flex; align-items: center; justify-content: center; padding: 3em 5em 3em 1em; text-align: center; }
.pj-row-media { padding: 0; }
.pj-frame {
  width: var(--fw, 92%);
  background: url(../../img/2023/10/memphis_img2.png) center no-repeat;
  border-radius: 8px; overflow: hidden;
}
.pj-frame img {
  width: 100%; height: var(--fh, 250px); object-fit: cover; border-radius: 8px;
  transition: transform .4s ease;
}
.pj-frame.is-natural img { height: auto; }
.pj-frame:hover img { transform: scale(1.03); }

/* ---------- Call to action ---------- */
.pj-cta { margin: 10px 0; padding: 3em 0; }
.pj-cta .btn { padding: 12px 24px; }
.pj-cta .btn .icon { font-size: 14px; }

@media (max-width: 1024px) {
  .pj-intro-text { padding: 2em; }
  .pj-exp-title { margin-bottom: 29px; }
  .pj-row { flex-wrap: wrap; }
  .pj-row-title { width: 100%; padding: 2em; }
  .pj-row-media { width: 60%; }
  .pj-cta { padding: 3em 0; }
}
@media (max-width: 767px) {
  .pj-intro-text { padding: 21px; }
  .pj-exp-title { margin-bottom: 28px; }
  .pj-projects .acc-head { padding: 15px 31px; font-size: 16px; }
  .pj-projects .acc-body { padding: 30px 85px 20px 65px; }
  .pj-projects .project-table { font-size: 14.4px; }
  .pj-projects .project-table th, .pj-projects .project-table td { padding: 15px; }
  .pj-projects .project-table th { width: auto; }
  .pj-row-title { padding: 21px; }
  .pj-row-media { width: 100%; }
  .pj-cta { padding: 1em 0; }
}