/* ============================================
   Pulse Project Page — Page-specific styles
   ============================================ */

/* Tight grids (collage rhythm): meta + multi-column content */
.project-meta {
  gap: var(--space-1);
}

/* Pulse hero — four secondary meta cells, one line each (uses .project-meta gap from above) */
.pulse__project-meta .text-block--secondary p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.pulse__project-meta .text-block--secondary {
  min-width: 0;
}

.pulse__meta-group {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-1);
}

.pulse__meta-topic {
  background-color: var(--color-border);
}

.pulse__meta-topic p {
  color: var(--color-text-secondary);
}

.pulse__meta-body--team {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pulse__meta-body--team .pulse__team-link,
.pulse__meta-body--team span {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-body);
}

.pulse__team-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.pulse__team-link:hover,
.pulse__team-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.columns-equal-height,
.columns-equal-height__col {
  gap: var(--space-1);
}

.columns-three {
  gap: var(--space-1);
}

.page.pulse .more-projects-grid {
  gap: var(--space-1);
}

/* Sections: default tight stack; hero (section--loose) uses space-3 for collage + title + meta */
.page.pulse .section,
.page.pulse .section.section--tight {
  gap: var(--space-1);
}

.page.pulse .section.section--loose {
  gap: var(--space-3);
}

/* 5-photo horizontal research strip */
.pulse__research-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: clamp(10rem, 16vw, 14rem); /* explicit row forces height */
  gap: var(--space-1);
  overflow: hidden; /* clip images to container */
}

.pulse__research-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pulse__process-visual {
  min-height: clamp(12rem, 22vw, 18rem);
}

.pulse__problem-layout {
  grid-template-columns: 1fr;
}

/* Intro, HMW columns, wireframe, journey: single gutter — matches .pulse__root-cause-layout */
.pulse__framing-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

/* "Connecting the Touchpoints" + copy + journey: one space-1 stack */
.pulse__framing-substack {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.pulse__framing-figure {
  margin: 0;
  min-width: 0;
}

.pulse__framing-block-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Wireframe block only: 1px hairline; journey image stays unstroked */
.pulse__framing-figure--wireframe .pulse__framing-block-img {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
}

/* Left column = only as wide as the phone art; right column fills rest */
.pulse__final-designs-layout.columns-equal-height {
  align-items: start;
  gap: var(--space-1);
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}

/* Single preview screen: box hugs image — no full-column white band */
.pulse__final-screen-stage {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
}

.pulse__final-screen {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  object-position: left top;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.pulse__final-screen.is-swapping {
  opacity: 0.55;
  filter: blur(1.5px);
}

.pulse__final-features {
  gap: var(--space-1);
}

.pulse__final-features .pulse__feature-card {
  cursor: pointer;
}

.pulse__final-features .pulse__feature-card.is-active {
  /* Selection without outline; 1px edge only on the preview screen image */
  filter: brightness(1.06);
}

.pulse__takeaways-figure {
  margin: 0;
  width: 100%;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pulse__takeaways-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
}

/* Key takeaways: primary stays natural; secondary cards grow to match visual column height */
.pulse__takeaways-col > .text-block--primary {
  flex: none;
}

.pulse__takeaways-col > .text-block--secondary {
  flex: 1;
}

/*
 * Root cause — one 10-column grid for posters + insights:
 * - Row 1: five posters, each spans 2 tracks (2+2+2+2+2 = 10).
 * - Row 2: insights span 6 + 4 tracks (same gutter as after poster 3).
 * Gutter positions match because every gutter falls on a track boundary.
 */
.pulse__root-cause-layout {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-1);
}

.pulse__poster-cell {
  grid-column: span 2;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pulse__poster-insights-left {
  grid-column: span 6;
}

.pulse__poster-insights-right {
  grid-column: span 4;
}

.pulse__poster-insights-left,
.pulse__poster-insights-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}

.pulse__poster-insights-header {
  flex: none;
}

.pulse__poster-insights-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking);
  color: var(--color-text-inverse);
}

/* Left column body fills remaining height to match right column */
.pulse__poster-insights-col > .pulse__poster-insights-body-fill {
  flex: 1;
}

/* Four person photos — same gutter + aspect as poster row; --full = new row, full content width */
.pulse__person-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
}

.pulse__person-row--full {
  grid-column: 1 / -1;
}

.pulse__person-cell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Phone mockup — taller, show top of UI */
.pulse__phone-visual {
  min-height: clamp(22rem, 38vw, 34rem);
}

/* 1024px: columns-three → 2 columns */
@media (max-width: 1024px) {
  .columns-three {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .pulse__final-designs-layout.columns-equal-height {
    grid-template-columns: 1fr;
  }

  .pulse__final-screen-stage {
    width: 100%;
  }

  .pulse__final-screen {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }

  .pulse__root-cause-layout {
    grid-template-columns: 1fr;
  }

  .pulse__poster-cell,
  .pulse__poster-insights-left,
  .pulse__poster-insights-right,
  .pulse__person-row--full {
    grid-column: span 1;
  }

  .pulse__poster-cell {
    aspect-ratio: 4 / 3;
  }

  .pulse__person-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pulse__person-cell {
    aspect-ratio: 4 / 3;
  }

  .pulse__research-strip {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }

  .pulse__research-strip img {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}