/* Live configurations in the home page plan slider (includes/home-offers.php). */

/*
 * Every row of the top part is one line with a fixed height, so the title, processor, price, note, button
 * and link of every card sit at the same height; only the specs list grows. Sizes follow the card width
 * (container units), which goes from about 260px (laptops) to 470px (tablets).
 */
.slick #slider .slick-track {
    display: flex;
}

.slick #slider .slick-slide.home-offer {
    float: none;
    height: auto;
    display: flex;
}

.slick #slider .home-offer .wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    container-type: inline-size;
}

.slick #slider .home-offer .wrapper .top-content,
.slick #slider .home-offer .wrapper .list-info {
    --home-offer-pad: 30px;
}

@supports (width: 1cqi) {
    .slick #slider .home-offer .wrapper .top-content,
    .slick #slider .home-offer .wrapper .list-info {
        --home-offer-pad: clamp(22px, 9.5cqi, 32px);
    }
}

.slick #slider .home-offer .wrapper .top-content {
    position: relative;
    padding: 46px var(--home-offer-pad) 22px;
}

.slick #slider .home-offer .plans.badge.feat {
    top: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
}

.slick #slider .home-offer .title,
.slick #slider .home-offer .fromer,
.slick #slider .home-offer .home-offer-detail,
.slick #slider .home-offer .home-offer-note,
.slick #slider .home-offer .home-offer-more {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slick #slider .home-offer .title {
    margin: 0;
    font-size: clamp(19px, 7.4cqi, 26px);
    line-height: 1.2;
    height: 1.2em;
}

.slick #slider .home-offer .fromer {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 22px;
    height: 22px;
}

.slick #slider .home-offer .home-offer-detail {
    margin-top: 1px;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.slick #slider .home-offer .price {
    margin-top: 14px;
    height: 34px;
    font-size: 25px;
    line-height: 34px;
    white-space: nowrap;
}

.slick #slider .home-offer .price sup {
    top: -.45em;
    font-size: 16px;
}

.slick #slider .home-offer .price .period {
    font-size: 15px;
    font-weight: 500;
}

.slick #slider .home-offer .price-rub {
    font-size: 21px;
}

.slick #slider .home-offer .price-rub:not(:empty)::before {
    content: attr(data-or) " ";
    font-size: 15px;
    font-weight: 500;
}

.slick #slider .home-offer .home-offer-note {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    height: 18px;
    color: #6b7280;
}

.slick #slider .home-offer-hot .home-offer-note {
    color: #e0457b;
    font-weight: 600;
}

.slick #slider .home-offer .home-offer-actions {
    display: flex;
    margin-top: 16px;
}

.slick #slider .home-offer .wrapper a.btn {
    margin: 0;
}

.slick #slider .home-offer .wrapper .home-offer-more {
    display: block;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    font-weight: 600;
    color: #ee5486;
    text-decoration: none;
}

.slick #slider .home-offer a.home-offer-more:hover,
.slick #slider .home-offer a.home-offer-more:focus-visible {
    text-decoration: underline;
}

/* The catalog card's text fills the rows from the processor to the note, centred in them. */
.slick #slider .home-offer .home-offer-catalog-text {
    display: flex;
    align-items: center;
    height: 113px;
    margin-top: 6px;
}

.slick #slider .home-offer-catalog .fromer {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: auto;
    margin: 0;
    white-space: normal;
}

/* Specs: the icons start where the text above starts; labels are quieter than values. */
.slick #slider .home-offer .wrapper .list-info {
    flex: 1 1 auto;
    padding: 18px var(--home-offer-pad) 22px;
}

.slick #slider .home-offer .list-info li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 0;
}

.slick #slider .home-offer .wrapper .list-info i {
    flex: 0 0 34px;
    float: none;
    margin: 0;
    padding: 0;
    font-size: 32px;
    line-height: 1;
    text-align: center;
}

.slick #slider .home-offer .list-info li > div {
    min-width: 0;
}

.slick #slider .home-offer .list-info li br {
    display: none;
}

.slick #slider .home-offer .list-info li span:first-child {
    display: block;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    opacity: .75;
}

.slick #slider .home-offer .list-info li span + br + span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 21px;
}

/* Narrow cards (laptops below 1440px): less padding, and the rouble price goes to its own line in every card. */
@container (max-width: 315px) {
    .slick #slider .home-offer .wrapper .top-content,
    .slick #slider .home-offer .wrapper .list-info {
        --home-offer-pad: 20px;
    }

    .slick #slider .home-offer .price {
        height: 56px;
    }

    .slick #slider .home-offer .price-rub {
        display: block;
        font-size: 19px;
        line-height: 22px;
    }

    .slick #slider .home-offer .home-offer-note {
        margin-top: 6px;
        font-size: 12px;
    }

    .slick #slider .home-offer .home-offer-catalog-text {
        height: 137px;
    }
}

/* Below 590px Slick turns itself off: show the cards as a swipeable row instead of a page-long column. */
@media (max-width: 589px) {
    .slick #slider:not(.slick-initialized) {
        display: flex;
        gap: 12px;
        padding: 0 16px 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        -webkit-overflow-scrolling: touch;
    }

    .slick #slider:not(.slick-initialized) .home-offer {
        display: flex;
        flex: 0 0 86%;
        padding: 0;
        scroll-snap-align: center;
    }

    .slick #slider:not(.slick-initialized) .home-offer .wrapper {
        margin-top: 24px;
    }
}