/* Base Styles */
body { 
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    background: #f8f9fa; 
    margin: 0; 
    color: #333; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header { 
    background: #007bff; 
    color: white; 
    padding: 10px 0; /* Slimmer header */
    text-align: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

header h1 { margin: 0; font-size: 1.5rem; }

/* --- The Focal Image (The Scrolling Fix) --- */
.focal-image { 
    text-align: center; 
    padding: 15px; 
    background: white;
}

.main-photo { 
    width: auto;
    max-width: 95%; /* Don't hit the edges */
    max-height: 55vh; /* THE FIX: Image will never be taller than 55% of the screen */
    height: auto;
    border-radius: 12px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    object-fit: contain; /* Keeps the robot looking right */
}

h2.sunny-days {
    color: #28a745; 
    margin: 10px 0; 
    font-size: 1.2rem;
}

/* --- Form Container (More Compact) --- */
.form-container { 
    max-width: 500px; 
    margin: 10px auto; 
    background: white; 
    padding: 15px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

.upload-form h2 { margin-top: 0; font-size: 1.1rem; color: #007bff; }

.upload-form input[type="text"], 
.upload-form textarea { 
    width: 100%; 
    padding: 8px; 
    margin: 5px 0; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-sizing: border-box; 
}

/* --- The Polaroid Wall --- */
.polaroid-container { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 20px; 
    padding: 20px; 
}

.polaroid { 
    background: white; 
    padding: 10px 10px 20px 10px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    width: 180px; /* Slightly smaller polaroids for better fit */
    position: relative; 
    transition: transform 0.3s; 
}

.pol-img { width: 100%; height: 150px; object-fit: cover; }

/* Mobile Optimizations */
@media (max-width: 600px) {
    .main-photo { max-height: 40vh; } /* Even smaller on phones */
    .polaroid { width: 140px; } /* Fits two side-by-side on most phones */
    header h1 { font-size: 1.2rem; }
}