/* ==========================================================================
   Projects -- pairs with apps/projects/templates/projects/*.html
   ==========================================================================
   Appearance follows the design reference: cards are a surface panel separated
   by a hairline, the image carries a 16/10 ratio so a grid row never goes
   ragged, and metadata is mono at --fs-xs like everywhere else on the site.
*/

/* --- page head ------------------------------------------------------------ */

.pagehead {
  padding-block: var(--s-8) var(--s-6);
  border-bottom: var(--hairline);
  margin-bottom: var(--s-7);
}

.pagehead h1 {
  margin-top: var(--s-2);
  font-size: var(--fs-2xl);
}

.pagehead__intro {
  margin-top: var(--s-3);
  max-width: var(--measure);
  color: var(--text-muted);
}

/* --- tags + filter -------------------------------------------------------- */

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border: var(--hairline);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
}

/* Only interactive tags react. A tag inside a card is a label, not a control. */
a.tag:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.tag--on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.taglist--filter { margin-bottom: var(--s-6); }

/* --- card grid ------------------------------------------------------------ */

.cardgrid {
  display: grid;
  /* auto-fill, not auto-fit: with one or two projects, auto-fit would stretch a
     single card across the full width and make one project look like a banner. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--s-5);
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-4);
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.card:hover {
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.card__title {
  font-size: var(--fs-md);
  font-weight: 620;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.card__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

/* Pushes the tag list to the bottom edge so cards of differing text length keep
   their skill rows aligned across a row. */
.card .taglist { margin-top: auto; padding-top: var(--s-1); }

/* --- thumbnail ------------------------------------------------------------ */

.thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* The rendition is generated at exactly this ratio, so `cover` only matters
     for the placeholder and for renditions generated before a ratio change. */
  object-fit: cover;
  border: var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.thumb--empty {
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 60%),
    var(--surface-2);
}

/* --- pager ---------------------------------------------------------------- */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.pager__n {
  display: grid;
  place-items: center;
  min-width: 34px;   /* control target, not a spacing step */
  height: 34px;
  border: var(--hairline);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.pager__n:hover { color: var(--text); border-color: var(--border-strong); }

.pager__n[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
}

.pager__count { margin-left: var(--s-3); }

/* --- project detail ------------------------------------------------------- */

.project__summary {
  margin-top: var(--s-3);
  max-width: var(--measure);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.project__hero {
  width: 100%;
  height: auto;
  border: var(--hairline);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-7);
}

.metagrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  margin: 0 0 var(--s-7);
}

.metagrid dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
}

.metagrid dd {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-sm);
}

/* Skills need the whole row once there are more than a couple. */
.metagrid__skills { grid-column: 1 / -1; }

.project__body { margin-bottom: var(--s-8); }

.project__back {
  padding-top: var(--s-5);
  border-top: var(--hairline);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 560;
  text-decoration: none;
}

.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }