/*
 * Riizz Roots SEO Hero Square Fix V3.0
 * Forces SEO manager hero images/media to render in a stable 1:1 ratio.
 * Keep this stylesheet alphabetically late so it overrides earlier template styles.
 */

/* Prevent the hero from being pulled/cropped outside the viewport */
.rr-seo-hero,
.rr-seo-hero-wrap,
.rr-seo-manager-hero,
.rr-seo-category-hero,
.rr-category-seo-hero,
.rr-seo-intro-hero {
    width: min(100%, 1600px) !important;
    max-width: calc(100vw - clamp(24px, 4vw, 72px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Keep the hero grid balanced and stop text/image from overflowing */
.rr-seo-hero__inner,
.rr-seo-hero-inner,
.rr-seo-manager-hero__inner,
.rr-seo-category-hero__inner,
.rr-category-seo-hero__inner,
.rr-seo-intro-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) !important;
    align-items: center !important;
    gap: clamp(28px, 4vw, 72px) !important;
    box-sizing: border-box !important;
}

.rr-seo-hero__content,
.rr-seo-hero-content,
.rr-seo-manager-hero__content,
.rr-seo-category-hero__content,
.rr-category-seo-hero__content,
.rr-seo-intro-hero__content {
    min-width: 0 !important;
    max-width: 780px !important;
    overflow-wrap: break-word !important;
}

/* Main fix: square media area */
.rr-seo-hero__media,
.rr-seo-hero-media,
.rr-seo-manager-hero__media,
.rr-seo-category-hero__media,
.rr-category-seo-hero__media,
.rr-seo-intro-hero__media,
.rr-seo-hero-image,
.rr-seo-manager-hero-image,
.rr-category-seo-hero-image {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: clamp(20px, 2vw, 34px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Image itself: never stretch wide, never become banner-shaped */
.rr-seo-hero__media img,
.rr-seo-hero-media img,
.rr-seo-manager-hero__media img,
.rr-seo-category-hero__media img,
.rr-category-seo-hero__media img,
.rr-seo-intro-hero__media img,
.rr-seo-hero-image img,
.rr-seo-manager-hero-image img,
.rr-category-seo-hero-image img,
.rr-seo-hero img.rr-seo-main-image,
.rr-seo-manager-hero img,
.rr-category-seo-hero img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: inherit !important;
    max-width: none !important;
    max-height: none !important;
}

/* Fallback for cases where the image is directly inside a generic hero card */
.rr-seo-hero > img,
.rr-seo-manager-hero > img,
.rr-category-seo-hero > img,
.rr-seo-intro-hero > img {
    display: block !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Desktop: allow a bigger, clean square without clipping */
@media (min-width: 1400px) {
    .rr-seo-hero__inner,
    .rr-seo-hero-inner,
    .rr-seo-manager-hero__inner,
    .rr-seo-category-hero__inner,
    .rr-category-seo-hero__inner,
    .rr-seo-intro-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 560px) !important;
    }

    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-manager-hero__media,
    .rr-seo-category-hero__media,
    .rr-category-seo-hero__media,
    .rr-seo-intro-hero__media,
    .rr-seo-hero-image,
    .rr-seo-manager-hero-image,
    .rr-category-seo-hero-image {
        width: min(100%, 560px) !important;
        max-width: 560px !important;
    }
}

/* Tablet/mobile: stack hero cleanly */
@media (max-width: 991px) {
    .rr-seo-hero__inner,
    .rr-seo-hero-inner,
    .rr-seo-manager-hero__inner,
    .rr-seo-category-hero__inner,
    .rr-category-seo-hero__inner,
    .rr-seo-intro-hero__inner {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .rr-seo-hero__content,
    .rr-seo-hero-content,
    .rr-seo-manager-hero__content,
    .rr-seo-category-hero__content,
    .rr-category-seo-hero__content,
    .rr-seo-intro-hero__content {
        max-width: 100% !important;
        text-align: left !important;
    }

    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-manager-hero__media,
    .rr-seo-category-hero__media,
    .rr-category-seo-hero__media,
    .rr-seo-intro-hero__media,
    .rr-seo-hero-image,
    .rr-seo-manager-hero-image,
    .rr-category-seo-hero-image {
        width: min(100%, 420px) !important;
        max-width: 420px !important;
    }
}

@media (max-width: 575px) {
    .rr-seo-hero,
    .rr-seo-hero-wrap,
    .rr-seo-manager-hero,
    .rr-seo-category-hero,
    .rr-category-seo-hero,
    .rr-seo-intro-hero {
        max-width: calc(100vw - 24px) !important;
        border-radius: 22px !important;
    }

    .rr-seo-hero__media,
    .rr-seo-hero-media,
    .rr-seo-manager-hero__media,
    .rr-seo-category-hero__media,
    .rr-category-seo-hero__media,
    .rr-seo-intro-hero__media,
    .rr-seo-hero-image,
    .rr-seo-manager-hero-image,
    .rr-category-seo-hero-image {
        width: min(100%, 320px) !important;
        max-width: 320px !important;
    }
}