/* Drag ordering for images already saved in a portfolio work. */
.portfolio-images{gap:10px}
.portfolio-image.sortable-image{position:relative;cursor:grab;user-select:none;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease,border-color .16s ease}
.portfolio-image.sortable-image:hover{transform:translateY(-2px);box-shadow:0 8px 22px #0006;border-color:#5a6672}
.portfolio-image.sortable-image:active{cursor:grabbing}
.portfolio-image.sortable-image.is-dragging{opacity:.45;transform:scale(.97);box-shadow:0 0 0 2px #f2576866}
.image-order-badge{position:absolute;left:8px;top:8px;z-index:3;display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#0d1218e8;border:1px solid #59636f;color:#f3f5f7;font-size:.7rem;font-weight:800;box-shadow:0 3px 10px #0008;backdrop-filter:blur(6px);pointer-events:none}
.portfolio-image.sortable-image:first-child .image-order-badge{background:#4b2730e8;border-color:#f25768;color:#ffdce2;box-shadow:0 0 14px #f2576830}
.portfolio-image.sortable-image:after{content:'⋮⋮';position:absolute;right:8px;bottom:7px;z-index:2;color:#fff9;font-weight:900;letter-spacing:-2px;text-shadow:0 2px 5px #000;pointer-events:none}
@media(max-width:680px){.image-order-badge{font-size:.66rem;min-height:22px;padding:2px 7px}}