/* =====================================================================
   JJ Textile — Blog Post Carousel
   Shows 3 posts at a time, scroll-snap based (works with mouse drag,
   trackpad, and touch, plus prev/next buttons).
   ===================================================================== */

/* The gap above this section (from whatever comes before it) now matches
   the same 6px "separator" thickness used between post cards and between
   tiles in the Image Collage section, so all three read as one consistent
   spacing. The heading keeps a little more breathing room of its own
   below it (--jjt-blog-gap) since it sits inside the normal, padded
   .container rather than flush against the edge-to-edge card row. */
:root {
    --jjt-blog-gap: 1.5rem;
    --jjt-blog-separator: 6px; /* matches .jjt-collage__grid's gap */
}

.jjt-blog-carousel {
    padding: var(--jjt-blog-separator) 0 3rem;
}

.jjt-blog-carousel__heading {
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 var(--jjt-blog-gap);
}

/* Full-bleed to the browser edge, same technique as .jjt-collage__grid —
   .container (which caps width) only wraps the heading now, not this. */
.jjt-blog-carousel__viewport {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.jjt-blog-carousel__track {
    display: flex;
    align-items: stretch; /* keeps every card the same height regardless of title/excerpt length, so the gap between cards always reads as even */
    gap: var(--jjt-blog-separator);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.jjt-blog-carousel__card {
    flex: 0 0 calc((100% - (var(--jjt-blog-separator) * 2)) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.jjt-blog-carousel__card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin-bottom: 0.4rem;
}

/* Now that the card row runs edge-to-edge with the browser, the text below
   each image needs its own inset padding so the title/meta/excerpt on the
   first and last card don't sit flush against the browser edge — the
   images themselves stay full-bleed (no padding) as requested. */
.jjt-blog-carousel__card h4,
.jjt-blog-carousel__card .jjt-blog-carousel__date,
.jjt-blog-carousel__card p {
    padding: 0 0.85rem;
}

.jjt-blog-carousel__card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #111;
}

.jjt-blog-carousel__card .jjt-blog-carousel__date {
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.35rem;
}

.jjt-blog-carousel__card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #555;
    margin: 0;
}

.jjt-blog-carousel__arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e2e2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* Now that the viewport runs full-bleed to the browser edge (rather than
   sitting in a padded .container), the arrows sit just inside that edge
   instead of overflowing past it into nothing. */
.jjt-blog-carousel__arrow--prev { left: 1rem; }
.jjt-blog-carousel__arrow--next { right: 1rem; }

@media (max-width: 991px) {
    .jjt-blog-carousel__card {
        flex: 0 0 calc((100% - var(--jjt-blog-separator)) / 2);
    }
}

@media (max-width: 600px) {
    .jjt-blog-carousel__card {
        flex: 0 0 85%;
    }
    .jjt-blog-carousel__arrow { display: none; }
}