/* /Components/Parts/CityCard.razor.rz.scp.css */
/*
  A result card. Every one is the same height and every picture the same shape, because a grid of
  cities that each set their own size reads as a mess — and a city can be any shape at all once it
  has been drawn isometrically and cropped.
*/

.city-card[b-5pdlp5yl53] {
    overflow: hidden;
    border-color: #d7dee5;
}

/*
  The game's own backdrop, matching what the thumbnailer fills the sky and the letterbox bars with.
  This is what a card shows for the moment before the picture arrives, so anything else is a flash
  of the wrong colour on every card at once.

  Blazor scopes this file's selectors to the component but leaves custom properties alone, so the
  one in app.css resolves here through the cascade like any other — which is what keeps this and
  `Archive.Backdrop` from drifting into two different browns.
*/
.city-card-picture[b-5pdlp5yl53] {
    display: block;
    aspect-ratio: 8 / 5;
    background: var(--sc-backdrop);
}

.city-card-picture img[b-5pdlp5yl53] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.city-card .card-body[b-5pdlp5yl53] {
    padding-bottom: 0.5rem;
}

.city-card-line[b-5pdlp5yl53] {
    min-height: 1.5rem;
    margin-bottom: 0;
}

.city-card-facts .list-group-item[b-5pdlp5yl53] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
}

.city-card-facts .list-group-item > span:first-child[b-5pdlp5yl53] {
    color: #5d6b7a;
}