/**
 * Main View Component
 *
 * Full-size photo display area that shows the selected image.
 * Supports photo ID overlay and optional date display.
 *
 * Usage:
 *   <div class="main-view">
 *     <img id="main-image" src="..." alt="...">
 *     <span class="photo-id">...</span>
 *     <span class="photo-date">...</span> (optional)
 *   </div>
 *
 * Dependencies:
 *   - base.css (for CSS custom properties)
 */

/* ==========================================================================
   Main View Container
   ========================================================================== */

.main-view {
    width: 100%;
    height: calc(100vh - 160px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-dark, #0a0a0a);
    overflow: hidden;
    position: relative;
}

.main-view img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   Photo ID Overlay
   ========================================================================== */

.main-view .photo-id {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--color-accent, #a78bfa);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 6px 14px;
    background-color: var(--color-bg-light, #141416);
    border: 1px solid var(--color-border-accent, #3c2a5e);
    border-radius: var(--radius-md, 4px);
}

/* ==========================================================================
   Photo Date Overlay (optional)
   ========================================================================== */

.main-view .photo-date {
    position: absolute;
    bottom: 20px;
    left: 140px;
    color: var(--color-text-muted, #666);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}