/* ============================================
   Hero HTML Block Styles
   ============================================ */

.wp-block-amphibee-hero-html.alignwide,
.wp-block-amphibee-hero-html:not(.alignwide) .hero-html-wrapper {
    max-width: 100% !important;
    margin: auto;
}

@media screen and (min-width: 992px) {
    .wp-block-amphibee-hero-html.alignwide,
    .wp-block-amphibee-hero-html:not(.alignwide) .hero-html-wrapper {
        max-width: 90% !important;
    }
}

@media screen and (min-width: 1700px) {
    .wp-block-amphibee-hero-html.alignwide,
    .wp-block-amphibee-hero-html:not(.alignwide) .hero-html-wrapper {
        max-width: calc(var(--gbg-wide-width) + 32px) !important;
    }
}

.wp-block-amphibee-hero-html {
    padding: 0 !important;
}

.wp-block-amphibee-hero-html:not(.alignwide).wp-block {
    max-width: inherit;
}

section.wp-block-amphibee-hero-html {
    margin: 0 !important;
}

/* Background color variations */
section.wp-block-amphibee-hero-html.background-light {
    background-color: var(--gbg-color-light);
}

section.wp-block-amphibee-hero-html.background-grey {
    background-color: var(--gbg-color-grey);
}

section.wp-block-amphibee-hero-html.background-primary {
    background-color: var(--gbg-color-primary);
    color: var(--gbg-color-light);
}

section.wp-block-amphibee-hero-html:is(.background-light, .background-grey) .hero-html-wrapper .wp-block-heading:not(.has-text-color),
section.wp-block-amphibee-hero-html:is(.background-light, .background-grey) .hero-html-wrapper p:not(.has-text-color),
section.wp-block-amphibee-hero-html:is(.background-light, .background-grey) .hero-html-wrapper .wp-block-amphibee-hero-content p:first-child:not(.has-text-color) {
    color: var(--gbg-color-primary) !important;
}

section.wp-block-amphibee-hero-html:is(.background-light, .background-grey) ul.is-style-amphibee-check-list {
    list-style-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"18\" height=\"17\" x=\"0\" y=\"0\" viewBox=\"0 0 24 24\" style=\"enable-background:new 0 0 512 512\" xml:space=\"preserve\" class=\"\"><g><g fill-rule=\"evenodd\" clip-rule=\"evenodd\"><path fill=\"%233100be\" d=\"M11.943 1.75H15a.75.75 0 0 1 0 1.5h-3c-2.26 0-3.88.002-5.112.167-1.21.163-1.933.472-2.466 1.005-.533.533-.842 1.256-1.005 2.466C3.252 8.12 3.25 9.74 3.25 12c0 2.26.002 3.88.167 5.112.163 1.21.472 1.933 1.005 2.466.533.533 1.256.842 2.466 1.005 1.232.165 2.852.167 5.112.167 2.26 0 3.88-.002 5.112-.167 1.21-.163 1.933-.471 2.466-1.005.533-.533.842-1.256 1.005-2.466.165-1.232.167-2.852.167-5.112v-2a.75.75 0 0 1 1.5 0v2.057c0 2.19 0 3.912-.18 5.255-.186 1.377-.573 2.469-1.43 3.327s-1.951 1.245-3.328 1.43c-1.343.181-3.064.181-5.255.181h-.114c-2.19 0-3.912 0-5.255-.18-1.377-.186-2.469-.573-3.327-1.43s-1.245-1.951-1.43-3.328c-.181-1.343-.181-3.064-.181-5.255v-.114c0-2.19 0-3.912.18-5.255.186-1.377.573-2.469 1.43-3.327.86-.858 1.951-1.245 3.328-1.43 1.343-.181 3.064-.181 5.255-.181z\" opacity=\"1\" data-original=\"%23111111\" class=\"\"></path><path fill=\"%233100be\" d=\"M21.502 2.943a.75.75 0 0 1 .056 1.059l-9 10a.75.75 0 0 1-1.088.028l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.941 2.94 8.472-9.412a.75.75 0 0 1 1.059-.055z\" opacity=\"1\" data-original=\"%23222222\" class=\"\"></path></g></g></svg>");
    color: var(--gbg-color-primary);
}

section.wp-block-amphibee-hero-html.background-primary .hero-html-wrapper .wp-block-heading:not(.has-text-color) {
    color: var(--gbg-color-light) !important;
}

section.wp-block-amphibee-hero-html.background-secondary {
    background-color: var(--gbg-color-secondary);
    color: var(--gbg-color-light);
}

section.wp-block-amphibee-hero-html .hero-html-wrapper .hero-media-html-block .wp-block-heading {
    font-size: clamp(20px, 4vw, 32px);
    line-height: 1.25;
    text-align: center;
}

section.wp-block-amphibee-hero-html .hero-html-wrapper .hero-media-html-block .wp-block-heading:not(.has-text-color) {
    color: var(--gbg-color-primary) !important;
    margin-top: 25px;
    margin-bottom: 16px;
}

section.wp-block-amphibee-hero-html.background-secondary .hero-html-wrapper .wp-block-heading {
    color: var(--gbg-color-light) !important;
}

.wp-block-amphibee-hero-html .hero-html-wrapper {
    padding: 48px 32px;
}

@media screen and (min-width: 998px) {
    .wp-block-amphibee-hero-html .hero-html-wrapper {
        padding: 48px 0;
    }
}

body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper,
body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
}

/* Mobile image positioning */
body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-top,
body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-top > .block-editor-inner-blocks > .block-editor-block-list__layout {
    flex-direction: column-reverse;
}

body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-bottom,
body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-bottom > .block-editor-inner-blocks > .block-editor-block-list__layout {
    flex-direction: column;
}

body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper > *,
body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
    margin: 0;
}

@media screen and (min-width: 998px) {
    /* Reset mobile column behavior on desktop */
    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-top,
    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-bottom,
    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-top > .block-editor-inner-blocks > .block-editor-block-list__layout,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper.mobile-image-bottom > .block-editor-inner-blocks > .block-editor-block-list__layout,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-direction: row;
    }

    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper .wp-block-amphibee-hero-content,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:first-child {
        max-width: 50%;
        width: 100%;
        margin-top: 32px !important;
    }

    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper .wp-block-amphibee-hero-media-html,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:last-child {
        max-width: 45%;
        width: 100%;
    }
}

@media screen and (min-width: 1300px) {
    body:not(.block-editor-page) .wp-block-amphibee-hero-html .hero-html-wrapper .wp-block-amphibee-hero-media-html,
    body.block-editor-page .wp-block-amphibee-hero-html .hero-html-wrapper > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:last-child {
        max-width: 40%;
    }
}