/*
 * Destinations carousel - shared by the homepage ("Popular Destinations in Switzerland") and the
 * legacy pages' [news_carousel] sections ("Popular cities in Switzerland"). The carousel itself is
 * Elementor Pro's Nested Carousel built by inc/destinations-carousel.php; this file carries what
 * the widgets cannot express: the card's photo stretched to cover it, the legibility gradient,
 * hover states and the arrows' shadow.
 */

/* ---- city / destination image cards ---------------------------------------------------- */
.dg-city-card {
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.dg-city-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -24px rgba(24, 26, 31, .5);
}
/* The card's own background image sits on the container; this adds the reference's bottom-up
   gradient so the white title stays legible on bright photographs. */
.dg-city-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 26, 31, 0) 35%, rgba(24, 26, 31, .78) 100%);
    pointer-events: none;
    z-index: 0;
}
.dg-city-card > .e-con-inner,
.dg-city-card > .elementor-element {
    position: relative;
    z-index: 1;
}
.dg-city-card h4 {
    margin: 0;
}
.dg-city-card h4 a {
    color: #FFFFFF;
    text-decoration: none;
}
.dg-city-card h4 a:hover {
    color: #E24A49;
}
.dg-city-meta,
.dg-city-meta a {
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    text-decoration: none;
}
.dg-city-meta a:hover {
    color: #FFFFFF;
}

/* ---- city card photo: a real linked <img>, stretched to cover the card ------------------ */
.dg-city-card .dg-city-img {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}
.dg-city-card .dg-city-img .elementor-widget-container,
.dg-city-card .dg-city-img a,
.dg-city-card .dg-city-img img {
    display: block;
    width: 100%;
    height: 100%;
}
.dg-city-card .dg-city-img img {
    object-fit: cover;
    transition: transform .5s ease;
}
.dg-city-card:hover .dg-city-img img {
    transform: scale(1.05);
}
.dg-city-card::after {
    z-index: 1;
}
.dg-city-card > .elementor-element:not(.dg-city-img) {
    position: relative;
    z-index: 2;
}

/* ---- carousel arrows: colours and discs come from the widgets' own arrow settings; only the
   shadow and the disabled state are added here ------------------------------------------------ */
.dg-dest-carousel .elementor-swiper-button {
    box-shadow: 0 8px 22px -6px rgba(24, 26, 31, .35);
}
.dg-dest-carousel .elementor-swiper-button.swiper-button-disabled {
    opacity: .35;
}

@media (max-width: 767px) {
    .dg-city-card {
        min-height: 240px !important;
    }
}

/* ---- inside the legacy pages' content (the Chauffeur wrapper markup is kept for its heading) ---- */
.dg-destinations-section .elementor {
    margin-top: 10px;
}