/* =========================================================
   FAIR FUTURE FOUNDATION
   Two-column Text Module

   Add class to the Divi Text module:
   .fff-two-cols

   Desktop: 2 columns
   Tablet / mobile: 1 column

   Divi 4 compatible
   Prepared for Divi 5
   ========================================================= */


/* ---------------------------------------------------------
   1. Apply columns to the actual text-content wrapper
   --------------------------------------------------------- */

.fff-two-cols > .et_pb_text_inner {
  column-count: 2;

  column-gap: 36px;

  column-rule:
    1px
    solid
    rgba(66, 103, 178, 0.15);

  column-fill: balance;

  orphans: 3;
  widows: 3;
}


/* ---------------------------------------------------------
   2. Paragraph flow

   IMPORTANT:
   paragraphs are deliberately allowed to flow from one
   column to the next. Do NOT use break-inside: avoid here.
   --------------------------------------------------------- */

.fff-two-cols > .et_pb_text_inner p {
  margin-top: 0;
}


/* ---------------------------------------------------------
   3. Keep structural elements together
   --------------------------------------------------------- */

.fff-two-cols > .et_pb_text_inner
:is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  blockquote,
  ul,
  ol,
  figure,
  table
) {
  break-inside: avoid;
  break-inside: avoid-column;

  -webkit-column-break-inside: avoid;

  page-break-inside: avoid;
}


/*
 * Do NOT use column-span: all.
 *
 * Headings remain part of the natural two-column reading flow.
 */


/* ---------------------------------------------------------
   4. Media safety
   --------------------------------------------------------- */

.fff-two-cols > .et_pb_text_inner img,
.fff-two-cols > .et_pb_text_inner video {
  max-width: 100%;
  height: auto;
}


.fff-two-cols > .et_pb_text_inner iframe {
  max-width: 100%;
}


/* ---------------------------------------------------------
   5. Long content safety
   --------------------------------------------------------- */

.fff-two-cols > .et_pb_text_inner {
  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   6. Tablet + mobile
   --------------------------------------------------------- */

@media (max-width: 980px) {

  .fff-two-cols > .et_pb_text_inner {
    column-count: 1;

    column-gap: 0;

    column-rule: none;
  }

}