/* =========================================================================
   MS INTERIOR — Shared components (project cards / grid)
   Used by Home and Projects pages.
   ========================================================================= */
.pgrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 3vw, 3.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
.pcard { grid-column: span 6; display: block; position: relative; }
.pcard--wide { grid-column: span 8; }
.pcard--std  { grid-column: span 4; }
.pcard--tall { grid-column: span 4; }

.pcard__media { aspect-ratio: 4 / 3; }
.pcard--wide .pcard__media { aspect-ratio: 16 / 9; }
.pcard--tall .pcard__media { aspect-ratio: 3 / 4; }
.pcard--std  .pcard__media { aspect-ratio: 1 / 1; }

.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }

.pcard__row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.1rem; }
.pcard__num { font-size: var(--step--1); letter-spacing: 0.2em; color: var(--concrete); font-weight: 700; }
.pcard__go { font-size: 1.1rem; transform: translateX(-4px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.pcard:hover .pcard__go { transform: translateX(0); opacity: 1; }
.pcard__name { font-family: var(--serif); font-weight: 500; font-size: var(--step-2); line-height: 1.02; margin-top: 0.3rem; letter-spacing: -0.01em; }
.pcard__meta { display: flex; gap: 1.4rem; margin-top: 0.7rem; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-grey); }
.pcard__meta span { position: relative; }
.pcard__meta span + span::before { content: ""; position: absolute; left: -0.8rem; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--concrete); transform: translateY(-50%); }

@media (max-width: 900px) {
  .pcard, .pcard--wide, .pcard--std, .pcard--tall { grid-column: span 6; }
}
@media (max-width: 640px) {
  .pgrid { gap: 2.8rem 1.2rem; }
  .pcard, .pcard--wide, .pcard--std, .pcard--tall { grid-column: span 12; }
  .pcard__media, .pcard--wide .pcard__media, .pcard--tall .pcard__media, .pcard--std .pcard__media { aspect-ratio: 4 / 3; }
}