/* ------------------------------------------------------------------
   salman.build — projects page
   One list, one card anatomy: the name, the problem in a sentence, the
   tags, one figure, and a body that unfolds in place. The summary grid
   mirrors the home page's proof row so the two pages rhyme.
   Shared parts (.open-btn, .unfold, .diagram, .bezel, .frame, .number,
   .tag) live in site.css and are not redefined here.
   ------------------------------------------------------------------ */

/* 1. Page head: the expand-all control sits at the end of the row ---- */

.page-head .head-row { align-items: flex-end; }

.head-intro {
  flex: 1 1 460px;
  min-width: 0;
}

.head-intro .lede { margin-bottom: 0; }

/* On a phone the control drops under the lede and sits left. */
@media (max-width: 719px) {
  .page-head .head-row > .btn-row { margin-top: 26px; }
}

/* 2. The list ------------------------------------------------------- */

/* Room under the last rule so the list doesn't run into the footer. */
.projects { padding-bottom: clamp(64px, 9vw, 136px); }

.entries {
  border-top: 1px solid var(--rule);
  margin-top: clamp(20px, 3vw, 36px);
}

.entry { border-bottom: 1px solid var(--rule); }

.entry > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 32px;
  padding: 26px 0;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 6px;
}

.entry > summary::-webkit-details-marker { display: none; }

@media (min-width: 880px) {
  .entry > summary {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 170px;
    gap: 14px 40px;
    align-items: start;
    padding: 32px 0;
  }
}

.entry > summary h3 {
  margin: 0 0 6px;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.entry > summary .who {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 1rem;
  max-width: 52ch;
}

.entry > summary .tags { margin: 0; }

.entry > summary .for-whom {
  margin: 10px 0 0;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.02em;
}

.entry > summary .ctl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

@media (min-width: 880px) {
  .entry > summary .ctl { justify-content: flex-end; padding-top: 2px; }
}

/* Open: a dashed rule under the summary, so the body reads as attached. */
.entry[open] > summary { border-bottom: 1px dashed var(--rule); }

/* 3. The body ------------------------------------------------------- */

.entry-body {
  padding: 32px 0 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 40px;
}

@media (min-width: 880px) {
  .entry-body { gap: 36px 40px; }
}

/* A block: mono legend, then the content. Stacked on a phone. */
.entry-body .block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
  max-width: 900px;
}

@media (min-width: 760px) {
  .entry-body .block { grid-template-columns: 150px minmax(0, 1fr); }
  .entry-body .block > .label { padding-top: 0.45em; }
}

.entry-body .block > .label { margin: 0; }
.entry-body .block p { max-width: var(--measure); }
.entry-body .block p:last-child { margin-bottom: 0; }
.entry-body .block ul { margin: 0; max-width: var(--measure); padding-left: 1.1em; }
.entry-body .block li { margin-bottom: 0.4em; }
.entry-body .block li:last-child { margin-bottom: 0; }
.entry-body .block--wide { max-width: none; }

/* Terse lists: one line each, the point in bold first. */
.entry-body .terse li { margin-bottom: 0.55em; }
.entry-body .terse strong { font-weight: 600; }

/* Two short lists side by side, each under its own mono legend. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 32px;
}

@media (min-width: 600px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.split > div > .label { margin: 0 0 8px; color: var(--green); }

@media (min-width: 760px) {
  .split > div > .label { padding-top: 0.45em; } /* level with the block's own legend */
}

/* 4. See it: the recording, a quiet row of links, then the stills ---- */

.see {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.see .bezel { margin: 0; }

/* The screen takes the recording's own ratio; the walkthrough is 16:9. */
.see .bezel .screen { aspect-ratio: 1600 / 752; }
.see .bezel .screen.is-yt { aspect-ratio: 16 / 9; }

.see .bezel .screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.see-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.see-note {
  margin: 0;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0.02em;
}

/* The stills: small frames in a row, the step under each. */
.stills {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 720px) {
  .stills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stills figure { margin: 0; }
.stills .frame-inner { aspect-ratio: 16 / 10; }
.stills img { object-position: top left; }

.stills figcaption {
  padding: 8px 2px 0;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* 4b. Before and after: four bezels, two by two. Each pair reads across,
   the old on the left, the new on the right. One column on a phone. The
   recording in the second cell is 16:10, like the screens around it. */

.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 720px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
}

.compare .bezel { margin: 0; min-width: 0; }
.compare .bezel .screen { aspect-ratio: 16 / 10; }

/* The bar label may be long: let it ellipsise rather than wrap. */
.compare .bezel-bar .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 4c. The look: a strip of stills and the palette under it ------------ */

.look {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.look-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 600px) {
  .look-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.look-grid .frame { margin: 0; }
.look-grid .frame-inner { aspect-ratio: 4 / 3; }

/* Swatches in a row, each with its name beside it. The colours are the
   client's, not ours, so each sits inside a hairline like any picture. */
.palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.palette li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.palette .swatch {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  background: var(--c);
  border: 1px solid var(--rule);
  flex: none;
}

.palette .meta { text-transform: none; letter-spacing: 0.02em; }

/* 4d. Phones: three screens side by side, a caption under each -------- */

.phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  max-width: 760px;
}

@media (min-width: 760px) {
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
}

.phone { margin: 0; min-width: 0; }
.phone .frame-inner { aspect-ratio: 390 / 664; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone figcaption { margin-top: 8px; text-transform: none; letter-spacing: 0.02em; }

/* 5. A quote, when there is a real one to run ----------------------- */

.entry-body blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--green);
  color: var(--ink-2);
  max-width: var(--measure);
}

.entry-body blockquote p { margin-bottom: 0.3em; }

.entry-body blockquote cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* 6. The foot: copy the link to this one project -------------------- */

.entry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}