/* ==========================================================================
   Category Spotlight
   Figma: split layout — image left, #e8f3fb panel right
   Blue panel: 710.728 × 620.612px at left 1046.39px
   Annotation: "component that repeats across site, ability to add more than once"
   ========================================================================== */
.category-spotlight {
    max-width: 1775px;
    margin-top: 123px;
}

.category-spotlight__image {
    flex: 1;
    height: 770px;
    margin-right: -190px;
}


/* Figma: #e8f3fb, 710.728 × 620.612px, top offset 75px */
.category-spotlight__panel {
    flex: 0 0 710px;
    background-color: #e8f3fb;
    padding: 40px;
    margin-top: 75px;
    min-height: 620px;
}

/* Figma: 44.826px Regular #575757, uppercase */
.category-spotlight__label {
    font-size: 44.826px;
    color: #575757;
    margin-bottom: 0;
    line-height: 1.1;
}

/* Figma: 116.06px Regular #00447c, line-height 103.294px, uppercase */
.category-spotlight__title {
    font-size: 116.06px;
    line-height: 103.294px;
    margin-bottom: 15px;
}

/* Figma: 34.006px Regular #575757, uppercase */
.category-spotlight__desc {
    font-size: 34.006px;
    color: #575757;
    margin-bottom: 35px;
}

/* Figma: white bg, 339.211 × 85.015px, radius 56.11px, text 27.205px Medium #707070 */
.category-spotlight__cta {
    width: 339.211px;
    height: 85.015px;
    color: #707070;
    font-size: 27.205px;
    transition: all 0.3s;
}

.category-spotlight__cta:hover {
    background-color: var(--primary);
    color: var(--white);
}

/* Spotlight Nav — position only, shared .slider-nav handles size/style */
.category-spotlight__controls {
    bottom: 116px;
    right: 36px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439px) {
    .category-spotlight__slide {
        min-height: 600px;
    }
    .category-spotlight__panel {
        flex: 0 0 550px;
        margin-top: 50px;
        min-height: 500px;
    }
    .category-spotlight__image {
        margin-right: -140px;
    }
    .category-spotlight__title {
        font-size: 85px;
        line-height: 80px;
    }
    .category-spotlight__label {
        font-size: 34px;
    }
    .category-spotlight__desc {
        font-size: 26px;
    }
    .category-spotlight__cta {
        width: 280px;
        height: 70px;
        font-size: 22px;
    }
}

@media (max-width: 1199px) {
    .category-spotlight__panel {
        flex: 0 0 450px;
        min-height: auto;
    }
    .category-spotlight__image {
        margin-right: -100px;
    }
    .category-spotlight__title {
        font-size: 65px;
        line-height: 62px;
    }
    .category-spotlight__label {
        font-size: 28px;
    }
    .category-spotlight__desc {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .category-spotlight__slide {
        flex-direction: column;
        min-height: auto;
    }
    .category-spotlight__image {
        height: 400px;
        flex: none;
        margin-right: 0;
    }
    .category-spotlight__panel {
        flex: none;
        padding: 50px 30px;
        margin-top: 0;
        min-height: auto;
    }
    .category-spotlight__content {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .category-spotlight {
        margin-top: 0;
    }
    .category-spotlight__image {
        height: 390px;
    }
    .category-spotlight__panel {
        padding: 30px 25px 31px;
        margin-top: -132px;
        width: 325px;
        margin-left: auto;
        margin-right: auto;
        min-height: 301px;
        align-self: center;
    }
    .category-spotlight__content {
        text-align: left;
    }
    .category-spotlight__label {
        margin-bottom: 9px;
    }
    .category-spotlight__title {
        margin-bottom: 10px;
    }
    .category-spotlight__desc {
        margin-bottom: 19px;
    }
    .category-spotlight__title {
        font-size: 62px;
        line-height: 55.757px;
    }
    .category-spotlight__label {
        font-size: 24px;
    }
    .category-spotlight__desc {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .category-spotlight__cta {
        width: 192px;
        height: 48.12px;
        font-size: 15.398px;
        border-radius: 31.759px;
    }
    .category-spotlight__controls {
        bottom: 10px;
        right: 10px;
    }
    .category-spotlight__title {
        word-break: break-word;
    }
}