/* ── TopCityPick Listings v2 — Modern UI ─────────────────────────── */

/* 2-column grid on desktop */
.tcp2-listings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0;
}
@media (max-width: 720px) {
    .tcp2-listings { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Card ──────────────────────────────────────────────────────────── */
.tcp2-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s, transform .2s;
}
.tcp2-card:hover {
    box-shadow: 0 10px 36px rgba(0,0,0,.10);
    transform: translateY(-3px);
}

/* ── Badge ─────────────────────────────────────────────────────────── */
.tcp2-badge {
    position: absolute;
    top: 14px; left: 14px; z-index: 10;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    padding: 4px 11px; border-radius: 20px;
    text-transform: uppercase; pointer-events: none;
}
.badge-famous  { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.badge-editors { background:#ede9fe; color:#5b21b6; border:1px solid #c4b5fd; }
.badge-premium { background:#fff0f6; color:#9d174d; border:1px solid #fbcfe8; }

/* ── Image ─────────────────────────────────────────────────────────── */
.tcp2-img-wrap {
    position: relative; width: 100%; height: 210px;
    overflow: hidden; flex-shrink: 0;
}
.tcp2-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.tcp2-card:hover .tcp2-img-wrap img { transform: scale(1.04); }

.tcp2-rank-badge {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(15,23,42,.75); color: #fff;
    font-size: 13px; font-weight: 700;
    padding: 3px 11px; border-radius: 20px;
    backdrop-filter: blur(4px);
}
.tcp2-no-img {
    height: 56px; background: #f1f5f9;
    display: flex; align-items: center; padding: 0 18px;
}
.tcp2-rank-badge-plain {
    background: #4f46e5; color: #fff;
    font-size: 12px; font-weight: 700;
    padding: 3px 11px; border-radius: 20px;
}

/* ── Card body ─────────────────────────────────────────────────────── */
.tcp2-card-body {
    padding: 18px 20px 20px;
    display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.tcp2-card-top { display: flex; flex-direction: column; gap: 5px; }

.tcp2-name {
    font-size: 17px; font-weight: 700; color: #0f172a;
    margin: 0; line-height: 1.3;
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
}
.tcp2-verified {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; background: #059669; color: #fff;
    border-radius: 50%; font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.tcp2-tagline { font-size: 13px; color: #64748b; margin: 0; line-height: 1.5; }
.tcp2-rating  { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.tcp2-star    { font-size: 15px; color: #e2e8f0; line-height: 1; }
.tcp2-star.on { color: #f59e0b; }
.tcp2-rnum    { font-size: 12px; font-weight: 700; color: #64748b; margin-left: 5px; }

/* ── Custom fields pills ───────────────────────────────────────────── */
.tcp2-custom-fields { display: flex; flex-wrap: wrap; gap: 7px; }
.tcp2-cpill {
    display: inline-flex; align-items: center; gap: 4px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 20px; padding: 4px 10px; font-size: 12px;
}
.tcp2-cicon  { font-size: 13px; }
.tcp2-clabel { color: #94a3b8; font-weight: 600; }
.tcp2-cval   { color: #334155; font-weight: 500; }

/* ── Excerpt ───────────────────────────────────────────────────────── */
.tcp2-excerpt {
    font-size: 13px; line-height: 1.7; color: #475569;
    border-top: 1px solid #f1f5f9; padding-top: 10px;
}
.tcp2-excerpt p { margin: 0; }

/* ── Details list ──────────────────────────────────────────────────── */
.tcp2-details {
    display: flex; flex-direction: column;
    border-top: 1px solid #f1f5f9; padding-top: 8px; gap: 0;
}
.tcp2-dr {
    display: flex; align-items: baseline;
    gap: 8px; padding: 6px 0;
    border-bottom: 1px solid #f8fafc; font-size: 13px;
}
.tcp2-dr:last-child { border-bottom: none; }
.tcp2-di { width: 20px; text-align: center; font-size: 14px; flex-shrink: 0; }
.tcp2-dl { width: 66px; flex-shrink: 0; color: #94a3b8; font-size: 12px; }
.tcp2-dv { flex: 1; color: #1e293b; word-break: break-word; }
.tcp2-dv a { color: #4f46e5; text-decoration: none; }
.tcp2-dv a:hover { text-decoration: underline; }
.tcp2-wa {
    background: #dcfce7; color: #16a34a; font-size: 9px; font-weight: 800;
    padding: 1px 5px; border-radius: 6px; vertical-align: middle;
}

/* ── Map ───────────────────────────────────────────────────────────── */
.tcp2-map { border-top: 1px solid #f1f5f9; padding-top: 12px; }
.tcp2-map iframe { border-radius: 10px; display: block; border: 1px solid #e2e8f0; }