/**
 * Responsive banner block styles — single source of truth.
 *
 * Loaded in both the editor and on the frontend via the block's
 * `style` and `editorStyle` handles.
 *
 * @package Webinar_Plugin
 */

/* ── Shared ───────────────────────────────────────────────────── */

.wp-block-webinar-responsive-banner {
    padding: 0;
    margin: 0;
}

.wp-block-webinar-responsive-banner img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* ── Desktop: show featured image, hide mobile image ─────────── */

.wp-block-webinar-responsive-banner .webinar-banner__desktop {
    display: block;
}

.wp-block-webinar-responsive-banner .webinar-banner__mobile {
    display: none;
}

/* ── Mobile: show mobile image, hide featured image ──────────── */

@media ( max-width: 600px ) {
    .wp-block-webinar-responsive-banner .webinar-banner__desktop {
        display: none;
    }

    .wp-block-webinar-responsive-banner .webinar-banner__mobile {
        display: block;
    }
}