/**
 * Serenity on Bowen — theme on top of Bootstrap 5.
 */

:root {
    --serenity-accent: #dcbd04;
    --serenity-accent-hover: #b89c03;
    --serenity-heading: #333;
}

body {
    background-color: #f4f4f4;
}

.text-accent {
    color: var(--serenity-accent) !important;
}

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--serenity-accent);
    --bs-btn-border-color: var(--serenity-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--serenity-accent-hover);
    --bs-btn-hover-border-color: var(--serenity-accent-hover);
    --bs-btn-focus-shadow-rgb: 220, 189, 4;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--serenity-accent-hover);
    --bs-btn-active-border-color: var(--serenity-accent-hover);
}

/* Home hero — responsive background (matches previous .headerhome) */
.hero-home {
    background: url("../assets/small/outside/outside_1.jpg?new=2") no-repeat center center;
    background-size: cover;
    min-height: 100vh;
}

@media (max-width: 774px) {
    .hero-home {
        background-image: url("../assets/small/outside/outside_1.jpg?new=2");
    }
}

@media (min-width: 775px) and (max-width: 1550px) {
    .hero-home {
        background-image: url("../assets/medium/outside/outside_1.jpg?new=2");
    }
}

@media (min-width: 1550px) {
    .hero-home {
        background-image: url("../assets/large/outside/outside_1.jpg?new=2");
    }
}

.hero-heading {
    color: var(--serenity-accent);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

main {
    padding-top: 4.5rem;
}

.gallery-section h2,
.gallery-section .h2 {
    color: var(--serenity-heading);
}

/* At most 3 tiles per row (same width), min 212px; incomplete rows centered. Tiles use .ratio + object-fit inside. */
.gallery-section .gallery-grid {
    --gallery-grid-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gallery-grid-gap);
}

.gallery-section .gallery-grid > * {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: min(100%, max(212px, calc((100% - 2 * var(--gallery-grid-gap)) / 3)));
}

/* Stacked (one per row): drop the 212px floor so tiles use full container width. */
@media (max-width: 463px) {
    .gallery-section .gallery-grid > * {
        width: 100%;
        max-width: 100%;
    }
}

.gallery-section .gallery-grid-span-full {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.gallery-section .gallery-grid-span-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: min(100%, 66.666%);
}