/* ==========================================================================
   WEB DEVELOPMENT GALLERY — MOBILE  (viewports <= 768px)
   Edit this file for "mobile only" changes. Do not put desktop rules here.
   ========================================================================== */
@media (max-width: 768px) {

  .work-page-header.wd-header { padding: 40px 20px 28px; }

  .work-projects.wd-gallery { padding: 0 20px 72px; }

  /* Single-column stack */
  .wd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .wd-card {
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.18s ease;
  }

  .wd-card__media { aspect-ratio: 3 / 2; }

  .wd-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 72px;               /* comfortable tap target */
    padding: 16px 18px;
    border-top: 1px solid var(--border);
  }

  .wd-card__name { font-size: 20px; line-height: 1.15; margin-bottom: 3px; }
  .wd-card__type { font-size: 14px; line-height: 1.4; }
  .wd-card__host { display: none; }   /* too busy on small screens */

  .wd-card__arrow {
    width: 38px; height: 38px;
    padding: 11px;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-pill);
  }

  /* Touch feedback */
  .wd-card:active {
    transform: scale(0.98);
    border-color: var(--accent);
  }
  .wd-card:active .wd-card__arrow { background: var(--accent); color: var(--bg-card); }
}