/* Work tile. Geometry follows the approved Design
   (its .work-grid, .work-row,
   .catalog-face, .logotype-plate, .work-meta) expressed in site tokens.
   Hover and keyboard focus share one rule set; nothing is hover-only.
   UI round 9: each tile is a Podium recessed well (r12, teal hairline,
   translucent ground) in a 12px-gap grid instead of the 1px mosaic; hover
   steps the border up one ramp stop and deepens the ground; press moves the
   tile down 1px [SPEC 8.9 .c-proj; MAPPING 8]. */

.work-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 76rem;
  margin: 0 0 2.75rem;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

.project-tile-item { display: flex; min-width: 0; }

.project-tile {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 14px 16px 18px;
  border: 1px solid var(--line-lift);
  border-radius: var(--radius-well);
  color: var(--text-hi);
  background: var(--well);
  box-shadow: var(--groove);
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.project-tile:hover,
.project-tile:focus-visible {
  color: var(--text-hi);
  background: var(--well-hover);
  border-color: var(--line-strong);
}

/* The 1px press lives in section-surfaces.css: this sheet stays free of any
   transform, so no tile logo can ever be rotated (AC-109-01). */
.project-tile:active {
  background: var(--well-press);
}

.project-tile__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  /* Every face is at least as tall as a full-height lockup (5rem logo +
     1.4rem padding each side + the 1px border), so a text plate and a logo
     face in the same row start their meta line at the same height (UI round 5). */
  min-height: calc(5rem + 2.8rem + 2px);
  margin-bottom: 12px;
  padding: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--line-detail);
  border-radius: var(--radius-plate);
  background: var(--plate);
  box-shadow: var(--lip);
}

.project-tile__logo {
  width: auto;
  max-width: min(18rem, 82%);
  max-height: 5rem;
  object-fit: contain;
}

/* UI round 12 — optical logo fit. A logo with build-time ink geometry carries
   its box and ink-centring shift as custom properties, in units of 1% of the
   1440 reference face content width (379.2px, the tile renderer's LOGO_FIT).
   A unit is 1% of this face, capped at its 1440
   size, so every logo keeps the same ink area relative to its tile at every
   width. The margins (percentages resolve against the face width) cancel the
   box out of the grid track and offset it so the ink, not the viewBox, sits on
   the face centre; the face keeps its round-5 height. */
.project-tile__logo[data-logo-fit] {
  --logo-unit: min(1%, 3.792px);
  width: calc(var(--logo-w) * var(--logo-unit));
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--logo-ar);
  margin:
    calc((var(--logo-dy) - var(--logo-h) / 2) * var(--logo-unit))
    calc((0 - var(--logo-dx) - var(--logo-w) / 2) * var(--logo-unit))
    calc((0 - var(--logo-dy) - var(--logo-h) / 2) * var(--logo-unit))
    calc((var(--logo-dx) - var(--logo-w) / 2) * var(--logo-unit));
}

.project-tile__plate {
  color: var(--text-hi);
  font: 600 clamp(1.35rem, 3vw, 2.4rem)/1 "Instrument Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
}

/* One resting face per scheme: dark by default, light under the light scheme. */
.project-tile__variant--light { display: none; }
:root[data-theme="light"] .project-tile__variant--dark,
body[data-scheme="light"] .project-tile__variant--dark { display: none; }
:root[data-theme="light"] .project-tile__variant--light,
body[data-scheme="light"] .project-tile__variant--light { display: block; }

/* Optional hero reveal: only emitted for an operator-cleared, shipped hero
   (AC-110-01, UI round 8), which the entry's detail shows as its identity
   plate, so touch visitors reach the same image there. */
.project-tile__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.project-tile:hover .project-tile__reveal,
.project-tile:focus-visible .project-tile__reveal { visibility: visible; }

@media (hover: none) {
  .project-tile__reveal { display: none; }
}

.project-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  margin: 0 0 .5rem;
  color: var(--text-2);
  font: 500 var(--label-size)/1.4 var(--font-meta, "JetBrains Mono", ui-monospace, monospace);
  letter-spacing: .06em;
}

/* Status is a word first [SPEC 1.5]: jade for a live product, steel for
   everything else; the word always carries the state. */
.project-tile__meta .maturity { color: var(--text-2); }
.project-tile__meta .maturity[data-status-tone="solid"] { color: var(--jade-word); }

.project-tile__name {
  margin: .35rem 0 0;
  font-family: var(--font-body, "Instrument Sans", sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .work-index__list { grid-template-columns: minmax(0, 1fr); }
  .project-tile { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .project-tile { transition: none; }
}