/*
 * EIT.KG
 * Универсальные раскладки динамических виджетов главной.
 */


/* =========================================================
   1. Grid
   ========================================================= */

.home-widget-grid {
    display: grid;
    gap: 22px;
}

.home-widget-grid.home-widget-columns--1 {
    grid-template-columns: minmax(0, 1fr);
}

.home-widget-grid.home-widget-columns--2 {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.home-widget-grid.home-widget-columns--3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.home-widget-grid.home-widget-columns--4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* =========================================================
   2. Carousel
   ========================================================= */

.home-widget-carousel {
    position: relative;
}

.home-widget-carousel__controls {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: -22px;
    margin-bottom: 20px;
}

.home-widget-carousel__button {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    padding: 0;

    color: var(--eit-white);

    background:
        rgba(255, 255, 255, 0.075);

    border: 1px solid
        rgba(255, 255, 255, 0.13);

    border-radius: 14px;

    cursor: pointer;

    backdrop-filter: blur(12px);

    transition:
        color var(--eit-transition),
        background var(--eit-transition),
        border-color var(--eit-transition),
        opacity var(--eit-transition),
        transform var(--eit-transition);
}

.home-widget-carousel__button:hover:not(:disabled),
.home-widget-carousel__button:focus-visible:not(:disabled) {
    color: var(--eit-white);

    background:
        rgba(0, 216, 199, 0.16);

    border-color:
        rgba(0, 216, 199, 0.38);

    transform: translateY(-2px);
}

.home-widget-carousel__button:focus-visible {
    outline: 3px solid
        rgba(0, 216, 199, 0.22);

    outline-offset: 3px;
}

.home-widget-carousel__button:disabled {
    opacity: 0.3;
    cursor: default;
}

.home-widget-carousel__button span {
    font-size: 20px;
    line-height: 1;
}

.home-widget-carousel__viewport {
    display: grid;
    grid-auto-flow: column;
    gap: 22px;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2px 2px 20px;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-widget-carousel__viewport::-webkit-scrollbar {
    display: none;
}

.home-widget-carousel__viewport:focus-visible {
    outline: 3px solid
        rgba(0, 216, 199, 0.18);

    outline-offset: 6px;
    border-radius: var(--eit-radius-md);
}

.home-widget-carousel.home-widget-columns--1
.home-widget-carousel__viewport {
    grid-auto-columns: 100%;
}

.home-widget-carousel.home-widget-columns--2
.home-widget-carousel__viewport {
    grid-auto-columns:
        calc((100% - 22px) / 2);
}

.home-widget-carousel.home-widget-columns--3
.home-widget-carousel__viewport {
    grid-auto-columns:
        calc((100% - 44px) / 3);
}

.home-widget-carousel.home-widget-columns--4
.home-widget-carousel__viewport {
    grid-auto-columns:
        calc((100% - 66px) / 4);
}

.home-widget-carousel__item {
    min-width: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.home-widget-carousel__item
.home-product-card {
    height: 100%;
}


/* =========================================================
   3. Дополнения карточки продукта
   ========================================================= */

.home-product-card__icon img {
    display: block;

    width: 72%;
    height: 72%;

    object-fit: contain;
}

.home-product-card__slogan {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 35px;

    color: var(--eit-teal-400);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-product-card__slogan + h3 {
    margin-top: 10px;
}

.home-product-card--carousel {
    min-height: 430px;
}


/* =========================================================
   4. Дополнительные статусы продукта
   ========================================================= */

.home-product-card__status.is-development {
    color: #8dd8ff;

    background:
        rgba(70, 167, 226, 0.1);

    border:
        1px solid rgba(70, 167, 226, 0.22);
}

.home-product-card__status.is-development::before {
    background: #64c5ff;

    box-shadow:
        0 0 10px rgba(100, 197, 255, 0.65);
}

.home-product-card__status.is-planned {
    color: #d4c6ff;

    background:
        rgba(147, 112, 219, 0.1);

    border:
        1px solid rgba(147, 112, 219, 0.22);
}

.home-product-card__status.is-planned::before {
    background: #b99aff;

    box-shadow:
        0 0 10px rgba(185, 154, 255, 0.55);
}

.home-product-card__status.is-paused {
    color: #ffd590;

    background:
        rgba(235, 174, 70, 0.1);

    border:
        1px solid rgba(235, 174, 70, 0.22);
}

.home-product-card__status.is-paused::before {
    background: #f0ba61;

    box-shadow:
        0 0 10px rgba(240, 186, 97, 0.5);
}

.home-product-card__status.is-archived {
    color:
        rgba(255, 255, 255, 0.48);

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid rgba(255, 255, 255, 0.1);
}

.home-product-card__status.is-archived::before {
    background:
        rgba(255, 255, 255, 0.35);
}


/* =========================================================
   5. Адаптивность
   ========================================================= */

@media (max-width: 1199.98px) {
    .home-widget-grid.home-widget-columns--3,
    .home-widget-grid.home-widget-columns--4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-widget-carousel.home-widget-columns--3
    .home-widget-carousel__viewport,
    .home-widget-carousel.home-widget-columns--4
    .home-widget-carousel__viewport {
        grid-auto-columns:
            calc((100% - 22px) / 2);
    }
}

@media (max-width: 767.98px) {
    .home-widget-grid.home-widget-columns--2,
    .home-widget-grid.home-widget-columns--3,
    .home-widget-grid.home-widget-columns--4 {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .home-widget-carousel__controls {
        margin-top: 0;
    }

    .home-widget-carousel.home-widget-columns--2
    .home-widget-carousel__viewport,
    .home-widget-carousel.home-widget-columns--3
    .home-widget-carousel__viewport,
    .home-widget-carousel.home-widget-columns--4
    .home-widget-carousel__viewport {
        grid-auto-columns:
            min(88%, 390px);
    }
}

@media (max-width: 575.98px) {
    .home-widget-carousel__viewport {
        gap: 14px;
    }

    .home-widget-carousel.home-widget-columns--2
    .home-widget-carousel__viewport,
    .home-widget-carousel.home-widget-columns--3
    .home-widget-carousel__viewport,
    .home-widget-carousel.home-widget-columns--4
    .home-widget-carousel__viewport {
        grid-auto-columns: 91%;
    }

    .home-widget-carousel__button {
        width: 43px;
        height: 43px;
    }
}


/* =========================================================
   6. Отключение движения
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .home-widget-carousel__viewport {
        scroll-behavior: auto;
    }
}