/* The shared hotel card (2026-09-30).
 *
 * One card for every surface that shows a hotel — the /search list and the city videos page —
 * so the same facts appear in the same order and the action labels never drift. The rule the
 * markup enforces, not just the CSS: an action is only rendered when its data is real (a rate
 * only where Wink priced it, a website link only where the crawl confirmed the hotel's own
 * site), which is why the card has no "disabled" state for either.
 */
.hc-card { background: #fff; border: 1px solid #e6ecf2; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 31, 51, .06); display: flex; flex-direction: column; }
.hc-card:hover { border-color: #cfdae5; box-shadow: 0 3px 10px rgba(10, 31, 51, .10); }
.hc-media { position: relative; background: #000; }
.hc-media .frame { position: relative; padding-bottom: 56.25%; height: 0; }
.hc-media iframe, .hc-media .facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hc-body { padding: 12px 15px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hc-name { font-family: 'Fraunces', Georgia, serif; font-size: 1.02rem; line-height: 1.3;
  margin: 0; color: #0a1f33; }
.hc-name a { color: inherit; text-decoration: none; }
.hc-name a:hover { color: #2f6fdb; text-decoration: underline; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #52677c;
  font-size: .82rem; }
.hc-rating { color: #b45309; font-weight: 700; }
.hc-tag { background: #eef2f6; color: #33475b; border-radius: 999px; padding: 2px 9px;
  font-size: .74rem; font-weight: 600; }
.hc-rate { color: #1d6b3f; font-weight: 700; font-size: .9rem; }
.hc-rate a { color: #1d6b3f; }
.hc-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding-top: 8px; border-top: 1px solid #f1f5f9; font-size: .85rem; font-weight: 600; }
.hc-actions a { text-decoration: none; }
.hc-site { color: #e63946; }
.hc-site:hover { text-decoration: underline; }
.hc-details { color: #2f6fdb; }
.hc-details:hover { text-decoration: underline; }
.hc-video { color: #7c3aed; }
.hc-video:hover { text-decoration: underline; }
.results-sort { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px;
  font-size: .88rem; color: #52677c; }
.results-sort select { padding: 7px 10px; border: 1px solid #d7e0e8; border-radius: 8px;
  font-size: .88rem; background: #fff; color: #33475b; }
/* The search list keeps its own grid; the videos page uses its .video-grid. */
.search-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; }