/* ========= FLOAT WRAP UTILITIES (no shortcodes) ========= */

/* Prose wrapper auto-clears floats so the next section doesn't jump up */
.df-prose::after { content:""; display:block; clear:both; }

/* Floating figure with adjustable width and padding (margins) */
.df-float{
  --img-w: clamp(220px, 30%, 380px);  /* image width */
  --pad: 16px;                        /* outside space around the float */
  display:block;
  width: var(--img-w);
  margin: 0;                          /* side margins come from the side variants below */
}

.df-float--right{
  float:right;
  margin: 0 0 var(--pad) var(--pad);  /* bottom + left margin */
  shape-outside: margin-box;          /* nicer wrap curve */
}
.df-float--left{
  float:left;
  margin: 0 var(--pad) var(--pad) 0;  /* bottom + right margin */
  shape-outside: margin-box;
}

/* Image inside the floating figure */
.df-float > img{ display:block; width:100%; height:auto; }

/* Optional caption */
.df-float figcaption{
  font-size:.85rem; color:#666; text-align:center; margin-top:6px;
}

/* Mobile: stack image above text; kill float */
@media (max-width: 900px){
  .df-float{ float:none; margin: 0 auto 14px auto; width:min(100%, var(--img-w)); }
}