/* ============================================================
   NewestMembers Component
   Scope: <NewestMembers /> — horizontal scroller of new player
   cards with drag-to-scroll behavior and a closing CTA card.
   Used on Home.razor.
   ============================================================ */

.newest-members-section {
    margin-top: 3rem;
}

/* ── Header ── */
.newest-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 1.25rem;
}

.newest-members-title {
    margin: 0;
    color: var(--color-primary);
    font-size: 1.4rem;
    font-weight: var(--font-weight-extrabold);
}

.newest-members-subtitle {
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

    .newest-members-subtitle a {
        color: var(--color-link-hover) !important;
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
    }

        .newest-members-subtitle a:hover {
            color: var(--color-link) !important;
            text-decoration: underline;
        }

.btn-newest-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: var(--space-2) 1.1rem;
    background: var(--color-surface);
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

    .btn-newest-all:hover {
        background: var(--color-accent);
        color: var(--color-text-inverse);
    }

/* ── Horizontal scroll container ── */
.newest-members-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding: var(--space-4) 0.25rem 1.5rem;
    cursor: grab;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-border) transparent;
}

    .newest-members-scroll::-webkit-scrollbar {
        height: 6px;
    }

    .newest-members-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .newest-members-scroll::-webkit-scrollbar-thumb {
        background: var(--color-primary-border);
        border-radius: 3px;
    }

        .newest-members-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--color-primary);
        }

    .newest-members-scroll.dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

        .newest-members-scroll.dragging .newest-card-link,
        .newest-members-scroll.dragging .newest-cta-card {
            pointer-events: none;
        }

/* ── Card wrapper link ── */
.newest-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .newest-card-link:hover {
        transform: translateY(-10px);
    }

    /* Override PlayerCard hover so the parent handles it */
    .newest-card-link .player-card {
        pointer-events: none;
    }

/* ── Join date footer below card ── */
.newest-card-footer {
    margin-top: var(--space-2);
    text-align: center;
}

.newest-card-joined {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

/* ── CTA card ── */
.newest-cta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-shrink: 0;
    width: 195px;
    min-width: 195px;
    height: 278px;
    background: var(--color-card-bg);
    color: var(--color-primary);
    border: 2px dashed var(--color-primary-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color 0.2s, background-color 0.2s, transform 0.3s;
}

    .newest-cta-card:hover {
        background: var(--color-card-hover);
        border-color: var(--color-primary);
        transform: translateY(-6px);
    }

.newest-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px dashed var(--color-primary-border);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    transition: border-color 0.2s;
}

.newest-cta-card:hover .newest-cta-icon {
    border-color: var(--color-primary);
}

.newest-cta-text {
    padding: 0 var(--space-4);
    text-align: center;
}

    .newest-cta-text strong {
        display: block;
        color: var(--color-primary);
        font-size: 0.95rem;
        font-weight: var(--font-weight-bold);
    }

    .newest-cta-text span {
        display: block;
        margin-top: 4px;
        color: var(--color-text-muted);
        font-size: 0.78rem;
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .newest-members-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .newest-members-scroll {
        gap: var(--space-4);
        padding: 0.75rem 0.25rem 1.25rem;
    }

    /* Use small card size on mobile */
    .newest-card-link .player-card {
        width: 140px !important;
        height: 200px !important;
    }

    .newest-cta-card {
        width: 140px;
        min-width: 140px;
        height: 200px;
    }

    .newest-cta-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .newest-cta-text strong {
        font-size: 0.82rem;
    }

    .newest-cta-text span {
        font-size: 0.7rem;
    }
}