/* =========================================
   TOUCH DEVICE OPTIMIZATIONS (Mobile/Tablet)
   ========================================= */

/* 1. Tab Interaction Fix */
@media (hover: none) {
    /* Remove hover styles on touch devices to prevent sticky hover state */
    .tab:hover {
        background: transparent;
        color: inherit;
        border-color: transparent;
    }
    
    /* Keep active state distinct */
    .tab.active {
        background: rgba(108, 92, 231, 0.15) !important;
        color: #fff !important;
        border-color: rgba(108, 92, 231, 0.4) !important;
    }

    /* Add active feedback (tap highlight) */
    .tab:active {
        background: rgba(255, 255, 255, 0.05);
        transform: scale(0.98);
    }
}

/* 2. Carousel Border Fix (Click Feedback) */
.feat-card {
    -webkit-tap-highlight-color: transparent; /* Remove standard grey tap box */
    outline: none !important;
}

.feat-card:focus, 
.feat-card:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important; /* Remove purple glow on click if unwanted */
}

/* 3. Mobile Article List Optimization */
@media (max-width: 768px) {
    .article-card {
        padding: 16px; /* Reduce padding slightly */
    }

    .article-card h3 {
        font-size: 1.1rem; /* Adjust title size */
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .article-card p {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Limit to 2 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .article-meta {
        font-size: 0.75rem;
    }
    
    /* Ensure lists don't look too sparse */
    .article-list {
        display: flex;
        flex-direction: column;
        gap: 16px; /* Tighter gap between articles */
    }
}