/* Slider */
.dcs-slider {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.dcs-slider-inner {
    display: flex;
    will-change: transform;
}

/* Clean panel: the panel itself clips everything */
.dcs-panel {
    position: relative;
    flex: 0 0 auto;
    margin: 10px;
    box-sizing: border-box;
    color: #000;
    background: #fff; /* content background */
    /* border, radius, overflow are set inline by PHP */
}

/* Background image layer is a real <img> for reliable clipping */
.dcs-panel .dcs-panel-bgimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;       /* same effect as background-size: cover */
    object-position: center; /* same as background-position: center */
    opacity: 0;              /* shown on hover */
    transition: opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Overlay layer inside the same clipped panel */
.dcs-panel .dcs-panel-overlay {
    position: absolute;
    inset: 0;
    opacity: var(--dcs-overlay-opacity, 0.5);
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

/* Content */
.dcs-panel .dcs-panel-content {
    position: relative;
    z-index: 2;
    box-sizing: border-box; /* padding is inline */
}

.dcs-panel .dcs-panel-content h2,
.dcs-panel .dcs-panel-content p {
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
    color: #000;
}

/* Icon */
.dcs-icon {
    display: block;
    width: 30px; /* overridden inline */
    height: auto;
    margin-bottom: 10px;
    transition: filter 0.3s ease;
}

/* Hover states */
.dcs-panel:hover .dcs-panel-bgimg {
    opacity: 1;
}

.dcs-panel:hover .dcs-panel-overlay {
    opacity: var(--dcs-overlay-opacity-hover, 0.8);
}

.dcs-panel:hover .dcs-panel-content h2,
.dcs-panel:hover .dcs-panel-content p {
    color: #fff;
}

/* Raster icon fallback. For SVG, set fill="currentColor" in the SVG and remove this. */
.dcs-panel:hover .dcs-icon {
    filter: brightness(0) invert(1);
}