/**
 * MaRussya Slider — frontend styles v1.2.5
 *
 * v1.2.5 (требует com_marussya v8.0.7):
 *   - КАРДИНАЛЬНЫЙ фикс 21:9 растягивания + тонкой полосы в центре слайдера.
 *     Полоса появлялась потому что template Joomla перебивал aspect-ratio
 *     и object-fit:cover — слайдер получался ~2:1 вместо 21:9, а картинка
 *     в нём — растянутой. Дополнительно некоторые шаблоны вешают :before/:after
 *     pseudo-element на .module-wrapper > div, который рисовал 1px линию
 *     на 50% высоты слайдера.
 *   - РЕШЕНИЕ: (а) inline-стили с !important прямо в default.php на контейнере
 *     и на <img> — inline !important бьёт любой CSS-файл. (б) Aggressive reset
 *     :before/:after и border на всех элементах слайдера — убивает pseudo-element.
 *
 * Поддерживаемые эффекты перехода:
 *   fade        — плавное затухание (по умолчанию)
 *   slide       — горизонтальное перелистывание
 *   slide-up    — вертикальное перелистывание
 *   zoom        — масштабирование с приближением
 *   blinds      — шторки (горизонтальные полосы)
 *   cube        — рассыпание на 4×4 = 16 кубиков
 *
 * Контейнер получает класс эффекта: marussya-slider--fx-fade, --fx-slide и т.д.
 * Скорость перехода задаётся через CSS-переменную --ms-speed.
 */

/* =========================================================================
   v8.0.7: AGGRESSIVE RESET — kill any template :before/:after pseudo-elements
   и border на всех элементах слайдера. Это убирает тонкую горизонтальную полосу
   в центре слайдера, которую рисовали template-ные :before/:after.
   ========================================================================= */
.marussya-slider,
.marussya-slider-wrap,
.marussya-slider *,
.marussya-slider-wrap * {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.marussya-slider::before,
.marussya-slider::after,
.marussya-slider-wrap::before,
.marussya-slider-wrap::after,
.marussya-slider *::before,
.marussya-slider *::after,
.marussya-slider-wrap *::before,
.marussya-slider-wrap *::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Wrappers */
.marussya-slider-wrap {
    position: relative;
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    --ms-speed: 600ms;
}

/* Aspect ratios — v1.2.5: inline-стиль в default.php дублирует эти правила
   с !important. CSS здесь как fallback на случай если inline не сработал. */
.marussya-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1a1a1a;
    --ms-speed: 600ms;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* 21:9 ультраширокий — 2560×1080 */
.marussya-slider--21-9 {
    padding-top: 42.857% !important;
    aspect-ratio: 21 / 9 !important;
}
/* 16:9 стандартный — 1920×1080 */
.marussya-slider--16-9 {
    padding-top: 56.25% !important;
    aspect-ratio: 16 / 9 !important;
}
/* 4:3 классический — 1024×768 */
.marussya-slider--4-3 {
    padding-top: 75% !important;
    aspect-ratio: 4 / 3 !important;
}
/* 1:1 квадрат — 1080×1080 */
.marussya-slider--1-1 {
    padding-top: 100% !important;
    aspect-ratio: 1 / 1 !important;
}

@supports (aspect-ratio: 21 / 9) {
    .marussya-slider--21-9,
    .marussya-slider--16-9,
    .marussya-slider--4-3,
    .marussya-slider--1-1 {
        padding-top: 0 !important;
    }
}

/* Track: содержит все слайды */
.marussya-slider__track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform, opacity;
}

/* Single slide: базовое позиционирование (для всех эффектов) */
.marussya-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ms-speed) ease-in-out;
}

.marussya-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* Image: covers entire slide
   v1.2.3: !important на width/height/object-fit — Joomla templates often have
   global `img { max-width:100%; height:auto; }` which BREAKS object-fit:cover
   and makes images look stretched (especially 21:9 with 16:9 source).
   These !important ensure our rules win. */
.marussya-slider__img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Link wrapper */
.marussya-slider__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Caption */
.marussya-slider__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.4) 60%,
        rgba(0,0,0,0) 100%);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    z-index: 5;
    pointer-events: none;
}

/* Arrows */
.marussya-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    padding: 0;
    user-select: none;
}

.marussya-slider__arrow:hover,
.marussya-slider__arrow:focus {
    background: rgba(0,0,0,0.7);
    outline: none;
}

.marussya-slider__arrow--prev { left: 16px; }
.marussya-slider__arrow--next { right: 16px; }

.marussya-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.marussya-slider__arrow--next:hover { transform: translateY(-50%) translateX(2px); }

/* Dots */
.marussya-slider__dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.marussya-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: 0;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.marussya-slider__dot:hover { background: rgba(255,255,255,0.85); }

.marussya-slider__dot.is-active {
    background: #fff;
    transform: scale(1.25);
}

/* =========================================================================
   ЭФФЕКТ 1: FADE (по умолчанию — уже задан базовыми правилами выше)
   ========================================================================= */
.marussya-slider--fx-fade .marussya-slider__slide {
    transition: opacity var(--ms-speed) ease-in-out;
}

/* =========================================================================
   ЭФФЕКТ 2: SLIDE (горизонтальное перелистывание)
   ========================================================================= */
.marussya-slider--fx-slide .marussya-slider__slide {
    opacity: 1;
    transform: translateX(100%);
    transition: transform var(--ms-speed) cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
}
.marussya-slider--fx-slide .marussya-slider__slide.is-active {
    transform: translateX(0);
    z-index: 2;
}
.marussya-slider--fx-slide .marussya-slider__slide.is-prev {
    transform: translateX(-100%);
    z-index: 1;
}

/* =========================================================================
   ЭФФЕКТ 3: SLIDE-UP (вертикальное перелистывание)
   ========================================================================= */
.marussya-slider--fx-slide-up .marussya-slider__slide {
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--ms-speed) cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 1;
}
.marussya-slider--fx-slide-up .marussya-slider__slide.is-active {
    transform: translateY(0);
    z-index: 2;
}
.marussya-slider--fx-slide-up .marussya-slider__slide.is-prev {
    transform: translateY(-100%);
    z-index: 1;
}

/* =========================================================================
   ЭФФЕКТ 4: ZOOM (масштабирование)
   Активный слайд — scale(1), неактивные — scale(1.15) с opacity:0
   ========================================================================= */
.marussya-slider--fx-zoom .marussya-slider__slide {
    opacity: 0;
    transform: scale(1.18);
    transition: opacity var(--ms-speed) ease-out,
                transform var(--ms-speed) ease-out;
    z-index: 1;
}
.marussya-slider--fx-zoom .marussya-slider__slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* =========================================================================
   ЭФФЕКТ 5: BLINDS (венетицинские жалюзи — горизонтальные полосы)
   =========================================================================
   Каждый слайд содержит 6 горизонтальных полос (.marussya-slider__blind),
   у каждой свой transition-delay. Активный — полосы развёрнуты (scaleY(1)),
   неактивный — полосы свёрнуты вверх (scaleY(0)).

   ВАЖНО: background-size: 100% 600% — картинка в 6 раз выше контейнера,
   чтобы каждая полоса (1/6 высоты) показывала свою часть картинки.
   background-position по Y: 0%, 20%, 40%, 60%, 80%, 100%
   (формула: 100% / (N-1), где N = кол-во полос).
*/
.marussya-slider--fx-blinds .marussya-slider__slide {
    opacity: 1;
    transition: none;
    z-index: 1;
}
.marussya-slider--fx-blinds .marussya-slider__slide.is-active { z-index: 2; }

.marussya-slider__blind {
    position: absolute;
    left: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 600%;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform var(--ms-speed) cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}

.marussya-slider--fx-blinds .marussya-slider__slide.is-active .marussya-slider__blind {
    transform: scaleY(1);
}

/* Каждой полосе свой delay + позиция — эффект "механических жалюзи" */
.marussya-slider__blind:nth-child(1) { transition-delay: 0ms;   top: 0%;      height: 16.66%; background-position: 0% 0%;   }
.marussya-slider__blind:nth-child(2) { transition-delay: 80ms;  top: 16.66%;  height: 16.66%; background-position: 0% 20%;  }
.marussya-slider__blind:nth-child(3) { transition-delay: 160ms; top: 33.33%;  height: 16.66%; background-position: 0% 40%;  }
.marussya-slider__blind:nth-child(4) { transition-delay: 240ms; top: 50%;     height: 16.66%; background-position: 0% 60%;  }
.marussya-slider__blind:nth-child(5) { transition-delay: 320ms; top: 66.66%;  height: 16.66%; background-position: 0% 80%;  }
.marussya-slider__blind:nth-child(6) { transition-delay: 400ms; top: 83.33%;  height: 16.66%; background-position: 0% 100%; }

/* =========================================================================
   ЭФФЕКТ 6: CUBE (рассыпание на 4×4 = 16 кубиков)
   =========================================================================
   Каждый слайд содержит 16 кубиков (.marussya-slider__cube), у каждого свой
   background-position (для отображения нужной части картинки) и свой
   transition-delay. Активный — кубики на месте scale(1),
   неактивный — кубики разлетаются со случайным смещением + rotate.
*/
.marussya-slider--fx-cube .marussya-slider__slide {
    opacity: 1;
    transition: none;
    z-index: 1;
}
.marussya-slider--fx-cube .marussya-slider__slide.is-active { z-index: 2; }

.marussya-slider__cube {
    position: absolute;
    width: 25%;
    height: 25%;
    background-repeat: no-repeat;
    background-size: 400% 400%;
    transform: scale(0) rotate(180deg);
    opacity: 0;
    transition: transform var(--ms-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--ms-speed) ease-out;
    backface-visibility: hidden;
}

.marussya-slider--fx-cube .marussya-slider__slide.is-active .marussya-slider__cube {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}

/* Position each cube in 4×4 grid */
.marussya-slider__cube:nth-child(1)  { top: 0%;   left: 0%;   background-position: 0%   0%;   transition-delay: 0ms;   }
.marussya-slider__cube:nth-child(2)  { top: 0%;   left: 25%;  background-position: 33%  0%;   transition-delay: 60ms;  }
.marussya-slider__cube:nth-child(3)  { top: 0%;   left: 50%;  background-position: 66%  0%;   transition-delay: 120ms; }
.marussya-slider__cube:nth-child(4)  { top: 0%;   left: 75%;  background-position: 100% 0%;   transition-delay: 180ms; }

.marussya-slider__cube:nth-child(5)  { top: 25%;  left: 0%;   background-position: 0%   33%;  transition-delay: 80ms;  }
.marussya-slider__cube:nth-child(6)  { top: 25%;  left: 25%;  background-position: 33%  33%;  transition-delay: 140ms; }
.marussya-slider__cube:nth-child(7)  { top: 25%;  left: 50%;  background-position: 66%  33%;  transition-delay: 200ms; }
.marussya-slider__cube:nth-child(8)  { top: 25%;  left: 75%;  background-position: 100% 33%; transition-delay: 260ms; }

.marussya-slider__cube:nth-child(9)  { top: 50%;  left: 0%;   background-position: 0%   66%;  transition-delay: 160ms; }
.marussya-slider__cube:nth-child(10) { top: 50%;  left: 25%;  background-position: 33%  66%;  transition-delay: 220ms; }
.marussya-slider__cube:nth-child(11) { top: 50%;  left: 50%;  background-position: 66%  66%;  transition-delay: 280ms; }
.marussya-slider__cube:nth-child(12) { top: 50%;  left: 75%;  background-position: 100% 66%; transition-delay: 340ms; }

.marussya-slider__cube:nth-child(13) { top: 75%;  left: 0%;   background-position: 0%   100%; transition-delay: 240ms; }
.marussya-slider__cube:nth-child(14) { top: 75%;  left: 25%;  background-position: 33%  100%; transition-delay: 300ms; }
.marussya-slider__cube:nth-child(15) { top: 75%;  left: 50%;  background-position: 66%  100%; transition-delay: 360ms; }
.marussya-slider__cube:nth-child(16) { top: 75%;  left: 75%;  background-position: 100% 100%; transition-delay: 420ms; }

/* Mobile tuning */
@media (max-width: 768px) {
    .marussya-slider__arrow {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
    .marussya-slider__arrow--prev { left: 8px; }
    .marussya-slider__arrow--next { right: 8px; }
    .marussya-slider__caption {
        font-size: 0.95rem;
        padding: 1.5rem 1rem 1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marussya-slider__slide,
    .marussya-slider__blind,
    .marussya-slider__cube {
        transition: opacity 0.2s ease !important;
        transform: none !important;
    }
    .marussya-slider__blind,
    .marussya-slider__cube {
        opacity: 1 !important;
    }
}