/* =========================================================================
   PORTFOLIO — inner page
   Header/footer/consult are the shared components (folds.css), unmodified.
   Nothing here is a stock photo: the hero is a mosaic of the same real
   work stills used in the wall below it, and the wall itself is an
   asymmetric bento grid (mixed tile sizes) rather than a uniform thumbnail
   grid, so the page reads as a curated wall of real student work.
   ========================================================================= */

/* --- hero: a mosaic of real stills instead of one photo -------------------- */
.pf-hero {
  position: relative;
  padding: clamp(9rem, 20vw, 13rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--void);
}
.pf-hero-mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.pf-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.7) brightness(0.55); }
.pf-hero-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--void-rgb), 0.6) 0%, rgba(var(--void-rgb), 0.78) 55%, var(--void) 100%),
    linear-gradient(90deg, rgba(var(--void-rgb), 0.6) 0%, transparent 55%);
}
.pf-hero-inner { position: relative; z-index: 1; max-width: var(--page); margin: 0 auto; }
.pf-crumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}
.pf-crumb a { color: var(--ink-mid); text-decoration: none; }
.pf-crumb a:hover { color: var(--ink); }
.pf-crumb span[aria-hidden] { color: var(--ink-quiet); }
.pf-crumb b { color: var(--ink); font-weight: 600; }
.pf-hero .numbers-tag { display: inline-flex; width: fit-content; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.pf-hero-h {
  margin: 0 0 clamp(1rem, 2.2vw, 1.5rem);
  max-width: 16ch;
  font-family: var(--font-poster);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.pf-hero-lead {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-mid);
}
.pf-hero-ctas { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 2vw, 1.25rem); }

/* --- the bento wall ---------------------------------------------------------
   A repeating 12-tile rhythm (feature square, a tall tile, a wide tile,
   another tall tile) keeps 24 identical-shaped source stills from reading
   as a flat contact sheet — the two 12-tile cycles are identical so the
   pattern still feels intentional rather than random. */
.pf-wall-section { padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: var(--void); }
.pf-wall-head { max-width: var(--page); margin: 0 auto clamp(2rem, 4vw, 3rem); }
/* .pf-wall-head and .pf-courses-head wrap a plain block, not a flex column,
   so .numbers-tag's own align-self: flex-start (folds.css) never engages —
   without an explicit width the pill defaults to block and spans the full
   column instead of reading as a chip (the same bug vbs.css hit and fixed
   on .vbs-hero .numbers-tag). Forced to content width directly here too. */
.pf-wall-head .numbers-tag,
.pf-courses-head .numbers-tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.5rem;
}
.pf-wall-h {
  margin: 0.5rem 0 0;
  font-family: var(--font-poster);
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.pf-wall {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 195px;
  gap: 6px;
}
.pf-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm, 6px);
  background: var(--surface);
}
.pf-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* these are tall movie-poster crops, not landscape photos — the subject
     and the title text both sit in the top half, so biasing the crop up
     (instead of the object-fit default of dead centre) keeps them in
     frame instead of cutting through the middle of the artwork */
  object-position: 50% 12%;
  display: block;
  transition: transform 0.5s var(--ease);
}
.pf-tile:hover img { transform: scale(1.06); }
.pf-tile-no {
  position: absolute;
  top: 0.6rem; left: 0.7rem;
  z-index: 1;
  font-family: var(--font-poster);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: rgba(var(--white-rgb), 0.85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.pf-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 1.75rem 0.9rem 0.7rem;
  font-size: var(--fs-nano);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-1) var(--ease), transform var(--t-1) var(--ease);
}
.pf-tile:hover figcaption, .pf-tile:focus-within figcaption { opacity: 1; transform: translateY(0); }

/* the repeating bento rhythm — every 12 tiles: a 2x2 feature and two tall
   (1x2) tiles among plain 1x1 ones.
   There is deliberately no "2 columns x 1 row" wide tile: at 6 columns
   that shape is roughly 2:1 landscape, and every source still here is a
   ~2:3 portrait poster — a landscape box crops away most of the poster's
   height no matter how the crop is positioned. Only shapes that are at
   worst roughly square (the 2x2 feature) or portrait (the 1x2 tall tile)
   are used, so cover crops a manageable slice instead of cutting through
   the middle of the artwork.
   The 2x2 feature (12n+1) still needs a source still that's actually
   ~450px+ wide, or object-fit: cover has to upscale a narrower still to
   fill the box and it comes out visibly softer than its neighbours — the
   HTML orders the 24 stills so only the ~456px-wide ones land on that
   position; 1-column tiles (which only need extra height, not width) are
   safe with the ~230px-wide ones too. */
.pf-wall li:nth-child(12n+1) { grid-column: span 2; grid-row: span 2; }
.pf-wall li:nth-child(12n+4) { grid-row: span 2; }
.pf-wall li:nth-child(12n+10) { grid-row: span 2; }

/* --- courses teaser ---------------------------------------------------------- */
.pf-courses { padding: clamp(3rem, 6vw, 5rem) var(--gutter); background: var(--surface); }
.pf-courses-head { max-width: var(--page); margin: 0 auto clamp(2rem, 4vw, 3rem); }
.pf-course-row {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: rgba(var(--white-rgb), 0.1);
  border: var(--hair) solid rgba(var(--white-rgb), 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pf-course-row li { background: var(--void); }
.pf-course-row a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  text-decoration: none;
  transition: background-color var(--t-1) var(--ease);
}
.pf-course-row a:hover { background: rgba(var(--gold-rgb), 0.07); }
.pf-course-row b { font-family: var(--font-poster); font-size: 1.05rem; font-weight: 400; color: var(--ink); }
.pf-course-row i { font-style: normal; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-quiet); }
.pf-course-go {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 1.1rem;
  color: var(--gold);
  transition: transform var(--t-1) var(--ease);
}
.pf-course-row a:hover .pf-course-go { transform: translateX(4px); }

@media (max-width: 900px) {
  .pf-hero-mosaic { grid-template-columns: repeat(3, 1fr); }
  .pf-wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 165px; }
}
@media (max-width: 640px) {
  .pf-hero-mosaic { grid-template-columns: repeat(2, 1fr); }
  .pf-wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 195px; }
  .pf-wall li:nth-child(12n+1) { grid-column: span 2; grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-tile img, .pf-tile figcaption, .pf-course-go { transition: none; }
}