/**
 * MGR Banners — Frontend
 */

/* ═══ WRAPPER BASE ═══ */
.mgr-banner {
    display: block;
    max-width: 100%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

/* ═══ TIPO IMAGEM — shimmer enquanto carrega ═══ */
.mgr-banner:not(.mgr-banner--codigo) {
    background: linear-gradient(90deg, #f5f5f7 25%, #eeeff2 50%, #f5f5f7 75%);
    background-size: 200% 100%;
    animation: mgrBannerShimmer 1.4s infinite;
}
.mgr-banner.is-loaded {
    animation: none;
    background: transparent;
}

.mgr-banner__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.mgr-banner__picture {
    display: block;
    width: 100%;
    height: 100%;
}
.mgr-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    opacity: 0;
    animation: mgrBannerFadeIn .4s forwards .05s;
}

@keyframes mgrBannerShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes mgrBannerFadeIn {
    to { opacity: 1; }
}

.mgr-banner__link:hover .mgr-banner__img {
    transform: scale(1.015);
}

/* ═══ TIPO CÓDIGO ═══ */
.mgr-banner--codigo {
    background: transparent;
    animation: none;
    overflow: visible;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mgr-banner--codigo > * {
    max-width: 100%;
}
.mgr-banner--codigo ins,
.mgr-banner--codigo iframe {
    display: block;
    margin: 0 auto;
}

/* ═══ FORMATOS ═══ */
.mgr-banner--leaderboard        { max-width: 728px; }
.mgr-banner--billboard          { max-width: 970px; }
.mgr-banner--skyscraper         { max-width: 300px; }
.mgr-banner--retangulo          { max-width: 300px; }
.mgr-banner--halfpage           { max-width: 300px; }
.mgr-banner--mobile_leaderboard { max-width: 320px; }

/* ═══ CONTEXTOS ═══ */
.mgr-banner--ctx-content_top,
.mgr-banner--ctx-content_bottom { margin: 24px auto; }
.mgr-banner--ctx-archive_top    { margin: 16px auto 24px; }
.mgr-banner--ctx-footer         { max-width: 970px; margin: 32px auto 20px; }

.mgr-banner--ctx-games_list_top,
.mgr-banner--ctx-games_list_bottom {
    max-width: 728px;
    margin: 24px auto;
}

.mgr-banner--ctx-games_single_top,
.mgr-banner--ctx-games_single_bottom {
    max-width: 728px;
    margin: 24px auto;
}

/* ═══ MOBILE ═══ */
@media (max-width: 767px) {
    .mgr-banner { margin: 16px 12px; border-radius: 8px; }
    .mgr-banner--skyscraper,
    .mgr-banner--retangulo,
    .mgr-banner--halfpage { max-width: 100%; }
}

/* ═══ ACESSIBILIDADE ═══ */
.mgr-banner__link:focus-visible {
    outline: 2px solid #93416e;
    outline-offset: 2px;
    border-radius: inherit;
}

/* ═══ PRINT ═══ */
@media print {
    .mgr-banner { box-shadow: none; animation: none; background: transparent; }
}