/* Responsive Styles - Mobile First Approach */

/* Mobile (default styles in style.css) */

/* Small tablets and large phones (landscape) */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    /* Header */
    .header-content {
        flex-direction: column;
        gap: 15px;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .logo-img {
        height: 40px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .btn-install {
        font-size: 12px;
        padding: 8px 16px;
    }

    .install-icon {
        font-size: 16px;
    }

    /* Search Section */
    .search-section {
        padding: 40px 0;
    }

    .main-title {
        font-size: 32px;
    }

    .subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .search-bar {
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-radius: 12px;
    }

    .search-bar input {
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid var(--border-color);
    }

    .search-btn {
        border-radius: 0 0 12px 12px;
        width: 100%;
    }

    /* Alphabet Navigation */
    .alphabet-section {
        padding: 20px 0;
    }

    .alphabet-nav {
        gap: 8px;
    }

    .alphabet-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Keerthanam Grid */
    .keerthanam-section {
        padding: 30px 0;
    }

    .keerthanam-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .keerthanam-card-title {
        font-size: 16px;
    }

    .keerthanam-card-subtitle {
        font-size: 13px;
    }

    /* Keerthanam Detail */
    .main-content {
        padding: 20px 0;
    }

    .keerthanam-title {
        font-size: 28px;
    }

    .keerthanam-title-english {
        font-size: 18px;
    }

    .video-container {
        padding: 15px;
    }

    .video-actions {
        flex-direction: column;
    }

    .video-actions .btn {
        width: 100%;
    }

    .lyrics-container {
        padding: 25px;
    }

    .lyrics-heading {
        font-size: 24px;
    }

    .lyrics-content {
        font-size: 16px;
        line-height: 1.8;
    }

    .keerthanam-footer {
        flex-direction: column;
    }

    .keerthanam-footer .btn {
        width: 100%;
    }

    /* Footer */
    .footer {
        padding: 20px 0;
        margin-top: 40px;
    }

    .footer-content a {
        display: block;
        margin: 5px 0;
    }
}

/* Extra small devices (phones, portrait) */
@media (max-width: 480px) {
    .main-title {
        font-size: 26px;
    }

    .subtitle {
        font-size: 14px;
    }

    .keerthanam-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .keerthanam-thumbnail {
        height: 200px;
    }

    .alphabet-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .keerthanam-title {
        font-size: 24px;
    }

    .lyrics-container {
        padding: 20px;
    }
}

/* Large tablets and small desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    .keerthanam-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large desktops */
@media (min-width: 1025px) {
    .keerthanam-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch-friendly button sizes */
@media (pointer: coarse) {
    .btn,
    .alphabet-btn,
    .search-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .keerthanam-card {
        min-height: 44px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 896px) and (orientation: landscape) {
    .search-section {
        padding: 30px 0;
    }

    .main-title {
        font-size: 28px;
    }

    .subtitle {
        margin-bottom: 20px;
    }

    .alphabet-section {
        padding: 15px 0;
    }

    .keerthanam-section {
        padding: 20px 0;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #E0E0E0;
        --text-light: #B0B0B0;
        --bg-light: #1A1A1A;
        --bg-white: #2C2C2C;
        --border-color: #404040;
    }

    body {
        background-color: var(--bg-light);
    }

    .keerthanam-card,
    .video-container,
    .lyrics-container {
        background: var(--bg-white);
    }

    .search-bar {
        background: var(--bg-white);
    }

    .search-bar input {
        background: var(--bg-white);
        color: var(--text-dark);
    }

    .alphabet-section {
        background-color: var(--bg-white);
    }

    .alphabet-btn {
        background-color: var(--bg-white);
        color: var(--text-dark);
    }
}