.card-banner {
  height: 163px;
  position: relative;
  display: flex; align-items: flex-end;
  padding: 16px;
  overflow: hidden;
}
.card-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.card-banner-img + *:not(.photo-attr) { position: relative; z-index: 1; }
.card-banner > *:not(.card-banner-img) { position: relative; z-index: 1; }
.card-banner.has-photo::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at bottom left, rgba(0,0,0,0.45) 0%, transparent 55%);
  z-index: 0;
}
.photo-attr {
  position: absolute !important; bottom: 4px !important; left: 6px !important;
  z-index: 10; font-size: 0.60rem; color: rgba(255,255,255,0.7);
  text-decoration: none; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.photo-attr:hover { color: rgba(255,255,255,0.96); }
.card-banner-img ~ .type-badge,
.card-banner-img ~ .featured-badge { position: absolute; top: 10px; left: 10px; z-index: 3; }
.card-banner.links         { background: linear-gradient(135deg, #0d3b52 0%, #1a6b7a 60%, #2a9d8f 100%); }
.card-banner.parkland      { background: linear-gradient(135deg, #0D2B1E 0%, #1B4332 60%, #2D6A4F 100%); }
.card-banner.clifftop      { background: linear-gradient(135deg, #2c1a5c 0%, #4a2d7a 60%, #6b4fa3 100%); }
.card-banner.heathland     { background: linear-gradient(135deg, #3d2008 0%, #7a4a1a 60%, #a06830 100%); }
.card-banner.inland-links  { background: linear-gradient(135deg, #0d3340 0%, #1a5560 60%, #2a7a72 100%); }
.card-banner.mixed         { background: linear-gradient(135deg, #0d3b52 0%, #7a4a1a 100%); }
.type-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.type-badge.links        { background: rgba(13,59,52,0.82); color: #e0f5f2; border: 1px solid rgba(42,157,143,0.6); }
.type-badge.parkland     { background: rgba(20,70,45,0.82); color: #d4f0e4; border: 1px solid rgba(64,145,108,0.6); }
.type-badge.clifftop     { background: rgba(55,30,100,0.82); color: #e8dcf8; border: 1px solid rgba(107,79,163,0.6); }
.type-badge.heathland    { background: rgba(90,55,15,0.82); color: #f8e8c8; border: 1px solid rgba(160,104,48,0.6); }
.type-badge.inland-links { background: rgba(15,65,60,0.82); color: #d4f0ee; border: 1px solid rgba(42,122,114,0.6); }
.type-badge.mixed        { background: rgba(55,55,35,0.82);  color: #f0ecd0; border: 1px solid rgba(100,100,80,0.6); }

.course-card.is-renovating {
  filter: grayscale(0.55);
  opacity: 0.78;
}
.course-card.is-renovating:hover {
  filter: grayscale(0.3);
  opacity: 0.92;
}
.renovation-notice {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 8px 0 2px;
  padding: 5px 8px;
  background: #f7f0e6;
  border: 1px solid #c8a96a;
  border-radius: 4px;
  font-size: 0.70rem;
  color: #7a5820;
  line-height: 1.35;
}
.renovation-notice svg { flex-shrink: 0; margin-top: 1px; }

/* ── SHORTLIST BOOKMARK BUTTON ── */
.shortlist-btn {
  position: absolute;
  bottom: 8px; right: 8px;
  z-index: 4;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  border: 1.5px solid rgba(255,255,255,0.28);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.9);
  transition: all 0.15s;
  padding: 0;
  backdrop-filter: blur(3px);
}
.shortlist-btn:hover {
  background: rgba(0,0,0,0.58);
  color: #fff;
  transform: scale(1.1);
}
.shortlist-btn.saved {
  background: #1B4332;
  border-color: #1B4332;
  color: #fff;
}
.shortlist-btn.saved:hover { background: #0D2B1E; transform: scale(1.1); }

/* ── SHORTLIST NAV BADGE ── */
.shortlist-nav-link {
  display: flex !important;
  align-items: center;
  gap: 5px;
}
.shortlist-badge {
  display: none;
  background: #C9A84C;
  color: #1B4332;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  align-items: center; justify-content: center;
  line-height: 1;
}

/* ── EXPLORE COURSE BUTTON (shared: course cards, collection, towns, shortlist, list) ── */
.card-btn {
  padding: 7px 18px;
  background: #097c20;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: background 0.18s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.card-btn:hover { background: #065919; }

/* ── TRIP BUTTON (shared: course cards, collection, towns, shortlist, list) ── */
.btn-add-trip,
.card-btn-trip {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 0.78rem; font-weight: 500;
  color: #5C7A6E;
  border: 1px solid #E2EDE8;
  padding: 7px 11px;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}
.btn-add-trip:hover,
.card-btn-trip:hover { color: #097c20; border-color: #097c20; }
.btn-add-trip svg,
.card-btn-trip svg { flex-shrink: 0; }

/* ── COURSE CARD LAYOUT (shared: courses, collection) ── */
.course-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border: 1px solid #E2EDE8;
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.card-body { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.card-location { display: flex; align-items: center; gap: 5px; font-size: 0.72rem; color: #5C7A6E; margin-bottom: 8px; font-weight: 500; }
.card-location svg { flex-shrink: 0; }
.card-name { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: #1A2B1F; line-height: 1.3; margin-bottom: 5px; }
.card-desc { font-size: 0.82rem; color: #5C7A6E; line-height: 1.65; flex: 1; margin-bottom: 18px; }
.card-architects { font-size: 0.75rem; color: #5C7A6E; margin-bottom: 10px; line-height: 1.5; }
.card-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #E2EDE8; }
.card-actions { display: flex; align-items: center; gap: 8px; }
.meta-left { display: flex; flex-direction: column; gap: 5px; }
.meta-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: #8FA89F; font-weight: 600; }
.difficulty-dots { display: flex; gap: 3px; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #E2EDE8; }
.dot.filled { background: #097c20; }
.dot.filled.hard { background: #C9A84C; }
.dot.filled.extreme { background: #c0392b; }
.fee-symbols { font-size: 0.82rem; font-weight: 600; color: #40916C; letter-spacing: 1px; }
.fee-dim { color: #E2EDE8; }
.fee-access-note { font-size: 0.6rem; color: #5C7A6E; margin-top: 2px; }
.ranking-chip { display: inline-flex; align-items: center; gap: 4px; background: #D8F3DC; color: #1B4332; font-size: 0.65rem; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin-bottom: 5px; }
.card-meta-row { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.72rem; color: #8FA89F; margin-bottom: 14px; }
.card-meta-row span { display: flex; align-items: center; gap: 4px; }
a, button, select, label, input { touch-action: manipulation; }

@media (max-width: 768px) {
  .btn-long { display: none; }
}