﻿.card {
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}

.cms-edit {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 500;
    background-color: white;
    border-radius: 5px;
    height: 40px;
    width: 40px;
    padding: 4px;
}

.hero {
    position: relative;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    min-height: 360px;
    overflow: hidden;
    background: #0b2239;
}

.hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: contrast(1.05) saturate(1.05);
    transform: scale(1.02);
}

.hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

.hero-content {
    position: relative;
    z-index: 2;
}

.date-chip {
    width: 3.2rem;
    flex: 0 0 3.2rem;
    border-radius: .75rem;
    background: var(--brand-surface);
    border: 1px solid #e6ecf4;
    text-align: center;
    line-height: 1.1;
    padding: .4rem .2rem;
}

    .date-chip .day {
        font-weight: 800;
        font-size: 1.1rem;
    }

    .date-chip .mon {
        text-transform: uppercase;
        font-size: .75rem;
        color: #6b7280;
    }

.badge-group {
    background: #eef4ff;
    color: #1d4ed8;
    border: 1px solid #dbe7ff;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    display: block;
}

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .gallery-item:hover img {
        transform: scale(1.03);
    }

.gallery-caption {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
    opacity: 0;
    transition: .25s ease;
    color: #fff;
    display: flex;
    align-items: end;
    padding: .75rem;
    font-weight: 600;
    letter-spacing: .2px;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

h1 {
    color: white;
}
/* Center the carousel and constrain width */
.gallery-holder {
    display: flex;
    justify-content: center;
    background-color: var(--brand-primary-100);
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}

    .gallery-holder .image-box {
        width: 100%;
        max-width: 900px; /* adjust as needed */
        margin: 0 auto;
    }

/* Enforce 4:3 (1.33) aspect ratio for the carousel box */
#image-carousel {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.carousel-inner {
    background-color: var(--brand-primary-100);
}
/* Make slides fill the aspect-ratio box */
#image-carousel .carousel-inner,
#image-carousel .carousel-item {
    height: 100% !important;
}

    /* Show entire image without cropping; add letterbox background if needed */
    #image-carousel .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: contain !important; /* no cropping */
        object-position: center center;
        display: block;
        background-color: var(--brand-primary-100); /* visible bars for non-4:3 images */
        border-radius: 1rem;
    }

/* Override any fixed heights from earlier styles */
.carousel-item {
    height: auto !important;
}

.d-block {
    background-color: var(--brand-primary-100);
}
