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

  .work-page-header.wd-header {
    max-width: var(--max-width);
    padding: 72px 28px 48px;
  }

  .work-projects.wd-gallery {
    max-width: var(--max-width);
    padding: 0 28px 120px;
  }

  /* Three-column grid */
  .wd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }

  .wd-card {
    border-radius: var(--radius-md);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  }

  .wd-card__media { aspect-ratio: 16 / 10; }
  .wd-card__img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

  .wd-card__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 22px;
    border-top: 1px solid var(--border);
  }

  .wd-card__name { font-size: 22px; line-height: 1.15; margin-bottom: 6px; }
  .wd-card__type { font-size: 14px; line-height: 1.4; margin-bottom: 10px; }
  .wd-card__host { font-size: 12px; }

  .wd-card__arrow {
    width: 20px; height: 20px;
    margin-top: 4px;
    opacity: 0.45;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Hover only on devices that can hover (excludes touch laptops' tap) */
  @media (hover: hover) {
    .wd-card:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
      box-shadow: 0 14px 36px rgba(192, 57, 43, 0.12);
    }
    .wd-card:hover .wd-card__img { transform: scale(1.04); }
    .wd-card:hover .wd-card__name { color: var(--accent); }
    .wd-card:hover .wd-card__arrow { opacity: 1; transform: translate(3px, -3px); }
  }

  .wd-card:focus-within .wd-card__arrow { opacity: 1; }
}