/* What If Unlimited - Donate hero layout guards.
   The donation card now holds an iframe, which has no intrinsic width, so the
   flex row was free to collapse both columns. Elementor also computes
   --container-widget-width to 0 inside these rows, which crushed the card
   heading down to its longest word. These rules pin the intended layout. */

.wiu-hero-row{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:flex-start;
}

.wiu-hero-row > .wiu-hero-left{
  flex:0 0 46%;
  max-width:46%;
  min-width:0;
}

.wiu-hero-row > .wiu-hero-card{
  flex:0 0 48%;
  max-width:48%;
  min-width:420px;
}

/* ---- Card header: title left, SECURE badge right, one line ---- */

.wiu-hero-card > .e-con{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  --container-widget-width:auto !important;
  --container-widget-flex-grow:0 !important;
}

.wiu-hero-card > .e-con > .elementor-widget-heading{
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}

.wiu-hero-card > .e-con > .elementor-widget-heading .elementor-heading-title{
  white-space:nowrap;
}

.wiu-hero-card > .e-con > .e-con{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap;
}

/* ---- Stat pills: side by side, each sized to its own content ---- */

.wiu-stats-row{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  --container-widget-width:auto !important;
}

.wiu-stats-row > .e-con,
.wiu-stats-row > .elementor-element{
  flex:0 0 auto !important;
  width:auto !important;
  max-width:none !important;
}

@media (max-width:1024px){
  .wiu-hero-row{flex-wrap:wrap}
  .wiu-hero-row > .wiu-hero-left,
  .wiu-hero-row > .wiu-hero-card{
    flex:1 1 100%;
    max-width:100%;
    min-width:0;
  }
}

@media (max-width:600px){
  .wiu-hero-card > .e-con > .elementor-widget-heading .elementor-heading-title{
    white-space:normal;
  }
  .wiu-stats-row > .e-con,
  .wiu-stats-row > .elementor-element{
    flex:1 1 100% !important;
    width:100% !important;
  }
}