/* Original Elementor f31fe76 section: full-width fixed backdrop with the content
   moving in front of it. Restore that composition instead of the prior split image.
   The original uses a #124973 overlay (opacity 0.5) on the entire image and
   a black overlay (opacity 0.6) behind the right-hand content column. */
.show-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 395px;
  margin-block: 50px;
  background-color: #124973;
  background-image:
    linear-gradient(rgba(18, 73, 115, .50), rgba(18, 73, 115, .50)),
    url('media/2026/10/podcast-section-background.webp');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center center, center center;
  background-attachment: scroll, fixed;
}
/* No independent photo panel or scroll transform. The background now fills
   BOTH columns; the transparent half exposes the image. */
.show-feature .show-feature-photo {
  display: none;
  transform: none;
}
.show-feature .show-feature-copy {
  z-index: 1;
  grid-column: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 395px;
  padding: 56px clamp(32px, 5.2vw, 85px);
  background: rgba(0, 0, 0, .60);
}
.show-feature .show-feature-inner {max-width: 460px}
/* Fixed background attachment is unreliable on touch browsers. Use the same
   full-bleed image with a gentle JS background-position parallax fallback. */
@media (max-width: 790px), (hover: none) and (pointer: coarse) {
  .show-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    grid-template-columns: unset;
    min-height: 550px;
    background-attachment: scroll, scroll;
    background-size: cover, cover;
    background-position: center center, 42% calc(50% + var(--feature-shift, 0px));
  }
  .show-feature .show-feature-copy {
    grid-column: auto;
    flex: initial;
    min-height: 0;
    width: 100%;
    padding: 34px clamp(24px, 5vw, 48px) 42px;
    background: rgba(0, 0, 0, .68);
  }
  .show-feature .show-feature-inner {max-width: 620px}
  .show-feature h2 {font-size: clamp(27px, 7vw, 37px)}
}
/* Devices requesting less motion see a stable (non-parallax) full-cover image. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-force) .show-feature {
    background-attachment: scroll, scroll;
    background-position: center center, center center;
  }
}

/* On touch screens, use a viewport-anchored photographic layer. CSS fixed
   backgrounds are not implemented consistently by mobile Chrome/Samsung Internet.
   JavaScript sets the offset to cancel the section's movement, while the section
   clips the layer so only this band reveals the stationary photograph. */
@media (max-width: 790px), (hover: none) and (pointer: coarse) {
 .show-feature {
    background-image: none;
    background-color: #124973;
 }
 .show-feature .show-feature-photo {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 550px;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
    background-image: url('media/2026/10/podcast-section-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translate3d(0, var(--feature-photo-offset, 0px), 0);
    transition: none;
 }
 .show-feature .show-feature-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(18, 73, 115, .50);
 }
}
@media (max-width: 790px) and (prefers-reduced-motion: reduce) {
 html:not(.motion-force) .show-feature .show-feature-photo {
   transform: none;
 }
}

/* Match the source Consultio/Elementor desktop composition: the text panel
   occupied the middle-right ~45% of the fixed full-width photo, leaving a
   narrow image strip visible at the far right; heading nearly flush with it. */
@media (min-width: 1000px) and (hover: hover) {
  .show-feature {
    grid-template-columns: 45.3% 45.3% 9.4%;
    min-height: 400px;
  }
  .show-feature .show-feature-copy {
    grid-column: 2;
    min-height: 400px;
    padding: 34px 12px;
  }
  .show-feature .show-feature-inner {max-width: 100%}
  .show-feature h2 {max-width: 450px}
  .show-feature p {max-width: 535px}
}