/**
 * Inline Carousel — Styles
 */

.ic-carousel {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    --ic-gap: 12px;
    --ic-mobile: 2;
    --ic-tablet: 3;
    --ic-desktop: 5;
    --ic-visible: var(--ic-mobile);
    --ic-aspect: 3 / 4;
}

@media (min-width: 600px) {
    .ic-carousel { --ic-visible: var(--ic-tablet); }
}
@media (min-width: 960px) {
    .ic-carousel { --ic-visible: var(--ic-desktop); }
}

.ic-carousel *,
.ic-carousel *::before,
.ic-carousel *::after {
    box-sizing: border-box;
}

.ic-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}

.ic-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ic-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translate3d(0, 0, 0);
    transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.ic-carousel.is-dragging .ic-track {
    transition: none;
}

.ic-slide {
    flex: 0 0 auto;
    width: calc(
        (100% - (var(--ic-gap) * (var(--ic-visible) - 1)))
        / var(--ic-visible)
    );
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-drag: none;
    aspect-ratio: var(--ic-aspect);
    overflow: hidden;
    border-radius: 4px;
}

.ic-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}

.ic-link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
    pointer-events: auto;
}
.ic-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Arrows */
.ic-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: opacity 200ms, background 200ms, transform 200ms;
    z-index: 2;
}
.ic-arrow:hover { background: #fff; }
.ic-arrow:active { transform: translateY(-50%) scale(0.95); }
.ic-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.ic-arrow-prev { left: 8px; }
.ic-arrow-next { right: 8px; }

@media (max-width: 599px) {
    .ic-arrow { width: 30px; height: 30px; }
    .ic-arrow svg { width: 16px; height: 16px; }
}

/* Dots */
.ic-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.ic-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 200ms, transform 200ms;
}
.ic-dot:hover { background: #999; }
.ic-dot.is-active { background: #222; transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
    .ic-track { transition: none; }
}