@import url("../base.css");

@import url("../partials/header.css");
@import url("../partials/footer.css");
@import url("../partials/top-jump-btn.css");

@import url("tributes-shared.css");


/* ── Header background (tributes page only) ─────────────────── */

#header:has(~ #tributes)::before {
    background: 
        linear-gradient(rgba(190, 186, 186, 0.167), rgba(190, 186, 186, 0.146)),
        url("../../../images/plant-seeds.jpg") center center;
    background-attachment: fixed;
    background-size: cover;
    background-size: 100% auto;
}


/* ── Section Image ──────────────────────────────────────────── */

#tributes .image {
    border: 1px solid var(--nature-brown);
    box-shadow: 
        0 0 0 3.5px var(--nature-brown),
        0 0 0 6px var(--pale-green),
        0 0 0 8.5px var(--nature-brown);

    border-radius: 50px;
    overflow: hidden;    
    height: 260px;
    width: auto;
    margin-bottom: 0px;
}

#tributes .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#tributes-area .actions.jump-button {
    display: flex;
    justify-content: right;
    margin-right: 20px;
    margin-bottom: 35px;
}

#tributes-area .actions.jump-button li a{
    width: 100%;
}



/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 700px) {
    #header:has(~ #tributes) {
        background-size: cover;
        background-size: auto 100%;
    }

    #tributes .image {
        height: 180px;
        margin-left: 8px;
        margin-right: 8px;
    }

    #tributes-area .actions.jump-button {
        margin-top: 50px;
        margin-right: 0px;
    }
    
    #tributes-area .actions.jump-button li {
        padding-bottom: 0px;
    }
}

@media (max-width: 600px) {
    #header:has(~ #tributes)::before {
        transform: scale(2);

        filter: blur(1.5px);
        -webkit-filter: blur(1.5px);
    }
}

@media (max-width: 500px) {
    #tributes-area .actions.jump-button {
        justify-content: center;
    }
    
    #tributes-area .actions.jump-button li {
        width: 85%;
    }

}