/* ============================================
   PROJECT HEADER
   Title + description placed directly on the
   background, above the prototype preview.
   ============================================ */
.project-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 140px 0 140px;
  text-align: left;
  opacity: 0;
  transform: translateY(30px);
  container-type: inline-size;   /* lets the columns stack based on THIS block's width */
}

.project-header.animate-in {
  animation: descFadeIn 1.5s ease both, descSlideIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Row below the title: description + meta, aligned at the top */
.ph-row {
  display: flex;
  align-items: flex-start;
  gap: 96px;
}

/* Column 1: description */
.ph-main {
  flex: 1 1 0;
  min-width: 0;
  max-width: 720px;
}

/* Column 2: keywords + link button */
.ph-meta {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.ph-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}

.ph-title {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 44px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #1e1e1e;
}

.ph-description {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #1e1e1e;
}

.ph-keywords {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1e1e1e;
}

/* Gap on each side of the "·" separators in the keywords line */
.kw-sep {
  margin: 0 10px;
}

/* Each "value + trailing dot" is kept on one line (never split mid-phrase),
   and wrapping happens only between units — so the dot stays with the value
   before it instead of starting a new line. */
.kw-part {
  white-space: nowrap;
}

/* Small inline badge inside the keywords (e.g. the Y Combinator logo before
   "YC S18"). Sized in em so it scales with the keyword text. */
.kw-icon {
  height: 1.05em;
  width: auto;
  vertical-align: -0.16em;
  margin-right: 5px;
  border-radius: 3px;
}

@media (max-width: 1400px) {
  .project-header {
    padding: 140px 0 100px;
    gap: 24px;
  }
  .ph-row { gap: 96px; }
  .ph-meta { flex-basis: 240px; }
  .ph-title { font-size: 44px; }
  .ph-description { font-size: 22px; }
  .ph-keywords { font-size: 16px; }
}

@media (max-width: 768px) {
  .project-header {
    padding: 100px 16px 40px;
    gap: 24px;
  }
  .ph-row { flex-direction: column; gap: 32px; }
  .ph-meta { flex-basis: auto; gap: 16px; }
  .ph-icon { width: 64px; height: 64px; border-radius: 14px; }
  .ph-title { font-size: 34px; }
  .ph-description { font-size: 18px; }
  .ph-keywords { font-size: 14px; }
}

/* ============================================
   PROJECT DETAILS (on the background)
   Challenge / Impact / My Role, under the prototype.
   ============================================ */
.project-details {
  max-width: 1080px;
  margin: 0 auto;
  padding: 140px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.pd2-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: none;   /* fill the full column width */
}

.pd2-label {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1e1e1e;
}

.pd2-text {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #1e1e1e;
  white-space: pre-line;   /* honour line breaks (\n) in the text, e.g. paragraphs */
}

@media (max-width: 1400px) {
  .project-details { padding: 120px 0; gap: 64px; }
  .pd2-label { font-size: 16px; }
  .pd2-text { font-size: 22px; }
}

@media (max-width: 768px) {
  .project-details { padding: 100px 16px; gap: 40px; }
  .pd2-block { max-width: none; }
  .pd2-label { font-size: 14px; }
  .pd2-text { font-size: 18px; }
}

/* PROGRESS SECTION styles moved to progress-section.css */

/* ============================================
   PROJECT DESCRIPTION BLOCK
   Shared layout for all project pages.
   Sub-blocks are optional — if absent in data,
   they simply won't render.
   ============================================ */

.project-description-block {
  display: none;   /* OLD white text block — hidden in favor of the on-background text. Set back to `flex` to show it again. */
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);   /* same as home-screen thumbnails */
  border-radius: 24px;
  padding: 72px;
  flex-direction: column;
  gap: 104px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(30px);
}

.project-description-block.animate-in {
  animation: descFadeIn 1.5s ease both, descSlideIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes descFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes descSlideIn {
  0% { transform: translateY(30px); }
  100% { transform: translateY(0); }
}

/* ── SUB-BLOCK (shared) ── */
.pd-sub-block {
  display: flex;
  flex-direction: column;
}

/* ── INTRO ── */
.pd-intro {
  gap: 40px;
}

.pd-title {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 64px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: #1e1e1e;
}

.pd-keywords {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1e1e1e;
}

.pd-description {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1e1e1e;
}

/* ── CHALLENGE / IMPACT (large text blocks) ── */
.pd-challenge,
.pd-impact {
  gap: 10px;
}

/* ── MINI TITLE (shared for challenge, impact, team, role) ── */
.pd-mini-title {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1e1e1e;
}

/* Team / My Role in the details block: the VALUE matches the mini-title size
   (16px) instead of the large body size, so it reads as a small meta label —
   consistent with the Team/My Role under the feature sections. */
.pd2-block--meta .pd2-text { font-size: 16px; line-height: 1.4; }
@media (max-width: 768px) { .pd2-block--meta .pd2-text { font-size: 14px; } }

/* ── LARGE BODY TEXT (challenge, impact) ── */
.pd-large-text {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1e1e1e;
}

/* ── TEAM / ROLE (small text blocks) ── */
.pd-team-role-row {
  display: flex;
  gap: 104px;
}

.pd-team,
.pd-role {
  gap: 10px;
}

.pd-small-text {
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #1e1e1e;
}

/* ── LINK BUTTON ── */
.pd-link-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #FFFFFF;
  border-radius: 999px;
  text-decoration: none;
  color: #1e1e1e;
  font-family: 'ABCDiatype', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  /* line-height 1: the rolling-letter windows (text-roll) pin to the TOP of
     the text line, so any extra line-height pushed the text off-center inside
     the pill. With line-height 1 the line is exactly the letter window, and
     the flex centering does the rest (padding grew 8→10px to compensate). */
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: fit-content;
  /* Keep the button on its own GPU layer the WHOLE time (not just while it's
     scaled). Without this, the browser drops the layer the instant the un-hover
     scale lands back on 1 and repaints the text + icon on the pixel grid — a
     sub-pixel re-snap that reads as the arrow "jumping" a touch. A permanent
     layer removes that final snap so the icon stays put. */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.pd-link-button:hover {
  transform: scale(1.08);
}

.pd-link-button img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ============================================
   TABLET (≤1400px)
   ============================================ */
@media (max-width: 1400px) {
  .project-description-block {
    padding: 48px;
    border-radius: 24px;
    gap: 80px;
  }

  .pd-intro { gap: 24px; }
  .pd-challenge, .pd-impact { gap: 8px; }
  .pd-team, .pd-role { gap: 8px; }

  .pd-title { font-size: 40px; letter-spacing: -0.04em; }
  .pd-keywords { font-size: 14px; }
  .pd-description { font-size: 24px; letter-spacing: -0.02em; }
  .pd-mini-title { font-size: 14px; }
  .pd-large-text { font-size: 24px; letter-spacing: -0.02em; }
  .pd-small-text { font-size: 14px; }

  .pd-link-button {
    font-size: 16px;
    padding: 10px 16px;
  }
}

/* ============================================
   MOBILE (≤560px)
   ============================================ */
@media (max-width: 560px) {
  .project-description-block {
    padding: 32px;
    border-radius: 16px;
    gap: 48px;
  }

  .pd-intro { gap: 24px; }
  .pd-challenge, .pd-impact { gap: 8px; }
  .pd-team, .pd-role { gap: 8px; }
  .pd-team-role-row { flex-direction: column; gap: 48px; width: 100%; }

  .pd-title { font-size: 40px; letter-spacing: -0.04em; }
  .pd-keywords { font-size: 14px; font-weight: 700; }
  .pd-description { font-size: 20px; letter-spacing: -0.02em; }
  .pd-mini-title { font-size: 14px; font-weight: 700; }
  .pd-large-text { font-size: 20px; letter-spacing: -0.02em; }
  .pd-small-text { font-size: 14px; font-weight: 500; }

  .pd-link-button {
    font-size: 14px;
    padding: 10px 16px;
  }

  .pd-link-button img {
    width: 14px;
    height: 14px;
  }
}

/* ============================================
   ADAPTIVE CONTENT WIDTH
   The project content (intro + preview + details — NOT the Other Projects row)
   shrinks to leave a left gutter for the TOC, instead of staying a fixed 1080px.
   So the TOC is always visible and the content adapts smoothly on resize.
   (Placed last so it overrides the earlier max-width: 1080px on these.)
   ============================================ */
.project-header,
.preview-section,
.preview-caption,
.project-details {
  max-width: min(1080px, calc(100vw - 2 * var(--side-gutter, 0px)));
}

/* When the header gets narrow (any breakpoint), stack the two columns and use
   the same gaps as mobile. Placed last so it wins over the tablet @media gap. */
@container (max-width: 800px) {
  .ph-row { flex-direction: column; gap: 32px; }
  /* keywords→button gap matches the description→keywords gap (.ph-row gap) */
  .ph-meta { flex-basis: auto; gap: 32px; }
}