/* Patient Hero Styles - Only overrides from HCP hero */

:root {
    --hero-patient-content-width-max: 600px;
}

.page-template-page-deflatehae-patient .hero-section-wrapper {
    padding-bottom: 210px;
    background: var(--color-light-yellow-to-white-gradient);
    position: relative;
}

.page-template-page-deflatehae-patient .hero-section-wrapper.secondary:not(.blue) {
    background: var(--color-yellow);
    position: relative;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    padding-bottom: 0;
}

.page-template-page-deflatehae-patient .hero-section-wrapper.secondary.blue {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    padding-bottom: 210px; /* Match the HCP wrapper padding for proper height calculation */
}

.page-template-page-deflatehae-patient .hero-inner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-template-page-deflatehae-patient .hero-section-wrapper.secondary:not(.blue) .hero-inner-wrapper {
    height: 540px;
    overflow: hidden;
}

.page-template-page-deflatehae-patient .hero-secondary:not(.blue) {
    background: var(--color-yellow);
    margin-bottom: 0;
    padding-top: 270px;
    height: 540px;
    z-index: 1;
    overflow: hidden;
    /* Safari-specific layout fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Ensure proper box model calculation */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* Override the general hero title styles for blue variant */
.page-template-page-deflatehae-patient .hero-secondary.blue .hero-title,
.page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .big,
.page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .small {
    color: var(--color-white);
}

.page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .big {
    font-size: var(--font-size-hero-headline-big-blue);
    line-height: var(--font-lh-hero-headline-big-blue);
    margin-top: 0;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    width: auto;
    max-width: 100%;
    min-width: 800px;
    text-align: center;
}

.page-template-page-deflatehae-patient .hero-secondary.blue {
    padding-top: 270px;
    height: 540px;
    margin-bottom: -210px; /* Pull the next content section up to hide the overlap */
    /* Safari-specific fixes */
    -webkit-transform: translateZ(0); /* Force hardware acceleration */
    transform: translateZ(0);
    /* Ensure proper height calculation in Safari */
    min-height: 540px;
    max-height: 540px;
    /* Alternative gradient approach for Safari */
    background: -webkit-linear-gradient(to bottom, #29AAE1, #1C7399);
    background: linear-gradient(to bottom, #29AAE1, #1C7399);
}

/* Remove the old ::after pseudo element for blue variant */
.page-template-page-deflatehae-patient .hero-secondary.blue::after {
    display: none;
}

/* Bottom curve container - positioned relative to main wrapper */
.page-template-page-deflatehae-patient .bottom-curve-container {
    position: absolute;
    bottom: -34px;
    left: 0;
    right: 0;
    height: 35px;
    overflow: hidden;
    z-index: 3;
    /* Safari-specific positioning fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.page-template-page-deflatehae-patient .bottom-curve {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    -webkit-mask-image: url(#patient-subnav-shape-mask);
    mask-image: url(#patient-subnav-shape-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom center;
    mask-position: bottom center;
    z-index: 3;
    /* Safari-specific mask rendering fix */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.page-template-page-deflatehae-patient .bottom-curve-container:not(.blue) .bottom-curve {
    background-color: var(--color-yellow);
}

.page-template-page-deflatehae-patient .bottom-curve-container.blue .bottom-curve {
    background-color: var(--color-blue-dark);
    /* Safari-specific background fix */
    background: -webkit-linear-gradient(to bottom, #1C7399, #1C7399);
    background: linear-gradient(to bottom, #1C7399, #1C7399);
    /* Ensure consistent positioning with regular variant */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.page-template-page-deflatehae-patient .hero-title,
.page-template-page-deflatehae-patient .hero-title .big,
.page-template-page-deflatehae-patient .hero-title .small {
    color: var(--color-nav-gray);
}

/* Keep the h1 full width for borders */
.page-template-page-deflatehae-patient .hero-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Position the text content to the right */
.page-template-page-deflatehae-patient .hero-title .small {
    max-width: var(--hero-patient-content-width-max);
    min-width: 830px;
    text-align: center;
}

/* Keep the big text container full width for borders */
.page-template-page-deflatehae-patient .hero-title .big {
    max-width: var(--hero-patient-content-width-max);
    text-align: center;
    margin: 40px 0;
    position: relative;
    min-width: 1100px;
    padding: 0;
    font-size: 4.5rem;
    line-height: 5.2rem;
}

.page-template-page-deflatehae-patient .left-image-right-text .hero-title {
    align-items: flex-end;
}

.page-template-page-deflatehae-patient .right-image-left-text .hero-title {
    align-items: flex-start;
}

.page-template-page-deflatehae-patient .left-image-right-text .hero-title .big{
    padding: 0 10% 0 35%;
}

.page-template-page-deflatehae-patient .right-image-left-text .hero-title .big{
    padding: 0 35% 0 10%;
}
    
/* Position the actual text within the big span */
.page-template-page-deflatehae-patient .hero-title .big > span {
    max-width: var(--hero-patient-content-width-max);
    margin-left: auto;
    padding-right: 30px;
    text-align: left;
    display: block;
}

/* Override SVG border colors */
.page-template-page-deflatehae-patient .hero-content h1 .big .hero-border-top,
.page-template-page-deflatehae-patient .hero-content h1 .big .hero-border-bottom {
    color: var(--color-yellow);
}

.page-template-page-deflatehae-patient .hero-title .big::before,
.page-template-page-deflatehae-patient .hero-title .big::after {
    color: var(--color-yellow);
    background-size: 100% 200%;
    width: 100%;
    height: 7px;
} 

.page-template-page-deflatehae-patient .carousel-slide {
    overflow: hidden;
}

.page-template-page-deflatehae-patient .carousel-slide img {
    margin-top: 60px;
}

.page-template-page-deflatehae-patient .hero-content {
    top: 55%;
    width: clamp(var(--hero-content-width-min), var(--hero-content-width-preferred), var(--hero-patient-content-width-max));
}

.page-template-page-deflatehae-patient .hero-copy {
    background-color: transparent;
}

.page-template-page-deflatehae-patient .center-image {
    height: auto;
    width: 360px;
}

.page-template-page-deflatehae-patient .center-image img {
    height: 100%;
    width: 100%;
}

/* Patient-specific hero bottom styles - only for patient content, not carousel */
.page-template-page-deflatehae-patient .hero-bottom:not(.text-content) {
    padding-bottom: 70px;
}

.page-template-page-deflatehae-patient .hero-content-secondary {
    position: relative;
    max-width: 1177px;
    margin: 0 auto;
    padding: 0 30px 20px; /* Reduce bottom padding since we've added it to the parent */
    text-align: center;
    z-index: 0; /* Ensure text is at the bottom layer */
}

.page-template-page-deflatehae-patient .hero-secondary.blue .hero-content-secondary {
    max-width: unset;
    padding: 0 0 20px;
}

/* Position the patient hero secondary image - FIXED LAYERING */
.page-template-page-deflatehae-patient .patient-hero-secondary-image {
    position: absolute;
    bottom: -20px;
    width: 45%;
    left: 50%;
    max-width: 320px;
    /* Set z-index to be above text but below mask */
    z-index: 2; /* Above text, below curve mask */
    /* Remove clip-path - it's not working as expected */
}

.page-template-page-deflatehae-patient .right-image-left-text .patient-hero-secondary-image {
    transform: translateX(45%);
}

.page-template-page-deflatehae-patient .left-image-right-text .patient-hero-secondary-image {
    transform: translateX(-150%);
}

.page-template-page-deflatehae-patient .patient-hero-secondary-image img {
    width: 100%;
    height: auto;
    display: block;
}

.page-template-page-deflatehae-patient .disclaimer-text-container {
    top: 150px;
    left: 75%;
}

@media (max-width: 1599px) {
    .page-template-page-deflatehae-patient .hero-content{
        top: 60%;
    }
}

@media (max-width: 1366px) {
    .page-template-page-deflatehae-patient .hero-section {
        padding-top: clamp(80px, 18vh, 140px);
    }

    .page-template-page-deflatehae-patient .hero-secondary:not(.blue) {
        padding-top: 270px;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue {
        padding-top: 300px;
    }

    .page-template-page-deflatehae-patient .bottom-curve-container {
        bottom: -20px;
        height: 20px;
    }

    .page-template-page-deflatehae-patient .bottom-curve-container.blue {
        bottom: -34px;
        height: 35px;
    }

    .page-template-page-deflatehae-patient .bottom-curve-container:not(.blue) .bottom-curve {
        height: 100px;
    }
}

@media (max-width: 1024px) {

    .page-template-page-deflatehae-patient .hero-secondary:not(.blue) {
        padding-top: 170px;
    }

    .page-template-page-deflatehae-patient .hero-section-wrapper.secondary:not(.blue) .hero-inner-wrapper {
        height: 410px;
    }

    .page-template-page-deflatehae-patient .hero-section {
        padding-top: 60px;
    }

    .page-template-page-deflatehae-patient .hero-secondary:not(.blue) {
        padding-top: 170px;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue {
        padding-top: 140px;
        height: 410px;
        min-height: 410px;
        max-height: 410px;
        /* Safari-specific fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .page-template-page-deflatehae-patient .patient-hero-secondary-image {
        width: 50%;
    }

    .page-template-page-deflatehae-patient .left-image-right-text .patient-hero-secondary-image {
        left: 63%;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .patient-hero-secondary-image {
        left: 40%;
    }

    .page-template-page-deflatehae-patient .left-image-right-text .hero-title .small {
        min-width: 100%;
        width: 100%;
        padding: 0 0 0 33%;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .hero-title .small {
        min-width: 100%;
        width: 100%;
        padding: 0 27% 0 0;
    }

    /* Position the text content to the right */
    .page-template-page-deflatehae-patient .left-image-right-text .hero-title .big {
        min-width: 100%;
        width: 100%;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .hero-title .big {
        min-width: 100%;
        width: 100%;
    }

    /* Keep the big text container full width for borders */
    .page-template-page-deflatehae-patient .hero-title .big {
        max-width: var(--hero-patient-content-width-max);
        text-align: center;
        margin: 40px 0;
        position: relative;
        min-width: 1100px;
        padding: 0;
        font-size: 4.5rem;
        line-height: 5.2rem;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .big {
        font-size: 6rem;
        line-height: 7rem;
        min-width: 400px;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .small {
        font-size: 2.0rem;
        line-height: 2.6rem;
        min-width: 600px;
    }

    .page-template-page-deflatehae-patient .hero-title .small {
        min-width: 600px;
        font-size: 2.0rem;
        line-height: 2.4rem;
    }

    .page-template-page-deflatehae-patient .hero-title .big {
        min-width: 800px;
        font-size: 3.5rem;
        line-height: 4.2rem;
    }

    .page-template-page-deflatehae-patient .disclaimer-text-container {
        top: 100px;
        left: 80%;
    }
}

@media (max-width: 767px) {
    .page-template-page-deflatehae-patient .hero-section-wrapper:not(.secondary):not(.blue) {
        padding-bottom: 450px;
    }

    .page-template-page-deflatehae-patient .hero-secondary:not(.blue) {
        padding-top: 150px;
        height: 410px;
    }

    .page-template-page-deflatehae-patient .hero-section-wrapper.secondary:not(.blue) .hero-inner-wrapper {
        height: 480px;
    }

    .page-template-page-deflatehae-patient .hero-carousel-disclaimer {
        position: relative;
        margin: 0 auto;
    }

    .page-template-page-deflatehae-patient .text-content {
        padding: 0 0 170px 0;
    }

    /* Patient-specific hero bottom styles - only for patient content, not carousel */
    .page-template-page-deflatehae-patient .hero-bottom:not(.text-content) {
        padding-bottom: 170px;
    }

    .page-template-page-deflatehae-patient .hero-content {
        top: 50%;
    }

    .page-template-page-deflatehae-patient .left-text-container {
        margin-top: 0;
    }

    .page-template-page-deflatehae-patient .right-text-container {
        margin-top: 0px;
    }

    .page-template-page-deflatehae-patient .center-images-container {
        margin: 130px 0 10px 0;
    }

    .page-template-page-deflatehae-patient .hero-section-wrapper.secondary:not(.blue) {
        background: var(--color-yellow);
    }

    .page-template-page-deflatehae-patient .left-image-right-text .patient-hero-secondary-image,
    .page-template-page-deflatehae-patient .right-image-left-text .patient-hero-secondary-image {
        left: 47%;
    }

    .page-template-page-deflatehae-patient .hero-title .small {
        min-width: unset;
        font-size: 1.6rem;
        line-height: 2.0rem;
        padding: 0 20px;
    }

    .page-template-page-deflatehae-patient .hero-title .big {
        min-width: unset;
        padding: 0 20px;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .hero-title .big,
    .page-template-page-deflatehae-patient .left-image-right-text .hero-title .big {
        min-width: unset;
        font-size: 2.8rem;
        line-height: 3.4rem;
        padding: 0;
        margin: 20px auto 0;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .hero-title .small,
    .page-template-page-deflatehae-patient .left-image-right-text .hero-title .small {
        margin: 0 auto;
        padding: 0;
    }

    .page-template-page-deflatehae-patient .hero-section-wrapper.blue {
        padding-bottom: 100px;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue {
        padding-top: 160px;
        height: 475px;
        min-height: 475px;
        max-height: 475px;
        /* Safari-specific fixes */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .small {
        min-width: unset;
        white-space: normal;
        align-items: center;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .big {
        min-width: unset;
        white-space: normal;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .page-template-page-deflatehae-patient .hero-secondary.blue .hero-title .big > span {
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }

    .page-template-page-deflatehae-patient .right-image-left-text .patient-hero-secondary-image,
    .page-template-page-deflatehae-patient .left-image-right-text .patient-hero-secondary-image {
        width: 60%;
        bottom: -17px;
        transform: translateX(-50%);
        max-width: 250px;
    }

    .page-template-page-deflatehae-patient .disclaimer-text-container {
        top: 95px;
        left: 50%;
        transform: translateX(-50%);
    }

    .page-template-page-deflatehae-patient .bottom-curve-container {
        bottom: -11px;
        height: 12px;
        /* Safari-specific positioning fix for mobile */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .page-template-page-deflatehae-patient .bottom-curve-container:not(.blue) .bottom-curve {
        height: 50px;
        /* Safari-specific mask fix for mobile */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}