/* ==========================================================================
   ProjectCard, PortfolioGrid — 07 §11.7, §11.8
   ========================================================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7) var(--space-6);
  /* align-items: stretch (the grid default) is what makes every card in a
     row share the same height — no JS measurement needed. */
}

@media (min-width: 48rem) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-card__media {
  /* Fixed 4:5 ratio matches the required portada crop (04 §13.11) — every
     card in a grid is the same shape, but object-position (set inline per
     image from its own focal_point) keeps the crop honest to that photo,
     rather than a blind identical crop (07 §11.7). */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-image);
  background-color: var(--surface-raised);
}

.project-card__image {
  width: 100%;
  height: 100%;
}

.project-card__body {
  margin-top: var(--space-4);
}

.project-card__category {
  margin-bottom: var(--space-2);
}

.project-card__title {
  margin: 0;
  font-size: var(--text-md);
}

.project-card__link {
  color: var(--text-strong);
  text-decoration: none;
}

/* Stretched-link pattern: the title is the one real link in the DOM, this
   makes the whole card clickable without a second, duplicate link around the
   image (07 §11.7 accessibility rule). */
.project-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-card:hover .project-card__title,
.project-card__link:hover {
  color: var(--text-accent);
}

/* Baseline: the link's own focus ring always works, everywhere (03 §19.2).
   :has() support (03 §9.7 allows modern CSS with a reasonable fallback) only
   upgrades it to outline the full stretched card instead of just the title
   text — browsers without :has() simply keep the baseline outline. */
.project-card__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.project-card:has(.project-card__link:focus-visible) {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.project-card:has(.project-card__link:focus-visible) .project-card__link:focus-visible {
  outline: none;
}

.project-card__summary {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.project-card--compact .project-card__summary {
  display: none;
}