:root {
    --cities-bg:#f7f5f0;
    --cities-ink:#142235;
    --cities-text:#52616b;
    --cities-muted:#7b888f;
    --cities-teal:#0f766e;
    --cities-teal-dark:#095f59;
    --cities-border:#e6e2da;
}

.uf-cities-page {
    width:min(calc(100% - 38px),1220px);
    margin:28px auto 70px;
}


/* HERO */

.uf-cities-hero {
    position:relative;

    padding:56px;

    overflow:hidden;

    border:1px solid var(--cities-border);
    border-radius:28px;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(15,118,110,.16),
            transparent 360px
        ),
        linear-gradient(
            135deg,
            #f0ede4,
            #faf9f5 55%,
            #edf5f2
        );

    box-shadow:
        0 18px 55px rgba(28,40,48,.08);
}

.uf-cities-hero::after {
    content:"";

    position:absolute;

    right:-80px;
    bottom:-150px;

    width:410px;
    height:410px;

    border:80px solid rgba(15,118,110,.04);
    border-radius:50%;

    pointer-events:none;
}

.uf-cities-hero-copy {
    position:relative;
    z-index:2;

    max-width:760px;
}

.uf-cities-eyebrow {
    color:var(--cities-teal);

    font-size:11px;
    font-weight:800;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.uf-cities-hero h1 {
    max-width:750px;

    margin:8px 0 0;

    color:var(--cities-ink) !important;

    font-size:clamp(42px,6vw,68px);
    font-weight:770;

    line-height:1.02;

    letter-spacing:-.055em;
}

.uf-cities-hero h1 em {
    color:var(--cities-teal);

    font-style:normal;
}

.uf-cities-hero-copy p {
    max-width:670px;

    margin:18px 0 0;

    color:var(--cities-text);

    font-size:15px;
    line-height:1.7;
}


/* SEARCH */

.uf-city-search {
    position:relative;
    z-index:3;

    display:flex;

    max-width:720px;

    margin-top:30px;
    padding:7px;

    border:1px solid #dedfd9;
    border-radius:15px;

    background:white;

    box-shadow:
        0 10px 30px rgba(30,45,52,.08);
}

.uf-city-search svg {
    width:20px;
    margin:0 4px 0 10px;

    color:#829097;
}

.uf-city-search input {
    flex:1;

    min-width:0;
    height:50px;

    padding:0 10px;

    border:0;
    outline:0;

    background:transparent;

    color:var(--cities-ink);

    font:inherit;
    font-size:13px;
}

.uf-city-search button {
    min-width:110px;

    border:0;
    border-radius:10px;

    background:var(--cities-teal);
    color:white;

    font-size:12px;
    font-weight:750;

    cursor:pointer;
}

.uf-city-search button:hover {
    background:var(--cities-teal-dark);
}


/* FILTERS */

.uf-city-filters {
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:25px;
}

.uf-city-filters a {
    display:inline-flex;
    align-items:center;

    min-height:38px;

    padding:0 14px;

    border:1px solid var(--cities-border);
    border-radius:999px;

    background:white;
    color:#65737a;

    font-size:11px;
    font-weight:700;

    text-decoration:none;
}

.uf-city-filters a:hover {
    border-color:#bdd5d0;
    color:var(--cities-teal);
}

.uf-city-filters a.active {
    border-color:var(--cities-teal);

    background:var(--cities-teal);
    color:white;
}


/* HEADING */

.uf-cities-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:20px;

    margin:44px 0 19px;
}

.uf-cities-heading span {
    color:var(--cities-teal);

    font-size:10px;
    font-weight:800;

    letter-spacing:.07em;
    text-transform:uppercase;
}

.uf-cities-heading h2 {
    margin:4px 0 0;

    color:var(--cities-ink);

    font-size:31px;
    font-weight:760;

    letter-spacing:-.04em;
}

.uf-cities-heading > a {
    color:var(--cities-teal);

    font-size:11px;
    font-weight:750;

    text-decoration:none;
}


/* GRID */

.uf-cities-grid {
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:17px;
}

.uf-city-card {
    overflow:hidden;

    border:1px solid var(--cities-border);
    border-radius:20px;

    background:white;
    color:inherit;

    text-decoration:none;

    box-shadow:
        0 5px 20px rgba(28,41,48,.04);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.uf-city-card:hover {
    transform:translateY(-5px);

    box-shadow:
        0 18px 42px rgba(28,41,48,.12);
}

.uf-city-photo {
    position:relative;

    height:250px;

    background-position:center;
    background-size:cover;
}

.uf-city-price-badge {
    position:absolute;

    top:14px;
    right:14px;

    padding:7px 10px;

    border-radius:999px;

    background:rgba(255,255,255,.94);
    color:var(--cities-ink);

    backdrop-filter:blur(10px);

    font-size:10px;
    font-weight:800;

    box-shadow:
        0 4px 15px rgba(0,0,0,.09);
}

.uf-city-photo-copy {
    position:absolute;

    left:19px;
    right:19px;
    bottom:17px;

    color:white;
}

.uf-city-photo-copy small {
    display:block;

    color:rgba(255,255,255,.75);

    font-size:9px;
    font-weight:750;

    letter-spacing:.08em;
    text-transform:uppercase;
}

.uf-city-photo-copy strong {
    display:block;

    margin-top:3px;

    color:white;

    font-size:28px;
    font-weight:770;

    letter-spacing:-.04em;

    text-shadow:
        0 3px 14px rgba(0,0,0,.25);
}

.uf-city-card-body {
    padding:17px 18px;
}

.uf-city-card-body p {
    min-height:42px;

    margin:0;

    color:var(--cities-text);

    font-size:12px;
    line-height:1.55;
}

.uf-city-card-bottom {
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:15px;
    padding-top:13px;

    border-top:1px solid #efede8;
}

.uf-city-card-bottom span {
    color:var(--cities-teal);

    font-size:10px;
    font-weight:750;
}

.uf-city-card-bottom b {
    color:var(--cities-teal);

    font-size:16px;

    transition:transform .15s ease;
}

.uf-city-card:hover
.uf-city-card-bottom b {
    transform:translateX(4px);
}


/* EMPTY */

.uf-cities-empty {
    padding:55px 25px;

    border:1px solid var(--cities-border);
    border-radius:20px;

    background:white;

    text-align:center;
}

.uf-cities-empty strong {
    color:var(--cities-ink);

    font-size:20px;
}

.uf-cities-empty p {
    color:var(--cities-muted);
}

.uf-cities-empty a {
    display:inline-flex;

    margin-top:8px;

    color:var(--cities-teal);

    font-weight:750;
}


/* DISCLOSURE */

.uf-cities-disclosure {
    max-width:850px;

    margin:26px auto 0;

    color:var(--cities-muted);

    font-size:10px;
    line-height:1.6;

    text-align:center;
}


/* RESPONSIVE */

@media(max-width:900px) {

    .uf-cities-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media(max-width:620px) {

    .uf-cities-page {
        width:calc(100% - 18px);

        margin-top:12px;
    }

    .uf-cities-hero {
        padding:32px 21px;

        border-radius:21px;
    }

    .uf-cities-hero h1 {
        font-size:42px;
    }

    .uf-city-search {
        flex-wrap:wrap;
    }

    .uf-city-search button {
        width:100%;
        min-height:45px;
    }

    .uf-city-filters {
        overflow-x:auto;
        flex-wrap:nowrap;

        padding-bottom:4px;
    }

    .uf-city-filters a {
        flex:0 0 auto;
    }

    .uf-cities-heading {
        align-items:flex-start;
        flex-direction:column;
    }

    .uf-cities-grid {
        grid-template-columns:1fr;
    }

    .uf-city-photo {
        height:265px;
    }

}