/* mod_adv_slideshow.css */

.adv-slideshow-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.adv-slideshow-item {
    position: relative;
    width: 100%;
}

.adv-slideshow-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Caption Wrapper */
.adv-slideshow-caption-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through if needed, but inner elements will enable it back */
    z-index: 5;
    padding: 2rem;
}

.adv-slideshow-caption {
    position: absolute;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 1.5rem;
    border-radius: 4px;
    width: auto; /* Automatic width as requested */
    max-width: 80%;
    transition: all 0.3s ease;
}

.adv-slideshow-caption h3, 
.adv-slideshow-caption .title {
    margin-bottom: 0.5rem;
    color: inherit;
}

.adv-slideshow-caption p, 
.adv-slideshow-caption .text {
    margin-bottom: 1rem;
}

.adv-slideshow-caption .btn {
    pointer-events: auto;
}

/* Positioning Classes */
.pos-top-left {
    top: 2rem;
    left: 2rem;
}

.pos-top-right {
    top: 2rem;
    right: 2rem;
}

.pos-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pos-top-center {
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.pos-bottom-center {
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
}

.pos-bottom-left {
    bottom: 2rem;
    left: 2rem;
}

.pos-bottom-right {
    bottom: 2rem;
    right: 2rem;
}

/* OWL Carousel Specific Tweaks */
.owl-carousel .adv-slideshow-item img {
    display: block;
    width: 100%;
}

/* Responsive Picture adjustments if ratio is used */
.ratio > picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio > picture > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Desktop / Global Aspect Ratios */
.ratio-1x1   { --bs-aspect-ratio: 100%; }
.ratio-4x3   { --bs-aspect-ratio: 75%; }
.ratio-16x9  { --bs-aspect-ratio: 56.25%; }
.ratio-21x9  { --bs-aspect-ratio: 42.85%; }
.ratio-16x10 { --bs-aspect-ratio: 62.5%; }
.ratio-3x2   { --bs-aspect-ratio: 66.66%; }
.ratio-5x4   { --bs-aspect-ratio: 80%; }
.ratio-4x5   { --bs-aspect-ratio: 125%; }
.ratio-2x3   { --bs-aspect-ratio: 150%; }
.ratio-3x4   { --bs-aspect-ratio: 133.33%; }
.ratio-2x1   { --bs-aspect-ratio: 50%; }
.ratio-3x1   { --bs-aspect-ratio: 33.33%; }
.ratio-1x2   { --bs-aspect-ratio: 200%; }
.ratio-1x3   { --bs-aspect-ratio: 300%; }
@media (max-width: 991.98px) {
    .ratio-tablet-1x1   { --bs-aspect-ratio: 100%; }
    .ratio-tablet-4x3   { --bs-aspect-ratio: 75%; }
    .ratio-tablet-16x9  { --bs-aspect-ratio: 56.25%; }
    .ratio-tablet-21x9  { --bs-aspect-ratio: 42.85%; }
    .ratio-tablet-16x10 { --bs-aspect-ratio: 62.5%; }
    .ratio-tablet-3x2   { --bs-aspect-ratio: 66.66%; }
    .ratio-tablet-5x4   { --bs-aspect-ratio: 80%; }
    .ratio-tablet-4x5   { --bs-aspect-ratio: 125%; }
    .ratio-tablet-2x3   { --bs-aspect-ratio: 150%; }
    .ratio-tablet-3x4   { --bs-aspect-ratio: 133.33%; }
    .ratio-tablet-2x1   { --bs-aspect-ratio: 50%; }
    .ratio-tablet-3x1   { --bs-aspect-ratio: 33.33%; }
    .ratio-tablet-1x2   { --bs-aspect-ratio: 200%; }
    .ratio-tablet-1x3   { --bs-aspect-ratio: 300%; }
}

/* Mobile Ratios (576px) */
@media (max-width: 575.98px) {
    .ratio-mobile-1x1   { --bs-aspect-ratio: 100%; }
    .ratio-mobile-4x3   { --bs-aspect-ratio: 75%; }
    .ratio-mobile-16x9  { --bs-aspect-ratio: 56.25%; }
    .ratio-mobile-21x9  { --bs-aspect-ratio: 42.85%; }
    .ratio-mobile-16x10 { --bs-aspect-ratio: 62.5%; }
    .ratio-mobile-3x2   { --bs-aspect-ratio: 66.66%; }
    .ratio-mobile-5x4   { --bs-aspect-ratio: 80%; }
    .ratio-mobile-4x5   { --bs-aspect-ratio: 125%; }
    .ratio-mobile-2x3   { --bs-aspect-ratio: 150%; }
    .ratio-mobile-3x4   { --bs-aspect-ratio: 133.33%; }
    .ratio-mobile-2x1   { --bs-aspect-ratio: 50%; }
    .ratio-mobile-3x1   { --bs-aspect-ratio: 33.33%; }
    .ratio-mobile-1x2   { --bs-aspect-ratio: 200%; }
    .ratio-mobile-1x3   { --bs-aspect-ratio: 300%; }
}