/* Page-specific styles for solution-retail-banking-marketing */
/* Add overrides here — never edit compat.css for page-specific changes */

/* The Features and Use Cases rows carry .card-wrapper, which compat.css turns
   into a 4-track grid. Their Bootstrap columns then took their col-lg-3 / -6
   percentage of a single 284px track instead of the row, giving 71-142px
   columns (one word per line) — and the section heading sat in a track of its
   own beside the cards instead of above them. */
.row.card-wrapper > [class*="col-"] {
  width: 100%;
  max-width: 100%;
}

/* only the heading column spans the row - every card column also carries
   .col-12 (its mobile width), so it has to be excluded by its other cols */
.row.card-wrapper > .col-12:not([class*="col-sm"]):not([class*="col-md"]):not([class*="col-lg"]) {
  grid-column: 1 / -1;
}

/* three feature cards across, two use-case cards across */
.row.card-wrapper:has(.custom-fourth-card) {
  grid-template-columns: repeat(3, 1fr);
}

.row.card-wrapper:has(.fourth-card):not(:has(.custom-fourth-card)) {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .row.card-wrapper:has(.custom-fourth-card),
  .row.card-wrapper:has(.fourth-card):not(:has(.custom-fourth-card)) {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* .custom-fourth-card / .fourth-card sit on the COLUMN, but compat.css styles
   both as cards - so the fourth tile in each row was drawn inside a second,
   larger box. The real card is the .card inside it. */
.row.card-wrapper > .custom-fourth-card,
.row.card-wrapper > .fourth-card {
  background: none;
  border: 0;
  padding: 0;
  display: block;
}

/* the teal rule under a centred heading sat hard left */
.card-wrapper .text-center + .divider,
.text-center + .divider {
  margin-inline: auto;
}

/* the icon was the one element left of centre in an otherwise centred card */
.row.card-wrapper .card.text-center .card-icon {
  align-self: center;
  margin-inline: auto;
}

/* testimonial attributions sat at four different heights because the quotes
   differ in length - pin them to the bottom of each card */
.card-1 > p {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.card-1 .d-flex {
  margin-top: auto;
}

/* the send control is a text input using its placeholder as the label, so the
   label rendered as faint grey placeholder text on the teal fill */
.button-send {
  text-align: center;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}

.button-send::placeholder {
  color: #fff;
  opacity: 1;
  font-weight: 700;
  letter-spacing: .08em;
}