/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 16px;

background:var(--accent);
color:#fff;

border-radius:999px;

font-weight:700;
}

.btn.secondary{
background:#fff;
border:1px solid var(--border);
color:var(--accent);
}

.cta-row{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px;
}

/* CITY CARDS */

.city-card{
position:relative;

border-radius:16px;
overflow:hidden;

color:#fff;

box-shadow:var(--shadow);
}

.city-card img{
height:120px;
width:100%;
object-fit:cover;
}

.city-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));
}

.city-card span{
position:absolute;
left:12px;
bottom:10px;

font-weight:900;
z-index:2;
}

/* TOPIC PILLS */

.pill-grid{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.pill{
padding:8px 12px;

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

background:#fff;

font-weight:800;
color:var(--text);
}

.pill:hover{
background:var(--soft);
}

/* LISTING CARDS */

.card{
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;

background:#fff;

box-shadow:var(--shadow);

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

.card:hover{
transform:translateY(-3px);
box-shadow:0 14px 34px rgba(0,0,0,.1);
}

.card-img{
height:180px;
width:100%;
object-fit:cover;
}

.card-body{
padding:14px;
}

.card-meta{
color:var(--muted);
font-size:.9rem;
}

/* CONTENT BLOCK */

.prose{
background:#fff;
border:1px solid var(--border);
border-radius:16px;

padding:16px;

box-shadow:var(--shadow);
}