/* Shared mobile "more projects" card list — full-width image, expand
   icon, ROLE/YEAR/COMPANY info table, one-sentence description.
   Used by mobile-landing (index.html) and, as the mobile replacement
   for the desktop floating-canvas ending, by every case-study and
   RANDOM's gallery page. Desktop never sees this.
   On index.html this sits inside .mobile-landing, which is already
   hidden by default on desktop — but on the case-study/gallery pages
   it's a direct child of .stage, so it needs its own default-hidden
   rule here rather than relying on a parent wrapper. */
.mobile-projects { display: none; }
@media (max-width: 767px) {
  .mobile-projects { display: block; padding: 20px 24px 0; }
  .mobile-projects-label { font-size: 12px; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 20px; }
  /* card images now stay inside the 24px padding like every other
     mobile image, instead of bleeding to the screen edge */
  .mobile-card { display: block; margin-bottom: 24px; }
  .mobile-card:last-child { margin-bottom: 0; }
  .mobile-card .card-image { position: relative; width: 100%; overflow: hidden; }
  .mobile-card .card-image img { width: 100%; display: block; }
  .mobile-card .card-image .frame-expand {
    position: absolute; top: 10px; right: 10px; width: 22px; height: 22px;
    background: #fff; border: 1px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
  }
  .mobile-card-info { padding: 14px 0 32px; }
  .mobile-card-info .info-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 4px 0; border-bottom: 1px solid var(--line);
    font-family: 'B612 Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink);
  }
  .mobile-card-info .info-row:last-child { border-bottom: none; }
  .mobile-card-info .info-row .info-label { color: var(--muted); }
  .mobile-card-info .frame-desc {
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    text-transform: none;
    font-size: 13px; line-height: 1.5; letter-spacing: 0.1px; color: var(--muted);
    margin-top: 12px;
  }
}