/* Projects grid, the signature element. Zones `pli-` and `task-`. */

.project-list-item {
  display: block;
  /* Positioned so it paints above its neighbours on hover. */
  position: relative;
  z-index: 0;
  background: var(--window-bg);
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  box-shadow: var(--window-shadow);
  overflow: hidden;
  transform: translate(0, 0);
  transition:
    box-shadow var(--motion-state),
    transform var(--motion-state),
    opacity var(--motion-structural);
}

.project-list-item:hover {
  box-shadow: var(--elevation-hover);
  transform: translate(-1px, -1px);
  /* La fiche survolee passe devant toutes les autres, ombre comprise. */
  z-index: 1;
}

/* Left-flagged: space-between only suits a title plus controls. */

/* Tighter below 640: at 320, RUNE-TALES-UNDERGROUND needs the room. */
@media (max-width: 640px) {
  .project-list-item .win-titlebar { padding-inline: var(--space-2); }
}

.project-list-item .win-titlebar {
  justify-content: flex-start;
  gap: var(--space-2);

  /* order:-1 from home-legacy put the thumbnail above the title bar. */
  order: -2;
}

/* La barre de titre porte la couleur de famille, jamais le contenu (§3.2). */
.project-list-item .win-titlebar {
  background: var(--window-titlebar-bg);
  border-bottom: 1px solid var(--window-border);
  box-shadow: inset 0 -2px 0 var(--win-accent, transparent);
}

/* Per-family colour coding removed. D-132. */

.project-list-item .win-label {
  font-family: var(--type-family-system);
  font-size: var(--type-chrome);
  color: var(--window-label-color);
}

/* Body stays a link: the window opens the case study, controls keep their own actions. */
/* .pli-body is an <a>: without this the browser underlines all of it. */
.pli-body {
  text-decoration: none;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  color: inherit;
}

@media (min-width: 768px) {
  .pli-body { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: start; }
}

.pli-body:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* Hierarchy by size. D-129. */
/* Box moved here from style.css. D-213. */
.project-list-item {
  width: 100%;
  padding-block: 10px;
  will-change: transform;
}

@media (max-width: 900px) {
  .project-list-item { padding-block: 20px; }
}

@media (min-width: 768px) {
  .pli-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--pli-visual-col, 40%));
  }
}

/* 1280 not 768: .pli-name is nowrap and would clip. */
@media (min-width: 1280px) {
  .project-list-item[data-rank="1"] { --pli-visual-col: 52%; }
  .project-list-item[data-rank="2"],
  .project-list-item[data-rank="3"] { --pli-visual-col: 46%; }
}

/* Description to --text-secondary: the legacy grey was below reading level. */
.pli-desc {
  color: var(--text-secondary);
  font-family: var(--type-family-body);
  font-size: var(--type-body);
  line-height: 1.65;
  max-width: var(--measure);
}

/* Card title in metadata mono. D-195. */
.pli-name {
  font-family: var(--type-family-mono);
  font-weight: 500;
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
}

.pli-role,
.pli-studio {
  font-family: var(--type-family-mono);
  font-size: var(--type-meta);
  text-transform: uppercase;
  letter-spacing: var(--meta-tracking);
  color: var(--text-meta);
}

/* Side projects on the base scale. D-133. */

/* --type-card: that is exactly what this object is. */
.project-list.side .pli-name {
  font-size: var(--type-card);
}

/* Metadata to --type-meta. Weight 800 on mono caps had no reason to exist. */
.project-list.side .pli-role {
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: var(--meta-tracking);
}

/* Side cards carry a date that is sometimes a sentence, "Last updated 2026",
   not the bare year the studio cards use. The stamp refuses to shrink, so on a
   narrow card it was overflowing instead of moving: it wraps whole now. */
.project-list.side .pli-studio {
  font-size: var(--type-meta);
  letter-spacing: var(--meta-tracking);
  flex-wrap: wrap;
}

/* --type-small, not --type-body: a one-line caption, not a reading zone. */
.project-list.side .pli-desc {
  font-size: var(--type-small);
}

/* Side cards do not open, so they do not lift. D-125. */
.project-list.side .project-list-item {
  transition:
    border-color var(--motion-state),
    box-shadow var(--motion-state),
    transform var(--motion-state);
}

.project-list.side .project-list-item:hover {
  transform: none;
}

/* A side card can be a link. D-219. */
.pli-side-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Ring drawn inside: the card is overflow:hidden. */
.pli-side-body:focus-visible {
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* Dungeon hidden state. Three classes to beat the card's display:flex. */
.project-list .project-list-item.is-locked,
.acc-thumbs .acc-thumb.is-locked { display: none; }

@media (hover: hover) and (pointer: fine) {
  .project-list.side .project-list-item:hover {
    transform: translate(-3px, -3px) scale(1.02);
    box-shadow: var(--elevation-hover);
    z-index: 1;
  }
}

/* WIP card refuses to open. D-226. */
.pli-wip .pli-content,
.pli-wip .pli-visual {
  transition: opacity var(--motion-state);
}

@media (hover: hover) and (pointer: fine) {
  /* Four classes to beat `.project-list.side .project-list-item` above. */
  .project-list .project-list-item.pli-wip:hover {
    transform: none;
    box-shadow: var(--window-wip-shadow-hv);
    z-index: 0;
  }

  .project-list .project-list-item.pli-wip:hover .pli-content,
  .project-list .project-list-item.pli-wip:hover .pli-visual {
    opacity: var(--window-wip-veil-hv);
  }
}

/* Accordion headers */

/* Metadata is mono, no exception. */
.projects-accordion .acc-tags {
  font-family: var(--type-family-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--meta-tracking);
}

/* No pop shape in an instrument block: the counter had --radius-full. */
.projects-accordion .acc-badge {
  border-radius: var(--radius-os);
  font-size: var(--type-small);
}

/* Thumbnails carried a 10px radius, neither --radius-os nor --radius-pop. */
.projects-accordion .acc-thumb {
  border-radius: var(--radius-os);
}

/* The divider takes the vocabulary of what it opens. D-192. */
/* And the window shadow. D-224. */
.projects-accordion summary {
  padding: var(--space-4) var(--space-5);
  background: var(--window-titlebar-bg);
  border-color: var(--window-border);
  border-radius: var(--radius-os);
  box-shadow: var(--window-shadow);
}

.projects-accordion[open] summary {
  border-radius: var(--radius-os) var(--radius-os) 0 0;
}

/* Label in metadata mono, not the system face. D-193. */
/* .acc-block added: home-legacy uses three classes for the 36px. */
.projects-accordion.acc-block .acc-title {
  font-family: var(--font-mono);
  font-size: var(--type-card);
  font-weight: 500;
  letter-spacing: var(--meta-tracking);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Folder glyph at 0.9x the label: above that it outweighs the word. */
.acc-icon {
  width: calc(var(--type-card) * 0.9);
  height: calc(var(--type-card) * 0.9);
  flex-shrink: 0;
  fill: currentColor;
  color: var(--text-primary);
}

/* Chevron: the one element that says it opens, so metadata ink at rest. */
.projects-accordion.acc-block summary::before {
  color: var(--text-meta);
}

/* Tighter below 900, as before this pass. */
@media (max-width: 900px) {
  .projects-accordion summary { padding: var(--space-3) var(--space-4); }
  .projects-accordion[open] summary { padding: var(--space-3) var(--space-4); }
}

/* Tags lose their pill. D-134. */
.pli-tag { border-radius: var(--radius-os); }

/* Card title clipped below 1024. D-148. */
@media (max-width: 1023px) {
  .pli-name { white-space: normal; }
}

/* Longest word bounds the title. D-195. */
@media (max-width: 900px) {
  .pli-name.long { font-size: clamp(22px, 5.5vw, 34px); }
}

/* The drawer: cards breathe and the neighbour steps aside. */
/* Studio list only: .side is a three-column grid, not a stack. */
.project-list:not(.side) {
  gap: var(--space-4);
}

@media (hover: hover) and (pointer: fine) {
  /* Card lifts further and scales up. */
  .project-list:not(.side) .project-list-item:hover {
    transform: translate(-5px, -5px) scale(1.03);
  }

  /* the one below steps down */
  .project-list:not(.side) .project-list-item:hover + .project-list-item {
    transform: translateY(10px);
  }

  /* the one above steps up */
  .project-list:not(.side) .project-list-item:has(+ .project-list-item:hover) {
    transform: translateY(-10px);
  }
}