.hero-site-title,
.hero-tagline {
    color: var(--color-accent);
}

/* ---------------------------------------------------------
   FEATURED SECTIONS (Bands / Venues)
--------------------------------------------------------- */

.carousel-section {
    padding: 2.5rem 0 3rem 0;
    text-align: center;
    color: #f5f1e6;
    min-height: 400px;
}

/* Typography for section titles */
.carousel-title,
.home-next-up  {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}

/* ---------------------------------------------------------
   SWIPER SLIDER STYLING
--------------------------------------------------------- */

.swiper {
    padding: 20px 0;
}

.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

/* Pagination dots */
.swiper-pagination {
    margin-top: 18px;   /* moves dots downward below the cards */
}

.swiper-pagination-bullet {
    background: rgba(255,255,255,0.7);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

/* Navigation arrows */
.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.6);
    transition: transform 0.2s ease-in-out;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    transform: scale(1.15);
}

/* Optional: ensure arrows are visible on bright backgrounds */
.bands-carousel .swiper-button-prev,
.bands-carousel .swiper-button-next,
.venues-carousel .swiper-button-prev,
.venues-carousel .swiper-button-next {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}

/* Rounded gold buttons */
.bands-prev,
.bands-next,
.venues-prev,
.venues-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    border: 2px solid #c49a6c;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bands-prev::after,
.bands-next::after,
.venues-prev::after,
.venues-next::after {
    font-size: 28px;
    color: #c49a6c;
}


/* Force uniform card heights in Swiper */
.band-card,
.venue-card {
    height: 260px; /* adjust as needed */
    display: flex;
    flex-direction: column;
}

/* Ensure images take consistent space */
.band-card .card-img-top,
.venue-card .card-img-top {
    height: 160px; /* adjust as needed */
    object-fit: cover;
}

/* Clamp title to 1 or 2 lines */
.band-card .card-title,
.venue-card .card-title {
    font-size: 1rem;
    line-height: 1.2;
    height: 2.4em; /* exactly 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}


/* Give the slider room for the pagination */
.bands-swiper,
.venues-swiper {
    padding-bottom: 48px; /* adjust as needed */
}

/* Force pagination dots to sit below the cards */
.carousel-section .swiper-pagination {
    bottom: 12px !important; /* moves dots downward */
}


/* ---------------------------------------------------------
   GRADIENT BACKGROUNDS (locale-driven)
--------------------------------------------------------- */

.nextup-gradient {
    background: linear-gradient(
        to bottom,
        var(--color-secondary),
        var(--color-accent)
    );
}

.bands-gradient {
    background: linear-gradient(
        to bottom,
        var(--color-accent),
        var(--color-primary)
    );
}

.venues-gradient {
    background: linear-gradient(
        to bottom,
        var(--color-primary),
        var(--color-secondary)
    );
}

/* ---------------------------------------------------------
   ABOUT SECTION (Jarallax)
--------------------------------------------------------- */

.about-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.about-content {
    color: var(--color-accent);
    font-size: large;
}

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.footer-primary {
    background-color: var(--color-primary);
    color: var(--color-accent);
    font-size: x-large;
}