/* ============================================================
   Raging Savings — SSI offer-wall placement cards
   Rounds the corners of each injected placement card so the
   listicle layout is consistent on every page with an SSI #exec.
   ============================================================ */

/* Desktop card: round + clip the WHOLE card so the corners land at the
   true left/right ends. The generator rounds an interior column
   (rounded-start/end sit mid-card), which put the rounded corner in the
   middle — zero those; the card's own clip handles every corner. */
.col.rounded.shadow              { border-radius: 16px !important; overflow: hidden !important; }
.col.rounded.shadow .rounded-start,
.col.rounded.shadow .rounded-end { border-radius: 0 !important; }

/* Mobile stacked cards: top/bottom rounding is already at the real ends. */
.bg-white.rounded-top     { border-radius: 16px 16px 0 0 !important; overflow: hidden; }
.bg-white.rounded-bottom  { border-radius: 0 0 16px 16px !important; }
.bg-white.rounded-top img { border-radius: inherit; }

/* The generator puts rounded-top on BOTH the heading col and the image col
   below it — only the first (heading) col is the true top of the card, so
   square off any rounded-top col that follows another one mid-card. */
.bg-white.rounded-top + .bg-white.rounded-top { border-radius: 0 !important; }

/* Mobile: Bootstrap's .row negative margins cancel the .container padding,
   so the cards ran edge-to-edge and the rounded corners never showed.
   Zero the row margins so the container gutter insets the whole card. */
@media (max-width: 767.98px) {
  #placement_holder .d-md-none > .row { margin-left: 0; margin-right: 0; }

  /* Cards with little copy (tagged .rs-compact by rs-placements.js): cap the
     hero image so a short placement doesn't tower over two lines of text. */
  .rs-compact .bg-white.rounded-top.p-0 img {
    max-height: 200px;
    width: auto;
    max-width: 100%;
  }
}