/* Task 05: shared banner and media presentation. These classes are opt-in. */
.sponsor-stage { position: relative; width: var(--sponsor-viewport-width, 100vw); max-width: none; margin-inline: calc(50% - (var(--sponsor-viewport-width, 100vw) / 2)); overflow: hidden; background: #e8edf0; }
.sponsor-stage__link { width: 100%; min-height: clamp(220px, 28vw, 420px); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; text-decoration: none; }
.sponsor-stage .hero-ad-frame { position: static; max-width: none; border: 0; border-radius: 0; box-shadow: none; transition: none; }
.sponsor-stage .hero-ad-frame:hover { transform: none; box-shadow: none; }
.sponsor-stage .sponsor-stage__artwork { display: block; width: 100%; height: clamp(220px, 28vw, 420px); object-fit: contain; object-position: center; }
.sponsor-stage__label, .sponsor-stage__action { position: absolute; z-index: 2; padding: 5px 9px; border-radius: 4px; background: rgba(16, 45, 67, .92); color: #fff; font-size: 13px; font-weight: 600; line-height: 20px; }
.sponsor-stage__label { top: 12px; left: max(16px, calc((100vw - 1200px) / 2 + 24px)); }
.sponsor-stage__action { right: max(16px, calc((100vw - 1200px) / 2 + 24px)); bottom: 12px; }
.media-frame { position: relative; display: grid; place-items: center; overflow: hidden; background: #eef1f2; }
.media-frame__image { width: 100%; height: 100%; display: block; object-fit: contain; }
.media-frame__image[hidden] { display: none; }
.media-frame--portrait .media-frame__image { object-fit: cover; object-position: center top; }
.media-frame--logo .media-frame__image, .media-frame--artwork .media-frame__image, .media-frame--ambiguous .media-frame__image { object-fit: contain; }
.media-frame--blurred .media-frame__image { filter: blur(12px); transform: scale(1.04); }
.media-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: #eef1f2; color: #64727c; text-align: center; font-size: 13px; }
.media-state[hidden] { display: none; }
.media-state__initial { font-size: 2rem; font-weight: 700; color: #203f53; }
@media (max-width: 639px) {
    .sponsor-stage__link { min-height: 0; }
    .sponsor-stage .sponsor-stage__artwork { height: auto; max-height: none; }
    .sponsor-stage__action { font-size: 12px; }
}