/* ===== DF Layout Utilities (ASCII only) ===== */

/* Split rows into a predictable grid. Apply to a wrapper around your [row] */
.df-split,
.df-split > .row{
  display:grid;
  grid-template-columns: var(--cols, 1fr 1fr); /* default 50/50 */
  gap: var(--gap, 20px);
  align-items: start;
}

/* Kill theme column sizing inside df-split so our grid wins */
.df-split .column[col]{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
}

/* Handy presets (you can also set --cols inline, see examples below) */
.df-50-50{ --cols: 1fr 1fr; }
.df-35-65{ --cols: 35% 65%; }
.df-65-35{ --cols: 65% 35%; }
.df-40-60{ --cols: 40% 60%; }
.df-60-40{ --cols: 60% 40%; }

/* Control the gap between columns/rows */
.gap-12{ --gap:12px; } .gap-16{ --gap:16px; } .gap-20{ --gap:20px; }
.gap-24{ --gap:24px; } .gap-32{ --gap:32px; }

/* Mobile: always stack neatly */
@media (max-width: 768px){
  .df-split,
  .df-split > .row{ grid-template-columns: 1fr; --gap: var(--gap, 16px); }
}

/* Image column helper */
.df-col-img{
  display:flex; align-items:center; justify-content:center;
}
.df-col-img img{ max-width:100%; height:auto; }

/* --- Padding utilities (small, consistent scale) --- */
.pad-0{padding:0!important;} .pad-4{padding:4px!important;} .pad-8{padding:8px!important;}
.pad-12{padding:12px!important;} .pad-16{padding:16px!important;} .pad-20{padding:20px!important;}
.pt-0{padding-top:0!important;} .pt-4{padding-top:4px!important;} .pt-8{padding-top:8px!important;}
.pt-12{padding-top:12px!important;} .pt-16{padding-top:16px!important;} .pt-20{padding-top:20px!important;}
.pr-0{padding-right:0!important;} .pr-8{padding-right:8px!important;} .pr-16{padding-right:16px!important;}
.pb-0{padding-bottom:0!important;} .pb-8{padding-bottom:8px!important;} .pb-12{padding-bottom:12px!important;}
.pl-0{padding-left:0!important;} .pl-8{padding-left:8px!important;} .pl-16{padding-left:16px!important;}

/* Section wrapper width helpers (optional) */
.section-wrapper.df-narrow{ padding-left:clamp(12px,4vw,40px); padding-right:clamp(12px,4vw,40px); }
.section-wrapper.df-wide  { padding-left:clamp(20px,6vw,80px); padding-right:clamp(20px,6vw,80px); }

/* --- Bullet controls (work in/without infobox2) --- */

/* Icon-list: align icons and text, add breathing room */
.icon-list > li{
  display:grid;
  grid-template-columns: 1.25em auto;
  column-gap: 10px;
  align-items: start;
  margin: 8px 0 12px 0;
}
.icon-list > li:last-child{ margin-bottom:0; }
/* Slight vertical nudge so FA icon sits visually centered */
.icon-list > li > i{ transform: translateY(2px); }

/* FA list: adjust vertical gap */
.df-li-gap-8  .fa-ul > li{ margin: 4px 0 8px 0; }
.df-li-gap-12 .fa-ul > li{ margin: 6px 0 12px 0; }
.df-li-gap-16 .fa-ul > li{ margin: 8px 0 16px 0; }
.df-li-gap-8  .fa-ul > li:last-child,
.df-li-gap-12 .fa-ul > li:last-child,
.df-li-gap-16 .fa-ul > li:last-child{ margin-bottom:0; }

/* FA list: indent control (defaults ~2em). Pick one per UL. */
.df-li-indent-20 .fa-ul{ padding-left:20px; }
.df-li-indent-28 .fa-ul{ padding-left:28px; }
.df-li-indent-36 .fa-ul{ padding-left:36px; }
/* Keep the FA bullet aligned with the new indent */
.df-li-indent-20 .fa-ul .fa-li{ left:-20px; }
.df-li-indent-28 .fa-ul .fa-li{ left:-28px; }
.df-li-indent-36 .fa-ul .fa-li{ left:-36px; }



/* ===== Text + floated image (no shortcodes) ===== */

/* Wrapper: consistent vertical rhythm + built-in clearfix */
.df-flow {
  --flow-gap: clamp(14px, 1.6vw, 20px);        /* spacing between blocks */
}
.df-flow > * + * { margin-top: var(--flow-gap); }
.df-flow::after { content:""; display:block; clear:both; }  /* clears the float */

/* Float helpers (choose left or right) */
.df-float-right,
.df-float-left {
  --gap-x: clamp(18px, 3vw, 32px);             /* text gutter next to image */
  --gap-y: clamp(10px, 1.6vw, 18px);           /* space above/below image */
  display: block;
  max-width: 100%;
  shape-outside: inset(0 round 12px);
  -webkit-shape-outside: inset(0 round 12px);
}

.df-float-right { float:right; margin: 0 0 var(--gap-y) var(--gap-x); }
.df-float-left  { float:left;  margin: 0 var(--gap-x) var(--gap-y) 0; }

.df-float-right img,
.df-float-left  img {
  display:block;
  width:100%;
  max-width: clamp(260px, 28vw, 420px);        /* scales nicely, capped on wide screens */
  height:auto;
}

/* Mobile/tablet: stop floating and center the image */
@media (max-width: 900px) {
  .df-float-right,
  .df-float-left {
    float:none;
    margin: 0 auto var(--gap-y) auto;
    max-width: min(420px, 70vw);
  }
}

/* Optional: wrapper horizontal padding utilities */
.pad-inline-24 { padding-inline: clamp(12px, 2vw, 24px); }
.pad-block-24 { padding-block: 24px; }