/*
    Ported from Keel's featured-posts-section (normal/circle layout only -
    the "Creative" overlay-mask mode was intentionally left out).

    Renamed to avoid colliding with Snook's own pre-existing slider:
    - <slider-component>        -> <featured-slider>   (custom element)
    - .featured-posts-section   -> .featured-slider-section
    - .slide                    -> .fs-slide
    - .slider-navigation        -> .fs-slider-navigation
    - .slider-button            -> .fs-slider-button
    - .slider-arrow-inner       -> .fs-slider-arrow-inner

    Everything else below (.slider-content, .slider-top, .slider-headings,
    .slider-heading, .slider-numbers, .slider-number, .slider-center,
    .slider-inner, .circle-slide, .slide-image-link, .slider-bottom-wrapper,
    .slider-bottom, .bottom-item-links, .section-header, .section-info,
    .slider-navigation-mobile) does not exist anywhere else in Snook, so it
    keeps its original Keel name.
*/

:root {
    --circle-slide-width: 29.2vw;
}

@media (min-width: 1920px) {
    :root {
        --circle-slide-width: 27vw;
    }
}

@media screen and (max-width: 1080px) {
    :root {
        --circle-slide-width: 66vw;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --circle-slide-width: 71vw;
    }
}

.relative {
    position: relative;
    z-index: 2;
}

.static {
    position: static !important;
}

.featured-slider-section {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: auto;
    padding: max(18px, 1.25vw) 0;
    background-color: var(--text-color);
    color: var(--background-color);
}

/* Snook's global `h2 { color: var(--text-color) }` and `p { color:
   var(--text-color-70) }` would otherwise render the post title, tags
   label, and about/excerpt text in near-invisible dark text against this
   section's dark background - force them back to the inherited (light)
   color instead. */
.featured-slider-section h2,
.featured-slider-section p {
    color: inherit;
}

featured-slider {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 4 !important;
    height: 100%;
    width: 100%;
}

.section-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap: max(24px, calc(1.67vw * var(--scale)));
}

.section-info {
    opacity: 0.6;
}

.slider-numbers {
    display: flex;
}

.slider-headings {
    width: 100%;
}

.slider-heading {
    color: currentColor;
    text-decoration: none;
    width: fit-content;
    max-width: max(calc(660px * var(--heading-font-scale)), calc(45.8vw * var(--scale) * var(--heading-font-scale)));
    display: block;
    transform: translateY(15px);
    transition: transform 1s var(--expo-transition), opacity 0.3s var(--expo-transition);
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.slider-heading.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0px);
}

.slider-content {
    margin: max(72px, calc(5vw * var(--scale))) 0;
}

.slider-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: max(38px, calc(2.64vw * var(--scale)));
}

.slider-inner {
    padding: 0;
    overflow: hidden;
}

.flickity-viewport {
    overflow: visible;
}

.slider-center {
    opacity: 0;
    height: 0px;
}

.slider-center.ready {
    opacity: 1;
    height: auto;
}

.fs-slide {
    margin-right: max(24px, 1.67vw);
}

.circle-slide {
    width: var(--circle-slide-width);
    min-width: var(--circle-slide-width);
    border-radius: 100%;
    aspect-ratio: 1;
}

.circle-slide .slide-image-link,
.slider-inner .fs-slide.circle-slide figure::after {
    border-radius: 100%;
}

.slide-image-link {
    position: relative;
    width: 100%;
    height: 100%;
    color: currentColor;
    overflow: hidden;
}

.fs-slider-navigation {
    gap: max(10px, calc(0.69vw * var(--scale)));
}

.fs-slider-button {
    width: max(48px, calc(3.34vw * var(--scale)));
    min-width: max(48px, calc(3.34vw * var(--scale)));
    height: max(48px, calc(3.34vw * var(--scale)));
    border-radius: 100%;
    border: 1px solid var(--background-color);
    color: var(--background-color);
    transition: background-color .2s ease, color .2s ease;
    background-color: var(--text-color);
}

.fs-slider-button:hover {
    color: var(--text-color);
    background-color: var(--background-color);
}

.fs-slider-arrow-inner {
    width: max(30px, calc(2.08vw * var(--scale)));
}

.fs-slider-arrow-inner.rotated {
    transform: rotate(180deg);
}

featured-slider[data-total-slides="1"] .fs-slider-navigation {
    display: none;
}

.slider-bottom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.slider-bottom.full-height {
    height: 100%;
}

.slider-bottom.active {
    opacity: 1;
    pointer-events: all;
}

.slider-navigation-mobile {
    display: none;
}

.slider-inner .fs-slide figure::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: 0.4;
    transition: opacity .2s ease;
}

.slider-inner .fs-slide.is-selected figure::after {
    opacity: 0;
}

.bottom-item-links {
    display: flex;
    flex-wrap: wrap;
    gap: max(12px, calc(0.83vw * var(--scale)));
}

/* Same 3-column bottom layout as Keel: tags bottom-left, about/excerpt
   centered (same width cap as the .our-selection about column), read
   story bottom-right. */
.tags-bottom-item {
    flex: none;
}

.about-bottom-item {
    flex: 5;
    max-width: max(432px, calc(30vw * var(--scale)));
    margin-left: max(48px, calc(3.34vw * var(--scale)));
}

.read-story-bottom-item {
    flex: none;
    margin-left: auto;
    align-self: flex-end;
}

@media screen and (max-width: 1080px) {
    .fs-slider-navigation {
        display: none;
    }

    .slider-navigation-mobile {
        display: flex;
        justify-content: flex-start;
        margin-top: 34px;
    }

    .slider-content {
        margin: 92px 0;
    }

    .slider-top {
        margin-bottom: 38px;
    }

    .fs-slider-button:hover {
        color: var(--background-color);
        background-color: var(--text-color);
    }

    .section-bottom.slider-bottom {
        min-height: unset;
    }

    /* Matches Keel's own tablet/mobile behavior - only tags and read story
       stay visible, the about/excerpt column is dropped. */
    .about-bottom-item {
        display: none;
    }

    .featured-slider-section {
        margin-bottom: max(53px, calc(3.69vw * var(--scale)));
    }
}

@media screen and (max-width: 767px) {
    .slider-content {
        margin: 58px 0;
    }

    .slider-top {
        margin-bottom: 30px;
    }

    .featured-slider-section {
        margin-bottom: 43px;
    }

    .tag-bracket-link:nth-child(2) {
        display: none;
    }
}