/* Hero Carousel Styles */
/* Swipeable image carousel for posts tagged with #carousel */

/* Container - matches feature image positioning */
.hero-carousel {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    max-width: 1200px;
}

/* Swiper container */
.hero-carousel__swiper {
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius, 8px);
}

/* Swiper wrapper - needed for proper layout */
.hero-carousel__swiper .swiper-wrapper {
    align-items: flex-start;
    transition: height 0.3s ease;
}

/* Individual slides */
.hero-carousel__swiper .swiper-slide {
    position: relative;
    background: transparent;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
}

/* Slide images */
.hero-carousel__swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Individual slides should size to their content */
.hero-carousel__swiper .swiper-slide {
    height: auto !important;
}

/* Lightbox link wrapper */
.hero-carousel__swiper .swiper-slide a {
    display: block;
    cursor: zoom-in;
    position: relative;
    z-index: 1;
}

/* Caption bar below image (desktop) */
.hero-carousel__caption {
    position: relative;
    padding: 0.75rem 1rem;
    background: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-text-secondary, #555);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    border-bottom-left-radius: var(--border-radius, 8px);
    border-bottom-right-radius: var(--border-radius, 8px);
}

/* Remove border radius from image when caption present */
.hero-carousel__swiper .swiper-slide a:has(+ .hero-carousel__caption) img,
.hero-carousel__swiper .swiper-slide img:has(+ .hero-carousel__caption) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Navigation arrows */
.hero-carousel__swiper .swiper-button-prev,
.hero-carousel__swiper .swiper-button-next {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 20; /* Ensure arrows are above the images and links */
}

.hero-carousel__swiper .swiper-button-prev:hover,
.hero-carousel__swiper .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.05);
}

.hero-carousel__swiper .swiper-button-prev::after,
.hero-carousel__swiper .swiper-button-next::after {
    font-size: 18px;
    font-weight: bold;
}

.hero-carousel__swiper .swiper-button-prev {
    left: 12px;
}

.hero-carousel__swiper .swiper-button-next {
    right: 12px;
}

/* Slide counter */
.hero-carousel__counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #666);
    font-variant-numeric: tabular-nums;
}

.hero-carousel__counter .hero-carousel__current {
    font-weight: 600;
    color: var(--color-text-primary, #333);
}

/* Hide source gallery in post body */
.kg-gallery-card.hero-carousel-source,
.kg-gallery-card.hero-carousel-source + *:empty,
figure.kg-card.hero-carousel-source {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Smaller caption text on mobile */
    .hero-carousel__caption {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* Hide arrows on mobile - use swipe instead */
    .hero-carousel__swiper .swiper-button-prev,
    .hero-carousel__swiper .swiper-button-next {
        display: none;
    }

    /* Smaller counter on mobile */
    .hero-carousel__counter {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }

}

/* Dark mode support */

[data-theme="dark"] .hero-carousel__caption {
    background: var(--color-bg-secondary, #2a2a2a);
    color: var(--color-text-secondary, #aaa);
}

[data-theme="dark"] .hero-carousel__counter {
    color: var(--color-text-secondary, #999);
}

[data-theme="dark"] .hero-carousel__counter .hero-carousel__current {
    color: var(--color-text-primary, #eee);
}

/* Small feature variant - narrower width */
.gh-post-page--small-feature .hero-carousel {
    max-width: 687px;
}

.gh-post-page--small-feature .hero-carousel__swiper .swiper-slide img {
    aspect-ratio: 16 / 10;
}

/* Swiper disabled state (single image fallback) */
.hero-carousel__swiper.swiper-single .swiper-button-prev,
.hero-carousel__swiper.swiper-single .swiper-button-next {
    display: none;
}

.hero-carousel__swiper.swiper-single + .hero-carousel__counter {
    display: none;
}