/* ==========================================================================
   Masonry listing for img.enzenada.cloud (Chevereto lays items out with JS as
   fixed squares; this swaps that for a true-proportion masonry grid).
   masonry.js adds .noi-masonry, sets --r (aspect ratio) and the row spans.
   Without the script the listing falls back to Chevereto's normal layout.
   ========================================================================== */

.content-listing.list-images .pad-content-listing.noi-masonry {
    --cols: 6; --gap: 14px; --row: 4px;
    display: grid !important;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: var(--row);
    grid-auto-flow: row dense;
    column-gap: var(--gap);
    row-gap: 0;
    height: auto !important;
    width: 100% !important;
    padding: 18px 14px 40px;
    box-sizing: border-box;
}
@media (max-width: 1700px) { .content-listing.list-images .pad-content-listing.noi-masonry { --cols: 5; } }
@media (max-width: 1350px) { .content-listing.list-images .pad-content-listing.noi-masonry { --cols: 4; } }
@media (max-width: 1000px) { .content-listing.list-images .pad-content-listing.noi-masonry { --cols: 3; --gap: 10px; } }
@media (max-width: 640px)  { .content-listing.list-images .pad-content-listing.noi-masonry { --cols: 2; --gap: 8px; padding: 10px 8px 30px; } }

/* each item takes its own aspect ratio instead of a fixed square */
.noi-masonry > .list-item {
    position: relative !important;
    left: auto !important; top: auto !important; float: none !important;
    width: auto !important; height: auto !important;
    margin: 0 !important;
    aspect-ratio: var(--r, 1);
    align-self: start;
    z-index: 1;
    transform: translateZ(0);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), filter .35s ease, opacity .35s ease;
    will-change: transform;
}
.noi-masonry > .list-item.is-featured { grid-column: span 2; }
.noi-masonry > .list-item .list-item-image {
    position: absolute !important; inset: 0;
    height: auto !important; width: auto !important;
    min-height: 0 !important; max-height: none !important;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: #070f13;
    transition: box-shadow .45s ease, border-color .35s ease;
}
.noi-masonry > .list-item .image-container { display: block; height: 100% !important; min-height: 0 !important; width: 100%; }
.noi-masonry > .list-item .image-container img {
    display: block;
    width: 100% !important; height: 100% !important; min-height: 0 !important;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
}

/* resting depth: three elevation levels, spread across the grid */
.noi-masonry > .list-item[data-depth="0"] .list-item-image { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8); }
.noi-masonry > .list-item[data-depth="1"] .list-item-image { box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .9), 0 3px 8px rgba(0, 0, 0, .5); }
.noi-masonry > .list-item[data-depth="1"] { transform: translateY(-3px); z-index: 2; }
.noi-masonry > .list-item[data-depth="2"] .list-item-image { box-shadow: 0 26px 46px -14px rgba(0, 0, 0, .95), 0 8px 16px rgba(0, 0, 0, .55); border-color: rgba(45, 212, 191, .16); }
.noi-masonry > .list-item[data-depth="2"] { transform: translateY(-7px) scale(1.012); z-index: 3; }

/* hover: lift out of the page, deep dark shadow, teal rim light, slow zoom inside */
.noi-masonry > .list-item:hover {
    transform: translateY(-18px) scale(1.07);
    z-index: 30;
}
.noi-masonry > .list-item:hover .list-item-image {
    box-shadow: 0 90px 120px -24px rgba(0, 0, 0, 1), 0 56px 80px -18px rgba(0, 0, 0, .95), 0 28px 44px -8px rgba(0, 0, 0, .85), 0 10px 20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(45, 212, 191, .6), 0 0 56px -10px rgba(45, 212, 191, .5);
    border-color: rgba(45, 212, 191, .6);
}
.noi-masonry > .list-item:hover .image-container img { transform: scale(1.1); }

/* keep the title/tools overlay readable on any picture */
.noi-masonry > .list-item .list-item-desc {
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    padding-top: 2.2rem !important;
    left: 0; right: 0; bottom: 0 !important;
    border-radius: 0 0 6px 6px;
}

@media (prefers-reduced-motion: reduce) {
    .noi-masonry > .list-item, .noi-masonry > .list-item .list-item-image, .noi-masonry > .list-item .image-container img { transition: none; }
    .noi-masonry > .list-item:hover { transform: none; }
    .noi-masonry > .list-item:hover .image-container img { transform: none; }
}
@media (hover: none) {
    .noi-masonry > .list-item:hover { transform: none; }
}

/* ---- videos: big play badge on the tile (the small duration chip stays) ---- */
.list-item[data-media="video"] .list-item-image::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 3.6rem; height: 3.6rem;
    margin: -1.8rem 0 0 -1.8rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eafffb' d='M9 6.2v11.6c0 .8.9 1.3 1.6.9l9-5.8c.6-.4.6-1.4 0-1.8l-9-5.8C9.900 4.900 9 5.400 9 6.200z'/%3E%3C/svg%3E") center / 56% no-repeat,
        rgba(5, 10, 14, .55);
    border: 2px solid rgba(45, 212, 191, .85);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .65), 0 0 26px -6px rgba(45, 212, 191, .55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    pointer-events: none;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), background-color .3s ease, box-shadow .3s ease;
    z-index: 3;
}
.list-item[data-media="video"]:hover .list-item-image::after {
    transform: scale(1.18);
    background-color: rgba(45, 212, 191, .9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .7), 0 0 38px -4px rgba(45, 212, 191, .8);
}
@media (max-width: 640px) {
    .list-item[data-media="video"] .list-item-image::after { width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .list-item[data-media="video"] .list-item-image::after { transition: none; }
    .list-item[data-media="video"]:hover .list-item-image::after { transform: none; }
}

/* ---- the archive only holds the owner's own work: drop "by Admin" / "Uploaded by guest" ---- */
.list-item-from { display: none !important; }