/* ================================================
 * CITY CARD HOVER STYLES
 * ================================================ */

/* Radial gradient overlay — injected by JS per card */
.city-card__gradient {
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
}

/* Ensure card content sits above gradient */
.city-card__img-wrapp,
.city-card__infos {
    position: relative;
    z-index: 1;
}

/* Arrow button base — make it transition-ready */
.city-card__btn {
    transition: background-color 0.3s, padding 0.3s, border-radius 0.3s;
    box-sizing: content-box;
}

/* Light gray overlay on city image — makes cursor badge readable */
.city-card__img-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    will-change: opacity;
}