@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================
   BODY
========================= */

html,
body {
    width: 100%;
    min-height: 100%;
}


body {
    background-color: #f4eee4;
    color: #342d28;

    font-family: "Playfair Display", serif;
}


/* =========================
   BACK LINK
========================= */

.back-link {
    position: fixed;

    top: 30px;
    left: 35px;

    z-index: 100;

    color: #342d28;

    font-family: "Playfair Display", serif;

    font-size: 14px;

    text-decoration: none;

    opacity: 0.6;

    transition: 0.3s ease;
}


.back-link:hover {
    opacity: 1;

    transform: translateX(-4px);
}

/* =========================
   HERO
========================= */

.memories-hero {
    width: 100%;

    min-height: 70vh;
    min-height: 70dvh;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 80px 40px;

    text-align: center;
}


.memories-header {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    animation: fadeIn 1.2s ease;
}


/* =========================
   LABEL
========================= */

.section-label {
    margin-bottom: 25px;

    font-size: 13px;

    letter-spacing: 5px;

    text-transform: uppercase;

    opacity: 0.5;
}


/* =========================
   TITLE
========================= */

.memories-header h1 {
    margin-bottom: 30px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(65px, 10vw, 110px);

    font-weight: 500;

    line-height: 0.9;
}


.intro {
    max-width: 500px;

    margin: 0 auto;

    font-size: 18px;

    line-height: 1.8;

    opacity: 0.7;
}


/* =========================
   MEMORIES SECTION
========================= */

.memories-section {
    width: 100%;

    padding: 50px 40px 150px;
}


.memories-container {
    width: 100%;

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 130px;
}


/* =========================
   MEMORY CARD
========================= */

.memory-card {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 100px;
}


/* EVEN CARDS */

.memory-card:nth-child(even) {
    flex-direction: row-reverse;
}


/* =========================
   IMAGE
========================= */

.memory-image {
    width: 50%;

    max-width: 500px;

    padding: 12px 12px 35px;

    background-color: #fffdf8;

    box-shadow:
        0 20px 45px rgba(50, 40, 30, 0.15);

    transform: rotate(-2deg);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.memory-card:nth-child(even) .memory-image {
    transform: rotate(2deg);
}


.memory-image:hover {
    transform:
        rotate(0deg)
        scale(1.03);

    box-shadow:
        0 25px 55px rgba(50, 40, 30, 0.20);
}


.memory-card:nth-child(even)
.memory-image:hover {
    transform:
        rotate(0deg)
        scale(1.03);
}


.memory-image img {
    display: block;

    width: 100%;

    height: 480px;

    object-fit: cover;
}


/* =========================
   VIDEO PREVIEW
========================= */

.memory-video-preview {
    width: 50%;

    max-width: 500px;

    height: 480px;

    display: flex;

    justify-content: center;
    align-items: center;

    background-color: #342d28;

    box-shadow:
        0 20px 45px rgba(50, 40, 30, 0.15);

    transform: rotate(2deg);

    cursor: pointer;
}


.memory-card:nth-child(even)
.memory-video-preview {
    transform: rotate(-2deg);
}


.memory-video-preview span {
    width: 75px;
    height: 75px;

    display: flex;

    justify-content: center;
    align-items: center;

    border: 1px solid rgba(244, 238, 228, 0.7);

    border-radius: 50%;

    color: #f4eee4;

    font-size: 24px;

    padding-left: 4px;

    transition: 0.3s ease;
}


.memory-video-preview:hover span {
    transform: scale(1.1);

    background-color: #f4eee4;

    color: #342d28;
}


/* =========================
   NO IMAGE MEMORY
========================= */

.memory-no-image {
    width: 50%;

    max-width: 500px;

    height: 300px;

    display: flex;

    justify-content: center;
    align-items: center;

    background-color: #fffdf8;

    border:
        1px solid
        rgba(141, 118, 101, 0.25);

    box-shadow:
        0 15px 35px rgba(50, 40, 30, 0.10);

    transform: rotate(-1deg);
}


.memory-card:nth-child(even)
.memory-no-image {
    transform: rotate(1deg);
}


.memory-no-image span {
    font-size: 55px;

    opacity: 0.35;
}


/* =========================
   CARD CONTENT
========================= */

.memory-card-content {
    width: 50%;

    max-width: 400px;
}


.memory-date {
    margin-bottom: 20px;

    font-size: 12px;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.5;
}


.memory-card h2 {
    margin-bottom: 30px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(40px, 5vw, 65px);

    font-weight: 500;

    line-height: 1;
}


/* =========================
   BUTTON
========================= */

.memory-button {
    padding: 12px 25px;

    border:
        1px solid
        #8d7665;

    background: transparent;

    color: #342d28;

    font-family: inherit;

    font-size: 14px;

    cursor: pointer;

    transition: 0.3s ease;
}


.memory-button:hover {
    background-color: #342d28;

    color: #f4eee4;

    transform: translateY(-3px);
}


/* =========================
   MODAL
========================= */

.memory-modal {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


.memory-modal.active {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.memory-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(52, 45, 40, 0.45);

    backdrop-filter: blur(5px);
}


.memory-modal-content {
    position: relative;

    z-index: 2;

    width: min(750px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    padding: 70px;

    background-color: #fffdf8;

    box-shadow:
        0 30px 80px
        rgba(30, 25, 20, 0.30);

    text-align: center;

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        transform 0.4s ease;
}


.memory-modal.active
.memory-modal-content {
    transform:
        translateY(0)
        scale(1);
}


/* =========================
   CLOSE BUTTON
========================= */

.modal-close {
    position: absolute;

    top: 18px;
    right: 22px;

    z-index: 3;

    width: 35px;
    height: 35px;

    padding: 0;

    border: none;

    background: transparent;

    color: #342d28;

    font-family: Arial, sans-serif;

    font-size: 28px;

    cursor: pointer;

    opacity: 0.5;
}


.modal-close:hover {
    opacity: 1;

    transform: rotate(90deg);
}


/* =========================
   MODAL IMAGE
========================= */

.modal-memory-image {
    display: block;

    width: 100%;

    max-height: 500px;

    margin-bottom: 40px;

    object-fit: cover;
}


/* =========================
   MODAL VIDEO
========================= */

.modal-memory-video {
    display: block;

    width: 100%;

    max-height: 500px;

    margin-bottom: 40px;

    background-color: #342d28;
}


/* =========================
   MODAL NO IMAGE
========================= */

.modal-memory-icon {
    margin-bottom: 30px;

    font-size: 55px;

    opacity: 0.4;
}


/* =========================
   MODAL TEXT
========================= */

.modal-memory-date {
    margin-bottom: 20px;

    font-size: 12px;

    letter-spacing: 3px;

    text-transform: uppercase;

    opacity: 0.45;
}


.modal-memory h2 {
    margin-bottom: 35px;

    font-family: "Cormorant Garamond", serif;

    font-size: clamp(45px, 6vw, 70px);

    font-weight: 500;

    line-height: 1;
}


.modal-memory-text {
    max-width: 550px;

    margin: 0 auto;

    font-family: "Cormorant Garamond", serif;

    font-size: 21px;

    line-height: 1.9;

    white-space: pre-line;

    opacity: 0.8;
}


/* =========================
   ANIMATION
========================= */

@keyframes fadeIn {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .memories-hero {
        min-height: 60vh;

        padding:
            70px 25px;
    }


    .memories-section {
        padding:
            30px 25px 100px;
    }


    .memories-container {
        gap: 90px;
    }


    .memory-card,
    .memory-card:nth-child(even) {
        flex-direction: column;

        gap: 40px;
    }


    .memory-image,
    .memory-video-preview,
    .memory-no-image,
    .memory-card-content {
        width: 100%;

        max-width: 500px;
    }


    .memory-image img,
    .memory-video-preview {
        height: 400px;
    }


    .memory-card-content {
        text-align: center;
    }


    .memory-date {
        margin-bottom: 15px;
    }


    .memory-card h2 {
        margin-bottom: 25px;
    }


    .memory-modal {
        padding: 20px;
    }


    .memory-modal-content {
        padding:
            60px 25px;

        max-height: 90vh;
    }


    .modal-memory-text {
        font-size: 19px;
    }
    
        .back-link {
        top: 20px;
        left: 20px;

        font-size: 13px;
    }
}