/* Block: videos_carousel
 * Video-card mode (default, "How they got it made") is styled by the bundle and
 * left unchanged. The rules below ONLY target content-card mode
 * (#videos-carousel.videos-carousel--content, "There's a whole school for that").
 * The ID prefix + .videos-container are required to beat the bundle's
 * `.wrapper #videos-carousel .videos-container ...` rules. */

#videos-carousel.videos-carousel--content {
    padding: 70px 57px 110px;
    text-align: center;
}
@media (max-width: 991px) {
    #videos-carousel.videos-carousel--content { padding: 50px 20px 90px; }
}
#videos-carousel.videos-carousel--content .videos-carousel-head {
    display: block;
    text-align: center;
    margin-bottom: 38px;
}
#videos-carousel.videos-carousel--content .videos-carousel-head .videos-carousel-title {
    display: block;
    width: 100%;
}
#videos-carousel.videos-carousel--content .videos-carousel-title h2 {
    color: var(--ct-navy);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.6vw, 52px);
    margin: 0 0 16px;
    text-align: center;
}
#videos-carousel.videos-carousel--content .videos-carousel-intro {
    max-width: 980px;
    margin: 0 auto;
    color: var(--ct-navy);
    font-family: 'Albert Sans', sans-serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
}
#videos-carousel.videos-carousel--content .videos-carousel-control { display: none; }

/* Flat cards — image + text directly on the section background (no card box). */
.wrapper #videos-carousel .videos-container .video-container.slick-slide {
    padding: 8px;
}
@media (max-width: 767px) {
    .wrapper #videos-carousel .videos-container .video-container.slick-slide {
        padding: 0;
        margin: 0;
    }
}
#videos-carousel.videos-carousel--content .content-card {
    margin: 0 14px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    text-align: left;
}
#videos-carousel.videos-carousel--content .content-card__media {
    aspect-ratio: 636 / 360;
    height: auto;
    border-radius: 2px;
    background: #c9d4d6 center/cover no-repeat;
}
#videos-carousel.videos-carousel--content .content-card__body { padding: 18px 0 0; }
#videos-carousel.videos-carousel--content .content-card__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--ct-navy);
    margin-bottom: 10px;
}
#videos-carousel.videos-carousel--content .content-card__desc {
    font-family: 'Albert Sans', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ct-navy);
    margin: 0 0 14px;
}
#videos-carousel.videos-carousel--content .content-card__link {
    color: var(--ct-navy);
    font-weight: 700;
    text-decoration: none;
}
#videos-carousel.videos-carousel--content .content-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Navy outline dots (active = filled), bottom-left. */
#videos-carousel.videos-carousel--content .videos-container .slick-dots {
    text-align: left;
    padding: 0 0 0 14px;
    margin-top: 36px;
    bottom: auto;
    position: static;
}
/* The bundle paints the dot on the <li> (active = solid #f26818) and hides the
   active <li>'s button, so the circle must live on the <li>. */
#videos-carousel.videos-carousel--content .videos-container .slick-dots li {
    width: 16px !important;
    height: 16px !important;
    margin: 0 7px !important;
    border: 2px solid var(--ct-navy) !important;
    border-radius: 50% !important;
    background: transparent !important;
}
#videos-carousel.videos-carousel--content .videos-container .slick-dots li.slick-active {
    background: var(--ct-navy) !important;
}
#videos-carousel.videos-carousel--content .videos-container .slick-dots li button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}
#videos-carousel.videos-carousel--content .videos-container .slick-dots li button:before {
    content: "" !important;
    display: none !important;
}

/* Navy thin-line arrows (exact Figma SVGs), inside the grid, bottom-right. */
#videos-carousel.videos-carousel--content .videos-container .slick-prev,
#videos-carousel.videos-carousel--content .videos-container .slick-next {
    display: block !important;
    width: 50px;
    height: 30px;
    top: auto !important;
    bottom: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
#videos-carousel.videos-carousel--content .videos-container .slick-next {
    right: 14px !important;
    left: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='75'%20height='45'%20viewBox='0%200%2075%2045'%20fill='none'%3E%3Cpath%20d='M0%2021.5964H70.5M45%201.59644L71.5%2021.5964L43.5%2042.5964'%20stroke='%23002253'%20stroke-width='4'/%3E%3C/svg%3E") !important;
}
#videos-carousel.videos-carousel--content .videos-container .slick-prev {
    right: 78px !important;
    left: auto !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='75'%20height='45'%20viewBox='0%200%2075%2045'%20fill='none'%3E%3Cpath%20d='M74.8267%2021.5964H4.32666M29.8267%201.59644L3.32666%2021.5964L31.3267%2042.5964'%20stroke='%23002253'%20stroke-width='4'/%3E%3C/svg%3E") !important;
}

/* Carousel arrow hover — nudge outward + slight scale (uses the bundle arrows'
   existing .15s transition). */
button.slick-prev.slick-arrow:hover {
    transform: translate(-10px, 0px) scale(1.05);
}
button.slick-next.slick-arrow:hover {
    transform: translate(10px, 0px) scale(1.05);
}