/**
 * [Featured posts carousel]
 * Shown at the top of the home page, below the hero, for posts tagged
 * `featured`. Interaction pattern borrowed from dreamproit-web's "Case
 * Studies" slider (Swiper, prev/next + dots), but sized as a compact,
 * narrow row of 3 small cards rather than full page width. Card styling
 * follows the "Fresh Mist" system — shadow-card, cobalt/mint accents —
 * see main.css :root and .mini-post-card.
 */

/* Uses the shared .posts-list__container / .posts-list__title (main.css)
   so "Featured" lines up with "Latest Posts" below it. */
.featured-posts {
    margin-bottom: 3.25rem;
}

.featured-posts .posts-list__title {
    margin-bottom: 1.75rem;
}

.featured-posts__viewport {
    position: relative;
}

.featured-posts-swiper {
    overflow: hidden;
    padding: 0.25rem 0.125rem 0.5rem;
}

/* Swiper leaves slide heights to their own content (`align-items:
   flex-start`) by default; stretch every slide in a row to match the
   tallest one so all cards end up the same size. */
.featured-posts-swiper .swiper-wrapper {
    align-items: stretch;
}

.featured-posts-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.featured-post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-card);
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.featured-post-card:hover,
.featured-post-card:focus-within {
    border-color: var(--cobalt);
    box-shadow: var(--shadow-raised);
}

.featured-post-card__thumb {
    display: block;
    aspect-ratio: 2 / 1;
    background: var(--panel);
}

.featured-post-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-post-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0.625rem 0.75rem 0.75rem;
}

.featured-post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.featured-post-card__tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: var(--panel);
    border-radius: 0.3rem;
}

.featured-post-card__tag_accent {
    color: #ffffff;
    background: var(--mint);
}

.featured-post-card__title {
    flex: 1 1 auto;
    margin-bottom: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-post-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.featured-post-card:hover .featured-post-card__title a,
.featured-post-card__title a:hover,
.featured-post-card__title a:focus {
    color: var(--cobalt);
    text-decoration: none;
}

.featured-post-card__link {
    align-self: flex-start;
    margin-top: 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--cobalt);
    text-decoration: none;
}

.featured-post-card__link i {
    margin-left: 0.25rem;
    font-size: 0.6875rem;
}

.featured-post-card__link:hover,
.featured-post-card__link:focus {
    color: var(--cobalt-hover);
    text-decoration: none;
}

/* --- Prev / next buttons --- */

.featured-posts__nav {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 50%;
    box-shadow: var(--shadow-raised);
    transform: translateY(-50%);
    font-size: 0.8125rem;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;
}

.featured-posts__nav:hover,
.featured-posts__nav:focus {
    color: var(--cobalt);
    border-color: var(--cobalt);
}

.featured-posts__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.featured-posts__nav_prev {
    left: -2.75rem;
}

.featured-posts__nav_next {
    right: -2.75rem;
}

/* --- Pagination bullets --- */

.featured-posts__pagination {
    position: relative;
    margin-top: 1rem;
    text-align: center;
}

.featured-posts__pagination .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem;
    background: var(--rule-strong);
    opacity: 1;
}

.featured-posts__pagination .swiper-pagination-bullet-active {
    background: var(--cobalt);
}

@media (max-width: 991px) {
    .featured-posts__nav {
        display: none;
    }
}

@media (max-width: 599px) {
    .featured-post-card__body {
        padding: 1rem;
    }
}