.core-ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.core-ranking-heading>div{max-width:75%}.core-ranking-heading p{margin:0}.core-ranking-heading>span{flex-shrink:0}
@media(max-width:991.98px){.core-ranking-heading{display:block}.core-ranking-heading>div{max-width:none}.core-ranking-heading>span{display:block;margin-top:16px}}

/* Top Rated renders the same _CityBusiness featured card, but under `core-directory` rather than `core-city`, so the
   city-parity card treatment skips it (George, Sept 22 2026: "any page that shows listings like that"). Same values as
   the city block, scoped to this stylesheet, which only the Top Rated page loads. */
.core-directory .tg-featured-card {
    border: 1px solid var(--pg-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--pg-shadow-rest);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.core-directory .tg-featured-card:hover {
    border-color: #c4d3ea;
    box-shadow: var(--pg-shadow-hover);
    transform: translateY(-2px);
}

/* Bootstrap's rounded-top-4 sits on the image itself, so match it here rather than fighting the utility class. */
.core-directory .tg-featured-card img.card-img-top,
.core-directory .tg-featured-card .tg-photo-placeholder {
    height: 200px;
    min-height: 200px;
    border-radius: 13px 13px 0 0;
}

.core-directory .tg-featured-card .card-body {
    padding: 16px 18px 18px;
}

.core-directory .tg-featured-title {
    margin-bottom: 2px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}