/* card/project · grid/projects */

.di-card--project { display: flex; flex-direction: column; }
.di-card--project .di-card__media { display: block; }

.di-card__body {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}
.di-card__title { margin: 5px 0 0; }
.di-card__title a { color: var(--ink); }
.di-card__title a:hover { color: var(--accent); }

.di-card__price {
  font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -.02em;
  color: var(--text-primary);
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
}

/* Rule 04 — three tiles, not a table. Keeps the card scannable at 390px. */
.di-card__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.di-fact {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  min-width: 0;
}
.di-fact__value { font-size: 13px; color: var(--text-primary); }

.di-card__ppsf { margin: 0; display: flex; align-items: baseline; gap: 5px; }
.di-card__note { margin: 0; color: var(--text-secondary); }
.di-card__note strong { color: var(--text-primary); }

.di-card__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; }

/* grid/projects — 3 across desktop, swipe row on mobile. */
.di-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

@media (max-width: 1023px) { .di-projects { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 767px) {
  /* Vertical stacking made the home page nine screens long, so mobile turns the grid
     into a swipe row with the next card peeking. */
  .di-projects {
    display: flex; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline-start: var(--pad-section-x-m);
    scroll-padding-inline-start: var(--pad-section-x-m);
    scrollbar-width: none;
  }
  .di-projects::-webkit-scrollbar { display: none; }
  .di-projects > * { flex: 0 0 82vw; max-width: 300px; scroll-snap-align: start; }
  /* The grid sits outside the container on mobile so it can bleed off-canvas right. */
  .di-projects--bleed { margin-inline: calc(var(--pad-section-x-m) * -1); }
}

/* archive header */
.di-archive__head { display: flex; flex-direction: column; gap: var(--sp-3); padding-block: var(--sp-10) var(--sp-6); }
.di-archive__count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }

.di-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-10);
  text-align: center;
  color: var(--text-secondary);
}