/* IT Consulting Service page — the 10-card service grid ([clx_it_services_grid]).
   Base .svc-cards-grid (clx-cost-curves.css) is 1fr 1fr 360px for the
   DE/DM partner-logo aside; this page has no aside, so 3 equal columns.
   The confidence banner appended at the end spans the last two cells of
   the last row, next to the 10th card. */

.svc-cards-grid.svc-cards-grid--it {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Override the global orphan-card centering (site-wide.css 5463). With 10
   cards in a 3-col grid the 10th card is :last-child:nth-child(3n+1) and
   the global rule pushes it to the middle column. On IT we want it pinned
   to the left so the (future) banner can take cols 2-3. */
.svc-cards-grid--it .svc-card:last-child:nth-child(3n+1) {
  grid-column: 1 / 2;
}

/* Confidence banner — col 1 of the last row holds card 10, the banner
   takes cols 2-3 of that row. clx-ai-sysdesign-banner chrome comes from
   site-wide.css (shared with the AI page); this only places it. 52px top
   margin matches .svc-cards-grid > .svc-card. */
.svc-cards-grid--it > .clx-ai-sysdesign-banner {
  grid-column: 2 / 4;
  grid-row: 4;
  margin-top: 52px;
}

@media (max-width: 1024px) {
  .svc-cards-grid.svc-cards-grid--it { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-cards-grid--it > .clx-ai-sysdesign-banner { grid-column: 1 / -1; grid-row: auto; margin-top: 0; }
}
@media (max-width: 600px) {
  .svc-cards-grid.svc-cards-grid--it { grid-template-columns: 1fr; }
}