/* ============================================================================
   WORK PAGE STYLES
   Loaded alongside styles.css.
   No hero on this page — wk-first overrides the first .projects padding-top
   so content clears the fixed nav with appropriate breathing room.

   Padding uses clamp() throughout so it scales continuously with viewport
   width rather than jumping at fixed breakpoints.
   ============================================================================ */

/* proj-long carries a 3.69rem margin-bottom by default (used on homepage to
   space it from the proj-row inside the same section). On the work page every
   project is its own section, so that margin stacks on top of section padding
   and creates a double gap. Zero it out here — section padding handles all
   spacing instead. */
.proj-long {
  margin-bottom: 0;
}

/* First section: top clears the fixed nav; bottom matches projects--notop
   so the first inter-row gap equals all the others.
   clamp min/max: 5.5rem (nav height + room at ~480px) → 12rem at ~1440px. */
.wk-first {
  padding-top:    clamp(5.5rem, 13.5vw, 12rem);
  padding-bottom: clamp(1.25rem, 5.24vw, 4.72rem);
}

/* Between-project gaps: continuously scale from tight at mobile to
   comfortable at desktop. Both values derived from the 50%-of-original
   targets: 3.79rem top / 4.72rem bottom at ~1440px, 1.25rem at ~480px. */
.projects--notop {
  padding-top:    clamp(1.25rem, 4.2vw, 3.79rem);
  padding-bottom: clamp(1.25rem, 5.24vw, 4.72rem);
}

/* Last section before footer: fixed breakpoint values matching homepage
   testimonials exactly. Double-class selector beats .projects--notop above. */
.projects--notop.wk-last {
  padding-bottom: 9.435rem;
}
@media (max-width: 1024px) { .projects--notop.wk-last { padding-bottom: 7rem; } }
@media (max-width: 768px)  { .projects--notop.wk-last { padding-bottom: 6rem; } }
@media (max-width: 480px)  { .projects--notop.wk-last { padding-bottom: 2.5rem; } }