/**
 * Responsive Styles
 * Mobile-first approach
 */

/* ========================================
   Base Mobile Fixes
   ======================================== */

/* Touch targets minimum 44x44px - mobile only */
@media (max-width: 1023px) {
    .header-bar button,
    .header-bar a,
    .controls-bar button,
    .info-panel button,
    .modal button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Readable font sizes */
body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* ========================================
   Small Phones (320px - 374px)
   ======================================== */
@media (max-width: 374px) {
    .header-bar {
        padding: 0 var(--space-sm);
    }
    
    .header-logo {
        font-size: 16px;
    }
    
    .info-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .controls-bar {
        padding: 0 var(--space-xs);
        gap: var(--space-xs);
    }
    
    .controls-bar button {
        padding: var(--space-xs);
    }
    
    .modal-content {
        width: 95%;
        margin: var(--space-sm);
        max-height: 90vh;
    }
    
    .thumbnail-strip {
        height: 60px;
    }
    
    .thumbnail-strip img {
        width: 50px;
        height: 50px;
    }
}

/* ========================================
   Standard Phones (375px - 413px)
   ======================================== */
@media (max-width: 413px) {
    .header-bar {
        height: 50px;
    }
    
    .info-panel {
        width: 100%;
        right: 0;
        left: 0;
        top: auto;
        bottom: 0;
        max-height: 50vh;
        border-radius: var(--space-md) var(--space-md) 0 0;
    }
    
    .info-panel.expanded {
        max-height: 70vh;
    }
    
    .keywords-bar {
        display: none;
    }
    
    .search-panel {
        width: 100%;
        left: 0;
        right: 0;
    }
    
    .search-panel .filter-row {
        flex-wrap: wrap;
    }
    
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
}

/* ========================================
   Large Phones (414px - 767px)
   ======================================== */
@media (max-width: 767px) {
    :root {
        --header-height: 50px;
        --controls-height: 50px;
        --info-panel-width: 100%;
    }
    
    .header-bar {
        padding: 0 var(--space-md);
    }
    
    .header-actions {
        gap: var(--space-xs);
    }
    
    .controls-bar {
        bottom: 0;
        left: 0;
        right: 0;
        /* Removed justify-content: space-around - conflicts with flex layout */
        padding: var(--space-sm);
    }
    
    /* Ensure gallery-position-bar still fills available space on mobile */
    .controls-bar .gallery-position-bar {
        flex: 1;
        min-width: 0;
    }
    
    .controls-right {
        flex-shrink: 0;
    }
    
    .view-mode-buttons {
        display: none;
    }
    
    .timer-dropdown {
        display: none;
    }
    
    .thumbnail-strip {
        bottom: var(--controls-height);
        height: 70px;
    }
    
    .info-panel {
        position: fixed;
        width: 100%;
        max-height: 60vh;
        top: auto;
        bottom: 0;
        transform: translateY(100%);
        transition: transform var(--transition-normal);
    }
    
    .info-panel.visible {
        transform: translateY(0);
    }
    
    .mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        padding: var(--space-sm);
    }
    
    .modal-content {
        width: 95%;
        max-height: 85vh;
        margin: 5vh auto;
    }
    
    .dashboard-modal .tabs {
        flex-direction: column;
        width: 100%;
    }
    
    .dashboard-modal .tab-content {
        padding: var(--space-md);
    }
    
    /* Hide tooltips on touch */
    .tooltip {
        display: none !important;
    }
}

/* ========================================
   Tablets (768px - 1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .info-panel {
        width: 280px;
    }
    
    .mosaic-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .search-panel {
        width: 400px;
    }
    
    .modal-content {
        width: 80%;
        max-width: 600px;
    }
    
    .dashboard-modal .tabs {
        flex-direction: row;
    }
}

/* ========================================
   Small Laptops (1024px - 1279px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
    .mosaic-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .info-panel {
        width: 300px;
    }
}

/* ========================================
   Desktop Thumbnail Strip - Doubled Height
   ======================================== */
@media (min-width: 1024px) {
    /* Small: 70px -> 140px height, 54px -> 108px thumbnail */
    .thumbnail-strip[data-size="small"] {
        --thumbnail-height: 140px;
    }
    
    .thumbnail-strip[data-size="small"] .thumbnail {
        height: 108px;
    }
    
    .thumbnail-strip[data-size="small"] .thumbnail img {
        height: 108px;
    }
    
    /* Medium: 90px -> 180px height, 74px -> 148px thumbnail */
    .thumbnail-strip[data-size="medium"] {
        --thumbnail-height: 180px;
    }
    
    .thumbnail-strip[data-size="medium"] .thumbnail {
        height: 148px;
    }
    
    .thumbnail-strip[data-size="medium"] .thumbnail img {
        height: 148px;
    }
    
    /* Large: 120px -> 240px height, 104px -> 208px thumbnail */
    .thumbnail-strip[data-size="large"] {
        --thumbnail-height: 240px;
    }
    
    .thumbnail-strip[data-size="large"] .thumbnail {
        height: 208px;
    }
    
    .thumbnail-strip[data-size="large"] .thumbnail img {
        height: 208px;
    }
    
    /* Also update the base thumbnail-strip height for desktop */
    .thumbnail-strip {
        --thumbnail-height: 160px;
    }
    
    /* Update info overlay position to match desktop thumbnail height */
    .image-info-overlay {
        bottom: calc(var(--controls-height) + 160px);
    }
    
    .thumbnail {
        height: calc(var(--thumbnail-height) - var(--space-md) - 8px);
    }
    
    /* Adjust image info overlay position for larger thumbnails */
    .thumbnail-strip[data-size="small"] ~ .controls-bar ~ .image-info-overlay,
    body:has(.thumbnail-strip[data-size="small"]) .image-info-overlay {
        bottom: calc(var(--controls-height) + 140px + 10px);
    }
    
    .thumbnail-strip[data-size="medium"] ~ .controls-bar ~ .image-info-overlay,
    body:has(.thumbnail-strip[data-size="medium"]) .image-info-overlay {
        bottom: calc(var(--controls-height) + 180px + 10px);
    }
    
    .thumbnail-strip[data-size="large"] ~ .controls-bar ~ .image-info-overlay,
    body:has(.thumbnail-strip[data-size="large"]) .image-info-overlay {
        bottom: calc(var(--controls-height) + 240px + 10px);
    }
}

/* ========================================
   Desktops (1280px+)
   ======================================== */
@media (min-width: 1280px) {
    .mosaic-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .info-panel {
        width: 320px;
    }
}

/* ========================================
   Touch Device Optimizations
   ======================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, a, .clickable {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects */
    .header-bar button:hover,
    .controls-bar button:hover {
        transform: none;
        background: transparent;
    }
    
    /* Swipe hint */
    .swipe-hint {
        display: block;
    }
}

@media (hover: hover) and (pointer: fine) {
    .swipe-hint {
        display: none;
    }
}

/* ========================================
   Landscape Phone
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .header-bar {
        height: 40px;
    }
    
    .controls-bar {
        height: 40px;
    }
    
    .info-panel {
        max-height: 100%;
        width: 250px;
        top: 0;
        bottom: 0;
        right: 0;
    }
    
    .thumbnail-strip {
        display: none;
    }
    
    .modal-content {
        max-height: 95vh;
    }
}

/* ========================================
   Safe Areas (iPhone X+)
   ======================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    .controls-bar {
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }
    
    .info-panel {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .header-bar {
        padding-top: env(safe-area-inset-top);
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-overlay: rgba(18, 18, 18, 0.5);
    }
}

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