/* =========================================================================
   loveImg.css — clean personal-archive card
   Pure colors only: white, gray-blue, coral accent. No gradients.
   Card is clickable (cursor: pointer) but spotlight images keep their own
   semantics so the viewer (and not navigation) opens for image clicks.
   ========================================================================= */

/* Outer wrapper for hover transform so it does not conflict with the
   zoomIn entry animation. */
.img_card {
    padding: 16px 16px 14px;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow:
        0 6px 18px rgba(72, 82, 110, 0.08),
        0 1px 3px rgba(72, 82, 110, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    margin-bottom: 22px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e6ebf3;
    will-change: transform, box-shadow;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Subtle coral rail that fades in on hover */
.img_card::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #ff8a87;
    opacity: 0;
    transform: scaleY(0.4);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: #dde3ee;
    box-shadow:
        0 18px 38px rgba(72, 82, 110, 0.14),
        0 3px 8px rgba(72, 82, 110, 0.05);
}

.img_card:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* ============================================================
   Header: avatar + name + status tag
   ============================================================ */
.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f7;
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow:
        0 4px 10px rgba(120, 130, 170, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

.img_card:hover .avatar {
    transform: scale(1.06);
}

.user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 1rem;
    font-weight: 700;
    color: #3a4255;
    line-height: 1.2;
    font-family: 'Noto Serif SC', serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-desc {
    font-size: 0.78rem;
    color: #8a91a6;
    font-weight: 400;
    margin-top: 3px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Public/Private status pill */
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.status-tag i { font-size: 10px; }

.status-public {
    color: #4a7c8f;
    background: #eef6f8;
    border-color: #d8e7ec;
}
.status-private {
    color: #b75a55;
    background: #fde9e8;
    border-color: #f5c8c5;
}

.img_card:hover .status-public {
    color: #3d6a7c;
}
.img_card:hover .status-private {
    color: #a04a45;
}

/* ============================================================
   Content: title + description (summary)
   ============================================================ */
.card-content {
    padding: 12px 0 10px;
    border-bottom: 1px dashed #e6ebf3;
    margin-bottom: 12px;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2f3648;
    margin: 0 0 6px;
    font-family: 'Noto Serif SC', serif;
    letter-spacing: 0.4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover .card-title {
    color: #1e2536;
}

.card-desc {
    font-size: 0.84rem;
    color: #6b7390;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
    font-family: 'Noto Serif SC', serif;
    letter-spacing: 0.3px;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover .card-desc {
    color: #555d78;
}

/* ============================================================
   Image grid — masonry / staggered layout
   ============================================================ */
.card-imgs {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

/* Grid: image order flows left-to-right, top-to-bottom. */
.card-imgs.masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
@media (max-width: 768px) {
    .card-imgs.masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .card-imgs.masonry { grid-template-columns: 1fr; }
}

.grid-item {
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
}

.card-imgs img.spotlight {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    cursor: zoom-in; /* keep image interaction */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover .card-imgs img.spotlight {
    transform: scale(1.05);
    filter: brightness(1.04);
}

/* ============================================================
   Footer: time pill + view-details button
   ============================================================ */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.post-date {
    display: inline-flex;
    align-items: center;
    background: #f4f6fa;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    color: #8a91a6;
    border: 1px solid #e6ebf3;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover .post-date {
    color: #6b7390;
    background: #ebeef5;
}

.post-date i {
    margin-right: 5px;
    color: #b8bfd3;
    font-size: 11px;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_card:hover .post-date i {
    color: #ff7875;
}

/* View details link — full link, child of the card; sits above the
   card-level delegated click to keep keyboard/middle-click semantics */
.love_img_link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f6fa;
    color: #6b7390;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e6ebf3;
    cursor: pointer;
    transition:
        background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 3; /* above the card-level delegated handler */
}

.love_img_link i { font-size: 11px; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.love_img_link:hover { color: #ff7875; border-color: #f8c8c5; background: #fde9e8; }
.love_img_link:hover i { transform: translateX(2px); }
.img_card:hover .love_img_link { color: #ff7875; border-color: #f5c8c5; background: #fff3f3; }

/* The card-level delegated click handler uses cursor:pointer on the card,
   but <a> should still keep its pointer cursor explicitly. */

.col-lg-4 { padding: 0 10px; }

/* ============================================================
   Wall-stacked masonry — strict row-by-row layout driven by
   loveImg-wall.js. CSS only sets up the positioning context,
   centering, and the 8px breathing room on each card. The
   actual column count, item positions, and wall height are all
   computed in JS so:
     - newest album sits in the top-left
     - oldest album sits in the bottom-right
     - each row's height = tallest card in that row, with a
       single gap-absorption pass so shorter cards get tucked
       under their taller neighbour instead of leaving dead space
   ============================================================ */
.loveImg-wall {
    /* Positioning context for the absolutely-positioned children
       that loveImg-wall.js places. The wall itself is just a
       centered block with no width of its own; the JS sets the
       wall height to the bottom of the last row. */
    position: relative;
    /* Keep the auto horizontal centering from .central. */
    margin: 0 auto;
    padding: 0;
    display: block;
    /* Override the global .row flex so the JS layout is not
       fighting a flex parent. */
    flex-wrap: nowrap;
}
.loveImg-wall > [class*="col-"] {
    /* JS will set position:absolute + left/top/width. We only
       reset Bootstrap-ish column sizing so the inline JS values
       are the only thing that matters. */
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: block;
}
.loveImg-wall .img_card {
    /* 8px breathing room on every side so cards feel evenly spaced
       vertically and horizontally inside the masonry wall. */
    margin: 8px;
    /* Keep the card's own border / radius / shadow so each album
       still reads as an individual card. */
    border-radius: 16px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
    .img_card {
        border-radius: 14px;
        padding: 14px 14px 12px;
        margin-bottom: 18px;
    }
    .col-lg-4 { padding: 0 12px; }
    .img_card:hover { transform: translate3d(0, -2px, 0); }
    .card-header { padding-bottom: 9px; }
    .avatar { width: 38px; height: 38px; }
    .user-name { font-size: 0.95rem; }
    .user-desc { font-size: 0.74rem; }
    .status-tag { font-size: 0.68rem; padding: 3px 8px; }
    .card-title { font-size: 1rem; }
    .card-desc { font-size: 0.8rem; }
    .love_img_link { padding: 5px 10px; font-size: 0.74rem; }
}

/* ============================================================
   Encrypted / locked album body — private archive feel, solid colors only
   ============================================================ */
.card-locked-body {
    background: #f4f6fa;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-top: 4px;
    margin-bottom: 12px;
    padding: 22px 16px;
    color: #5b6478;
    position: relative;
    border: 1px solid #e3e7f0;
    box-shadow: inset 0 0 0 6px #fafbfc;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, box-shadow;
    overflow: hidden;
}

/* Private archive corner marks */
.card-locked-body::after,
.card-locked-body::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    opacity: 0.6;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-locked-body::before {
    top: 14px; left: 14px;
    border-top: 2px solid #c9cfde;
    border-left: 2px solid #c9cfde;
    transform: translate3d(-3px, -3px, 0);
}
.card-locked-body::after {
    right: 14px; bottom: 14px;
    border-right: 2px solid #c9cfde;
    border-bottom: 2px solid #c9cfde;
    transform: translate3d(3px, 3px, 0);
}

.card-locked-body:hover {
    transform: translate3d(0, -3px, 0);
    border-color: #d5dbe8;
    box-shadow:
        inset 0 0 0 6px #ffffff,
        0 12px 24px rgba(72, 82, 110, 0.12);
}

.card-locked-body:hover::before,
.card-locked-body:hover::after {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.card-locked-body .lock-status {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #6b7390;
    background: #ffffff;
    border: 1px solid #dde3ee;
    border-radius: 999px;
    font-family: 'Helvetica Neue', 'PingFang SC', sans-serif;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-locked-body:hover .lock-status {
    color: #ff7875;
    border-color: #f5c8c5;
    background: #fff3f3;
}

.card-locked-body .lock-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f3f5f9;
    border: 1px solid #dde3ee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7390;
    font-size: 1.6rem;
    margin-bottom: 12px;
    box-shadow:
        0 6px 14px rgba(120, 130, 170, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-locked-body:hover .lock-badge {
    transform: translate3d(0, -3px, 0) scale(1.04);
    color: #ff7875;
    background: #fff3f3;
    box-shadow:
        0 12px 22px rgba(255, 120, 117, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.card-locked-body .lock-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #3d4555;
    letter-spacing: 2px;
    margin-bottom: 4px;
    font-family: 'Noto Serif SC', serif;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-locked-body:hover .lock-title {
    color: #2b3242;
    letter-spacing: 3px;
}

.card-locked-body .lock-sub {
    font-size: 0.78rem;
    color: #8a91a6;
    letter-spacing: 0.5px;
    font-weight: 400;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-locked-body:hover .lock-sub {
    color: #6b7390;
}

@media (max-width: 767px) {
    .card-locked-body {
        min-height: 156px;
        padding: 22px 14px 18px;
    }
    .card-locked-body .lock-badge {
        width: 52px;
        height: 52px;
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .card-locked-body .lock-title {
        font-size: 0.98rem;
        letter-spacing: 1.5px;
    }
    .card-locked-body .lock-sub {
        font-size: 0.74rem;
    }
}