/* =========================================================
   CSI ANILAR V1
   ========================================================= */

.memories-view {
    display: none;

    min-height: 100vh;

    padding:
        105px 28px
        70px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(255, 196, 0, .07),
            transparent 34%
        ),
        #090909;
}

.memories-view.active {
    display: block;
}

.memories-shell {
    width: min(
        1220px,
        100%
    );

    margin:
        0 auto;
}


/* HERO */

.memories-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 24px;

    padding-bottom: 26px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}

.memories-kicker {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 10px;

    color: #f0c400;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.memories-hero h1 {
    margin:
        0 0
        8px;

    color: #fff;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        );

    line-height: 1;
}

.memories-hero p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .52
        );

    font-size: 14px;
}

.memories-count {
    min-width: 105px;

    padding:
        12px
        18px;

    border:
        1px solid
        rgba(
            240,
            196,
            0,
            .20
        );

    border-radius: 13px;

    background:
        rgba(
            240,
            196,
            0,
            .055
        );

    text-align: center;
}

.memories-count strong,
.memories-count span {
    display: block;
}

.memories-count strong {
    color: #fff;

    font-size: 25px;
}

.memories-count span {
    margin-top: 2px;

    color:
        rgba(
            255,
            255,
            255,
            .46
        );

    font-size: 10px;
}


/* MANAGEMENT */

.memories-management {
    margin-top: 28px;

    padding: 22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .09
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );
}

.memories-management[hidden] {
    display: none !important;
}

.memories-management-head {
    margin-bottom: 18px;
}

.memories-management-head span {
    color: #e9bc00;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}

.memories-management-head h2 {
    margin:
        6px 0
        5px;

    color: #fff;

    font-size: 21px;
}

.memories-management-head p {
    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: 11px;
}

.memories-form {
    display: grid;

    grid-template-columns:
        1.4fr
        1.4fr
        .8fr;

    gap: 14px;
}

.memories-form label {
    display: grid;

    gap: 7px;

    min-width: 0;
}

.memories-form label > span {
    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size: 11px;
    font-weight: 800;
}

.memories-form input,
.memories-form textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 10px;

    outline: 0;

    background:
        rgba(
            0,
            0,
            0,
            .25
        );

    color: #fff;

    font: inherit;
}

.memories-form input {
    min-height: 44px;

    padding:
        0
        12px;
}

.memories-form textarea {
    min-height: 88px;

    padding: 12px;

    resize: vertical;
}

.memories-form input:focus,
.memories-form textarea:focus {
    border-color:
        rgba(
            240,
            196,
            0,
            .45
        );
}

.memories-file-field {
    grid-row:
        span 2;
}

.memories-file-field input {
    display: none;
}

.memories-file-box {
    min-height: 130px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 18px;

    border:
        1px dashed
        rgba(
            240,
            196,
            0,
            .35
        );

    border-radius: 12px;

    background:
        rgba(
            240,
            196,
            0,
            .035
        );

    cursor: pointer;

    text-align: center;
}

.memories-file-box i {
    margin-bottom: 3px;

    color: #eac000;

    font-size: 25px;
}

.memories-file-box strong {
    max-width: 100%;

    color: #fff;

    overflow: hidden;

    text-overflow: ellipsis;
}

.memories-file-box small {
    color:
        rgba(
            255,
            255,
            255,
            .40
        );
}

.memories-description-field {
    grid-column:
        2 / 4;
}

.memories-submit-btn {
    grid-column:
        2 / 4;

    min-height: 43px;

    border: 0;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #f0c400,
            #dcae00
        );

    color: #090909;

    cursor: pointer;

    font-weight: 900;
}

.memories-submit-btn:disabled {
    opacity: .55;

    cursor: wait;
}

.memories-form-message {
    margin-top: 13px;

    padding:
        10px
        12px;

    border-radius: 9px;

    font-size: 12px;
}

.memories-form-message.success {
    border:
        1px solid
        rgba(
            46,
            204,
            113,
            .25
        );

    background:
        rgba(
            46,
            204,
            113,
            .08
        );

    color: #79e9a7;
}

.memories-form-message.error {
    border:
        1px solid
        rgba(
            231,
            76,
            60,
            .25
        );

    background:
        rgba(
            231,
            76,
            60,
            .08
        );

    color: #ef9388;
}


/* SECTION */

.memories-section-head {
    display: flex;

    margin:
        34px 0
        17px;
}

.memories-section-head span {
    color:
        rgba(
            240,
            196,
            0,
            .75
        );

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.1px;
}

.memories-section-head h2 {
    margin:
        5px 0
        0;

    color: #fff;

    font-size: 23px;
}


/* GRID */

.memories-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap: 22px;
}

.memory-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 14px;

    background: #101010;

    box-shadow:
        0 15px 40px
        rgba(
            0,
            0,
            0,
            .18
        );

    transition:
        transform .18s ease,
        border-color .18s ease;
}

.memory-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(
            240,
            196,
            0,
            .24
        );
}

.memory-card-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio:
        16 / 10;

    padding: 0;

    overflow: hidden;

    border: 0;

    background: #070707;

    cursor: zoom-in;
}

.memory-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .25s ease;
}

.memory-card:hover
.memory-card-image img {
    transform:
        scale(1.025);
}

.memory-card-expand {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(
            0,
            0,
            0,
            .62
        );

    color: #fff;

    opacity: 0;

    transition:
        opacity .17s ease;
}

.memory-card:hover
.memory-card-expand {
    opacity: 1;
}

.memory-card-date {
    position: absolute;

    left: 11px;
    bottom: 10px;

    padding:
        5px
        8px;

    border-radius: 7px;

    background:
        rgba(
            0,
            0,
            0,
            .72
        );

    color:
        rgba(
            255,
            255,
            255,
            .90
        );

    font-size: 9px;
    font-weight: 800;
}

.memory-card-body {
    position: relative;

    min-height: 86px;

    box-sizing: border-box;

    padding:
        16px
        17px
        18px;
}

.memory-card-body h3 {
    margin:
        0 0
        7px;

    color: #fff;

    font-size: 15px;

    line-height: 1.45;
}

.memory-card-body p {
    display: -webkit-box;

    margin: 0;

    overflow: hidden;

    color:
        rgba(
            255,
            255,
            255,
            .47
        );

    font-size: 12px;

    line-height: 1.55;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.memory-delete-btn {
    margin-top: 13px;

    padding:
        7px
        9px;

    border:
        1px solid
        rgba(
            231,
            76,
            60,
            .20
        );

    border-radius: 8px;

    background:
        rgba(
            231,
            76,
            60,
            .07
        );

    color: #ef857a;

    cursor: pointer;

    font-size: 10px;
    font-weight: 800;
}

.memories-loading,
.memories-empty {
    grid-column:
        1 / -1;

    min-height: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border:
        1px dashed
        rgba(
            255,
            255,
            255,
            .08
        );

    border-radius: 14px;

    color:
        rgba(
            255,
            255,
            255,
            .40
        );

    text-align: center;
}

.memories-empty i {
    color:
        rgba(
            240,
            196,
            0,
            .58
        );

    font-size: 30px;
}

.memories-empty strong {
    color:
        rgba(
            255,
            255,
            255,
            .75
        );
}

.memories-empty span {
    font-size: 11px;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

body.memory-lightbox-open {
    overflow: hidden;
}

.memory-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: grid;

    grid-template-columns:
        76px
        minmax(
            0,
            1fr
        )
        76px;

    place-items: center;

    padding:
        55px
        20px
        32px;

    box-sizing: border-box;
}

.memory-lightbox[hidden] {
    display: none !important;
}

.memory-lightbox-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            0,
            0,
            0,
            .91
        );

    backdrop-filter:
        blur(10px);
}

.memory-lightbox-content {
    position: relative;

    z-index: 2;

    width:
        min(
            1050px,
            100%
        );

    max-height:
        calc(
            100vh -
            95px
        );

    display: flex;
    flex-direction: column;

    align-items: center;
}

.memory-lightbox-image-wrap {
    width: 100%;

    max-height:
        calc(
            100vh -
            190px
        );

    display: flex;
    align-items: center;
    justify-content: center;
}

.memory-lightbox-image-wrap img {
    display: block;

    max-width: 100%;
    max-height:
        calc(
            100vh -
            190px
        );

    border-radius: 8px;

    object-fit: contain;

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            .45
        );
}

.memory-lightbox-info {
    width: 100%;

    max-width: 850px;

    padding-top: 13px;

    color: #fff;

    text-align: center;
}

.memory-lightbox-info strong {
    font-size: 14px;
}

.memory-lightbox-info p {
    margin:
        7px 0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .55
        );

    font-size: 11px;

    line-height: 1.5;
}

.memory-lightbox-meta {
    display: flex;
    justify-content: center;

    gap: 20px;

    margin-top: 9px;

    color:
        rgba(
            255,
            255,
            255,
            .42
        );

    font-size: 10px;
}

.memory-lightbox-close {
    position: fixed;

    z-index: 5;

    top: 24px;
    right: 28px;

    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #fff;

    cursor: pointer;

    font-size: 17px;
}

.memory-lightbox-nav {
    position: relative;

    z-index: 4;

    width: 45px;
    height: 45px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .13
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .06
        );

    color: #fff;

    cursor: pointer;
}

.memory-lightbox-nav:hover,
.memory-lightbox-close:hover {
    background:
        rgba(
            255,
            255,
            255,
            .13
        );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
    max-width: 900px
) {

    .memories-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

    .memories-form {
        grid-template-columns:
            1fr
            1fr;
    }

    .memories-file-field {
        grid-column:
            1 / -1;

        grid-row: auto;
    }

    .memories-description-field,
    .memories-submit-btn {
        grid-column:
            1 / -1;
    }

}


@media (
    max-width: 600px
) {

    .memories-view {
        padding:
            90px
            13px
            45px;
    }

    .memories-hero {
        align-items: flex-start;

        flex-direction: column;
    }

    .memories-count {
        min-width: 90px;
    }

    .memories-management {
        padding: 16px;
    }

    .memories-form {
        grid-template-columns:
            1fr;
    }

    .memories-form > *,
    .memories-description-field,
    .memories-submit-btn,
    .memories-file-field {
        grid-column:
            1 !important;
    }

    .memories-grid {
        grid-template-columns:
            1fr;

        gap: 14px;
    }

    .memory-lightbox {
        grid-template-columns:
            45px
            minmax(
                0,
                1fr
            )
            45px;

        padding:
            65px
            5px
            20px;
    }

    .memory-lightbox-nav {
        width: 36px;
        height: 36px;
    }

    .memory-lightbox-close {
        top: 16px;
        right: 16px;

        width: 38px;
        height: 38px;
    }

}