/* Latest News Carousel — NerdWallet-style Coverflow */

/* ---- Sizing tokens ---- */
.lnc-section {
    --lnc-gap: 8px;
    --lnc-active-width: 300px;
    --lnc-active-height: 280px;
    --lnc-adjacent-width: 120px;
    --lnc-adjacent-height: 220px;
    --lnc-distant-width: 70px;
    --lnc-distant-height: 200px;
}
@media (min-width: 640px) {
    .lnc-section {
        --lnc-gap: 12px;
        --lnc-active-width: 420px;
        --lnc-active-height: 340px;
        --lnc-adjacent-width: 160px;
        --lnc-adjacent-height: 270px;
        --lnc-distant-width: 100px;
        --lnc-distant-height: 240px;
    }
}
@media (min-width: 1024px) {
    .lnc-section {
        --lnc-gap: 24px;
        --lnc-active-width: 700px;
        --lnc-active-height: 450px;
        --lnc-adjacent-width: 202px;
        --lnc-adjacent-height: 402px;
        --lnc-distant-width: 202px;
        --lnc-distant-height: 354px;
    }
}

/* ---- Viewport ---- */
.lnc-viewport {
    max-width: 100%;
}

/* ---- Track (relative container for absolute cards) ---- */
.lnc-track {
    position: relative;
    height: var(--lnc-active-height);
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.lnc-track:active { cursor: grabbing; }

/* ---- Cards (absolutely positioned) ---- */
.lnc-card {
    transition:
        transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        width 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        height 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, width, height, opacity;
}

/* ---- Gradient overlay ---- */
.lnc-card-gradient {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}
@media (min-width: 1024px) {
    .lnc-card-gradient {
        background: linear-gradient(180deg, rgba(0,0,0,0) 50.2%, #000 100%);
    }
}

/* ---- Non-active cards: primary-color tint ---- */
.lnc-card[data-variant="adjacent"],
.lnc-card[data-variant="distant"] {
    background-color: var(--color-primary, #0566ab);
    border-radius: 0.75rem;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .lnc-card[data-variant="adjacent"],
    .lnc-card[data-variant="distant"] {
        border-radius: 1rem;
    }
}
.lnc-card[data-variant="adjacent"] article,
.lnc-card[data-variant="distant"] article {
    opacity: 0.45;
    transition: opacity 300ms ease;
}
.lnc-card[data-variant="adjacent"]:hover,
.lnc-card[data-variant="distant"]:hover,
.lnc-card[data-variant="adjacent"]:focus-within,
.lnc-card[data-variant="distant"]:focus-within {
    opacity: 1 !important;
}
.lnc-card[data-variant="adjacent"]:hover article,
.lnc-card[data-variant="distant"]:hover article,
.lnc-card[data-variant="adjacent"]:focus-within article,
.lnc-card[data-variant="distant"]:focus-within article {
    opacity: 1;
}

/* ---- Title clamp ---- */
/* Slightly loose line-height + padding so descenders aren’t clipped by line-clamp. */
.lnc-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    padding-bottom: 0.15em;
}

.lnc-card-meta [role="text"] {
    border-left: none !important;
    padding-left: 0 !important;
}

/* ---- Entrance animation ---- */
@keyframes lnc-pop-in {
    0%   { opacity: 0; transform: scale(0.96) translateY(16px); }
    60%  { opacity: 1; transform: scale(1.01) translateY(-2px); }
    100% { opacity: 1; transform: scale(1)    translateY(0);    }
}
.lnc-section {
    animation: lnc-pop-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    scroll-margin-top: 80px; /* offset for sticky site header */
}

/* ---- Mobile: same flex nav as desktop — equal gap before/after progress bar ---- */
@media (max-width: 639px) {
    .lnc-section .lnc-nav-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 1.5rem; /* matches md:gap-6 (24px) on desktop */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .lnc-nav-row .lnc-progress-bar {
        flex: 0 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        max-width: min(100%, calc(100vw - 8.5rem)); /* leave room for both arrow buttons + gaps */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .lnc-nav-row .lnc-progress-bar::-webkit-scrollbar {
        display: none;
    }
    .lnc-nav-row .lnc-progress-indicator {
        width: 12px;
        flex-shrink: 0;
    }
    .lnc-nav-row .lnc-progress-indicator.active {
        width: 28px;
    }
    .lnc-nav-row > button {
        flex: 0 0 auto;
        flex-shrink: 0;
    }
}

/* ---- Accessibility ---- */
.lnc-card:focus-within {
    outline: 2px solid var(--color-primary, #0566ab);
    outline-offset: 2px;
    border-radius: 1rem;
}

/* ---- Slider Progress Bar ---- */
.lnc-progress-bar {
    gap: 8px;
}

.lnc-progress-indicator {
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
    width: 16px;
    transition: width 300ms ease;
    cursor: pointer;
    padding: 0;
    border: none;
    display: block;
    flex-shrink: 0;
}

.lnc-progress-indicator.active {
    width: 40px;
}

.lnc-progress-fill {
    height: 100%;
    background-color: transparent;
    border-radius: 9999px;
    transition: width 100ms linear;
}

.lnc-progress-indicator.active .lnc-progress-fill {
    background-color: var(--color-primary, #0566ab);
}

/* ---- Category Dropdown ---- */
.lnc-cat-dropdown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
    border-top: 2px solid var(--color-primary, #0566ab);
    z-index: 49; /* sit below the sticky site header */
    padding: 4px 0;
    text-align: left;
}

.lnc-cat-option {
    display: block;
    width: calc(100% - 16px); /* leave equal gap on left & right */
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 400;
    color: #0f172a;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
    border-radius: 5px;
    margin: 3px 8px; /* 8px gap both sides */
}

.lnc-cat-option:hover {
    background: #f1f5f9;
    color: var(--color-primary, #0566ab);
}

.lnc-cat-option.active {
    color: var(--color-primary, #0566ab);
    font-weight: 600;
    background: #eff6ff;
}

/* Dark mode — class-based (matches theme dark toggle) */
.dark .lnc-cat-dropdown {
    background: #1e293b;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    border-top-color: var(--color-primary, #0566ab);
}
.dark .lnc-cat-option {
    color: #e2e8f0;
}
.dark .lnc-cat-option:hover {
    background: #334155;
    color: #93c5fd;
}
.dark .lnc-cat-option.active {
    background: #1e3a5f;
    color: #93c5fd;
}

/* ---- AJAX Category Transition ---- */

/* Fade out: slides scale down + fade */
.lnc-track--fading-out {
    animation: lnc-fade-out 300ms cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

/* Fade in: slides scale up + fade in */
.lnc-track--fading-in {
    animation: lnc-fade-in 500ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes lnc-fade-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.97) translateY(8px); }
}

@keyframes lnc-fade-in {
    0%   { opacity: 0; transform: scale(0.97) translateY(8px); }
    100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ---- Loading Overlay ---- */
.lnc-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: none;
}

.lnc-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--color-primary, #0566ab);
    border-radius: 50%;
    animation: lnc-spin 0.7s linear infinite;
}

.dark .lnc-spinner {
    border-color: rgba(255, 255, 255, 0.12);
    border-top-color: #93c5fd;
}

@keyframes lnc-spin {
    to { transform: rotate(360deg); }
}

/* ---- Category toggle arrow alignment ---- */
.lnc-cat-toggle-icon {
    display: inline-block;
    vertical-align: middle;
    transform-origin: center;
}