.application-tiles {
    font-family: "Segoe UI", Arial, sans-serif;
}

/* grid of cards */
.application-tiles__cards {
    display: grid;
    /* create as many 250px-wide columns as will fit, 
    leftover space just remains blank */
    grid-template-columns: repeat(auto-fill, 280px);
    /* left-align your fixed columns rather than stretching them */
    justify-content: start;
    gap: 1.5rem;
}

/* individual card */
.application-tiles .card {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* push footer / desc to bottom */
    height: 200px;
}

    .application-tiles .card:hover {
        transform: translateY(-10px);
        box-shadow: 4px 8px 28px -4px rgba(0, 0, 0, 0.3); /* Optional: enhance for more lift */
    }

/* make the whole card clickable */
.application-tiles .card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

/* pill badge for environment */
.application-tiles .card__header {
    display: block; /* so width:50% is honored */
    width: 50%; /* half the card’s inner width */
    margin: 0.75rem auto 0; /* top-margin, then auto left/right to center */
    padding: 0.25rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center; /* keeps the text centered inside the pill */
}

/* env colors */
.application-tiles .card__header--production {
    background: #00a6e0;
    color: #fff;
}

.application-tiles .card__header--staging {
    background: #f5b600;
    color: #222;
}

.application-tiles .card__header--test{
    background: #f5b600;
    color: #222;
}

.application-tiles .card__header--dev {
    background: #003c71;
    color: #fff;
}

.application-tiles .card__header--localhost {
    background: #d6336c;
    color: #fff;
}

.application-tiles .card__header--default {
    background: #6c757d;
    color: #fff;
}

/* card content */
.application-tiles .card__body {
    padding: 1rem;
    text-align: center;
}

.application-tiles .card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.5rem 0 0.75rem;
    color: #003c71;
}
 

.application-tiles .card__title--small {
    font-size: 1rem; /* smaller */
}




/* module label + name */
.application-tiles .card__module-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #003c71;
    margin: 0;
    text-transform: uppercase;
}

.application-tiles .card__module-name {
    font-size: 0.875rem;
    margin: 0.25rem 0 0.75rem;
    color: #003c71;
}

/* description text */
.application-tiles .card__description {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

/* optional per-company header */
.application-tiles__company {
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    color: #003c71;
}