/* 40, doors (site/sections/40-doors.html). Linked by scripts/build-home.mjs.
   Three .vs-card doors side by side. The card surface, shadow, hover lift
   and light sweep come from css/components.css; this file sets the grid,
   the type inside the cards, the build door's ink edge and the plate
   stacks in each card's corner. */

.vs-doors { border-top: 1px solid var(--vs-line); }

.vs-doors__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sc-2) var(--sc-6);
  margin-bottom: var(--vs-head-gap);
}
.vs-doors__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--vs-h2); line-height: var(--sc-leading-tight);
  letter-spacing: var(--vs-display-track); text-wrap: balance;
}
.vs-doors__lede { margin: 0; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

.vs-doors__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch;
}

.vs-door {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
/* The build door carries a 3px ink edge, so the grid reads build first
   without a second accent colour. */
.vs-door--build::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--sc-ink);
  pointer-events: none;
}
.vs-door .vs-card__kicker { margin: 0 0 var(--sc-3); padding-inline-end: 4.5rem; }

.vs-door__title {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: var(--sc-t-lg); line-height: 1.15; letter-spacing: -0.02em;
}

.vs-door__price {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.2em 0.45em;
  margin: var(--sc-5) 0 0;
}
.vs-door__pre { flex-basis: 100%; }
.vs-door__pre,
.vs-door__post { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.vs-door__amount {
  font-family: var(--sc-font-display); font-weight: var(--vs-display-weight);
  font-size: clamp(2rem, 1.45rem + 1.6vw, 2.6rem);
  line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.vs-door--build .vs-door__amount { font-size: clamp(2.2rem, 1.5rem + 2.1vw, 3.1rem); }

.vs-door__text {
  margin: var(--sc-4) 0 var(--sc-6);
  max-width: 42ch;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.vs-door__nowrap { white-space: nowrap; }
.vs-door__cta { margin-top: auto; align-self: flex-start; }

/* Plate stacks: three, two or one Field Manual plates stepped into the
   top-right corner. Decorative (aria-hidden), static. */
.vs-door__plates {
  position: absolute; top: clamp(1.2rem, 2.2vw, 1.8rem); right: clamp(1.2rem, 2.2vw, 1.8rem);
  width: 3.4rem; height: 2.4rem;
  pointer-events: none;
}
.vs-door__plates > span {
  position: absolute; right: 0; top: 0;
  width: 2.6rem; height: 1.7rem;
  border-radius: 4px;
  border: 1px solid var(--vs-line);
  box-shadow: 0 1px 2px rgba(22, 23, 21, 0.08);
}
.vs-door__plates > span:nth-child(1) { background: var(--vs-plate-1); }
.vs-door__plates > span:nth-child(2) { background: var(--vs-plate-2); transform: translate(-0.4rem, 0.35rem); }
.vs-door__plates > span:nth-child(3) { background: var(--vs-plate-3); transform: translate(-0.8rem, 0.7rem); }

@media (max-width: 1023px) {
  .vs-doors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-door--build { grid-column: 1 / -1; }
  .vs-door--build .vs-door__text { max-width: 56ch; }
}

@media (max-width: 640px) {
  .vs-doors__grid { grid-template-columns: minmax(0, 1fr); }
  .vs-door__text { margin-bottom: var(--sc-5); }
  .vs-door__cta { align-self: stretch; }
}