/* ==================================================================
   Custom Blog Single — Similar Articles slider
   Pairs with [similar_articles] in custom-blog-single.php
   Requires Slick Carousel (slick.css + slick init — see JS step)
   ================================================================== */

.sb-similar {
    margin-top: 80px;
}

/* --- Heading row: title left, chevrons upper-right --- */
.sb-similar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.sb-similar__title {
    margin: 0;
    color: #D8E1E7;
    font-family: "Unbounded", sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 45px;
}

/* --- Prev / next chevrons --- */
.sb-similar__nav {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.sb-similar__arrow {
    width: 47.114px;
    height: 47.114px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease, transform .2s ease;
}

/* The SVG circle is drawn at opacity 0.4 by default; lift it on hover */
.sb-similar__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sb-similar__arrow:hover svg path {
    opacity: .7;
}
.sb-similar__arrow:active {
    transform: scale(.96);
}

/* Next button points the other way — flip the prev SVG horizontally */
.sb-similar__arrow--next svg {
    transform: scaleX(-1);
}

/* Slick disabled-arrow state */
.sb-similar__arrow.slick-disabled {
    cursor: not-allowed;
}
.sb-similar__arrow.slick-disabled svg path {
    opacity: .2;
}

/* --- Slider track --- */
/* 20px gap between slides is created via padding on the slide + a
   negative margin on the list, so the gap doesn't add to card width. */
.sb-similar__slider .slick-list {
    margin: 0 -10px;
    overflow: visible;          /* lets the 3rd card peek in */
}
.sb-similar__slider .slick-track {
    display: flex;
}
.sb-similar__slide {
    height: auto;               /* equal-height slides */
    padding: 0 10px;
}

/* --- Card --- */
.sb-similar-card {
    position: relative;
    display: flex;
    width: 100%;
    height: 344px;
    padding: 20px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 10px;

    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;

    /* Gradient sits over the image; --sb-card-img is set inline per card
       by hec_similar_card(). lightgray is the fallback while/if no image. */
    background-color: lightgray;
    background-image:
        linear-gradient(65deg, #000 1.25%, rgba(0, 0, 0, 0.00) 98.75%),
        var(--sb-card-img);
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;

    transition: transform .2s ease, box-shadow .2s ease;
}
.sb-similar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.sb-similar-card__content {
    position: relative;         /* above the gradient */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Card title --- */
.sb-similar-card__title {
    margin: 0;
    color: #FFF;
    font-family: "Work Sans", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

/* --- Card excerpt --- */
.sb-similar-card__excerpt {
    margin: 0;
    overflow: hidden;
    color: #FFF;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 120%;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .sb-similar__title { font-size: 30px; line-height: 38px; }
}
@media (max-width: 600px) {
    .sb-similar { margin-top: 56px; }
    .sb-similar__head { margin-bottom: 24px; }
    .sb-similar__title { font-size: 24px; line-height: 30px; }
    .sb-similar-card { height: 280px; }
}