/* Mobile Card Styles */

@media (max-width: 768px) {

    /* Ensure card links are clickable */
    #home-content .card-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10 !important;
        text-indent: -9999px;
        overflow: hidden;
        background: transparent;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        touch-action: manipulation;
    }

    /* Fix for lock icons in card-links - completely hide them on mobile */
    #home-content .card-link i.fa-lock,
    #home-content .card-link i.fa-solid.fa-lock {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        font-size: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* Visual indicator protected cards */
    #home-content .card:has(.card-link[href="epilepsy_rotation.html"])::after,
    #home-content .card:has(.card-link[href="question_bank.html"])::after {
        content: "🔒";
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 12px;
        z-index: 15;
        pointer-events: none;
        opacity: 0.6;
        display: block !important;
    }

    body.dark #home-content .card:has(.card-link[href="epilepsy_rotation.html"])::after,
    body.dark #home-content .card:has(.card-link[href="question_bank.html"])::after {
        opacity: 0.8;
    }

    /* Prevent card content interference */
    #home-content .card i,
    #home-content .card h3,
    #home-content .card p,
    #home-content .card .content-wrapper {
        pointer-events: none;
        position: relative;
        z-index: 1;
    }

    /* Ensure card itself is clickable */
    #home-content .card {
        pointer-events: auto !important;
        cursor: pointer !important;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Active state */
    #home-content .card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    /* --- CARD GRID --- */
    .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        padding-bottom: 20px !important;
    }

    /* --- CARD STYLING --- */
    #home-content .card {
        border-radius: 16px !important;
        /* Smaller radius for smaller cards */
        height: 100px !important;
        /* Approximately half of previous square height */
        aspect-ratio: unset !important;
        /* Remove square lock */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 4px !important;
        /* Tight padding */
        border: none !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Compact Icon */
    #home-content .card i {
        font-size: 32px !important;
        /* Smaller icon */
        color: rgba(255, 255, 255, 0.95) !important;
        margin-bottom: 6px !important;
        background: none !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        flex: none !important;
    }

    /* Compact Title */
    #home-content .card h3 {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: white !important;
        margin: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        line-height: 1.1 !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Hide description on mobile for compact view */
    #home-content .card p {
        display: none !important;
    }

    /* Card Gradients */

    /* Blue - Flashlight */
    #home-content .card[data-color="blue"] {
        background: linear-gradient(135deg, #2ab5f6 0%, #3b82f6 100%) !important;
    }

    /* Yellow - Seizure */
    #home-content .card[data-color="yellow"] {
        background: linear-gradient(135deg, #facc15 0%, #ca8a04 100%) !important;
    }

    /* Red - Stroke */
    #home-content .card[data-color="red"] {
        background: linear-gradient(135deg, #ff4d6d 0%, #e11d48 100%) !important;
    }

    /* Green - Dizziness */
    #home-content .card[data-color="green"] {
        background: linear-gradient(135deg, #2dd4bf 0%, #059669 100%) !important;
    }

    /* Blue-Dark/Teal - Weakness Pathway */
    #home-content .card[data-color="blue-dark"] {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    }

    /* Purple - Headache */
    #home-content .card[data-color="purple"] {
        background: linear-gradient(135deg, #d946ef 0%, #a21caf 100%) !important;
    }

    /* Fallback/Others */
    #home-content .card[data-color="teal"] {
        background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
    }

    #home-content .card[data-color="orange"] {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    }

    #home-content .card[data-color="indigo"] {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    }

    #home-content .card[data-color="pink"] {
        background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    }

    /* Dark mode support */
    body.dark #home-content .card {
        background: #27272a !important;
        /* zinc-800 */
        box-shadow: none !important;
    }

    body.dark #home-content .card i {
        background: rgba(79, 70, 229, 0.2) !important;
        color: #a5b4fc !important;
    }

    /* FORCE WHITE TEXT OVERRIDES (Final Fixes) */
    html body #home-content .card h3,
    html body #home-content .card p,
    html body #home-content .card i,
    html body #home-content .card[data-color="yellow"] h3,
    html body #home-content .card[data-color="yellow"] p,
    html body #home-content .card[data-color="yellow"] i {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Hover state - Keep White */
    html body.dark #home-content .card:hover h3,
    html body.dark #home-content .card:hover p,
    html body #home-content .card:hover h3,
    html body #home-content .card:hover p {
        color: #ffffff !important;
    }

}