/**
 * Promo tile + thermometer for the campaigns grid (PAT-4462).
 *
 * The markup is built in js/campaign_cz.js and leans on the precompiled theme
 * utility classes; this file only covers what those utilities cannot express.
 */

/* Thermometer line above the grid (per design: plain text, no strip). The
   theme's precompiled utility CSS has no working gap-x-* rule here, so the
   label/amount gap is set explicitly. */
.campaign-thermometer {
  column-gap: 0.5rem;
}

/* Promo tile: full-tile background image (shipped without texts), red title
   banner on top and the CTA button at the bottom, matching the story-card
   footprint. Fallback background covers the no-image case. */
.promo-card .promo-card-inner {
  height: 100%;
  min-height: 26rem;
  padding: 1rem;
  background-color: #e0e0e0;
  background-size: cover;
  background-position: center top;
}

/* Edge-to-edge banner: negative margins pull it over the tile padding; the
   tile's own rounded corners still clip it (overflow-hidden on the inner).
   Font sizes follow the mockup: large title, slightly smaller bold subtitle. */
.promo-card .promo-card-title {
  background: #e64650;
  padding: 0.625rem 1rem;
  margin: -1rem -1rem 0;
  font-size: 1.75rem;
  line-height: 1.25;
}

.promo-card .promo-card-title span {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

.promo-card .promo-card-button {
  margin: 0 auto;
  min-width: 60%;
}