/* Responsive overrides - Mobile and accessibility adjustments */
/* MUST load LAST to override all component styles */

/* WP03: Small screen search placeholder optimization (<360px) */
@media (max-width: 359px) {
    /* Hide original placeholder and use shorter mobile version */
    #searchInput {
        font-size: 14px; /* Prevent zoom on iOS */
    }

    #searchInput::-webkit-input-placeholder {
        font-size: 14px;
        opacity: 0.7;
    }

    #searchInput::-moz-placeholder {
        font-size: 14px;
        opacity: 0.7;
    }

    #searchInput::placeholder {
        font-size: 14px;
        opacity: 0.7;
    }
}

/* Tablet and mobile optimizations */
@media (max-width: 768px) {
    .filters {
        flex-direction: column;
        gap: 1rem;
    }

    .filters-right {
        justify-content: flex-start;
    }

    .save-button .save-text {
        display: none;
    }

    .article-card {
        transform: none !important;
        transition: all 0.2s ease;
    }

    .article-card:hover {
        transform: none !important;
        box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2), var(--shadow-card);
    }

    .article-card:active {
        transform: scale(0.98) !important;
    }

    .article-card::after {
        display: none;
    }

    .article-card:hover::before {
        opacity: 0.5;
    }

    .empty-state {
        padding: 3rem 1.5rem;
        margin: 1.5rem auto;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .empty-state p {
        font-size: 1rem;
    }
}

/* Small mobile optimizations */
@media (max-width: 480px) {
    .filters-right {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .layout-switcher,
    .toggle-switch {
        margin-right: 0;
    }

    .empty-state {
        padding: 2.5rem 1rem;
        margin: 1rem auto;
    }

    .empty-state i {
        font-size: 2.5rem;
    }

    .empty-state p {
        font-size: 0.9375rem;
    }
}

/* Reduce motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    .article-card {
        transition: none;
    }

    .article-card:hover {
        transform: none;
    }

    .article-card::before,
    .article-card::after {
        transition: none;
    }

    .empty-state {
        animation: none;
    }

    .empty-state i {
        transition: none;
    }

    .empty-state:hover i {
        transform: none;
    }
}