/* =========================================
   PHASE 42: DISCOVERY (Explore)
   ========================================= */

/* Control Room (Top Panel) */
.explore-controls {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.02);
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.search-bar-container {
    margin-bottom: 25px;
    position: relative;
}

.search-input-explore {
    width: 100%;
    padding: 15px 50px 15px 25px;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.search-input-explore:focus {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.3);
    outline: none;
}

.search-icon-explore {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.2rem;
}

/* Filter Chips */
.filter-chips {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;  /* Changed from overflow-x: auto to wrap tags */
    padding-bottom: 10px;
    scrollbar-width: none;
    /* Firefox */
}

.filter-chips::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

/* The Grid (Results) */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 30px;
}

/* Using existing .lib-card styles from library.css or similar, 
   but defining explicit ones here to rely less on other files if needed, 
   or we can reuse classes. Let's make explore cards slightly different or reuse.
   Reusing simple card structure.
*/

.explore-card {
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: block;
    animation: fadeIn 0.5s ease;
}

.explore-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(138, 43, 226, 0.3);
}

.explore-cover {
    width: 100%;
    aspect-ratio: 2 / 3;  /* 2:3 ratio for light novel covers */
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 2rem;
}

.explore-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-info {
    padding: 15px;
}

.explore-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-author {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.explore-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 0.7rem;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) {
    .explore-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .explore-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .explore-cover {
        aspect-ratio: 2 / 3;  /* Maintain 2:3 on mobile too */
    }
}