/* ==========================================================================
   Archive/dimension system — taxonomy-practice-dimension.php (all four Practice Dimension
   archives: Research, Pedagogy, Cultural Curation, Artistic Practice).

   Loaded only on that template, alongside master-prototype.css (never edited by this file) and
   the shared assets/gallery-lightbox.css (never duplicated here). Scoped under
   .archive-dimension (applied to <main>, alongside .master-prototype) so nothing here can
   collide with or override a rule single-project.php depends on -- this file adds exactly two
   things the Project template has no equivalent of: a project-tile card for "Projects in This
   Dimension" (count-adaptive: solo / duo / grid), and a minimum caption-legibility reinforcement
   for this system's own real, unpredictably-lit event photography.

   Reuses the same design tokens master-prototype.css defines on .master-prototype (--mp-*) --
   this file never redefines them, only reads them, so a token change there stays the single
   source of truth for every file. */

/* Hero header-clearance fix: originally added here scoped to .archive-dimension only (2026-09-08),
   now moved into master-prototype.css itself (2026-09-08, same day) once the identical root cause
   was confirmed on single-project.php's own hero too -- align-self:start + padding-top on
   .hero-copy/.hero-rail is now shared MASTER behavior, not an archive-only override. See
   master-prototype.css's own comment at that rule for the full root-cause explanation. */

.archive-dimension .dim-project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.archive-dimension .project-tile{display:block;border:1px solid var(--mp-line);border-radius:12px;overflow:hidden;background:var(--mp-paper);transition:border-color .25s ease}
.archive-dimension .project-tile-media{display:block;aspect-ratio:4/3;overflow:hidden;background:#ddd}
.archive-dimension .project-tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.archive-dimension .project-tile-body{display:block;padding:14px 16px 16px}
.archive-dimension .project-tile-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mp-serif);font-size:15px;font-weight:600;line-height:1.25;margin:0}
.archive-dimension .project-tile-title svg{flex:none;opacity:.55;transition:transform .25s ease}
.archive-dimension .project-tile-sub{display:block;font-size:11.5px;color:var(--mp-muted);margin-top:4px}
.archive-dimension .project-tile-meta{display:block;font-size:9.5px;letter-spacing:.03em;color:var(--mp-muted);margin-top:7px;text-transform:uppercase}
@media(hover:hover){
  .archive-dimension .project-tile:hover{border-color:var(--mp-gold)}
  .archive-dimension .project-tile:hover .project-tile-media img{transform:scale(1.035)}
  .archive-dimension .project-tile:hover .project-tile-title svg{transform:translateX(2px)}
}

@media(max-width:900px){
  .archive-dimension .dim-project-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
  .archive-dimension .dim-project-grid{grid-template-columns:1fr}
}

/* ---- project-count adaptation (never fabricates a grid the data doesn't support) ----
   1 project: an editorial split card (image left, copy right) -- the same proportion language
   the MASTER hero itself uses -- instead of one lonely tile stranded in a 3-column grid.
   2 projects: the existing tile, just at 2 columns instead of 3, so neither card is oversized
   relative to the credentials-row's own 2-up tablet behavior just below it.
   3+ projects: unchanged, the original 3-column grid. */
.archive-dimension .dim-project-grid.is-solo{grid-template-columns:1fr}
.archive-dimension .dim-project-grid.is-solo .project-tile{display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch}
.archive-dimension .dim-project-grid.is-solo .project-tile-media{aspect-ratio:auto;height:100%;min-height:260px}
.archive-dimension .dim-project-grid.is-solo .project-tile-body{display:flex;flex-direction:column;justify-content:center;padding:28px 32px}
.archive-dimension .dim-project-grid.is-solo .project-tile-title{font-size:22px}
.archive-dimension .dim-project-grid.is-solo .project-tile-sub{font-size:13px;margin-top:8px}
.archive-dimension .dim-project-grid.is-solo .project-tile-meta{margin-top:14px}
@media(max-width:900px){
  .archive-dimension .dim-project-grid.is-solo .project-tile{grid-template-columns:1fr}
  .archive-dimension .dim-project-grid.is-solo .project-tile-media{min-height:0;aspect-ratio:4/3}
}

.archive-dimension .dim-project-grid.is-duo{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){
  .archive-dimension .dim-project-grid.is-duo{grid-template-columns:1fr}
}

/* ---- caption legibility (minimum necessary reinforcement, this system's own real photos only --
   master-prototype.css's own .media-shade is untouched, so single-project.php is unaffected).
   Starts 5 points earlier and reaches darker before the caption's own baseline than the shared
   default, so a caption sits on a reliably dark ground regardless of how bright that particular
   real photograph's own lower third happens to be. */
.archive-dimension .gallery-card .media-shade{inset:38% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.8) 70%)}