/**
 * Riizz Roots Hero Image Polish V3.2
 * Ziel: Hero-Bild 1:1, größer, mit runden Ecken und ohne verzerrtes Banner-Verhalten.
 */

/* Hero-Bereich grundsätzlich sauber innerhalb des Viewports halten */
.rr-seo-hero,
.rr-category-hero,
.rr-seo-manager-hero,
.rr-seo-content-hero {
    overflow: hidden !important;
}

/* Hero Grid: Text + Bild sauber ausrichten */
.rr-seo-hero,
.rr-category-hero,
.rr-seo-manager-hero,
.rr-seo-content-hero,
.rr-seo-hero-inner,
.rr-category-hero-inner,
.rr-seo-manager-hero-inner,
.rr-seo-content-hero-inner {
    align-items: center !important;
}

/* Bild-Spalte mehr Raum geben, ohne das Layout zu sprengen */
.rr-seo-hero__media,
.rr-seo-hero-media,
.rr-seo-hero-image,
.rr-category-hero__media,
.rr-category-hero-media,
.rr-category-hero-image,
.rr-seo-manager-hero__media,
.rr-seo-manager-hero-media,
.rr-seo-manager-hero-image,
.rr-seo-content-hero__media,
.rr-seo-content-hero-media,
.rr-seo-content-hero-image {
    width: min(100%, 580px) !important;
    max-width: 580px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

/* Das eigentliche Hero-Bild: größer, quadratisch, runde Ecken */
.rr-seo-hero img,
.rr-category-hero img,
.rr-seo-manager-hero img,
.rr-seo-content-hero img,
.rr-seo-hero__media img,
.rr-seo-hero-media img,
.rr-seo-hero-image img,
.rr-category-hero__media img,
.rr-category-hero-media img,
.rr-category-hero-image img,
.rr-seo-manager-hero__media img,
.rr-seo-manager-hero-media img,
.rr-seo-manager-hero-image img,
.rr-seo-content-hero__media img,
.rr-seo-content-hero-media img,
.rr-seo-content-hero-image img {
    width: 100% !important;
    max-width: 580px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 30px !important;
    display: block !important;
    box-shadow: 0 22px 60px rgba(16, 24, 40, 0.14) !important;
}

/* Falls das Motiv nicht angeschnitten werden soll, diese Klasse im Admin/Template ergänzen. */
.rr-hero-contain img,
.rr-seo-hero.is-contain img,
.rr-category-hero.is-contain img {
    object-fit: contain !important;
    background: #62d989 !important;
}

@media (min-width: 1200px) {
    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-hero-image,
    .rr-category-hero__media,
    .rr-category-hero-media,
    .rr-category-hero-image,
    .rr-seo-manager-hero__media,
    .rr-seo-manager-hero-media,
    .rr-seo-manager-hero-image,
    .rr-seo-content-hero__media,
    .rr-seo-content-hero-media,
    .rr-seo-content-hero-image,
    .rr-seo-hero img,
    .rr-category-hero img,
    .rr-seo-manager-hero img,
    .rr-seo-content-hero img {
        max-width: 620px !important;
    }
}

@media (max-width: 991px) {
    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-hero-image,
    .rr-category-hero__media,
    .rr-category-hero-media,
    .rr-category-hero-image,
    .rr-seo-manager-hero__media,
    .rr-seo-manager-hero-media,
    .rr-seo-manager-hero-image,
    .rr-seo-content-hero__media,
    .rr-seo-content-hero-media,
    .rr-seo-content-hero-image,
    .rr-seo-hero img,
    .rr-category-hero img,
    .rr-seo-manager-hero img,
    .rr-seo-content-hero img {
        max-width: 460px !important;
        border-radius: 24px !important;
    }
}

@media (max-width: 575px) {
    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-hero-image,
    .rr-category-hero__media,
    .rr-category-hero-media,
    .rr-category-hero-image,
    .rr-seo-manager-hero__media,
    .rr-seo-manager-hero-media,
    .rr-seo-manager-hero-image,
    .rr-seo-content-hero__media,
    .rr-seo-content-hero-media,
    .rr-seo-content-hero-image,
    .rr-seo-hero img,
    .rr-category-hero img,
    .rr-seo-manager-hero img,
    .rr-seo-content-hero img {
        max-width: 100% !important;
        border-radius: 20px !important;
    }
}