/* Page-specific styles for solution-government-economic-development */
/* Add overrides here — never edit compat.css for page-specific changes */

/* The teal rule under each section heading carries .mx-auto, but compat.css's
   .small-hr sets a `margin` shorthand later in the file, which resets the auto
   side margins — so the bar sat hard left under a centred heading. */
.small-hr.mx-auto {
  margin-inline: auto;
}

/* tighten the heading-to-content gap; the rule already provides the breathing
   room, so mb-5 on top of it left a dead band. */
.features-section .row.text-center,
.usecases-section .row.text-center,
.about-section .row.text-center {
  margin-bottom: 1.5rem;
}

/* The Use Cases row resolves to a grid, so each column's col-lg-5 / col-lg-7
   percentage was being taken of its own auto track instead of the row — four
   ~118px columns with the titles spilling outside the cards. Two per row,
   each filling its track. */
.usecases-section .row:not(.text-center) {
  grid-template-columns: repeat(2, 1fr);
}

.usecases-section .row:not(.text-center) > [class*="col-"] {
  width: 100%;
}

.usecases__card-body {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

@media (max-width: 820px) {
  .usecases-section .row:not(.text-center) {
    grid-template-columns: 1fr;
  }
}

/* an incomplete last row of feature cards sat off to the left */
.features-section .card-section {
  justify-content: center;
}

/* keep every "Learn more" on the same baseline regardless of copy length */
.feature-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card .card-text {
  flex: 1 1 auto;
}

.feature-card .btn {
  align-self: center;
}

/* the icon was the one thing left of centre in an otherwise centred card */
.feature-card .card-body > img {
  align-self: center;
  margin-inline: auto;
}