/* =========================================================
   Jackfish Creative, Project Page (Slate & Sparrow Builders)
   Extends the tokens/rules in styles.css, no redefinition of
   colors/type/spacing scales here, only project-page-specific layout.
   ========================================================= */

.project-page {
  /* Same page-top offset as the About, Contact and Home pages: clears the fixed nav, then one --space-xl. */
  padding-top: calc(var(--nav-height, 88px) + var(--space-xl));
}

/* ---------- Project hero ---------- */
.pj-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  padding: 0 var(--space-inline); /* no bottom padding: the next section brings its own top padding */
}

.pj-hero-head {
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
}

.pj-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-tag);
  color: var(--color-text-muted); /* was #a89a90, under 3:1 on White */
  text-decoration: none;
  transition: color 0.15s ease;
}

.pj-back:hover {
  color: var(--color-text);
}

.pj-back svg {
  flex-shrink: 0;
}

.pj-title {
  margin: 0;
  font-family: var(--font-heading); /* logo font */
  font-weight: 700;
  font-size: calc(var(--text-heading-lg) * 0.85); /* same as every other page title ("Let's talk", "The Blueprint") */
  line-height: var(--leading-heading-lg);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.pj-hero-media {
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  aspect-ratio: 16/8;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #f6f6f6;
  position: relative;
}

.pj-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Section shell ---------- */
.pj-section {
  width: 100%;
  /* Sections that follow each other on the same white ground are one --space-xl apart (top padding only). */
  padding: var(--space-xl) var(--space-inline) 0;
}

/* The last white section sits against the brown closing strip, so it gets the full --space-section below
   (the colour change eats part of the visible gap), same as every other white section on the site. */
.pj-section:last-of-type {
  padding-bottom: var(--space-section);
}

.pj-section-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* ---------- Brief (narrative) ----------
   Pill tag in a fixed-width left column, copy in the remaining column , 
   the whole row shares .pj-section-inner's max-width, so the copy's right
   edge lines up with the hero image's right edge above it. */
.pj-brief {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* tag on top, text left-aligned under it, both on the page's left edge */
  gap: var(--space-md);
}

/* Service tag (Oct 12, 2026): rounded Bone pill, Dark Fustat text, same shape as the contact form pills. Was a brown-outline logo-font box. */
/* More than one tag sits side by side. */
.pj-brief-tag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.pj-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px; /* same pill shape as the contact form */
  background: var(--color-cream); /* Bone: reads as a label, not a button (the form's tappable pills are White) */
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-tag);
  line-height: var(--leading-tag);
  letter-spacing: 0;
  color: var(--color-text);
  white-space: nowrap;
}

.pj-brief-copy p {
  margin: 0 0 var(--space-md);
  max-width: 74ch;
  font-family: var(--font-body);
  font-size: var(--text-subtitle);
  line-height: 1.45;
  letter-spacing: var(--tracking-loose);
  color: var(--color-text);
}

.pj-brief-copy p:last-child { margin-bottom: 0; }

/* ---------- Mixed gallery (marks + mockups, one long scroll) ----------
   Rows are either one full-width image or a pair, never 3-up, and every
   item sets its OWN aspect-ratio/size rather than the row dictating a
   uniform height, so logo tiles (square, contained, colored ground) sit
   naturally next to tall or wide photo mockups. */
.pj-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pj-row {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
  align-items: start;
}

.pj-row-full { grid-template-columns: 1fr; }
.pj-row-2 { grid-template-columns: 1fr 1fr; }

/* Bottom-aligned pair, items keep their own height/aspect-ratio but share
   a bottom edge instead of a top edge (default is align-items: start). */
.pj-row-2.pj-align-bottom { align-items: end; }

.pj-media {
  background: #f6f6f6;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

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

/* Scroll-triggered entry, same fade/slide-up pattern (and timing) as the
   homepage's project/service/build-item cards, so this page's gallery
   feels like part of the same site rather than a bolt-on treatment.
   JS (project.js) adds .is-visible via IntersectionObserver, staggered
   per tile with --enter-delay. */
.pj-media {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--enter-delay, 0s);
}

.pj-media.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pj-media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Parallax on the full-width banner rows only (see project.js), the
   image itself is scaled up slightly so the parallax travel never
   reveals an edge/gap at the top or bottom of its crop. */
.pj-row-full .pj-media--wide img,
.pj-row-full .pj-media--wide-mark img {
  will-change: transform;
}

/* Size/crop variants, mixed freely within a row */
.pj-media--wide { aspect-ratio: 21/8; }
.pj-media--tall { aspect-ratio: 3/4; }
.pj-media--squarish { aspect-ratio: 4/3; }
.pj-media--short { aspect-ratio: 5/4; }

/* Logo mark tile, full-width, a lockup shown at the same wide banner
   ratio as the photo mockups, but contained (never cropped) since it's
   type/mark, not a photo. */
.pj-media--wide-mark {
  aspect-ratio: 21/8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.pj-media--wide-mark img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Close ---------- */
.pj-close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  background: var(--color-text);
  padding: var(--space-xl) var(--space-inline); /* dark strips: --space-xl, like every other brown strip */
  padding-bottom: calc(var(--space-xl) + 4px); /* the extra 4px tucks under the footer (see below) */
  text-align: center;
}

.pj-close-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.pj-close h2 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  white-space: nowrap;
}

.pj-close p {
  margin: 0;
  max-width: 46ch;
  color: #cbb9ae;
  font-family: var(--font-body);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-tight);
}

@media (max-width: 480px) {
  .pj-close h2 { white-space: normal; }
}

/* On this section's brown ground, the shared .btn-primary hover fill
   (--btn-fill defaults to the same brown as this background) makes the
   button visually vanish on hover. Override to a white fill with the
   brown text swapping in as it sweeps, so it stays legible/visible. */
.pj-close-btn {
  --btn-fill: var(--color-cream);
}

.pj-close-btn:hover {
  color: var(--color-text);
}

@media (max-width: 640px) {
  .pj-row-2 { grid-template-columns: 1fr; }
}

/* The footer's top edge is hand-cut (rough.js), which pulls it inward by up to 3.6px. Straight
   after the brown strip that showed a thin line of White page between the two colours. Sliding the
   footer up 4px over the strip means brown, not White, shows through the cut. */
.pj-close + .site-footer {
  margin-top: -4px;
}