/**
 * Work — the near-black band. Six project cards on `card-stack`.
 *
 * card-stack paints nothing: it decides where a card sits and how far back it
 * is, and leaves the look to this file. So every card needs an opaque
 * background of its own — a translucent one would show the deck through it and
 * turn depth into mud.
 *
 * On the dark band `--vc-surface` (#1a1816) sits 1.26:1 against `--vc-bg`
 * (#0c0b0a), which is not an edge anyone can see. The card is drawn by its
 * rule instead: 2px of `--vc-ink`, which is cream here, at 17:1. Shadows are
 * gone for the same reason — a drop shadow on near-black is a rumour.
 *
 * The pin offset comes from `options.cardStack.top` in site.config.js, not
 * from here. Keep the two in step if you change the header height.
 */

.work__stack {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-7);
}

/**
 * Opaque, because cards pile on top of each other — and opaque takes two
 * declarations, not one.
 *
 * `background` alone was not enough. card-stack writes `--vc-cs-fade` as the
 * card recedes and its own stylesheet spends it as element `opacity`, which
 * applies to the whole card including the background it is painted on: at
 * 0.84 the card underneath showed straight through, so you read the title of
 * project 01 through the middle of project 02. An opaque paint under a
 * translucent element is still translucent.
 *
 * So the fade is taken off `opacity` and put into the paint instead. The card
 * stays fully opaque at every depth and recedes by darkening toward the band
 * behind it, which is the same cue the fade was after. `--vc-cs-fade` runs 1 →
 * 0.84, so `1 - fade` is the mix: none at the front, ~16% of the band's
 * background at the back.
 *
 * The flat `--vc-surface` below is what a browser without `color-mix` gets:
 * opaque, undimmed, with scale and the 2px rule carrying the depth on their
 * own. `@supports` rather than two `background` declarations because the
 * second one is a real fallback and not a typo, and saying so in a guard
 * states that where a duplicated property only implies it.
 */
.card {
  background: var(--vc-surface);
  opacity: 1;
  border: var(--noir-rule) solid var(--vc-ink);
  border-radius: 0;
  overflow: hidden;
}

@supports (background: color-mix(in srgb, red, blue)) {
  .card {
    background: color-mix(
      in srgb,
      var(--vc-surface),
      var(--vc-bg) calc((1 - var(--vc-cs-fade, 1)) * 100%)
    );
  }
}

.card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vc-space-3) var(--vc-space-5);
  border-bottom: var(--noir-rule) solid var(--vc-ink);
  color: var(--vc-ink);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
}

/**
 * Two columns past 48rem: the copy on the left, a 4:3 plate on the right.
 *
 * The right half of the card used to be empty — six cards of text set against
 * the same width of nothing. A portfolio card with no image on it is a
 * portfolio card doing half its job, and the plate is also what gives the
 * stack something to recede with: at depth you see a shape, not a paragraph.
 *
 * 48rem is 768px, so the columns collapse at exactly the width the brief
 * names, and the plate falls under the copy rather than beside it.
 */
.card__body {
  display: grid;
  gap: var(--vc-space-6);
  padding: var(--vc-space-6) var(--vc-space-5) var(--vc-space-7);
}

@media (min-width: 48rem) {
  .card__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--vc-space-8);
    padding: var(--vc-space-8) var(--vc-space-8) var(--vc-space-9);
  }
}

.card__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/**
 * The plate. Token-coloured and labelled rather than an <img>: the template
 * ships no photography, and a buyer replacing this with a real image should
 * find a box the right shape already sitting in the layout.
 *
 * `aspect-ratio` rather than a padding hack, so the box reserves its own
 * height before anything paints and the stack's measurements do not move
 * under it — this section is the one place on the page where a late reflow
 * would re-pin six sticky cards.
 *
 * It is `aria-hidden` in the markup: the label repeats the card's own <h3>,
 * and a screen reader reading every project name twice is worse than a screen
 * reader not being told there is a placeholder.
 */
.card__media {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--vc-space-4);
  border: var(--noir-rule) solid var(--vc-ink);
  background: var(--vc-bg);
}

.card__media-label {
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The plate can be narrow on a phone and project names are not. */
  overflow-wrap: break-word;
}

/**
 * The card title is the third rung of the display scale — big enough to belong
 * to the same page as an 8rem section heading, small enough that six of them
 * stacked do not each claim a screen.
 */
.card__title {
  font-family: var(--vc-font-display);
  font-size: var(--noir-display-sub);
  font-weight: 400;
  line-height: var(--noir-display-leading);
  letter-spacing: var(--noir-display-tracking);
  text-transform: uppercase;
  /* The card clips its overflow — it has to, it is one of a stack of opaque
     panes. So a project title longer than the card is wide would silently lose
     its last letters rather than push the page sideways. This breaks it
     instead, which is ugly and visible, and being visible is the point. */
  overflow-wrap: break-word;
}

/**
 * The card's vertical rhythm is set here as explicit margins rather than one
 * flex `gap`, because the four things in the column are not evenly weighted:
 * the meta line belongs to the title above it, and the body and tags are
 * separate beats. A single gap spaced all three the same and made the meta
 * look like its own paragraph.
 */
.card__client {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
  margin-top: var(--vc-space-2);
  color: var(--vc-ink-muted);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card__summary {
  max-width: var(--noir-measure);
  margin-top: var(--vc-space-6);
  font-size: var(--vc-text-base);
}

@media (min-width: 48rem) {
  .card__summary {
    font-size: var(--vc-text-lg);
  }
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-space-2);
  margin-top: var(--vc-space-6);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--vc-space-2);
  min-height: 2.75rem;
  margin-top: var(--vc-space-6);
  font-family: var(--vc-font-mono);
  font-size: var(--vc-text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.card__arrow {
  display: inline-block;
  transition: transform var(--vc-dur-fast) var(--vc-ease-out);
}

.card__link:hover .card__arrow {
  transform: translateX(0.25em);
}