@import "itemCard.css";

#homepage-banner {
    position: relative;
    top: 0;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 25 / 8;
    overflow: hidden;
}

#homepage-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 17%;
}

#homepage-intro {
    background-color: var(--sidebar-background-colour);
    margin-top: 15px;
    margin-bottom: 30px;
    padding: 10px 20px 20px 20px;
    color: var(--text-colour);
    border: 1px solid var(--border-colour);
}

#homepage-intro p {
    font-size: 1.2rem;
}

#banner-block {
    position: absolute;
    /* NOTE: 300 is banner logo height, 2032 is banner logo width. 0.75 is from width of #banner-logo */
    top: calc((100% - (100vw * 300 / 2032 * 0.75)) / 2);
    z-index: 5;
    background: rgba(var(--background-rgb), 0.5);
    width: 100%;
    display: flex;
    padding: 15px 0;
}

#banner-logo {
    width: 75%;
    margin: 0 auto;
}

.gradient-overlay {
    background-color: var(--background-colour);
    position: absolute;
    top: 0px;
    z-index: 3;
    width: 100%;
    height: 100%;
}

#main-banner-overlay {
    mask-image: linear-gradient(
        to right,
        var(--background-colour) 0%,
        transparent 1%,
        transparent 99%,
        var(--background-colour) 100%
    );
}

.link-overlay {
    mask-image: linear-gradient(
        to left,
        transparent 0%,
        var(--background-colour) 60%,
        var(--background-colour) 100%
    );
    height: 101%;
}

#discount-overlay {
    mask-image: linear-gradient(
        to right,
        var(--background-colour) 0%,
        transparent 5%,
        transparent 95%,
        var(--background-colour) 100%
    );
}

.section-title {
    margin-bottom: 0;
}

.see-more-link {
    text-align: right;
    background: var(--primary);
    padding: 20px 0px;
    position: relative;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.see-more-link a {
    padding-right: 15px;
    color: white;
    z-index: 10;
    position: relative;
    font-weight: normal;
}

.see-more-link:hover {
    background: var(--primary-dark);
}

#discount-buttons {
    display: flex;
    gap: 20px;
}

#discount-section {
    margin-top: 80px;
}

#discount-list-banner {
    position: relative;
    display: inline-block;
}

#discount-banner-image {
    aspect-ratio: 3 / 1;
    object-fit: cover;
    width: 1200px;
    max-width: 100%;
    object-fit: cover;
    object-position: 0% 79%;
}

#discount-list-block {
    position: absolute;
    width: 85%;
    top: 50%;
    /* NOTE: 10px is based on half left and half right padding of discount-message. */
    transform: translate(calc(7.5% - 10px), -50%);
    z-index: 5;
}

#discount-title {
    font-size: calc(1.2rem + 0.8vw);
    color: white;
    margin-bottom: 15px;
}

#discount-message {
    background-color: #000c;
    padding: 10px 20px 40px 20px;
    color: white;
    font-size: 1.3rem;
    width: 100%;
    border: 2px solid #ffffff42;
}

@media (max-width: 1026px) {
    #main-content {
        margin: 1rem auto;
    }

    #homepage-banner {
        aspect-ratio: 16 / 8;
    }

    #banner-logo {
        width: 95%;
    }

    #discount-banner-image {
        aspect-ratio: 4 / 3;
        max-height: 500px;
        height: 600px;
        object-position: 45% 79%;
    }

    #discount-list-block {
        transform: translate(calc(7.5% - 15px), -50%);
    }

    #discount-buttons {
        flex-direction: column;
    }

    #discount-message {
        padding: 15px;
    }

    .link-overlay {
        mask-image: linear-gradient(
            to left,
            transparent 0%,
            var(--background-colour) 80%,
            var(--background-colour) 100%
        );
    }
}