/* Three doors and one invitation. Equal widths, one tinted, measured from the
 * second-screen golden: four columns, a 15px gap, 218px tall. No rate, no
 * amount, no percentage appears on any of them. The card is flat like the tile;
 * the only thing standing off it is the icon object, and the door sizes that
 * object without knowing anything about its depth - one primitive, one
 * treatment, declared once in base.css. */
.card-row {
  margin-top: var(--resurs-gap-cards);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--resurs-card-gap);
}

.card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: var(--resurs-card-min-height);
  padding: 22px 20px 22px 20px;
  border-radius: var(--resurs-radius-card);
  background: var(--resurs-surface);
}
.card-tinted { background: var(--resurs-tint); }
.card .plate { width: 56px; height: 56px; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-self: stretch;
  min-width: 0;
}
.card-name {
  font-size: var(--resurs-size-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.card-caption {
  margin-top: 14px;
  font-size: var(--resurs-size-small);
  line-height: 1.42;
  color: var(--resurs-ink-soft);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  font-size: var(--resurs-size-small);
  color: var(--resurs-accent);
}
.card-link .icon { transition: transform var(--resurs-quick) var(--resurs-ease); }
.card-link:hover .icon { transform: translateX(3px); }

@media (max-width: 1080px) {
  .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .card-row { grid-template-columns: 1fr; }
  .card { min-height: 0; padding: 18px; gap: 14px; }
  .card .plate { width: 48px; height: 48px; }
  /* min-height holds the tap target at 44px without growing the visible
     text/icon row - the extra box is invisible padding, not new chrome. */
  .card-link { padding-top: 18px; min-height: 44px; }
}