/* THERATEX Premium 1.2.8 | Approved homepage hero, 03 Nov 2026.
 * Display the real WordPress/Elementor image at a natural scale in the
 * center-right, preserving the left copy and the M-Inside callout.
 * No page regeneration and no changes to the other homepage sections.
 */
@media (min-width:1001px) {
  .theratex-premium .tx-hero {
    height:335px;
    background:#eaf2f4;
  }
  .theratex-premium .tx-hero .tx-hero-layout {
    width:84%;max-width:1160px;height:100%;
  }
  .theratex-premium .tx-hero .tx-hero-copy {
    width:53%;padding:18px 0 14px;transform:translateY(9px);
  }
  .theratex-premium .tx-hero .tx-hero-copy h1 {
    max-width:650px;font-size:clamp(44px,3.95vw,62px);
    line-height:.9;margin-bottom:4px;
  }
  .theratex-premium .tx-hero .tx-hero-aside {
    width:150px;margin-right:-10px;flex:0 0 150px;transform:translateY(6px);
  }
  .theratex-premium .tx-hero .tx-hero-aside ul {padding-left:24px;}

  /* The previous 59%-wide full-height cover stretched the same portrait
     across a huge panoramic area. Its bounded rectangle is almost the same
     aspect ratio as the source, avoiding the extreme crop/zoom. */
  .theratex-premium .tx-hero .tx-hero-model {
    left:auto !important;
    right:22% !important;
    top:-6% !important;
    bottom:auto !important;
    width:30% !important;
    height:120% !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;
    opacity:1 !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 25%,#000 82%,rgba(0,0,0,.45) 94%,transparent 100%) !important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 25%,#000 82%,rgba(0,0,0,.45) 94%,transparent 100%) !important;
  }
  .theratex-premium .tx-hero .tx-hero-description {max-width:320px;margin-bottom:4px;}
  .theratex-premium .tx-hero .tx-hero-actions .tx-btn {min-height:28px;padding:6px 14px;font-size:10px;}
  .theratex-premium .tx-hero .tx-hero-actions .tx-btn-gold {min-width:159px;}
  .theratex-premium .tx-hero .tx-hero-actions .tx-btn-outline {min-width:100px;}
  .theratex-premium .tx-hero .tx-hero-actions {gap:14px;}
  .theratex-premium .tx-hero::after {
    background:linear-gradient(90deg,
      rgba(235,243,245,1) 0%,
      rgba(235,243,245,.99) 19%,
      rgba(235,243,245,.87) 32%,
      rgba(235,243,245,.54) 42%,
      rgba(235,243,245,0) 58%,
      rgba(235,243,245,.06) 72%,
      rgba(235,243,245,.52) 88%,
      rgba(235,243,245,.98) 100%);
  }

  /* Already-installed Elementor homepages retain their editable image widget
     and texts; only the geometric framing changes. */
  .theratex-premium .tx-el-hero.elementor-section {
    height:335px !important;
    min-height:335px !important;
    background:#eaf2f4;
  }
  .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
    max-width:1160px !important;
    width:84% !important;
    height:335px !important;
    min-height:335px !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-left.elementor-column {
    width:53% !important;
    flex:0 0 53% !important;
    transform:translateY(9px);
  }
  .theratex-premium .tx-el-hero .tx-el-hero-title .elementor-heading-title {
    font-size:clamp(44px,3.95vw,62px) !important;
    line-height:.9 !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-right.elementor-column {
    width:150px !important;
    flex:0 0 150px !important;
    margin-left:auto !important;
    z-index:3 !important;
    transform:translateY(6px);
  }
  .theratex-premium .tx-el-hero .tx-el-hero-middle.elementor-column {
    top:-6% !important;
    bottom:auto !important;
    left:47% !important;
    right:11% !important;
    width:auto !important;
    height:120% !important;
    z-index:0 !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-model img {
    object-fit:cover !important;
    object-position:var(--tx-hero-photo-x,55%) var(--tx-hero-photo-y,8%) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 25%,#000 82%,rgba(0,0,0,.45) 94%,transparent 100%) !important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.68) 12%,#000 25%,#000 82%,rgba(0,0,0,.45) 94%,transparent 100%) !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-desc {max-width:320px;margin:4px 0 4px;}
  .theratex-premium .tx-el-hero .tx-el-btn .elementor-button {padding:8px 16px!important;font-size:10px!important;}
  .theratex-premium .tx-el-hero.elementor-section::after {
    background:linear-gradient(90deg,
      rgba(235,243,245,1) 0%,
      rgba(235,243,245,.99) 19%,
      rgba(235,243,245,.87) 32%,
      rgba(235,243,245,.54) 42%,
      rgba(235,243,245,0) 58%,
      rgba(235,243,245,.06) 72%,
      rgba(235,243,245,.52) 88%,
      rgba(235,243,245,.98) 100%);
  }
}

/* Tablet: same composition but a gentler overlap and readable side callout. */
@media (min-width:701px) and (max-width:1000px) {
  .theratex-premium .tx-hero {height:340px;}
  .theratex-premium .tx-hero .tx-hero-model {
    top:-4% !important;bottom:auto !important;
    right:10% !important;left:auto !important;
    width:43% !important;height:125% !important;
    object-fit:cover !important;
    object-position:var(--tx-hero-photo-x,55%) var(--tx-hero-photo-y,8%) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 78%,transparent) !important;
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 78%,transparent) !important;
  }
  .theratex-premium .tx-hero .tx-hero-layout {height:100%;}
  .theratex-premium .tx-hero .tx-hero-copy {width:53%;}
  .theratex-premium .tx-hero .tx-hero-copy h1 {font-size:clamp(31px,4.1vw,40px);}
  .theratex-premium .tx-hero .tx-hero-copy h1 em {white-space:normal !important;}
  .theratex-premium .tx-hero .tx-hero-aside {width:145px;margin-right:0;}
  .theratex-premium .tx-hero::after,
  .theratex-premium .tx-el-hero.elementor-section::after {
    background:linear-gradient(90deg,#eaf2f4 0%,rgba(234,242,244,.93) 24%,rgba(234,242,244,.55) 44%,rgba(234,242,244,0) 64%,rgba(234,242,244,.78) 100%);
  }
  .theratex-premium .tx-el-hero.elementor-section,
  .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
    min-height:340px !important;height:340px !important;
  }
  .theratex-premium .tx-el-hero.elementor-section > .elementor-container {
    width:90% !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-middle.elementor-column {
    top:-4% !important;bottom:auto !important;
    left:42% !important;right:4% !important;width:auto !important;height:125% !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-model img {
    object-fit:cover !important;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 78%,transparent) !important;
    mask-image:linear-gradient(90deg,transparent,#000 18%,#000 78%,transparent) !important;
  }
  .theratex-premium .tx-el-hero .tx-el-hero-left.elementor-column {width:54% !important;flex:0 0 54% !important;}
  .theratex-premium .tx-el-hero .tx-el-hero-right.elementor-column {width:135px !important;flex:0 0 135px !important;margin-left:auto !important;}
  .theratex-premium .tx-el-hero .tx-el-hero-right .tx-el-round-badge {width:96px !important;height:96px !important;}
}
/* Phones preserve the proven stacked layout from v1.2.7, where the image
   occupies its own lower section and never zooms across the text. */