/* Responsive Design Styles */

/* Laptop screen optimizations for Full HD 15-inch displays */
@media (max-height: 1080px) and (min-width: 1024px) {
    .app {
        padding: 0.75rem;
    }

    header {
        margin-bottom: 0.75rem;
    }

    h1 {
        font-size: 2rem;
        margin: 0 0 4px 0;
    }

    p.lead {
        font-size: 1rem;
    }

    .locator-grid,
    .images {
        gap: 14px;
        margin-bottom: 0.75rem;
    }

    .similarity-container {
        gap: 0.75rem;
    }

    .slider-section {
        padding: 1.25rem;
        gap: 12px;
    }
}

@media (max-height: 900px) {
    .app {
        padding: 0.5rem;
    }

    header {
        margin-bottom: 0.5rem;
    }

    h1 {
        font-size: 2rem;
        margin: 0 0 4px 0;
    }

    .locator-grid,
    .images {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 1024px) {
    body {
        padding: 12px;
        align-items: flex-start;
    }

    .app {
        padding: 12px;
    }

    .images,
    .locator-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    h1 {
        font-size: 1.3rem;
    }

    .card {
        aspect-ratio: 4 / 1;
    }

    .imgwrap.aspect-10-1 {
        aspect-ratio: 4 / 1;
    }
}

@media (max-width: 768px) {
    body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: auto;
        padding-bottom: env(safe-area-inset-bottom, 20px);
    }

    .app {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        min-height: calc(var(--vh, 1vh) * 100);
        overflow: visible;
        padding-bottom: 2rem;
    }

    h1 {
        font-size: 1.1rem;
    }

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

    .actions button,
    .input-group button,
    .input-group input[type=text],
    .similarity-container>button {
        width: 100%;
        max-width: 100%;
    }

    .input-group {
        align-items: stretch;
    }

    .images,
    .locator-grid {
        gap: 10px;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        padding: 1rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 1rem;
        /* height: calc(100vh - 120px); */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #task-container {
        height: auto;
    }

    .landing-title {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    .landing-page {
        padding: 1.5rem 0.75rem 2rem;
        min-height: auto;
        justify-content: flex-start;
    }

    .landing-hero {
        margin-bottom: 2rem;
    }

    .landing-subtitle {
        font-size: 1rem;
    }

    .landing-cards {
        grid-template-columns: 1fr;
    }

    .landing-features {
        flex-direction: column;
        align-items: flex-start;
    }

    .landing-start-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* Landing Footer - Mobile */
    .landing-footer {
        padding: 1.5rem 0.75rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-divider {
        width: 100%;
        height: 1px;
        background: var(--border);
    }

    .footer-section {
        width: 100%;
    }
}