/**
 * @package     Academic Suite
 * @subpackage  mod_slider
 * @copyright   (C) 2025 Institut Lumière Matière (ILM)
 * @license     MIT License
 *
 * Modern, minimalist slider design — Bootstrap 3 compatible.
 * Uses the padding-bottom aspect-ratio trick to lock the height in place
 * BEFORE any image loads, eliminating all layout shift regardless of source
 * image dimensions.
 */

/* ---------- Layout: fixed 16/9 aspect ratio, no layout shift ---------- */
.mod-slider {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mod-slider .carousel-inner {
    position: relative;
    width: 100%;
    /* Fixed, human-readable height — banner style, never overwhelms the page.
       clamp() keeps it pleasant on every viewport: never less than 200px, never more than 360px,
       scales smoothly in between (preferred = 28vw).
       !important : Mojito's bootstrap.min.css is loaded AFTER us and would
       otherwise revert the height to auto, causing the carousel to grow with
       the first image and leave grey space when shorter slides come in. */
    height: clamp(200px, 28vw, 360px) !important;
    overflow: hidden;
}

/* ---------- Crossfade transition (override Bootstrap 3 slide) ---------- */
.mod-slider .carousel-inner > .item {
    position: absolute !important;
    top: 0;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    /* Cancel Bootstrap 3's horizontal translate */
    -webkit-transform: none !important;
    transform: none !important;
}

.mod-slider .carousel-inner > .item.active {
    opacity: 1;
    z-index: 1;
}

/* During the slide cycle, BS3 adds .next/.prev and then .left/.right.
   We keep both layers visible and let opacity handle the crossfade. */
.mod-slider .carousel-inner > .item.next,
.mod-slider .carousel-inner > .item.prev {
    opacity: 0;
    z-index: 2;
}

.mod-slider .carousel-inner > .item.next.left,
.mod-slider .carousel-inner > .item.prev.right {
    opacity: 1;
}

.mod-slider .carousel-inner > .item.active.left,
.mod-slider .carousel-inner > .item.active.right {
    opacity: 0;
    z-index: 1;
}

/* !important is required to defeat Bootstrap 3 (Mojito template) which sets
   `height: auto` on .carousel-inner > .item > img — that reverts our cover
   behaviour and the first slide's intrinsic height pushes the others down,
   leaving grey space below. Also covers <picture> wrapper case. */
.mod-slider .carousel-inner > .item > img,
.mod-slider .carousel-inner > .item > a > img,
.mod-slider .carousel-inner > .item > picture,
.mod-slider .carousel-inner > .item > picture > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ---------- Indicators: minimalist dots ---------- */
.mod-slider .carousel-indicators {
    bottom: 14px;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding-left: 0;
    z-index: 15;
}

.mod-slider .carousel-indicators li {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    transition: all 0.25s ease;
    cursor: pointer;
}

.mod-slider .carousel-indicators li:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.mod-slider .carousel-indicators li.active {
    width: 24px;
    height: 8px;
    border-radius: 4px;
    background: #ffffff;
    margin: 0 4px;
}

/* ---------- Controls: subtle, modern ---------- */
.mod-slider .carousel-control {
    width: 56px;
    background: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: none;
    filter: none;
}

.mod-slider:hover .carousel-control {
    opacity: 1;
}

.mod-slider .carousel-control.left,
.mod-slider .carousel-control.right {
    background-image: none;
}

.mod-slider .carousel-control .glyphicon-chevron-left,
.mod-slider .carousel-control .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    line-height: 44px;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    transition: background 0.25s ease;
}

.mod-slider .carousel-control .glyphicon-chevron-left {
    left: 12px;
    margin-left: 0;
}

.mod-slider .carousel-control .glyphicon-chevron-right {
    right: 12px;
    margin-right: 0;
}

.mod-slider .carousel-control:hover .glyphicon-chevron-left,
.mod-slider .carousel-control:hover .glyphicon-chevron-right {
    background: rgba(0, 0, 0, 0.6);
}

/* ---------- Subtle gradient overlay for indicator legibility ---------- */
.mod-slider .carousel-inner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 10;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
    .mod-slider .carousel-control {
        opacity: 1;
        width: 44px;
    }

    .mod-slider .carousel-control .glyphicon-chevron-left,
    .mod-slider .carousel-control .glyphicon-chevron-right {
        width: 36px;
        height: 36px;
        margin-top: -18px;
        line-height: 36px;
        font-size: 14px;
    }

    .mod-slider .carousel-indicators li {
        width: 7px;
        height: 7px;
    }

    .mod-slider .carousel-indicators li.active {
        width: 20px;
        height: 7px;
    }
}