/* ==========================================================================
   WEB DEVELOPMENT GALLERY — SHARED BASE  (/work/web-development)
   --------------------------------------------------------------------------
   Device-agnostic rules ONLY: reset, colours, focus, reduced motion.
   NO layout, spacing, sizing or typography scale belongs in this file.

   Device split (keep it that way):
     webdev-desktop.css  -> everything for viewports >= 769px
     webdev-mobile.css   -> everything for viewports <= 768px
   "Mobile only" edits go in webdev-mobile.css, "Desktop only" in
   webdev-desktop.css, "Both" = edit both explicitly.
   ========================================================================== */

.wd-grid { list-style: none; margin: 0; padding: 0; }

.wd-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  overflow: hidden;
}

.wd-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text);
  text-decoration: none;
}

.wd-card__media { position: relative; overflow: hidden; background: var(--border); margin: 0; }
.wd-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.wd-card__name { display: block; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.wd-card__type { display: block; color: var(--text-secondary); }
.wd-card__host { display: block; color: var(--text-secondary); font-family: monospace; }
.wd-card__arrow { flex-shrink: 0; color: var(--accent); }

/* Visually hidden, read by screen readers */
.wd-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wd-card__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .wd-card, .wd-card__img, .wd-card__arrow { transition: none !important; transform: none !important; }
}