/* ═══════════════════════════════════════════
   Card Track Carousel — horizontal card rail
   Active card ~50% width, siblings peek on sides
   ═══════════════════════════════════════════ */

.cn-card-track {
    padding: var(--cn-space-2xl) var(--cn-space-lg);
    background: var(--cn-surface-alt);
}
.cn-card-track__container {
    max-width: 1200px;
    margin: 0 auto;
}
.cn-card-track__heading {
    margin: 0 0 var(--cn-space-lg);
    color: var(--cn-primary);
    font-size: var(--cn-text-2xl);
    font-weight: 700;
    line-height: var(--cn-leading-tight);
}

/* ── Rail: horizontal scroll container ── */
.cn-card-track__rail {
    display: flex;
    gap: var(--cn-space-lg);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--cn-space-xs) 0 var(--cn-space-lg);
}
.cn-card-track__rail::-webkit-scrollbar {
    display: none;
}

/* ── Individual card ── */
.cn-card-track__card {
    flex: 0 0 calc(50% - var(--cn-space-lg) / 2);
    scroll-snap-align: start;
    border-radius: var(--cn-radius-sm);
    transition: flex-basis .4s ease, opacity .4s ease;
    cursor: pointer;
}
.cn-card-track__card:not(.is-active) {
    flex-basis: calc(28% - var(--cn-space-lg) / 2);
    opacity: .6;
}
.cn-card-track__card:not(.is-active):hover {
    opacity: .85;
}

.cn-card-track__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--cn-radius-sm);
}
.cn-card-track__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cn-card-track__body {
    padding: var(--cn-space-sm) 0 0;
}
.cn-card-track__card-title {
    margin: 0 0 var(--cn-space-xs);
    color: var(--cn-primary);
    font-size: var(--cn-text-lg);
    font-weight: 700;
    line-height: var(--cn-leading-snug);
}
.cn-card-track__desc,
.cn-card-track__desc p {
    margin: 0;
    color: var(--cn-text-secondary);
    font-size: var(--cn-text-sm);
    line-height: var(--cn-leading-relaxed);
}
.cn-card-track__desc p + p {
    margin-top: var(--cn-space-xs);
}
.cn-card-track__card:not(.is-active) .cn-card-track__desc {
    display: none;
}

/* ── Footer: pagination + arrows ── */
.cn-card-track__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--cn-space-lg);
    padding-top: var(--cn-space-md);
    border-top: 1px solid var(--cn-border);
}
.cn-card-track__pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--cn-text-muted);
    font-size: var(--cn-text-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.cn-card-track__pagination > :first-child {
    color: var(--cn-primary);
    font-weight: 600;
}
.cn-card-track__arrows {
    display: flex;
    gap: 2px;
}
.cn-card-track__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--cn-primary);
    cursor: pointer;
    transition: color .2s;
}
.cn-card-track__arrow:hover {
    color: var(--cn-accent);
}
.cn-card-track__arrow:focus-visible {
    outline: 2px solid var(--cn-accent);
    outline-offset: 2px;
}
.cn-card-track__arrow:disabled {
    opacity: .25;
    cursor: default;
    pointer-events: none;
}
.cn-card-track__arrow svg {
    display: block;
}

/* ── Mobile: one card per screen ── */
@media (max-width: 640px) {
    .cn-card-track__card {
        flex: 0 0 calc(85% - var(--cn-space-lg) / 2);
    }
    .cn-card-track__card:not(.is-active) {
        flex-basis: calc(30% - var(--cn-space-lg) / 2);
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .cn-card-track__card {
        transition: none;
    }
    .cn-card-track__rail {
        scroll-behavior: auto;
    }
}

/* ── Keyframes ── */
@keyframes cn-card-track-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cn-card-track__card {
    animation: cn-card-track-enter .35s ease both;
}
.cn-card-track__card:nth-child(2) { animation-delay: .05s; }
.cn-card-track__card:nth-child(3) { animation-delay: .1s; }
.cn-card-track__card:nth-child(4) { animation-delay: .15s; }
.cn-card-track__card:nth-child(5) { animation-delay: .2s; }
.cn-card-track__card:nth-child(6) { animation-delay: .25s; }

@media (max-width: 640px) {
    .cn-card-track__card {
        flex: 0 0 calc(85% - var(--cn-space-lg) / 2);
    }
    .cn-card-track__card:not(.is-active) {
        flex-basis: calc(30% - var(--cn-space-lg) / 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cn-card-track__card {
        transition: none;
    }
    .cn-card-track__rail {
        scroll-behavior: auto;
    }
}