/* Portfolio-specific rules only.
   Tokens, base styles, header and footer all come from /css/style.css —
   this file must never redeclare them, or the two will drift. */

/* ---------- project page ---------- */
.project-hero {
  padding: clamp(0.75rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.project-hero h1 { font-size: var(--fs-h2); font-style: italic; }
/* Category pages already keep .project-eyebrow italic on the card
   captions (see .category-page .project-card .project-eyebrow) — this
   scopes the "not italic" look to just the hero's category label. */
.project-hero .project-eyebrow { font-style: normal; font-size: 14px; }

.project-eyebrow {
  font-style: italic;
  margin: 0 0 0.75rem;
}

/* The one-line blurb under the title. Lexend rather than the stale
   pre-rebrand Roboto Condensed reference (never actually loaded once the
   font system moved to Gelasio/Lexend/Nunito) — matches the other
   tracked-uppercase labels site-wide. Centered like the rest of the hero,
   so margin needs auto on the sides now, not just a top offset. */
.project-lead {
  font-family: "Lexend", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--highlight);
  margin: 1rem auto 0;
  max-width: 60ch;
}

.project-body {
  max-width: 60ch;
  margin: 1.5rem auto 0;
}
.project-body p {
  margin: 0 0 1em;
}

.project-meta {
  margin-top: 1.25rem;
  opacity: 0.75;
  font-size: 14px;
  font-style: italic;
}

/* .project-gallery itself is now defined in the site's shared style.css
   (masonry columns, next to the other dark-section/diagonal-footer rules
   it's paired with) — nothing left to declare here. */

/* Vimeo embeds. Their own full-width section above the photo masonry, not
   mixed into .project-gallery's columns — a video squeezed to one column's
   width there would read as tiny next to portrait photos.
   Sized by a fixed HEIGHT with width following each video's own aspect
   ratio (a "filmstrip" row), not a fixed width — mixed portrait/landscape
   clips at equal width would make portrait ones absurdly tall. On mobile,
   fall back to full-width stacking (width fixed, height following ratio
   instead) so a wide landscape clip at 350px tall can't overflow a phone
   screen. */
.project-videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fe-gap);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.project-videos__item {
  margin: 0;
  width: 100%;
}
.video-embed {
  position: relative;
  width: 100%;
  /* 16:9 fallback for the rare case build.mjs couldn't fetch a video's real
     aspect ratio from Vimeo's oEmbed API — normally overridden per-figure by
     an inline aspect-ratio matching its own source. */
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  .project-videos__item {
    width: auto;
    height: 350px;
  }
  .video-embed {
    width: auto;
    height: 100%;
  }
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- index ---------- */
.project-grid {
  display: grid;
  gap: var(--fe-gap);
  grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Category pages only — smaller cards than the main /portfolio/ index.
   Flexbox + justify-content: center rather than a fixed-column grid, so a
   category with fewer than 4 galleries (Health & Adventure has just 1)
   centers them as a group instead of leaving them stuck against the left
   edge with dead grid cells to the right. */
.category-page .project-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1180px;
  margin: 0 auto;
}
.category-page .project-card { flex: 1 1 220px; max-width: 280px; }
/* `height: auto` is load-bearing: the <img> carries intrinsic width/height
   attributes so the page doesn't jump while loading, and without this the
   attribute height beats aspect-ratio and the cards come out uneven. */
.project-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.project-card h3 {
  margin-top: 0.75rem;
}
.project-card .project-eyebrow {
  margin: 0.25rem 0 0;
  font-size: 14px;
  opacity: 0.75;
}

/* ---------- shared page frame ---------- */
.portfolio-page {
  padding: 0 var(--fe-gutter);
  max-width: 1500px;
  margin: 0 auto;
}
.back-link {
  display: inline-block;
  margin: 2rem 0;
  border-bottom: 1px solid currentColor;
}