/* Additions to the precompiled app.css (which only contains the classes used by the original site) */

/* Keep the aspect ratio of images with width/height attributes
   (zero specificity via :where, so that theme rules like .card-image-cover still win) */
:where(img[width][height]) {
    height: auto;
}

/* Link tiles on the front page */
.tile {
    position: relative;
    overflow: hidden;
}

.tile img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Same zoom as .card-img-wrap:hover in the theme, but triggered by the whole (clickable) tile */
.tile:hover .card-img-wrap img {
    transform: scale(1.2);
}

.tile .card-title {
    font-size: 1.35rem;
    margin-bottom: .5rem;
}

.tile .card-title a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Make the whole tile clickable */
.tile .card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.tile-more {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Concert announcement on the front page */
.concert-flyer {
    max-width: 100%;
    max-height: 60vh;
    width: auto;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
}

.card.bg-primary a.btn-ticket {
    background-color: #fff;
    color: var(--bs-primary);
    font-weight: 600;
}

.card.bg-primary a.btn-ticket:hover,
.card.bg-primary a.btn-ticket:focus {
    background-color: #e9ecef;
    color: var(--bs-primary);
}