/* Featured projects — Figma 1:1363 */

.projects {
  position: relative;
  z-index: 2;
  width: 574px;
  padding: var(--space-24) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Coming back from a project lands on this section rather than the top of the
   page, so the cards flying out of the nav have somewhere visible to land. The
   nav is fixed and 80 tall — 24 above a 32 button and 24 below — so the section
   clears it with a little air, the same 88 the project page's anchors use. */
#projects { scroll-margin-top: 88px; }

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 542px;
  max-width: 100%;
}

/* ProjectCard — Figma 49:1061, thumbnail then title + description */
.project-card {
  display: flex;
  flex-direction: column;
  /* 8, where the Figma says 12. Figma measures between glyphs; CSS measures
     between line boxes, and a 16/22 text carries 4px of air above its capitals
     — 3 of half-leading plus the difference between the ascender and the cap.
     A 12px gap therefore reads as 16 on screen, against the 7 the two lines of
     text leave between themselves: the caption stopped belonging to its image.
     8 puts the optical gap back on the 12 the Figma draws. */
  gap: var(--space-8);
  align-items: flex-start;
  width: 100%;
}

/* 4:3 (49:1061), where it used to be the cover file's own 5:3. The picture is
   unchanged — Figma shows the same file centred and cover-cropped into the
   taller frame, which `object-fit: cover` reproduces exactly. Checked against
   Figma's own render of the card: 2.3/255 apart, i.e. resampling noise. */
.project-thumb {
  width: 100%;
  aspect-ratio: var(--ratio-project-card);
  object-fit: cover;
  border-radius: var(--radius-16);
}

.project-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: var(--body-16-size);
  line-height: var(--body-16-line);
}

.project-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-book);
  color: var(--text-secondary);
}

.project-desc {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
}

/* Double projects — Figma 1:1376, two 263px square cards side by side */
.projects-double {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  width: 100%;
}

.project-card--small { width: 263px; justify-content: center; }

.project-card--small .project-thumb {
  width: 263px;
  height: 263px;
  aspect-ratio: auto;
}

.project-card--small .project-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .projects { width: 100%; }
  .projects-list { width: 100%; }
  /* The 393 card layout lives in mobile.css, which loads last. */
}

/* Hover: the card lifts, and the image zooms inside its frame. Both, not one
   or the other — the lift is the reference's gesture, the zoom is the one this
   site already had and Flora wants kept.

   The lift is measured off their recording rather than guessed: their card
   never changes size, it is 227px tall before and after, and rises 12px in an
   800-wide capture — 14px once the recording's 0.83 scale is undone. 400ms on
   the curve their own stylesheet carries, which is the one duration and easing
   every card hover on the site now shares.

   The two live on different elements on purpose: the card carries the lift, the
   image carries the zoom inside a frame that does not move relative to it. That
   way the rounded corners keep cutting the image and nothing bleeds out. */
.project-thumb-wrap {
  overflow: hidden;
  border-radius: var(--radius-16);
  width: 100%;
}

.project-card--small .project-thumb-wrap { width: 263px; }

/* No `will-change` here or on the thumbnail. It was on both, which on the home
   is a dozen elements holding a compositing layer apiece for a movement that
   happens for 280ms when a pointer passes. The browser promotes a transform
   while it animates anyway; asking for it permanently only spends memory the
   rest of the time. */
.project-card {
  transition: transform var(--hover-travel) var(--hover-ease);
}

.project-thumb-wrap .project-thumb {
  transition: transform var(--hover-travel) var(--hover-ease);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.project-card:hover,
.project-card:focus-within { transform: translateY(-14px); }

.project-card:hover .project-thumb,
.project-card:focus-within .project-thumb { transform: scale(1.075) translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-thumb-wrap .project-thumb { transition: none; }
  .project-card:hover,
  .project-card:focus-within { transform: none; }
  .project-card:hover .project-thumb,
  .project-card:focus-within .project-thumb { transform: none; }
}

a.project-card--link { color: inherit; text-decoration: none; display: flex; }