/**
 * Residence page — "What's nearby" cards (welcome-guide card language).
 * Photo top → tag + walk pill → copy → walking-directions embed map.
 * Cards ride in a pub-carousel. Mobile-first, tokens only.
 */

.res-nearby__carousel .pub-carousel__slide { height: auto; display: flex; }

.res-nearby__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.res-nearby__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.res-nearby__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background-color: var(--surface-sunken);
  flex-shrink: 0;
}
.res-nearby__media img { width: 100%; height: 100%; object-fit: cover; }
.res-nearby__media-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--color-text-tertiary); font-size: var(--font-size-2xl);
}

.res-nearby__body {
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}

.res-nearby__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-1);
}

/* The welcome guide's walk pill: "7 min · 550 m" */
.res-nearby__walkpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background-color: var(--surface-sunken);
  color: var(--color-accent-700, var(--color-accent));
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
}

.res-nearby__name {
  font-family: var(--font-family-display, 'Playfair Display', serif);
  font-size: var(--font-size-lg); font-weight: 500;
  color: var(--color-text); margin: 0;
}
.res-nearby__kind { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin: 0; }
.res-nearby__desc {
  font-size: var(--font-size-sm); font-weight: 300; line-height: 1.6;
  color: var(--color-text-secondary); margin: var(--space-1) 0 0;
}

/* Walking-directions embed at the bottom of the card */
.res-nearby__map {
  position: relative;
  margin-top: auto;
  height: 220px;
  background-color: var(--surface-sunken);
}
.res-nearby__mapframe { width: 100%; height: 100%; border: 0; display: block; }
.res-nearby__mapdist {
  position: absolute; top: var(--space-2); left: var(--space-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  background-color: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  color: var(--color-text); font-size: var(--font-size-xs); font-weight: 600;
  pointer-events: none;
}
.res-nearby__mapdist i { color: var(--color-accent-700, var(--color-accent)); }
.res-nearby__maplink {
  position: absolute; bottom: var(--space-2); right: var(--space-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background-color: var(--color-primary); color: #fff;
  font-size: var(--font-size-xs); font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-md);
}
.res-nearby__maplink:hover { color: #fff; filter: brightness(1.15); }

@media (min-width: 768px) {
  .res-nearby__map { height: 240px; }
}