/* 12-project-info-and-related.css — work/*.html pages: the info row (number,
   title, tags, live-site link, specs, credits, description), the next-project
   and contact lines, the related-projects grid of css/cards.css cards, and
   the phone reorder that lifts the lead picture under the title (last). The
   info row's own 900px stack stays here (see below); the site's other tablet
   (900px) rules are in 07 and at the end of 10 (the featured panel), the
   phone copy tweaks in 13. */

/* Two-column header band above 900px: what the project IS on the left
   (number, title, tags, then the spec list under them), what it SAYS on the
   right. Stacked in one column it ran down the left third of a desktop window
   with the other two thirds empty — a phone screen scaled up. --col-gap is the
   same token the other two-column bands use, so the gutters line up.
   No border below it: the photographs below carry their own shadow and start
   after a clear run of padding, which separates them well enough. */
.project-info-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--col-gap);
  row-gap: var(--block-space);
  padding: var(--section-space) var(--gutter);
  align-items: start;
}
/* Explicit placement rather than a wrapper div: the left column is two stacked
   items, the right one spans both their rows so the copy starts level with the
   project number. */
.project-meta { grid-column: 1; grid-row: 1; max-width: 640px; }
.project-specs { grid-column: 1; grid-row: 2; }
.project-credits { grid-row: 3; }
.project-descriptions { grid-column: 2; grid-row: 1 / span 3; }
/* The tags (or the title, on a project with none) carry a bottom margin for the
   stacked layout; here row-gap sets that distance, so drop the doubled space. */
.project-meta > :last-child { margin-bottom: 0; }

/* Stacked below 900px — and it has to live HERE, after the rules it overrides.
   A @media block adds no specificity, so the copy of this that sat with the
   other 900px rules (then about 660 lines up in css/style.css; now 07, which
   loads before this file) lost to the base rules every time. */
@media (max-width: 900px) {
  .project-info-row { grid-template-columns: 1fr; }
  .project-meta, .project-specs, .project-credits, .project-descriptions { grid-column: 1; grid-row: auto; }
  .project-meta { max-width: none; }
}

.project-num {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: var(--item-space);
}

.project-title {
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  margin-bottom: var(--item-space);
}

/* discipline tags — pulled from each project's PDF case study */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin: 0 0 var(--block-space);
  padding: 0;
  max-width: 520px;
}
.project-tags li {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--bg);                 /* knockout: text = page background */
  background: var(--c, var(--accent));  /* vibrant per-tag fill — matches thumbnail chips */
  border-radius: 999px;
  line-height: 1;                       /* tighten vertical box — match .archive-tag chips */
  text-box: trim-both cap alphabetic;  /* trim font leading → symmetric padding truly centers the glyphs */
  padding: var(--pill-padding);
  white-space: nowrap;
}

/* body copy — the right column of the info row (placed above) */
.project-descriptions p {
  font-size: var(--text-body);
  color: var(--ink-soft);
  margin-bottom: var(--item-space);
  max-width: 720px;
}
/* The global reset makes links look like body text (colour: inherit, no
   underline), which is right for nav and cards but hides the one inline link a
   project description can carry — e.g. Busan MoCA's virtual exhibition. */
.project-descriptions a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.project-specs {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);   /* one label column for specs and credits, so their values line up */
  gap: var(--tight-space) var(--sp-6);
  align-items: baseline;
  white-space: nowrap;
  min-width: 160px;
}
.project-specs dt {
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  color: var(--muted);
}
/* A value wraps rather than run out of its column: 'Web Development ·
   Interaction Design' pushed a phone page to 453px wide, and a Press row runs
   longer still. Labels stay on one line. */
.project-specs dd {
  font-size: var(--text-body);
  letter-spacing: 0.02em;
  white-space: normal;
}
/* credits — the spec list's look, but names wrap: a team runs long */
.project-credits { white-space: normal; }
.project-credits a,
.project-specs a,
.project-site a,
.project-next a,
.project-related-all a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* a web project's live address, the last line under its tags */
.project-site {
  font-size: var(--text-body);
  letter-spacing: 0.02em;
}

/* The page's last word, between the media and "More projects": the next
   project, and how to commission one like it. One line each, at card-title
   size. */
.project-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--item-space);
  padding: var(--section-space) var(--gutter);
  border-top: 1px solid var(--rule);
  font-size: var(--text-body-large);
}

/* ── Related projects — same .project-card grid as /op (see css/cards.css) ──
   Column count is a plain @media stack (no JS masonry needed here — this is
   a bounded footer list, not the full filterable index), but the wide-span
   and dense flow give it the identical rhythm. */
.project-related {
  padding: var(--section-space) var(--gutter);
  border-top: 1px solid var(--rule);
}
.project-related-head {
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--block-space);
}
.project-related-grid {
  --masonry-row-gap: var(--grid-gap);   /* named so masonry mode can re-apply it per card */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: row dense;
  gap: var(--masonry-row-gap) var(--grid-gap);
}
.project-related-grid .project-card-title { color: var(--ink); }
/* One line per chip: 'Web Development' broke inside its pill on a phone card.
   A card narrower than its longest tag cuts the tag, not the pill. */
.project-related-grid .project-card-tag {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) { .project-related-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .project-related-grid { grid-template-columns: repeat(4, 1fr); } }
/* two, not three: at three a phone card was 108px and a title ran to five lines */
@media (max-width: 460px)  { .project-related-grid { grid-template-columns: repeat(2, 1fr); } }
.project-related-all {
  margin-top: var(--block-space);
  font-size: var(--text-body);
}

/* Phones: the lead picture straight under the title. In source order it came
   after the tags, the spec rows and every paragraph — Busan MoCA's first
   photograph started 744px down, a strip of it on the first screen. The info
   row and the gallery right after it dissolve (display: contents) into one
   column, where order lifts the gallery's first item — or the web cover or
   screenshot band, which move whole — up under the title, the copy next,
   then the specs. The column carries the gutter those two wrappers had;
   everything else in it keeps its own and reaches back out to the edges.
   No @container mirror: a work page has no .page-shell. */
@media (max-width: 640px) {
  .project-detail {
    display: flex;
    flex-direction: column;
    padding: var(--section-space) var(--gutter) 0;
  }
  .project-info-row,
  .project-info-row + .project-media { display: contents; }
  .project-detail > :not(.project-info-row, .project-info-row + .project-media) {
    width: auto;   /* the cover's 100% would stop a gutter short of the right edge */
    margin-inline: calc(-1 * var(--gutter));
  }
  .project-meta, .project-specs, .project-credits, .project-descriptions { margin-bottom: var(--block-space); }
  .project-meta { order: -3; }
  .project-info-row + :is(.project-cover, .project-screens),
  .project-info-row + .project-media > :first-child { order: -2; }
  .project-descriptions { order: -1; }
}