/* Frontend Styles für Wonder Image Block */
.wp-block-wonder-image-responsive-image {
    margin: 1em 0;
    clear: both;
}

.wp-block-wonder-image-responsive-image figure {
    margin: 0;
    display: block;
    position: relative;
}

.wp-block-wonder-image-responsive-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

/* Link Styles */
.wp-block-wonder-image-responsive-image figure a {
    display: block;
    text-decoration: none;
    border: none;
    box-shadow: none;
}

.wp-block-wonder-image-responsive-image figure a:hover,
.wp-block-wonder-image-responsive-image figure a:focus {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.wp-block-wonder-image-responsive-image figure a:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Desktop Image - Standardanzeige */
.wp-block-wonder-image-responsive-image .wonder-image-desktop {
    display: block;
}

/* Mobile Image - Standard versteckt */
.wp-block-wonder-image-responsive-image .wonder-image-mobile {
    display: none;
}

/* Mobile Ansicht: Desktop-Bild verstecken, Mobile-Bild zeigen */
@media screen and (max-width: 768px) {
    .wp-block-wonder-image-responsive-image .wonder-image-desktop {
        display: none;
    }
    
    .wp-block-wonder-image-responsive-image .wonder-image-mobile {
        display: block;
    }
}

/* Alignment Styles */
.wp-block-wonder-image-responsive-image.has-align-left {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}

.wp-block-wonder-image-responsive-image.has-align-right {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
}

.wp-block-wonder-image-responsive-image.has-align-center {
    text-align: center;
}

.wp-block-wonder-image-responsive-image.has-align-center figure {
    display: inline-block;
}

.wp-block-wonder-image-responsive-image.has-align-wide figure {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-wonder-image-responsive-image.has-align-full figure {
    max-width: 100%;
}

/* Responsive Alignment - Auf Mobile keine Float */
@media screen and (max-width: 768px) {
    .wp-block-wonder-image-responsive-image.has-align-left,
    .wp-block-wonder-image-responsive-image.has-align-right {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}