/* ============================================================
   SHARED PROJECT-CARD SYSTEM
   The "new" card interaction used by the home page and the
   "Other projects" section of each case study:
     · square/17:12 thumbnail at rest
     · on hover the rest of the page dims + blurs, the focused
       card stays crisp and its title/tags/description reveal
     · a cursor-following label ("View project")
   Driven by js/cards.js (a non-interruptible intro/outro queue).
   Loaded AFTER styles.css + type-system.css.
   ============================================================ */

.grid { display: grid; }
.grid--featured { grid-template-columns: repeat(2, 1fr); column-gap: clamp(12px, 1.3vw, 20px); }
.grid--other   { grid-template-columns: repeat(3, 1fr); column-gap: clamp(10px, 1vw, 14px); row-gap: clamp(44px, 4.5vw, 72px); }

/* ---------- CARD ---------- */
.pj { position: relative; display: block; color: inherit; text-decoration: none; }
.pj__media { overflow: hidden; background: #f1f1f1; }     /* square corners — no radius */
.grid--featured .pj__media { aspect-ratio: 17 / 12; }
.grid--other .pj__media { aspect-ratio: 1 / 1; }
.pj__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 140ms var(--ease-out);              /* OUTRO speed */
}
/* Zoom is tied to .is-focused (JS-driven queue). Asymmetric timing: intro 220ms,
   outro 140ms — the "in" duration lives on the focused state. */
.pj.is-focused .pj__media img { transform: scale(1.05); transition-duration: 220ms; }
.pj__title { font-weight: 500; color: var(--ink); margin-top: clamp(6px, 0.6vw, 10px); }

/* Info — absolutely positioned so it fades in/out WITHOUT pushing layout. */
.pj__info {
  position: absolute; top: 100%; left: 0; right: 0;
  padding-top: 16px; opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--ease-out);                /* OUTRO speed */
}
.pj__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pj__tag {
  border-radius: 999px; background: #eaeeec; padding: 8px 16px;
  font-size: var(--fs-body); font-weight: 400; letter-spacing: -0.02em; white-space: nowrap;
}
.pj__desc {
  margin-top: 14px;
  font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink);                                       /* black subtext */
}

/* ---------- HOVER: dim + blur the whole page, keep the focused card crisp ---------- */
.dim {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--ease-out);                /* OUTRO speed */
}
body.is-dimming .dim { opacity: 1; transition-duration: 220ms; }   /* INTRO speed */
.pj.is-focused { z-index: 900; }                 /* lift above the dim overlay */
.pj.is-focused .pj__info { opacity: 1; transition-duration: 220ms; }   /* INTRO speed */

/* Cursor-following label (any [data-cursor] element — cards + the hero intro). */
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 1000;
  padding: 10px 22px; border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-size: var(--fs-body-lg); font-weight: 500; line-height: 1; white-space: nowrap;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.28);
  pointer-events: none; opacity: 0; transition: opacity 0.18s var(--ease-out);
}
.cursor-label.is-visible { opacity: 1; }
@media (hover: none) { .cursor-label, .dim { display: none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) { .grid--other { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .grid--featured, .grid--other { grid-template-columns: 1fr; row-gap: clamp(28px, 7vw, 44px); }
  .pj__title { margin-top: 12px; }
  /* Mobile has no hover: show every card's tags + description in normal flow
     (not the absolute/fade-in overlay used for the desktop hover). */
  .pj__info {
    position: static; opacity: 1; pointer-events: auto;
    padding-top: clamp(10px, 2.5vw, 14px);
  }
}