/*
  Project component. Two forms, same semantic shell:
    - Card form (projects catalog): <article class="project"> wrapping an <a>
      that covers image + heading + tagline.
    - Article form (project detail page): standalone <article class="project">
      with full markdown body + action footer.
*/

.project {
  background: var(--bg-card);
  color: var(--ink-body);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: box-shadow var(--duration-slow), transform var(--duration-normal);
}
.project:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); }

/* ---- Card variant (anchor wraps the summary) ---- */

.project > a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.project > a > img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.project > a > img.glyph {
  object-fit: contain;
  background: white;
  padding: var(--space-md);
}
.project > a > h2,
.project > a > h3 {
  margin: 0;
  padding: var(--space-sm) var(--space-sm) 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.project > a > p {
  padding: 0 var(--space-sm) var(--space-sm);
  margin: .3rem 0 0;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--ink-muted);
  opacity: .9;
}

/* ---- Emoji tile fallback (no image available) ---- */

.project .emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  font-size: clamp(2.5rem, 6vw + 1rem, 4rem);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
  color: var(--ink);
}
.project .emoji.mono {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(3rem, 8vw + 1rem, 5rem);
}
.project .emoji.strike { position: relative; }
.project .emoji.strike::after {
  content: '';
  position: absolute;
  left: 25%; right: 25%; top: 50%;
  border-top: 6px solid currentColor;
  transform: rotate(-18deg);
  opacity: .85;
}

/* ---- Article form (detail page) ---- */

.project.detail > img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
.project.detail > header {
  padding: var(--space-lg) var(--space-xl) 0;
}
.project.detail > header h1 {
  margin-block: var(--space-xs) 0;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}
.project.detail > header .tagline {
  color: var(--brand);
  font-style: italic;
  font-size: 1.05rem;
  margin-block: var(--space-xs) var(--space-sm);
}
.project.detail > header .badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.project.detail > .body {
  padding: var(--space-md) var(--space-xl);
  font-size: 1rem;
  line-height: 1.7;
}
.project.detail > .body h2,
.project.detail > .body h3 { margin-block: var(--space-md) var(--space-xs); }
.project.detail > footer {
  padding: 0 var(--space-xl) var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}