/* ============================================================================
   PROCESS PAGE STYLES
   Loaded alongside styles.css and project.css.
   All block classes start .proc- for clean namespacing.
   ============================================================================ */

/* ------------------------------------------------------ PHASE 1 — DISCOVERY
   Same side padding as images (var(--side-pad), no multiplier) so the
   2-col text aligns with the image below. */
.proc-phase-1 {
  padding: 2.08rem calc(var(--side-pad) * 1.15) 0;
}
@media (max-width:1024px) { .proc-phase-1 { padding-top: 1.56rem; padding-left: var(--side-pad); padding-right: var(--side-pad); } }
@media (max-width:768px)  { .proc-phase-1 { padding-top: 1.3rem; } }
@media (max-width:480px)  { .proc-phase-1 { padding-top: 1.04rem; } }

/* Phase label: left-aligned, no top margin when first in section */
.proc-phase-label {
  text-align: left;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Override project.css centre-align for the process page headline */
.pp-main .pp-headline-section {
  text-align: left;
}

/* Larger headline floor for process + guide pages — the longer titles
   shrink too small at the default 24.5px minimum. */
.pp-main .pp-headline {
  font-size: clamp(37px, 3.5vw, 47.5px);
}

/* 2-column layout: paragraph/intro on left, list on right */
.proc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
/* Multiple paragraphs stacked inside the left column */
.proc-col > .pp-text + .pp-text { margin-top: 1.5em; }

@media (max-width:768px) {
  .proc-cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ COLORED SECTIONS
   Phases 2, 3, 5, 6. Horizontal padding matches field-notes/services (1.15×). */
.proc-colored-section {
  padding: 5.81rem calc(var(--side-pad) * 1.15) 5.81rem;
  position: relative;
}

/* Phase 2: pink background — override pp-text's explicit dark color to blue */
.proc-pink {
  background: var(--pink);
}
.proc-pink .pp-text        { color: var(--blue); }
.proc-pink .proc-phase-label { color: var(--blue); }

/* Phases 3 & 6: blue background — pp-text--light handles white text */
.proc-blue {
  background: var(--blue);
}
/* Phase 3 has no jagged-top so its top padding should match its bottom —
   double-class selector beats the single .proc-colored-section rule below. */
@media (max-width:1024px) { .proc-colored-section.proc-blue { padding-top: 4rem; } }
@media (max-width:768px)  { .proc-colored-section.proc-blue { padding-top: 3rem; } }
@media (max-width:480px)  { .proc-colored-section.proc-blue { padding-top: 2rem; } }
.proc-phase-label--light { color: white; }

/* Phase 5: green background — text stays dark (pp-text default) */
.proc-green {
  background: var(--green);
}

/* Pink jagged-top */
.jagged-top.pink  { background-color: var(--pink); }
/* Green wave-top */
.wave-top.green   { background-color: var(--green); }

/* ------------------------------------------------------ WHITE SECTION (Phase 4) */
.proc-white-section {
  background: var(--cream);
  position: relative;
  padding-bottom: 9.435rem;
}
.proc-white-section .pp-images {
  padding-top: 5.81rem;
  margin-top: 0;
}
.proc-phase4-text {
  padding: 5.81rem calc(var(--side-pad) * 1.15) 0;
}
.proc-phase4-text .proc-phase-label { margin-top: 0; }

/* Guide CTA — centred text + inline link below Production */
.proc-guide-cta {
  padding: 4rem calc(var(--side-pad) * 1.15) 0;
  text-align: center;
}
.proc-guide-cta p {
  font-family: 'Azeret Mono', monospace;
  font-weight: 400;
  font-size: clamp(18.4px, 1.645vw, 25.3px);
  line-height: 1.5;
  color: var(--dark);
}
.proc-guide-cta .action-link {
  display: block;
  margin-top: 1.4rem;
}
@media (max-width:768px) { .proc-guide-cta { padding-top: 3rem; } }
@media (max-width:480px) { .proc-guide-cta { padding-top: 2.5rem; } }

/* ------------------------------------------------------ TIMELINE & INVESTMENT
   Last white section before footer — bottom padding accounts for wave-top
   (same values as .pp-more at each breakpoint). */
.proc-timeline {
  background: var(--cream);
  position: relative;
  z-index: 4;
  padding: 5.81rem calc(var(--side-pad) * 1.15) 9.435rem;
}
.proc-timeline .proc-phase-label { margin-top: 0; }

/* ------------------------------------------------------ RESPONSIVE */
@media (max-width:1024px) {
  .proc-colored-section {
    padding: 3rem var(--side-pad) 4rem;
  }
  .proc-white-section .pp-images { padding-top: 4rem; }
  .proc-white-section { padding-bottom: 7rem; }
  .proc-phase4-text { padding: 4rem var(--side-pad) 0; }
  .proc-timeline { padding: 4rem var(--side-pad) 7.75rem; }
}
@media (max-width:768px) {
  .proc-colored-section {
    padding: 2rem var(--side-pad) 3rem;
  }
  .proc-white-section .pp-images { padding-top: 3rem; }
  .proc-white-section { padding-bottom: 6rem; }
  .proc-phase4-text { padding: 3rem var(--side-pad) 0; }
  .proc-timeline { padding: 3rem var(--side-pad) 6.75rem; }
}
@media (max-width:619px) {
  .proc-timeline { padding-bottom: 4.875rem; }
}
@media (max-width:480px) {
  .proc-colored-section {
    padding: 1.5rem var(--side-pad) 2rem;
  }
  .proc-white-section .pp-images { padding-top: 2rem; }
  .proc-white-section { padding-bottom: 2.5rem; }
  .proc-phase4-text { padding: 2rem var(--side-pad) 0; }
  .proc-timeline { padding: 2rem var(--side-pad) 4rem; }
}