/**
 * ArgonShop — home page slider styles.
 *
 * @package ArgonShop
 * @author  Ivan Voitkov
 *
 * ============================================================
 * PURPOSE
 * ============================================================
 *
 * Styles the Swiper slider on the home page. The markup
 * is output by the plugin's PHP function as_slider_main(),
 * initialization — by the slider-main.js module.
 *
 * ============================================================
 * SCALING LOGIC
 * ============================================================
 *
 * The image always takes the full container width,
 * the height is calculated automatically from the image proportions
 * (height: auto). No fixed heights and no cropping —
 * the slider adapts to any width.
 *
 * ============================================================
 * COLORS
 * ============================================================
 *
 * The main accent is #4e83c6 (the theme blue).
 * Pagination and arrows use this color.
 */

/* ============================================================
   CONTAINER
   ============================================================ */


.as-slider-main {
    position: relative;
    width: 100%;
    max-width: 836px;
    overflow: hidden;
    border: 1px solid #cfe4ff;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}

.as-slider-main .swiper-wrapper {
    /* Swiper manages the height itself, but just in case
     * do not let the wrapper stretch. */
    align-items: stretch;
}

/* ============================================================
   SLIDES
   ============================================================ */

.as-slider-main .swiper-slide {
    /* The slide is a flex container so that the link and the image
     * take the full width and height. */
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: auto;
    background: #fff;
}

.as-slider-main .swiper-slide a {
    display: block;
    width: 100%;
    line-height: 0; /* removes the vertical gap under the image */
}

.as-slider-main .swiper-slide img,
.as-slider-main .swiper-slide .img-responsive {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ============================================================
   PAGINATION
   ============================================================
 *
 * Standard Swiper dots, but larger and in the theme color.
 *
 * The configuration method is the CSS variables that Swiper declares
 * on :root. It is enough to override them on the slider container,
 * and all nested pagination elements pick up the new values.
 *
 * This approach:
 *   - does not override the Swiper classes with !important;
 *   - does not conflict with the active slide logic;
 *   - does not interfere with updating the dot on switching.
 *
 * Values:
 *   --swiper-pagination-bullet-size              — dot size
 *   --swiper-pagination-bullet-horizontal-gap    — gap between dots
 *   --swiper-pagination-color                    — active dot color
 *   --swiper-pagination-bullet-inactive-color    — regular dot color
 *   --swiper-pagination-bullet-inactive-opacity  — regular dot opacity
 */

.as-slider-main {
    --swiper-pagination-bullet-size: 14px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
    --swiper-pagination-color: #4e83c6;
    --swiper-pagination-bullet-inactive-color: #ffffff;
    --swiper-pagination-bullet-inactive-opacity: 0.9;
}

/* An extra shadow so that the dots are visible
 * on light slides. No need to override the size and color,
 * the variables above already set them. */
.as-slider-main .swiper-pagination-bullet {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s;
}

.as-slider-main .swiper-pagination-bullet-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.as-slider-main .swiper-pagination-bullet:hover {
    transform: scale(1.15);
}

/* ============================================================
   NAVIGATION ARROWS
   ============================================================
 *
 * Square arrow buttons on the sides of the slider.
 * They appear on hovering over the slider so that they do not get in the way
 * of viewing the images.
 */

.as-slider-main .swiper-button-prev,
.as-slider-main .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #4e83c6;
    border-radius: 4px;
    color: #4e83c6;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s, background-color 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.as-slider-main:hover .swiper-button-prev,
.as-slider-main:hover .swiper-button-next {
    opacity: 1;
}

.as-slider-main .swiper-button-prev {
    left: 8px;
}

.as-slider-main .swiper-button-next {
    right: 8px;
}

.as-slider-main .swiper-button-prev:hover,
.as-slider-main .swiper-button-next:hover {
    background: #4e83c6;
    color: #fff;
}

.as-slider-main .swiper-button-prev::after,
.as-slider-main .swiper-button-next::after {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.as-slider-main .swiper-button-prev:focus-visible,
.as-slider-main .swiper-button-next:focus-visible {
    box-shadow: 0 0 0 2px rgba(78, 131, 198, 0.4);
    opacity: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(min-width:1201px){
    .as-slider{
        width: 836px;
        float: left;
        margin-bottom: 30px;
    }
}

@media (max-width: 720px) {

    .as-slider-main {
        max-width: 100%;
        border-radius: 0;
        margin-bottom: 30px;
    }

    /* Hide the arrows on mobile — swiping works by itself */
    .as-slider-main .swiper-button-prev,
    .as-slider-main .swiper-button-next {
        display: none;
    }

    .as-slider-main .swiper-pagination {
        bottom: 6px;
    }
}