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

/* This page's whole grid (block33/block25 rows) was collapsing: compat.css
   zeroes the width of any block33/block50/etc. column that sits directly
   under .block100/.blockfull/.fixed-content (a fix for a different, block50
   -only page elsewhere), so every 3-up and 4-up row on this page lost its
   width and either stacked full-width or blew up to content size. Restore
   the intended widths for this page's rows. */
.block100 > .block33,
.blockfull > .block33,
.fixed-content > .block33 {
  width: 33.3333%;
  min-width: 0;
  padding-inline: .75rem;
}

.block100 > .block25,
.blockfull > .block25,
.fixed-content > .block25 {
  width: 25%;
  min-width: 0;
  padding-inline: .75rem;
}

.block33.pl,
.block25.pl {
  padding-left: 0;
}

.block33.pr,
.block25.pr {
  padding-right: 0;
}

/* the 4-up "Stay Connected" newsletter row never got a flex parent (only
   block33/40/45/50/60 columns trigger that heuristic in compat.css) */
.block100:has(> .block25) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* .pub is reused here as the "no edge padding, middle column" marker, but it
   collides with compat.css's unrelated small-caps "eyebrow" utility class of
   the same name, so every middle card's heading/body text was rendering as
   uppercase teal eyebrow text instead of normal copy. */
.block33.pub {
  display: block;
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* the icon row in the "New Application" strip reuses .cards, but that class
   is styled in compat.css for 4:3 news-thumbnail crops, so the ~130px
   service icons were being force-stretched to fill their card and cropped. */
#section1 .cards .card img {
  width: 130px !important;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* the "130 Years / 10M Population / ..." stats band only contains <span>
   text (no heading/img/etc.), so compat.css's "hide empty section shells"
   heuristic was hiding the whole band. */
.full-section.bg1 {
  display: block;
}

/* .number is a small circular step-badge (40x40px) in compat.css; reused
   here for the big stat figures, it was clipping "130", "10M" etc. into a
   tiny teal circle. */
.numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

.numbers .number {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--navy);
}

/* The legacy markup stacks 10-16 <div class="specer"> spacers inside every
   section to fake vertical rhythm. At compat.css's 1.5-3rem each that left
   huge empty bands (hero, stats, Track Application). The sections already
   carry their own padding, so shrink the spacers right down. */
.specer {
  height: .5rem;
}

/* the "Visit City / About Us / Our History" panels sized themselves off the
   spacer stack, running well over a full viewport tall each. Cap them and
   bottom-align the caption instead. */
.full-section > .block100 > .block33.p20[style*="background"] {
  height: 58vh;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover !important;
  background-position: center !important;
  padding: 1.75rem 2rem;
}

.full-section > .block100 > .block33.p20[style*="background"] .specer {
  display: none;
}

/* five service tiles in one row, all the same height */
#section1 .cards {
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

#section1 .cards .card {
  padding: 1.25rem;
  gap: .75rem;
  justify-content: flex-start;
}

@media (max-width: 1100px) {
  #section1 .cards {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

/* the FAQ accordion rows (.content1 / .i-content) have no styling at all in
   compat.css, so questions ran together with the arrow dropped underneath. */
.content1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: .6rem;
}

.content1 img {
  width: 16px;
  height: auto;
  flex: none;
}

.i-content {
  padding: 0 1.15rem 1.25rem;
  margin-bottom: .6rem;
}

/* the event/FAQ filter tags (.text-inline) have no styling in compat.css at
   all, so the <ul> rendered as a bulleted vertical list instead of a row of
   filter pills. */
.text-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.text-inline li {
  cursor: pointer;
}