/**
* GSI Website Banner - Frontend Styles
*/

/* ========================================
Banner Wrapper
======================================== */

.gsi_website_banner_wrapper {
    width: 90%;
    margin: 48px 0;
    display: block;
    clear: both;
    margin-left: auto !important;
    margin-right: auto !important;
}

.gsi_website_banner_link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
    max-width: 900px;
    margin: auto;
}

.gsi_website_banner_link:hover {
    opacity: 0.9;
}

/* ========================================
Banner Picture Element
======================================== */

.gsi_website_banner_picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.gsi_website_banner_img {
    width: 100%;
    max-width: fit-content;
    margin: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
Responsive Adjustments
======================================== */

@media screen and (max-width: 767px) {
    .gsi_website_banner_wrapper {
        /* margin: 20px 0; */
    }

    .gsi_website_banner_img {
        /* border-radius: 2px; */
    }
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    .gsi_website_banner_wrapper {
        /* margin: 25px 0; */
    }
}

@media screen and (min-width: 980px) {
    .gsi_website_banner_wrapper {
        /* margin: 30px 0; */
    }
}

/* ========================================
Animation (Optional)
======================================== */

.gsi_website_banner_wrapper {
    animation: gsi-banner-fade-in 0.5s ease-in-out;
}

@keyframes gsi-banner-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
Print Styles
======================================== */

@media print {
    .gsi_website_banner_wrapper {
        display: none;
    }
}

/* ========================================
Accessibility
======================================== */

.gsi_website_banner_link:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* ========================================
Loading State (if using lazy loading)
======================================== */

.gsi_website_banner_img[loading="lazy"] {
    background: #f0f0f0;
}