/* ==================================================================
   PROJECT PAGE — editorial layout (Fanta Heroes, Love Link, …)
   Big hero image, narrow text column, image grid, credits, related.
   Builds on css/styles.css (colors, fonts, header, info, footer).
   ================================================================== */

.pj-page {
  --pj-wide: 1440px;                         /* max width of images       */
  --pj-text: 640px;                          /* max width of text column  */
  --pj-gap: clamp(12px, 1.6vw, 24px);        /* space between images      */
  --pj-space: clamp(72px, 10vw, 140px);      /* space between sections    */
}

/* Override the homepage <main> spacing */
main.pj {
  max-width: var(--pj-wide);
  padding: calc(var(--header-h) + clamp(16px, 2.4vw, 32px)) var(--gutter) 0;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.pj-hero {
  margin: 0;
  overflow: hidden;
  background: #e6e6e3;
}
.pj-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--header-h) - 48px);
  max-height: calc(100svh - var(--header-h) - 48px); /* phones: ignore the browser bar */
  object-fit: cover;
}

/* Self-hosted film hero (<video>) — keeps the film's own shape */
.pj-hero--film { background: #000; }
.pj-hero--film video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - var(--header-h) - 48px);
  max-height: calc(100svh - var(--header-h) - 48px);
  margin: 0 auto;
}

/* Video hero (YouTube / Vimeo embed) — always 16:9 */
.pj-hero--video {
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - var(--header-h) - 48px);
  background: #000;
}
.pj-hero--video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------
   Text column
   ------------------------------------------------------------------ */
.pj-text {
  max-width: var(--pj-text);
}
.pj-text p {
  margin: 0 0 1.1em;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  font-weight: var(--fw-light);
  line-height: 1.6;
}
.pj-text p:last-child { margin-bottom: 0; }
.pj-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 0.2em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.pj-link:hover { color: var(--color-accent); text-decoration-color: currentColor; }

.pj-intro {
  padding-top: clamp(28px, 3.5vw, 48px);
  margin-bottom: var(--pj-space);
}
.pj-title {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: var(--fw-regular);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.pj-text .pj-kicker {
  margin: 0 0 0.4em;
  font-size: 1rem;
  font-weight: 500;
}

.pj-section {
  margin-top: var(--pj-space);
}
.pj-section + .pj-gallery { margin-top: clamp(40px, 5vw, 72px); }
.pj-heading {
  margin: 0 0 clamp(18px, 2vw, 28px);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* ------------------------------------------------------------------
   Image gallery
   ------------------------------------------------------------------ */
.pj-gallery {
  display: grid;
  gap: var(--pj-gap);
}
.pj-row {
  display: grid;
  gap: var(--pj-gap);
}
.pj-row--2 { grid-template-columns: repeat(2, 1fr); }
.pj-row--3 { grid-template-columns: repeat(3, 1fr); }
.pj-row--cans {
  grid-template-columns: repeat(6, 1fr);
  padding: clamp(24px, 4vw, 64px);
  background: #fff;
}

.pj-row figure {
  margin: 0;
  overflow: hidden;
  background: #e6e6e3;
  cursor: zoom-in;
}
.pj-row--3 figure,
.pj-row--cans figure { background: #fff; }

.pj-row img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
.pj-row figure:hover img { transform: scale(1.025); }

/* fade images in as they scroll into view */
.pj-row figure.is-pending img { opacity: 0; transform: translateY(24px); }

/* ------------------------------------------------------------------
   Credits
   ------------------------------------------------------------------ */
.pj-credits { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.pj-credits div { display: flex; gap: 0.4em; }
.pj-credits dt { font-weight: 500; }
.pj-credits dt::after { content: ":"; }
.pj-credits dd { margin: 0; font-weight: var(--fw-light); }

/* ------------------------------------------------------------------
   Related projects
   ------------------------------------------------------------------ */
.pj-related__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pj-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-related__list a { display: block; color: inherit; text-decoration: none; }
.pj-related__img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e6e6e3;
}
.pj-related__img img,
.pj-related__img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.pj-related__list a:hover img,
.pj-related__list a:hover video { transform: scale(1.04); }
.pj-related__name {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  transition: color var(--dur) var(--ease);
}
.pj-related__list a:hover .pj-related__name { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Back to top
   ------------------------------------------------------------------ */
.pj-top {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-accent);
  font-size: 1.25rem;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pj-top.is-visible { opacity: 1; pointer-events: auto; }
.pj-top:hover { transform: translateY(-3px); }

/* ------------------------------------------------------------------
   Image viewer
   ------------------------------------------------------------------ */
.pj-viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 4vw, 56px);
  border: 0;
  background: rgba(20, 20, 20, 0.94);
}
.pj-viewer[open] { display: grid; place-items: center; }
.pj-viewer::backdrop { background: transparent; }
.pj-viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}
.pj-viewer__close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.pj-viewer__close:hover { color: var(--color-accent); }

/* ------------------------------------------------------------------
   Smaller screens
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pj-row--cans { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pj-row--2 { grid-template-columns: 1fr; }
  .pj-row--3 { grid-template-columns: repeat(2, 1fr); }
  /* an odd last image fills the row instead of leaving a gap */
  .pj-row--3 figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pj-related__list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-row figure.is-pending img { opacity: 1; transform: none; }
}

/* Fanta Heroes Gallery 1: a bento board. 4 columns:
   key art (2 x 2) + four labels · two labels + the lineup (2 x 2) · the colour strip under them.
   Each label sits in a frame of its flavour colour and lifts a little on hover. */
.pj-row--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.pj-row--bento .fh-tile--key { grid-column: span 2; grid-row: span 2; }
.pj-row--bento .fh-tile--lineup { grid-column: 3 / span 2; grid-row: span 2; }
.pj-row--bento figure img { width: 100%; height: 100%; object-fit: cover; }
.pj-row--bento .fh-tile--label { aspect-ratio: 1600 / 1035; }   /* every row the height of a label, so nothing is cropped */
.fh-strip { aspect-ratio: 3.13; }
.fh-tile--label { padding: 6px; background: var(--c) !important; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.fh-tile--label:hover { transform: translateY(-6px) rotate(-1deg); }
.fh-tile--label:hover img { transform: none; }
.fh-strip { grid-column: 1 / span 2; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; list-style: none; }
.fh-strip li { display: flex; align-items: flex-end; justify-content: center; padding: 0 2px 12%; background: var(--c);
  font: 700 clamp(.6rem, .9vw, .85rem)/1.1 "Chalkboard SE", "Comic Sans MS", var(--font-sans); color: #1d3a8a; text-align: center; }
@media (max-width: 760px) {
  .pj-row--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-row--bento .fh-tile--lineup, .fh-strip { grid-column: 1 / -1; }
  .fh-strip { min-height: 90px; }
}