/* 
 * ARCHVIZBASE Mobile-Optimized CSS
 * Card-based layout with minimal spacing around links
 */

/* ===== Core Variables ===== */
:root {
    --mobile-vh: 1vh;
    --mobile-browser-bar-height: 0px;
    --min-touch-target: 30px; /* Further reduced touch target */
    --min-touch-spacing: 2px; /* Minimal spacing */
    
    /* Standard variables (from existing styles) */
    --bg-color: #f8f7f5;
    --text-color: #333333;
    --accent-color: #555555;
    --hover-color: #444444;
    --border-color: #e5e2dd;
    --header-bg: #f2f0ed;
    --table-header: #eae7e2;
    --table-row-hover: #f5f4f2;
    --button-bg: #666666;
    --button-hover: #555555;
    --input-bg: #ffffff;
    --input-border: #d9d6d1;
    --input-focus: #c2bfba;
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --success-text: #155724;
    --card-bg: #ffffff;
    --card-border: #e5e2dd;
    --card-shadow: rgba(0, 0, 0, 0.05);
}
  
/* ===== Mobile Viewport Fixes ===== */
@supports (-webkit-touch-callout: none) {
    html, body {
        height: -webkit-fill-available;
    }
    
    body {
        min-height: -webkit-fill-available;
        overflow-x: hidden;
    }
    
    .fixed-layout {
        height: calc(100vh - var(--mobile-browser-bar-height));
        min-height: -webkit-fill-available;
        max-height: -webkit-fill-available;
    }
}
  
/* ===== Mobile Layout ===== */
@media (max-width: 768px) {
    /* Compact header */
    .header-section {
        flex-direction: column;
        align-items: center;
        padding: 2px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0,0,0,0.05);
    }
    
    .title-section {
        margin-bottom: 0px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    h2 {
        font-size: 1.5rem;
        text-align: center;
    }
    
    /* Make Map View link smaller and more compact */
    .header-center {
        position: static;
        transform: none;
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .view-toggle {
        font-size: 0.8rem;
        padding: 0px 0;
        margin: 0;
    }
    
    /* Compress navigation links */
    .nav-links {
        gap: 12px;
        margin-top: 0;
        padding: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .nav-link {
        font-size: 0.8rem;
        padding: 2px 0;
    }
    
    /* Ultra compact filters */
    .filters-container {
        padding: 4px 8px;
        margin-top: 0;
    }
    
    .filters-container form {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 4px;
    }
    
    /* Make form elements consistent size */
    .filters-container input,
    .filters-container select,
    .filters-container button {
        height: 32px;
        padding: 0 8px;
        font-size: 0.9rem;
        min-height: 0;
    }
    
    /* Reduce the size of select dropdown arrows */
    .filters-container select {
        background-size: 12px;
        background-position: right 8px center;
        padding-right: 24px;
    }
    
    /* TIGHT RESULTS AREA - bring text closer together */
    .result-actions {
        display: flex;
        flex-direction: column; 
        align-items: center;
        gap: 0;
        margin: 0 0 5px 0;
        padding: 2px 0;
    }
    
    .result-count {
        font-size: 0.75rem;
        line-height: 1;
        padding: 0;
        margin: 0 0 1px 0;
    }
    
    .suggest-button {
        font-size: 0.75rem;
        line-height: 1;
        padding: 0;
        margin: 0;
        min-height: 0;
    }
    
    /* ===== ULTRA COMPACT CARD LAYOUT ===== */
    
    /* Hide the standard table on mobile */
    .table-header-container,
    .table-body-container {
        display: none !important;
    }
    
    /* Make the table container fit the cards */
    .table-container {
        display: block;
        overflow-y: auto;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Create the cards container */
    .mobile-cards-container {
        display: block;
        width: 100%;
    }
    
    /* Style each studio card */
    .studio-card {
        background-color: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 4px;
        margin-bottom: 6px;
        box-shadow: 0 1px 2px var(--card-shadow);
        overflow: hidden;
    }
    
    /* Studio name header */
    .studio-card-header {
        background-color: var(--table-header);
        padding: 6px 8px;
        border-bottom: 1px solid var(--card-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .studio-name {
        font-weight: 600;
        font-size: 0.95rem;
        margin: 0;
        color: var(--text-color);
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .studio-index {
        font-size: 0.8rem;
        color: var(--accent-color);
        min-width: 24px;
        text-align: center;
        padding: 2px 4px;
        background: rgba(0,0,0,0.05);
        border-radius: 10px;
    }
    
    /* Card content area */
    .studio-card-content {
        padding: 6px 8px;
    }
    
    /* Each field in the card */
    .studio-field {
        margin-bottom: 4px;
        display: flex;
        flex-direction: column;
    }
    
    .studio-field:last-child {
        margin-bottom: 0;
    }
    
    /* Special styling for website and Instagram fields */
    .studio-field:nth-child(1),
    .studio-field:nth-child(2) {
        margin-bottom: 0; /* No bottom margin for website and Instagram */
    }
    
    /* Location field gets a top margin to separate from links */
    .studio-field:nth-child(3) {
        margin-top: 4px;
    }
    
    /* Field labels - ULTRA COMPACT */
    .field-label {
        font-size: 0.65rem; /* Smaller font */
        color: var(--accent-color);
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.1; /* Tighter line height */
    }
    
    /* Field values - BASE STYLING */
    .field-value {
        font-size: 0.85rem;
        color: var(--text-color);
        line-height: 1.2;
        word-break: break-word;
        margin-top: 0;
    }
    
    /* SPECIAL STYLING FOR WEBSITE/INSTAGRAM LINKS */
    .studio-field:nth-child(1) .field-value,
    .studio-field:nth-child(2) .field-value {
        margin-top: -3px; /* Negative margin to pull links closer to labels */
    }
    
    /* Links in cards - MINIMAL HEIGHT */
    .field-value a {
        color: var(--accent-color);
        text-decoration: none;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        touch-action: manipulation;
        min-height: 22px; /* Minimal height that's still tappable */
        line-height: 22px; /* Match min-height */
        padding-top: 0;
        padding-bottom: 0;
    }
    
    /* Special styling for website/Instagram links */
    .studio-field:nth-child(1) .field-value a,
    .studio-field:nth-child(2) .field-value a {
        margin-bottom: 0;
    }
    
    .field-value a:hover,
    .field-value a:active {
        color: var(--hover-color);
        text-decoration: underline;
    }
    
    /* Location field - more prominent */
    .studio-field:nth-child(3) .field-label {
        margin-top: 1px; /* Slight spacing after links */
    }
    
    /* Empty state message */
    .no-results {
        padding: 20px;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-color);
        background: var(--bg-color);
        border-radius: 4px;
        margin: 10px 0;
    }
    
    /* Size field styling */
    .size-badge {
        display: inline-block;
        background-color: var(--table-header);
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 0.8rem;
        margin-top: 0;
    }
}
  
/* ===== Form Elements ===== */
@media (max-width: 768px) {
    /* Basic form containers */
    .form-container, .content-container {
        width: 100%;
        padding: 0 10px;
    }
    
    /* All form controls */
    input, 
    select, 
    textarea, 
    button {
        font-size: 16px; /* iOS zooming prevention size */
        width: 100%;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 3px;
    }
    
    /* Confirmation messages */
    .confirmation {
        padding: 8px;
        margin-bottom: 10px;
        text-align: center;
        font-size: 14px;
    }
}
  
/* ===== Landscape Mode ===== */
@media (max-width: 896px) and (orientation: landscape) {
    /* More horizontal layout */
    .header-section {
        flex-direction: row;
        align-items: center;
        padding: 3px 8px;
    }
    
    .title-section {
        margin-bottom: 0;
        width: auto;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    .header-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        margin: 0;
    }
    
    .nav-links {
        width: auto;
        margin-top: 0;
    }
    
    /* Two column filter layout for landscape */
    .filters-container {
        padding: 5px;
    }
    
    .filters-container form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }
    
    /* Make Apply button span full width */
    .filters-container button {
        grid-column: span 2;
    }
    
    /* Put result info side by side */
    .result-actions {
        flex-direction: row;
        justify-content: space-between;
    }
    
    /* Adjust card layout for landscape */
    .mobile-cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .studio-card {
        margin-bottom: 0;
    }
}
  
/* ===== iOS-specific adjustments ===== */
@supports (-webkit-touch-callout: none) {
    /* Fix for bouncy scroll behavior */
    body.fixed-layout {
        position: fixed;
        width: 100%;
    }
    
    /* Fix for iOS Safari bottom toolbar overlap */
    .table-container {
        padding-bottom: 75px;
    }
}