/* ===== Work — project covers =====
   Figma "Portfolio — Design System", page Site, frame 68:4816. One wide card
   per case, stacked: text on the left, mockups on the right. The flee mechanic
   stays in css/components/card.css as .card--shy.

   The glow is a CSS gradient, built from the frame's own stops: baked into a
   compressed picture it broke into visible bands. The mockups sit on top as
   transparent WebPs with their shadows. Figma's exports come back flattened,
   so to replace one, export the card's Mockups frame at 2x over two flat
   backgrounds and take the alpha from the difference. */

.work__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 53px;
}

/* --cover-h is the card's height in the frame. --cover-mid and --cover-span are
   where the mockups sit in the cover: their centre and their width, as parts of
   the picture's width. A stacked card centres them by these numbers, and
   --title-w sets where its heading turns to the second line. */
.card--1 {
  --cover-h: 432;
  --title-w: 240px;
  --cover-mid: 0.718;
  --cover-span: 0.4091;
  --cover-glow: radial-gradient(ellipse 38% 85% at 72% 72%,
    rgb(108 184 255 / .34), rgb(108 184 255 / .25) 20%, rgb(108 184 255 / .15) 40%,
    rgb(108 184 255 / .07) 60%, rgb(108 184 255 / .02) 80%, rgb(108 184 255 / 0));
}
.card--2 { --cover-h: 423; --title-w: 225px; --cover-mid: 0.7064; --cover-span: 0.4499; --glow: 61 123 255; }
.card--4 { --cover-h: 415; --cover-mid: 0.7273; --cover-span: 0.4091; --glow: 156 140 255; }
.card--2,
.card--4 {
  --cover-glow: radial-gradient(ellipse 105% 105% at 92% 5%,
    rgb(var(--glow) / .32), rgb(var(--glow) / .26) 15%, rgb(var(--glow) / .19) 30%,
    rgb(var(--glow) / .12) 45%, rgb(var(--glow) / .06) 60%, rgb(var(--glow) / .03) 75%,
    rgb(var(--glow) / .01) 88%, rgb(var(--glow) / 0));
}
.card--7 {
  --cover-h: 427;
  --cover-base: #2c2b3d;
  --cover-glow: radial-gradient(ellipse 105% 105% at 92% 5%,
    rgb(242 230 207 / .16), rgb(242 230 207 / .13) 15%, rgb(242 230 207 / .09) 30%,
    rgb(242 230 207 / .06) 45%, rgb(242 230 207 / .03) 60%, rgb(242 230 207 / .01) 75%,
    rgb(242 230 207 / 0) 88%);
}

.card--case {
  display: flex;
  aspect-ratio: 1078 / var(--cover-h);
  background: var(--cover-glow), var(--cover-base, #2b2a3a);
  border-radius: 22px;
  box-shadow: 0 17px 41px rgb(0 0 0 / .16);
  cursor: pointer;
}

.card__cover {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* The same split as the frame's Meta: the text block on top, the chips pushed
   to the bottom edge. */
.card--case .card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  width: calc(412 / 1078 * 100%);
  box-sizing: content-box;
  padding: 48px 0 39px 43px;
}
.card__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card--case .card__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 36.5px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--c-ink);
  max-width: 395px;
}
.card__desc {
  max-width: 393px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  color: #bdbdc8;
}
.card__metric {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-ui);
}
.card__metric-value {
  font-size: 29px;
  font-weight: 600;
  color: var(--accent-highlight);
}
.card__metric-label {
  font-size: 13px;
  color: #bdbdc8;
}

.card--case .card__chips { margin-top: 0; gap: 6px; }
.card--case .card__chip {
  padding: 6px 11px;
  border: 0;
  background: rgb(255 255 255 / .1);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: var(--c-ink);
}

/* Too narrow for the two columns: what the case is, the mockups, the result.
   Frame 163:1063. The body and text wrappers step aside so all five parts line
   up in the card; the desktop markup stays as it is. --mockups is how wide the
   mockups stand in the card, and the cover is cut to a band their proportion. */
@media (max-width: 900px) {
  .work__grid { gap: var(--sp-3); }
  .card--case {
    flex-direction: column;
    aspect-ratio: auto;
  }
  .card--case .card__body,
  .card__text { display: contents; }
  .card--case .card__title {
    order: 1;
    max-width: var(--title-w, none);
    margin: 24px 24px 0;
    font-size: 24px;
    line-height: 28px;
  }
  .card__desc {
    order: 2;
    max-width: none;
    margin: 10px 24px 0;
    font-size: 15px;
    line-height: 22px;
  }
  .card__cover {
    --mockups: min(84%, 420px);
    order: 3;
    position: static;
    align-self: flex-start;
    width: calc(var(--mockups) / var(--cover-span));
    height: min((100vw - 48px) * 200 / 342, 293px);
    max-width: none;
    margin-top: 18px;
    margin-bottom: 16px;
    margin-left: calc(50% - var(--mockups) / var(--cover-span) * var(--cover-mid));
    object-fit: cover;
    object-position: top;
  }
  /* Liminal's laptop reads best large and running off the right edge. */
  .card--7 .card__cover {
    align-self: flex-end;
    width: min(1078 / 688 * 100%, 1078px);
    height: auto;
    margin-left: 0;
  }
  .card__metric { order: 4; margin: 0 24px 12px; line-height: normal; }
  .card__metric-value { font-size: 24px; }
  .card--case .card__chips { order: 5; margin: 0 24px 22px; }
}