/* Project detail v4 — content-first, compact case study layout */

.project-case-study-v4 {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 var(--page-pad) clamp(64px, 7vw, 96px);
}

.project-intro-v4 {
  padding: clamp(24px, 3vw, 38px) 0 clamp(28px, 3.5vw, 46px);
}

.project-intro-topline-v4 {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.project-intro-topline-v4 .back-link {
  margin: 0;
}

.project-category-line-v4 {
  margin: 0;
  color: var(--portfolio-dim);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  text-align: right;
}

.project-intro-grid-v4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

.project-intro-copy-v4 h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .97;
  letter-spacing: -.055em;
  font-weight: 650;
}

.project-lede-v4 {
  max-width: 68ch;
  margin: 16px 0 0;
  color: var(--portfolio-dim);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
}

.project-identity-v4 {
  display: grid;
  gap: 14px;
  align-content: end;
}

.project-client-logo-v4 {
  max-width: 145px;
}

.project-client-logo-v4 img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

.project-destination-v4 {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.project-destination-v4:hover,
.project-destination-v4:focus-visible {
  text-decoration: underline;
  text-underline-offset: .22em;
}

.project-hero-v4 {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--portfolio-light);
  overflow: hidden;
}

.project-hero-v4 img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.project-details-v4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  gap: clamp(34px, 4.5vw, 64px);
  align-items: start;
  padding: clamp(34px, 4.5vw, 58px) 0 clamp(38px, 5vw, 62px);
  border-bottom: 1px solid var(--line);
}

.project-description-v4 {
  max-width: 74ch;
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.68;
}

.project-description-v4 > :first-child {
  margin-top: 0;
}

.project-description-v4 > :last-child {
  margin-bottom: 0;
}

.project-skills-v4 h2 {
  margin: 0 0 12px;
  color: var(--portfolio-dim);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
}

.project-skills-v4 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-skills-v4 li {
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.35;
}

.project-gallery-v4 {
  padding-top: clamp(34px, 4.5vw, 56px);
}

.project-gallery-head-v4 {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.5vw, 30px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.project-gallery-head-v4 h2 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 650;
}

.project-gallery-head-v4 span {
  color: var(--portfolio-dim);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

.project-image-grid-v4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.project-image-grid-v4 figure {
  margin: 0;
}

/* Keep the preferred visual rhythm: two smaller images, then one wide image. */
.project-image-grid-v4 figure:nth-child(3n),
.project-image-grid-v4 figure:only-child {
  grid-column: 1 / -1;
}

.project-image-grid-v4 img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--portfolio-light);
}

.project-image-grid-v4 figcaption {
  padding-top: 7px;
  color: var(--portfolio-dim);
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 820px) {
  .project-intro-grid-v4,
  .project-details-v4 {
    grid-template-columns: 1fr;
  }

  .project-identity-v4 {
    grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr);
    align-items: end;
  }
}

@media (max-width: 700px) {
  .project-case-study-v4 {
    padding-inline: var(--page-pad);
  }

  .project-intro-topline-v4 {
    align-items: flex-start;
  }

  .project-category-line-v4 {
    max-width: 50%;
  }

  .project-intro-copy-v4 h1 {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 58px);
  }

  .project-details-v4 {
    gap: 28px;
  }

  .project-image-grid-v4 {
    grid-template-columns: 1fr;
  }

  .project-image-grid-v4 figure,
  .project-image-grid-v4 figure:nth-child(3n) {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .project-intro-topline-v4 {
    display: grid;
    gap: 12px;
  }

  .project-category-line-v4 {
    max-width: none;
    text-align: left;
  }

  .project-identity-v4 {
    grid-template-columns: 1fr;
  }
}