/* css/item-window.css */

@font-face {
    font-family: 'iA Writer Mono S Bold';
    src: url('../assets/fonts/iA Writer Mono/iAWriterMonoS-Bold.ttf') format('truetype'); 
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'iA Writer Mono S Regular';
    src: url('../assets/fonts/iA Writer Mono/iAWriterMonoS-Regular.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* Inherits base styles from .finder-window in window-frame.css */

.item-window {
    width: 700px; /* Increased default width */
    height: 500px; /* Increased default width */
    /* You might want to add min-width/height as well */
    min-width: 650px;
    min-height: 300px;
    background-color: #fff; /* Override base window background */
    backdrop-filter: none; /* Remove inherited blur */
    -webkit-backdrop-filter: none;
}

/* Specific styles for the item window */
.item-window .window-content {
    padding: 20px 40px; /* Top/Bottom 20px, Left/Right 40px */
    background-color: #fff; /* Set background to white */
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    overflow-y: auto; 
    /* Center content */
    display: flex;
    flex-direction: column;
    /* Hide scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* Hide scrollbar for WebKit browsers */
.item-window .window-content::-webkit-scrollbar {
    display: none;
}

.item-content-title {
    font-family: 'iA Writer Mono S Bold', monospace;
    font-size: 16px; /* Adjust size as needed */
    font-weight: bold; /* Explicitly set bold */
    color: #333; /* Black color */
    margin-bottom: 5px; /* Reduced space below the title */
    display: block; /* Ensure it takes its own line */
    /* Centered block with left-aligned text */
    max-width: 580px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.item-metadata {
    font-family: 'iA Writer Mono S Regular', monospace;
    font-size: 13px; /* Adjust size as needed */
    color: #555; /* Slightly lighter than content text */
    margin-bottom: 20px; /* Space below metadata block */
    /* Centered block with left-aligned text */
    max-width: 580px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.item-metadata p {
    margin: 2px 0; /* Small margin between date/location lines */
}

.item-media-container {
    margin-top: 20px; /* Space above the media block */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between media items */
    /* Centered block */
    max-width: 580px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.item-media-container img,
.item-media-container video,
.item-media-container model-viewer {
    width: 100%; /* Occupy container width */
    max-width: 100%; /* Max width relative to this container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra space below */
    border-radius: 6px; /* Optional rounded corners */
}

.item-media-container model-viewer {
    min-height: 300px; /* Give model viewer a default height */
    width: 100%;
}

/* Customize title bar if needed */
/* .item-window .title-bar { ... } */

/* Customize traffic lights if needed */
/* .item-window .traffic-lights { ... } */

/* .item-window .title-text rule removed as styles moved to window-frame.css */

/* Customize title text if needed */
.item-window .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adjust max-width based on traffic light space + padding */
    /* Left: 12px(pad) + 58px(lights) + 10px(pad) = 80px */
    /* Right: 12px(pad) */
    /* Total reserved: 92px */
    max-width: calc(100% - 92px);
    /* Ensure it stays centered despite max-width */
    display: inline-block; /* Needed for max-width to work with transform */
    vertical-align: middle; /* Helps alignment */
}