/* THERATEX Premium v1.2.7 - natural, balanced hero photo framing.
 * The previous full-width cover made portrait photographs look much too large.
 * The hero now reserves the left side for copy and displays the real, editable
 * photo in a right-side image area. Testimonials deliberately remain full-bleed.
 * This works with both native template and existing Elementor image widgets.
 */

/* 1. Classic/shortcode homepage: natural right-side photograph, NO edge mask. */
.theratex-premium .tx-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.theratex-premium .tx-hero-model {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 59% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: cover !important;
    object-position: var(--tx-hero-photo-x, 55%) var(--tx-hero-photo-y, 8%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
    z-index: -1;
}
/* The soft veil sits over the photo; the left block is a proper text area,
   not an uncovered gap in a full-width image. */
.theratex-premium .tx-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        #eaf2f2 0%,
        rgba(234,242,242,.99) 28%,
        rgba(234,242,242,.92) 39%,
        rgba(234,242,242,.65) 46%,
        rgba(234,242,242,.19) 56%,
        rgba(234,242,242,0) 67%,
        rgba(208,226,235,.08) 82%,
        rgba(208,226,235,.37) 100%);
}
.theratex-premium .tx-hero-layout {position:relative;z-index:1;}
.theratex-premium .tx-hero-aside li {
    text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 6px rgba(255,255,255,.85);
}

/* 2. Testimonials: keep the previous full-width photo correction unchanged. */
.theratex-premium .tx-testimonials {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.theratex-premium .tx-testimonials::after {
    content: "";
    position: absolute;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: -1;
    background-image: var(--tx-testimonial-image) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: var(--tx-testimonial-photo-x,70%) var(--tx-testimonial-photo-y,45%) !important;
}
.theratex-premium .tx-testimonials::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
       rgba(246,231,210,.86) 0%,
       rgba(246,231,210,.75) 25%,
       rgba(246,231,210,.45) 44%,
       rgba(246,231,210,.06) 68%,
       rgba(246,231,210,0) 88%);
}
.theratex-premium .tx-testimonial-content {position:relative;z-index:1;}

/* 3. Existing Elementor homepage: resize the editable IMAGE COLUMN rather
   than replace the photo or regenerate page content. Extend it to the viewport
   right edge only, so its cover crop is much less aggressive. */
.theratex-premium .tx-el-hero.elementor-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.theratex-premium .tx-el-hero.elementor-section > .elementor-container {
    position: relative;
    z-index: auto !important;
    display: flex;
    align-items: center;
}
.theratex-premium .tx-el-hero .tx-el-hero-middle.elementor-column {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 42% !important;
    right: calc((100vw - 100%) / -2) !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    flex: none !important;
    overflow: hidden;
    z-index: 0 !important;
}
.theratex-premium .tx-el-hero .tx-el-hero-middle::after {content:none !important;}
.theratex-premium .tx-el-hero.elementor-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        #eaf2f2 0%,
        rgba(234,242,242,.99) 28%,
        rgba(234,242,242,.92) 39%,
        rgba(234,242,242,.65) 46%,
        rgba(234,242,242,.19) 56%,
        rgba(234,242,242,0) 67%,
        rgba(208,226,235,.08) 82%,
        rgba(208,226,235,.37) 100%);
}
.theratex-premium .tx-el-hero .tx-el-hero-left.elementor-column,
.theratex-premium .tx-el-hero .tx-el-hero-right.elementor-column {
    position: relative;
    z-index: 2 !important;
}
.theratex-premium .tx-el-hero .tx-el-hero-left.elementor-column {
    width: 45% !important;
    flex: 0 0 45% !important;
}
.theratex-premium .tx-el-hero .tx-el-hero-right.elementor-column {
    width: 19% !important;
    flex: 0 0 19% !important;
    margin-left: auto;
}
.theratex-premium .tx-el-hero .tx-el-hero-middle > .elementor-widget-wrap,
.theratex-premium .tx-el-hero .tx-el-hero-model,
.theratex-premium .tx-el-hero .tx-el-hero-model .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
}
.theratex-premium .tx-el-hero .tx-el-hero-model img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: var(--tx-hero-photo-x,55%) var(--tx-hero-photo-y,8%) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
}
.theratex-premium .tx-el-hero .tx-el-hero-benefits p {
    text-shadow: 0 1px 2px rgba(255,255,255,.95),0 0 6px rgba(255,255,255,.85);
}

/* 4. Tablets: keep the right-side photo, and wrap text instead of clipping. */
@media (min-width:701px) and (max-width:1000px) {
    .theratex-premium .tx-hero-model {width:62% !important;}
    .theratex-premium .tx-el-hero .tx-el-hero-middle.elementor-column {left:40% !important;}
    .theratex-premium .tx-hero-copy h1 em,
    .theratex-premium .tx-el-hero .tx-el-hero-title span {white-space:normal !important;}
    .theratex-premium .tx-hero-aside li {white-space:normal !important;}
    .theratex-premium .tx-el-hero .tx-el-hero-title .elementor-heading-title {
        font-size:clamp(32px,4vw,40px) !important;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-benefits p {
        white-space:normal !important;font-size:10px !important;line-height:1.45 !important;
    }
}

/* 5. Phone: show the picture in its own lower visual area, not behind the
   entire text. This avoids enormous faces while keeping the photo visible. */
@media (max-width:700px) {
    .theratex-premium .tx-hero-model {
        top:215px !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:calc(100% - 215px) !important;
    }
    .theratex-premium .tx-hero::after,
    .theratex-premium .tx-el-hero.elementor-section::after {
        background:linear-gradient(180deg,
            #eaf2f2 0%,
            rgba(234,242,242,.97) 24%,
            rgba(234,242,242,.68) 33%,
            rgba(234,242,242,.02) 52%,
            rgba(234,242,242,.03) 76%,
            rgba(234,242,242,.52) 100%);
    }
    .theratex-premium .tx-hero-aside li {white-space:normal;}
    .theratex-premium .tx-el-hero.elementor-section,
    .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
        min-height:655px !important;
    }
    .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
        display:flex !important;
        flex-wrap:wrap !important;
        align-content:flex-start;
        align-items:flex-start;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-middle.elementor-column {
        top:245px !important;
        bottom:126px !important;
        left:calc((100vw - 100%) / -2) !important;
        right:calc((100vw - 100%) / -2) !important;
        width:auto !important;
        height:auto !important;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-left.elementor-column {
        width:100% !important;
        flex:0 0 100% !important;
        padding-top:17px;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-right.elementor-column {
        position:absolute !important;
        left:0;
        right:0;
        bottom:18px;
        width:100% !important;
        height:auto !important;
        flex:none !important;
        margin:0 !important;
        border:1px solid rgba(219,233,236,.90);
        background:rgba(246,250,251,.93);
        border-radius:12px;
        box-shadow:0 6px 18px rgba(8,43,58,.10);
    }
    .theratex-premium .tx-el-hero .tx-el-hero-right .elementor-widget-wrap {
        display:flex !important;
        flex-flow:row nowrap !important;
        align-items:center !important;
        align-content:center !important;
        gap:12px;
        height:auto !important;
        padding:12px !important;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-right .tx-el-round-badge {
        width:78px !important;
        height:78px !important;
        min-width:78px !important;
        margin:0 !important;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-right .tx-el-hero-benefits {
        width:auto !important;
        flex:1 1 0 !important;
        min-width:0;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-benefits p {
        font-size:10px !important;
        line-height:1.35 !important;
        white-space:normal !important;
        margin-bottom:3px !important;
    }
    .theratex-premium .tx-testimonials::before {
        background:linear-gradient(90deg,
           rgba(246,231,210,.95) 0%,
           rgba(246,231,210,.88) 42%,
           rgba(246,231,210,.35) 85%,
           rgba(246,231,210,.20) 100%);
    }
}
@media (max-width:500px) {
    .theratex-premium .tx-hero-model {
        top:260px !important;
        height:calc(100% - 260px) !important;
    }
    .theratex-premium .tx-el-hero.elementor-section,
    .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
        min-height:735px !important;
    }
    .theratex-premium .tx-el-hero .tx-el-hero-title span {white-space:normal !important;}
    .theratex-premium .tx-testimonials::before {
        background:linear-gradient(90deg,
           rgba(246,231,210,.96),rgba(246,231,210,.84) 52%,rgba(246,231,210,.55) 100%);
    }
}