/* ================================
   POST TEMPLATE MODERN (Divi)
   Layout: Spacer + Content + Sidebar
   ================================ */

.post-template-modern{
  --sidebar: 250px;            /* sidebar (and desktop spacer) width */
  --gap: 24px;                 /* gap between columns */
  --gutter-min: 16px;          /* minimal outer gutter */
  --spacer-min: var(--gutter-min);

  /* central content sizing */
  --content-min: 680px;        /* desktop minimum reading width */
  --content-max: 680px;        /* max width for content modules */
}

/* Row: full width, Divi reset, flex, and container query root */
.post-template-modern .et_pb_row.grid-row{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 auto !important;
  overflow:visible !important;           /* required for sticky/fixed JS */

  display:flex;
  align-items:stretch;                   /* equal heights for content & sidebar */
  flex-wrap:nowrap;
  column-gap: var(--gap);

  container-type: inline-size;           /* enable @container (inline size) */
}

/* Neutralize Divi column percentages, floats, paddings */
.post-template-modern .et_pb_row.grid-row > .et_pb_column{
  width:auto !important;
  max-width:none !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  clear:none !important;
  box-sizing:border-box;
}
@media (min-width:981px){
  .post-template-modern .et_pb_gutters3 .et_pb_row.grid-row > .et_pb_column{
    width:auto !important; margin:0 !important;
  }
}

/* Prevent clipping along the ancestor chain (sticky/fixed friendly) */
.post-template-modern,
.post-template-modern.et_pb_section,
.post-template-modern .et_pb_row.grid-row,
.post-template-modern .et_pb_row.grid-row > .et_pb_column,
.post-template-modern .et_pb_row.grid-row > .col-sidebar{
  overflow: visible !important;
}

/* 1) Left spacer: mirrors the sidebar but can shrink first */
.post-template-modern .et_pb_row.grid-row > .col-spacer{
  flex: 0 1 var(--sidebar) !important;   /* grow:0, shrink:1, basis=sidebar */
  max-width: var(--sidebar) !important;  /* never wider than sidebar */
  min-width: var(--spacer-min) !important;
}

/* 2) Content: fluid; spacer shrinks before it */
.post-template-modern .et_pb_row.grid-row > .col-content{
  flex: 1 1 auto !important;
  min-width: var(--content-min);
  display:flex;
  flex-direction:column;
}

/* Cinch content modules (centered + capped) */
.post-template-modern .et_pb_row.grid-row > .col-content > .et_pb_module{
  max-width: var(--content-max);
  margin-left: auto !important;
  margin-right: auto !important;
}
.post-template-modern .et_pb_row.grid-row > .col-content > .et_pb_module[class*="_tb_body"]{
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.post-template-modern .col-content .et_pb_module table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
}

/* 3) Sidebar (fixed width) */
.post-template-modern .et_pb_row.grid-row > .col-sidebar{
  flex: 0 0 auto !important;
  flex-basis: var(--sidebar) !important;
  width: var(--sidebar) !important;
  min-width: var(--sidebar) !important;
  max-width: var(--sidebar) !important;

  position: relative;         /* absolute anchoring target (JS) */
  display:flex;
  flex-direction:column;
}

/* --- FRONT-END ONLY NO-FLASH GUARDS (exclude Divi Builder UI) --- */
body:not(.et-fb):not(.et-tb-editor)
  .post-template-modern .et_pb_row.grid-row > .col-sidebar.sidebar-sticky-autowrap > :not(.sidebar-sticky){
  opacity: 0 !important;
  visibility: hidden !important;
}

body:not(.et-fb):not(.et-tb-editor)
  .post-template-modern .et_pb_row.grid-row > .col-sidebar > .sidebar-sticky{
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease;
  will-change: opacity, transform;
  width: 100%;
  box-sizing: border-box;
}

body:not(.et-fb):not(.et-tb-editor)
  .post-template-modern .et_pb_row.grid-row > .col-sidebar > .sidebar-sticky.sticky-measuring{
  opacity: 0;
  visibility: hidden;
}

body:not(.et-fb):not(.et-tb-editor)
  .post-template-modern .et_pb_row.grid-row > .col-sidebar > .sidebar-sticky.sticky-ready{
  opacity: 1;
  visibility: visible;
}

.et_pb_comments_module.et_pb_no_reply_button span.reply-container{
  display: block;
}

.post-template-modern .comment-reply-link,
.post-template-modern .comment-reply-link:hover{
  background: transparent !important;
  font-size: 12px !important;
  color: rgb(242, 147, 125) !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-width: 0 0 1px 0 !important;
  line-height: 16px !important;
}

body .et_pb_bg_layout_light .et_pb_button.comment-reply-link:hover{
  color: inherit !important;
}

.post-template-modern .comment-respond{
  background: transparent !important;
}


.comment-reply-link:hover:after{
  display: none !important;
}

/* ============================================
   Dynamic breakpoint (Container Query)
   Stack when row < spacer(min) + content(min) + gap + sidebar
   ============================================ */
@container (max-width: calc(var(--spacer-min) + var(--content-min) + var(--gap) + var(--sidebar))) {

  .post-template-modern .et_pb_row.grid-row{
    display:block;
    padding-left: var(--gutter-min) !important;
    padding-right: var(--gutter-min) !important;
  }

  .post-template-modern .et_pb_row.grid-row > .col-spacer{ display:none !important; }
  .post-template-modern .et_pb_row.grid-row > .col-content{ min-width: 0 !important; padding-left: 0 !important; }

  .post-template-modern .et_pb_row.grid-row > .col-sidebar{
    width:auto !important; min-width:0 !important; max-width:none !important;
    flex:none !important; margin:24px 0 0 0; display:block; position: static;
  }
  .post-template-modern .et_pb_row.grid-row > .col-sidebar > .sidebar-sticky{ width:auto; }
}

/* ============================================
   Fallback media query (for browsers without @container)
   ============================================ */
@media (max-width: 980px){
  .post-template-modern .et_pb_row.grid-row{
    display:block;
    padding-left: var(--gutter-min) !important;
    padding-right: var(--gutter-min) !important;
  }
  .post-template-modern .et_pb_row.grid-row > .col-spacer{ display:none !important; }
  .post-template-modern .et_pb_row.grid-row > .col-content{ min-width: 0 !important; }
  .post-template-modern .et_pb_row.grid-row > .col-sidebar{
    width:auto !important; min-width:0 !important; max-width:none !important;
    flex:none !important; margin:24px 0 0 0; display:block; position: static;
  }
  .post-template-modern .et_pb_row.grid-row > .col-sidebar > .sidebar-sticky{ width:auto; }
}