/* THE CARD GRAMMAR — one card, four nouns (lodging, person, stay, ask).
   Airbnb's ruthless anatomy translated to warm paper: photo 4:3
   edge-to-edge with ONE cream badge max, then exactly three text lines —
   bold name / middot meta / the consequence line (only the number bold).
   From plans/gather-design-evolution.md §2. */

.g-card {
  background: var(--paper);
  background-image: var(--paper-texture);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
a.g-card { transition: box-shadow .15s ease; }
a.g-card:hover { box-shadow: var(--shadow-paper); }

.g-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-warm-2);
}
.g-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* One badge, top-left, cream pill with ink text. Never stack chrome on
   the photograph. */
.g-card-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 3px 10px;
  font-size: var(--cap-sm); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-cap-tight); text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(40, 30, 10, 0.25);
}

/* People cards: the face replaces the photo. */
.g-card-face {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--paper-warm);
}
.g-card-face img { width: 72%; height: 72%; object-fit: cover; border-radius: 50%; }

.g-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.g-card-name { font-weight: var(--weight-bold); color: var(--ink); font-size: 16px; }
.g-card-meta { color: var(--ink-faint); font-size: 14px; }
.g-card-meta .mid { margin: 0 4px; }
/* The consequence line — the one thing that matters now. Bold only the
   number ("<b>2</b> asks remaining"). */
.g-card-consequence { color: var(--ink-soft); font-size: 14px; }
.g-card-consequence b { color: var(--ink); font-weight: var(--weight-bold); }

/* Photography crops, enforced everywhere. */
.crop-43  { aspect-ratio: 4 / 3;  object-fit: cover; width: 100%; }
.crop-169 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.crop-11  { aspect-ratio: 1 / 1;  object-fit: cover; width: 100%; }

/* The lodging mosaic: 1 big + 4 small, "Show all N photos" pill. */
.g-mosaic {
  display: grid; gap: 8px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border-radius: var(--radius-lg); overflow: hidden;
  position: relative;
}
.g-mosaic > :first-child { grid-row: span 2; }
.g-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .g-mosaic { grid-template-columns: 1fr 1fr; } .g-mosaic > :first-child { grid-column: span 2; grid-row: auto; } }