/**
 * WCRS Hero Slider Widget Styles
 *
 * Two-column hero with Swiper slider (arrows + pagination).
 * WCAG 2.1 AA compliant.
 */

/* ==========================================================================
   Layout
   ========================================================================== */

.wcrs-hero-slider {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    contain: inline-size layout style;
}

.elementor-widget-wcrs_hero_slider {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.wcrs-hero-slider-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "content slider";
    overflow: hidden;
}

/* ==========================================================================
   Content column
   ========================================================================== */

.wcrs-hero-slider-content {
    display: flex;
    flex-direction: column;
    grid-area: content;
}

.wcrs-hero-slider-title {
    margin: 0;
    padding: 0;
}

.wcrs-hero-slider-description {
    margin: 0;
    padding: 0;
}

.wcrs-hero-slider-description p {
    margin: 0;
}

.wcrs-hero-slider-description p + p {
    margin-top: 0.5em;
}

/* ==========================================================================
   Per-slide content (only one visible)
   ========================================================================== */

.wcrs-hero-slider-slide-content {
    display: flex;
    flex-direction: column;
}

.wcrs-hero-slider-slide-content:not(.is-active) {
    display: none;
}

/* ==========================================================================
   Nav row – dots left, arrows right (left column, under text)
   ========================================================================== */

.wcrs-hero-slider-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
}

.wcrs-hero-slider-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
}

.wcrs-hero-slider-arrows {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

/* ==========================================================================
   Slider container (right column – images only)
   ========================================================================== */

.wcrs-hero-slider-slider {

    min-width: 0;
    overflow: hidden;
    position: relative;
    grid-area: slider;
}

.wcrs-hero-slider-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcrs-hero-slider-swiper .swiper-wrapper {
    display: flex;
}

.wcrs-hero-slider-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcrs-hero-slider-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

/* ==========================================================================
   Placeholder (no gallery)
   ========================================================================== */

.wcrs-hero-slider-placeholder {

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 24px;
    font-family: 'sofia-pro', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    color: #9D9D9D;
    text-align: center;
    background: #F5F5F5;
    border-radius: 16px;
}

/* ==========================================================================
   Navigation – arrows (in-flow in nav row)
   ========================================================================== */

.wcrs-hero-slider-nav-button {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    color: #012D5B;
    transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.wcrs-hero-slider-nav-button:hover {
    cursor: pointer;
}

.wcrs-hero-slider-nav-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcrs-hero-slider-nav-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcrs-hero-slider-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcrs-hero-slider-arrow-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.wcrs-hero-slider-arrow-prev {
    transform: scaleX(-1);
}

.wcrs-hero-slider-nav-button.swiper-button-disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   Custom bullets (dot.svg / rectangle.svg)
   ========================================================================== */

.wcrs-hero-slider-bullet {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9D9D9D;
    transition: color 0.2s ease;
}

.wcrs-hero-slider-bullet:hover {
    color: rgba(1, 45, 91, 0.5);
}

.wcrs-hero-slider-bullet:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcrs-hero-slider-bullet:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wcrs-hero-slider-bullet .icon-dot {
    display: flex;
}

.wcrs-hero-slider-bullet .icon-rect {
    display: none;
}

.wcrs-hero-slider-bullet.active .icon-dot {
    display: none;
}

.wcrs-hero-slider-bullet.active .icon-rect {
    display: flex;
}

/* ==========================================================================
   Mobile Layout (jedna kolumna) - Container Query
   ========================================================================== */

@container (max-width:  639px) {
    .wcrs-hero-slider-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "slider" "content";
    }
    
    .wcrs-hero-slider-content {
        padding: 0!important;
    }

    .wcrs-hero-slider-nav {
       margin-top: 0!important;
    }
    

}