/* ======================================================================
   2-column layout: left content + right sticky sidebar
   Classes:
   - Row: two-col-layout
   - Left column: left-col
   - Right column: right-col
   - Sticky module inside right column: floating-box
   ====================================================================== */

/* Force a stable two-column layout on desktop
 * Applies only when all required classes are present:
 * - row: two-col-layout
 * - columns: left-col + right-col
 * - sticky module: floating-box (inside right-col)
 */
.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) {
  display: flex;
  /* Keep columns equal-height so sticky has scroll range within the right column */
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 24px; /* Space between columns */
  overflow: visible !important; /* Sticky needs visible overflow on ancestors */
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Divi safeguard: parent section overflow can block sticky.
 * Use both shorthand AND longhand to beat Divi's per-page generated
 * .et_pb_section_N{overflow-x:hidden;overflow-y:hidden} rules.
 */
.et_pb_section:has(.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box)) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Broader Divi ancestor safeguard: builder wrapper + article */
.et_builder_inner_content:has(.et_pb_row.two-col-layout:has(> .right-col .floating-box)),
.et-l:has(.et_pb_row.two-col-layout:has(> .right-col .floating-box)),
.entry-content:has(.et_pb_row.two-col-layout:has(> .right-col .floating-box)) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Left column grows, right column stays fixed width */
.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .left-col {
  flex: 1 1 0;
  width: auto !important;
  max-width: none !important;
  min-width: 0; /* Prevent content from forcing overflow */
  margin-right: 0 !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .right-col {
  flex: 0 0 325px; /* Keep original sidebar width */
  display: block !important; /* Avoid sticky issues when parent is a flex column */
  width: 325px !important;
  max-width: 325px !important;
  min-width: 325px !important;
  margin-right: 0 !important;
  align-self: stretch;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .et_pb_column {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Sticky behavior
 * IMPORTANT: `transform` on a sticky element creates a new containing block
 * and BREAKS position:sticky in some browsers. To avoid this, we keep the
 * sticky element (floating-box) free of transforms and apply scaling to an
 * inner wrapper (.floating-box-inner) injected by JS.
 */
.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .right-col .floating-box {
  position: sticky !important;
  top: var(--floating-top, 24px); /* JS updates this to keep clear of fixed header */
  z-index: 2;
  overflow: visible;
  max-height: none;
  width: 100%;
  box-sizing: border-box;
}

/* Inner wrapper gets the scale transform (injected by imc-sticky.js) */
.et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .right-col .floating-box > .floating-box-inner {
  --floating-scale: 1;
  transform-origin: top center;
  transform: scale(var(--floating-scale));
  width: 100%;
  box-sizing: border-box;
}

/* ======================================================================
   Responsive: stack columns and disable sticky (Divi breakpoint)
   ====================================================================== */
@media (max-width: 980px) {
  .et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) {
    display: block; /* Stack columns */
  }

  .et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .right-col {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 24px;
  }

  .et_pb_row.two-col-layout:has(> .left-col):has(> .right-col):has(> .right-col .floating-box) > .right-col .floating-box {
    position: static !important; /* Disable sticky on tablet/mobile */
    max-height: none !important;
    overflow: visible !important;
  }
}