/* ===== Base Module ===== */
.two-column-icon-text-module {
  margin-top: var(--tcit-margin-top, 60px);
  margin-bottom: var(--tcit-margin-bottom, 60px);
}

.two_column_icon_text_module_container {
  max-width: var(--tcit-container-max, 1200px);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.two_column_icon_text_columns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* ===== Left Column ===== */
.two_column_left_richtext {
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-left: var(--tcit-left-pad, 20px);
  padding-right: var(--tcit-right-pad-leftcol, 20px);
}

.two_column_left_richtext.valign-top { justify-content: flex-start; }
.two_column_left_richtext.valign-center { justify-content: center; }
.two_column_left_richtext.valign-bottom { justify-content: flex-end; }

.two_column_left_inner {
  display: block;
  width: 100%;
}

.two_column_left_inner p,
.two_column_left_inner h1,
.two_column_left_inner h2,
.two_column_left_inner h3,
.two_column_left_inner ul,
.two_column_left_inner ol {
  margin-top: 0;
}

/* ===== Right Column ===== */
.two_column_icon_right_content {
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  padding-left: var(--tcit-right-pad, 30px);
}

.two-column-icon-text-module .two-column-icon-text-module-header {
  font-size: 2rem;
  font-weight: 600;
  text-align: left;
  margin: 0;
}

.two_column_rows_wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tcit-row-gap, 20px);
}

/* ===== Repeater Rows ===== */
.two_column_icon_row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.two_column_icon_box {
  width: var(--tcit-icon-box, 64px);
  height: var(--tcit-icon-box, 64px);
  min-width: var(--tcit-icon-box, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tcit-icon-bg, #E6F4F6);
  border-radius: var(--tcit-icon-radius, 16px);
}

.two_column_icon_img {
  width: var(--tcit-icon-size, 30px);
  height: var(--tcit-icon-size, 30px);
  object-fit: contain;
  display: block;
}

.two_column_icon_text {
  flex: 1;
}

.two_column_icon_text > * { margin-top: 0; margin-bottom: 0; }
.two_column_icon_text p { margin: 0; }
.two_column_icon_text :is(h1,h2,h3,h4,h5,h6) { margin: 0; }
.two_column_icon_text :is(ul,ol) { margin: 0; padding-left: 1.2em; }

.two_column_icon_rich_text_row {
  font-size: 1rem;
  line-height: 1.6;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .two_column_left_richtext,
  .two_column_icon_right_content {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Match container edge + left-column mobile padding */
  .two_column_left_richtext {
    margin-bottom: 20px;
    padding-left: var(--tcit-left-pad-mobile, 15px);
    padding-right: var(--tcit-right-pad-leftcol-mobile, 15px);
  }

  /* Use same side paddings on right to align with left */
  .two_column_icon_right_content {
    padding-left: var(--tcit-left-pad-mobile, 15px);
    padding-right: var(--tcit-right-pad-leftcol-mobile, 15px);
  }

  /* Remove bottom spacing when header is blank */
  .two-column-icon-text-module.no-header .two_column_left_richtext {
    margin-bottom: 0;
  }

  /* Align icon to top instead of center on mobile */
  .two_column_icon_row {
    align-items: flex-start;
  }

  /* Ensure all right content aligns with left edge */
  .two-column-icon-text-module .two-column-icon-text-module-header,
  .two_column_rows_wrapper,
  .two_column_icon_rich_text_row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
/* =========================
   MOBILE (≤768px)
   ========================= */
@media (max-width: 768px) {
  /* Stack columns full width */
  .two_column_left_richtext,
  .two_column_icon_right_content {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Container side padding to FSCB standard */
  .two_column_icon_text_module_container {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Column paddings (use mobile vars you exposed) */
  .two_column_left_richtext {
    margin-bottom: 20px; /* space between columns */
    padding-left: var(--tcit-left-pad-mobile, 15px);
    padding-right: var(--tcit-right-pad-leftcol-mobile, 15px);
  }
  .two_column_icon_right_content {
    padding-left: var(--tcit-left-pad-mobile, 15px);
    padding-right: var(--tcit-right-pad-leftcol-mobile, 15px);
    gap: clamp(14px, 3.5vw, var(--tcit-row-gap, 20px));
  }

  /* If there’s no header, don’t add extra gap between columns */
  .two-column-icon-text-module.no-header .two_column_left_richtext {
    margin-bottom: 0;
  }

  /* Top-align icons with text; make rows full width */
  .two_column_icon_row {
    align-items: flex-start;
    gap: clamp(12px, 4vw, 16px);
    width: 100%;
  }

  /* Keep right-side pieces flush-left with icon boxes */
  .two-column-icon-text-module .two-column-icon-text-module-header,
  .two_column_rows_wrapper,
  .two_column_icon_rich_text_row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

/* =========================
   TABLET (769px–1024px)
   Stack full-width; keep desktop unchanged
   ========================= */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Stack columns full width on tablet */
  .two_column_left_richtext,
  .two_column_icon_right_content {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .two_column_left_richtext { margin-bottom: 24px; }

  /* Comfortable tablet padding */
  .two_column_icon_text_module_container {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  /* Remove desktop gutter when stacked; keep internal spacing tidy */
  .two_column_icon_right_content {
    padding-left: 0;
    padding-right: 0;
    gap: clamp(14px, 2.8vw, var(--tcit-row-gap, 20px));
  }

  /* Rows and additional content span full container width */
  .two_column_icon_row,
  .two_column_icon_rich_text_row,
  .two_column_rows_wrapper {
    width: 100%;
    box-sizing: border-box;
  }

  /* Keep icons top-aligned; scale spacing a hair for tablet ergonomics */
  .two_column_icon_row {
    align-items: flex-start;
    gap: clamp(12px, 2.4vw, 16px);
  }
}
/* ===== Align icons to top if text wraps to more than one line ===== */
.two_column_icon_row {
  align-items: flex-start;
}

.two_column_icon_row .two_column_icon_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* If text fits on one line, re-center the icon */
.two_column_icon_row:has(.two_column_icon_text p:only-child:only-line),
.two_column_icon_row:has(.two_column_icon_text span:only-child:only-line) {
  align-items: center;
}
/* =========================
   ICON ALIGNMENT — FINAL FIX
   ========================= */

.two_column_icon_row {
  display: flex;
  align-items: flex-start; /* Always align icons to top */
  gap: 16px;
}

/* Icon stays centered inside its colored box */
.two_column_icon_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Text side: always treat as a block, so height matches multi-span content */
.two_column_icon_text {
  flex: 1;
  display: block; /* prevent flex miscalculations */
  line-height: 1.4;
}

/* Convert multiple inline spans to block-like behavior for alignment */
.two_column_icon_text span {
  display: block;
  line-height: 1.4;
  margin: 0;
}

/* Handle paragraphs or headings if present */
.two_column_icon_text p,
.two_column_icon_text h1,
.two_column_icon_text h2,
.two_column_icon_text h3,
.two_column_icon_text h4,
.two_column_icon_text h5,
.two_column_icon_text h6 {
  margin: 0;
  line-height: 1.4;
}


/* =========================================
   FINAL FIX — consistent row spacing + top-aligned icons
   ========================================= */

.two_column_icon_row {
  display: flex;
  align-items: flex-start; /* icons top aligned */
  gap: 16px;
  margin: 0; /* ensure rows themselves don't add spacing */
}

/* icon box — centered internally */
.two_column_icon_box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* text column — behaves as a solid block */
.two_column_icon_text {
  flex: 1;
  line-height: 1.4;
}

/* normalize spans inside richtext (don’t introduce block spacing) */
.two_column_icon_text span {
  display: inline; /* revert from block to inline */
  line-height: 1.4;
  margin: 0;
}

/* normalize paragraph and heading margins */
.two_column_icon_text p,
.two_column_icon_text h1,
.two_column_icon_text h2,
.two_column_icon_text h3,
.two_column_icon_text h4,
.two_column_icon_text h5,
.two_column_icon_text h6 {
  margin: 0;
  line-height: 1.4;
}

/* ensure vertical spacing between rows is controlled only by this gap variable */
.two_column_rows_wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--tcit-row-gap, 20px);
}
/* =======================================================
   TWO-COLUMN ICON GRID MODE (toggle enabled, desktop only)
   ======================================================= */
@media (min-width: 1024px) {
  .two_column_rows_wrapper.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--tcit-row-gap, 20px);
    row-gap: var(--tcit-row-gap, 20px);
  }
}

/* Always stack on tablet and mobile */
@media (max-width: 1023px) {
  .two_column_rows_wrapper.two-col {
    display: flex;
    flex-direction: column;
    gap: var(--tcit-row-gap, 20px);
  }
}

}