/* MediaBlock.css
 * Refined styling for media cards and grids using Nimbus Design System
 * Updated with design system variables for consistent, elegant appearance
 */

body {
    font-family: var(--font-sans);
}

.lOverlay {
    display: none; /* Hidden - name now shown below image */
}

.uOverlay, .uOverlayOn {
    display: none; /* Hidden - name now shown below image */
}

.lOverlay-content {
    bottom: 0;
}

.uOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    min-height: 50px;
    background: -webkit-gradient(linear, left bottom,left top, from(transparent), to(rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
    background: -moz-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 100%);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
    color: white;
}

.artistOverlay {
    width: 45px;
    height: 45px;
    bottom: 0;
    position: absolute;
    background-size: contain;
    right: 0;
    outline: white 2px solid;
    background-color: white;
    background-repeat: no-repeat;
    background-position: center;
}

.uOverlayOn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    min-height: 50px;
    background: -webkit-gradient(linear, left bottom,left top, from(transparent), to(rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
    background: -moz-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 100%);
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
    color: white;
}

.imageCell {
    display: inline-block;
    vertical-align: top;
    min-width: 120px;
    margin: var(--space-1);
    box-sizing: content-box !important; /* Changed to content-box for background positioning */
    background: var(--color-surface);
    border-radius: var(--radius-base);
    overflow: visible;
    position: relative;
    /* Refined card styling */
    box-shadow: var(--shadow-base);
    transition: var(--transition-shadow), var(--transition-transform);
    /* Create space for title bar - background will only draw in content area */
    padding-bottom: 36px !important;
    background-origin: content-box !important;
    background-clip: content-box !important;
}

/* Enhanced hover state - boutique gallery feel */
.imageCell:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* Subtle image zoom on hover for engagement */
.imageCell:hover .transCell {
    transform: scale(1.02);
}

.imageCell .transCell {
    transition: transform 0.3s ease;
}

/* Image container with fixed size */
.imageCell .transCell {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100% !important; /* Full content height (padding-bottom creates space for title) */
    overflow: hidden;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
    display: block;
}

/* Video filmstrip overlay - frames entire image */
.imageCell .transCell.film-strip {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100% !important; /* Stretch to frame entire image */
}

/* Card info section below image - warm gallery style */
.cell-info {
    background: linear-gradient(180deg, #faf9f7 0%, #f5f3ef 100%);
    padding: 4px 8px;
    border-top: 1px solid #e8e4df;
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
}

.cell-info-title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: #2c3e50; /* Warm charcoal */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    line-height: var(--leading-tight);
}

.cell-info-artist {
    font-size: var(--text-xs);
    color: #7f8c8d; /* Warm gray */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--leading-tight);
}

/* Hide hover overlays completely to prevent double text */
.imageCell:hover .uOverlay,
.imageCell:hover .lOverlay {
    display: none !important;
    opacity: 0 !important;
}

.imageCell .transCell img,
.imageCell .transCell .collectionImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.imageAlert {
    position: absolute;
    top: 2px;
    left: 2px;
    color: yellow;
    font-size: smaller;
    z-index: 15;
    text-shadow: black 2px 2px 2px;
    pointer-events: auto;
    cursor: pointer;
}

.artWarn {
    position: absolute;
    top: 2px;
    right: 2px;
    color: red;
    font-size: smaller;
    z-index: 15;
    text-shadow: black 2px 2px 2px;
    pointer-events: auto;
    cursor: pointer;
}

.artCost {
    position: absolute;
    top: 2px;
    right: 2px;
    color: gold;
    font-size: smaller;
    z-index: 15;
    text-shadow: black 2px 2px 2px;
    pointer-events: auto;
    cursor: pointer;
}

.artPaid {
    position: absolute;
    top: 2px;
    right: 2px;
    color: green;
    font-size: smaller;
    z-index: 15;
    text-shadow: black 2px 2px 2px;
    pointer-events: auto;
    cursor: pointer;
}

.editIcon {
    pointer-events: auto;
    padding-left: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.listEditIcon {
    pointer-events: auto;
    padding-left: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.detailsIcon {
    pointer-events: auto;
    padding-left: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.collectionViewIcon {
    pointer-events: auto;
    padding-left: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.free-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
}

.cell {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 85px;
}

    /* Collection cells - stacked cards effect using CSS pseudo-elements */
    .cell.collection,
    .imageCell.collection {
        background: transparent !important;
        box-shadow: none;
        position: relative;
        overflow: hidden; /* Contain pseudo-elements within cell bounds */
        padding-bottom: 28px !important; /* Smaller title area for collections */
    }

    .cell.collection .transCell {
        background-color: transparent !important;
    }

    /* Stacked cards effect - creates 2 "cards" behind the main image */
    .imageCell.collection::before,
    .imageCell.collection::after {
        content: '';
        position: absolute;
        background: linear-gradient(145deg, #f5f5f5, #e0e0e0);
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        z-index: 0;
        pointer-events: none; /* Don't interfere with clicks */
    }

    /* Back card (furthest) - sized to fill most of cell above title */
    .imageCell.collection::before {
        width: 82%;
        height: 70%;
        top: 5%;
        left: 50%;
        transform: translateX(-50%) rotate(-3deg);
    }

    /* Middle card */
    .imageCell.collection::after {
        width: 82%;
        height: 70%;
        top: 8%;
        left: 50%;
        transform: translateX(-50%) rotate(2deg);
    }

    /* The actual collection image sits on top */
    .imageCell.collection .collectionImage {
        z-index: 1;
        border: 1px solid #ddd;
    }

    /* Smaller title bar for collections */
    .imageCell.collection .cell-info {
        height: 28px;
        padding: 4px 8px;
    }

    .imageCell.collection .cell-info-title {
        font-size: var(--text-sm);
    }

    .imageCell.collection .cell-info-artist {
        display: none;
    }

.frameDiv {
    display: inline-block;
    height: 50px;
    vertical-align: middle;
    text-align: left;
    background-color: transparent;
    padding: 4px 8px;
    margin: 3px;
    cursor: pointer;
    border-radius: 4px;
}

    .frameDiv:hover {
        background-color: rgba(255,255,255,0.15);
    }

    .frameDiv img{
        background-position:center;
        background-size:contain;
        background-repeat:no-repeat;
    }

.frameNameDiv {
    display: inline-block;
    height: 45px;
    color: black;
    vertical-align: middle;
    text-align: left;
    margin-left: 6px;
}

.frameNameDiv .frameName {
    color: black;
}

.frameNameDiv .playListSelect {
    font-size: 11px;
    color: black;
}

.btn {
    margin: 2px;
}

.framePList {
    font-size: smaller;
    color: blue;
}

.framePListTitle {
    font-size: x-small;
    color: black;
}

.hilightCell {
    /*background-color: black;
            //outline-width: 10px;
            outline-style: outset;*/
    z-index: 100;
}

.lolightCell {
}

.transCell {
    width: 100%;
    /* height set via inline style */
    background-color: transparent;
    pointer-events: auto;
    background-size: contain;
    position: relative; /* Changed from absolute to allow cell-info to flow below */
    display: block;
}

/* Ensure video film strip overlay always scales to current cell size */
.transCell.film-strip {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100% !important; /* force scaling with parent */
}

.lolightCell > .transCell {
    background-color: rgba(0, 0, 0, 0.7);
}

.addIcon {
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.81);
    border: 2px groove gray;
    display: none;
    z-index: 53;
    color: white;
    font-size: small;
    margin: 0;
}

    .addIcon span {
        text-decoration: underline;
        color: white;
        font-size: x-small;
    }

.deleteIcon {
    left: 0;
    bottom: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.81);
    border: 2px groove gray;
    display: none;
    z-index: 53;
    color: white;
    font-size: small;
    margin: 0;
    cursor: pointer;
}

    .deleteIcon span {
        text-decoration: underline;
        color: white;
        font-size: x-small;
    }

.vid {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 51;
    width: 100%; /* contain inside cell */
    height: 100%;
    object-fit: cover;
}

.waitImg {
    display: none;
    z-index: 50;
    bottom: 1px;
    left: 0;
    width: 100%;
    position: absolute;
}

.owl-carousel .owl-item img {
    /* width: 100%; */
}

owl.carousel.min.css:6 .owl-carousel .owl-item img {
    /* display: block; */
    /* width: 100%; */
}

.lolightCell > .addIcon.active {
    display: inline-block;
}

.hilightCell > .deleteIcon.active {
    display: inline-block;
}

/* Collection image sizing now handled by inline styles in mediaBlock2.js for responsive scaling */
.imageCell .collectionImage {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#freewall {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
}

@media (max-width: 900px) {
    .imageCell {
        height: 200px;
    }
}
@media (max-width: 600px) {
    .imageCell {
        height: 140px;
    }
}

/* Global MediaGrid rules to ensure consistent layout across pages */
.media-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) 0;
}

.media-grid .imageCell {
    /* JS sets width/height via inline styles */
    min-width: none;
    max-width: none;
}

/* Footer slider for MediaGrid */
.media-grid-footer {
    position: absolute; /* positioned over the grid but outside scrolling area */
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* 20% less wide and centered */
    height: 45px; /* 20% less height (was 56px) */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 12px;
    box-sizing: border-box;
    /* Classic look: black semi-transparent background */
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    z-index: 9999; /* keep above images */
    border-top: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; /* doubled rounded corners */
}
.media-grid-footer label{ color: #fff; font-size: 13px; margin-right:6px; }
.media-grid-footer .mg-slider { flex: 1 1 300px; min-width: 120px; }
.media-grid-footer .mg-slider-val { color: #fff; font-family: monospace; margin-left: 8px; min-width:60px; text-align:right }

/* Improve slider appearance */
input[type=range].mg-slider {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    outline: none;
    --pct: 50%;
    background: linear-gradient(to right, #007bff var(--pct), rgba(255,255,255,0.12) var(--pct));
}
input[type=range].mg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 6px rgba(0,123,255,0.35);
    cursor: pointer;
    margin-top: -4px; /* vertically center thumb on track */
}
input[type=range].mg-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007bff;
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 6px rgba(0,123,255,0.35);
    cursor: pointer;
}

/* Ensure footer does not get clipped when container has overflow */
.media-grid-container { position: relative; }
.media-grid-scroll { overflow: auto; }
.media-grid-footer { box-shadow: 0 -6px 20px rgba(0,0,0,0.45); }