/* ==========================================================
   CITYGO PLACE CARD
========================================================== */

.cg-place-card {
    position: relative;
}

.cg-place-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cg-surface-2);
}

.cg-place-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cg-speed) var(--cg-ease);
}

.cg-place-card:hover .cg-place-card__image img {
    transform: scale(1.07);
}

.cg-place-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.36) 0%,
        rgba(0,0,0,.06) 48%,
        rgba(0,0,0,.22) 100%
    );
    z-index: 1;
}

.cg-place-card__top {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 78px;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cg-distance {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 13px;

    border-radius: 999px;
    color: #fff;
    background: rgba(15,23,42,.34);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(16px);

    font-size: 13px;
    font-weight: 850;
}

.cg-card-favorite {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;

    background: rgba(15,23,42,.34);
    backdrop-filter: blur(16px);

    color: #fff;
    font-size: 24px;
    cursor: pointer;

    transition:
        transform var(--cg-speed) var(--cg-ease),
        background var(--cg-speed) var(--cg-ease);
}

.cg-card-favorite:hover {
    background: var(--cg-primary);
    transform: scale(1.08);
}

.cg-place-card__body small {
    display: block;
    margin-bottom: 8px;

    color: var(--cg-text-soft);
    font-size: 14px;
    font-weight: 750;
}

.cg-place-card__body h3 {
    margin: 0;

    color: var(--cg-text);
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.cg-place-card__bottom > span {
    color: var(--cg-text);
    font-size: 15px;
    font-weight: 850;
}
.cg-place-card__image {
    aspect-ratio: 16 / 9;
}

.cg-card__body {
    padding: 20px 22px 22px;
}

.cg-place-card__body h3 {
    font-size: 22px;
}