/* ---------------------------------------------------------------------------
 * trucking-e-delivery.css — only what differs from the shared interior
 * patterns for this template (Figma 1077:1178).
 * ------------------------------------------------------------------------- */

/* Figma text-node widths + the hero's vertical-only crop (STRETCH with
   imageTransform [[1,0,-0.0001],[0,0.733,0.267]]). */
/* Same banner treatment as every other page (client round 16): the Figma's
   scaleMode STRETCH (`background-size: 100% 136.44%`) squashed the photo
   vertically, exactly the distortion fixed on About in round 13. The shared
   `cover` now applies; only the focal point stays page-specific. */
.page-hero--trucking {
  --hero-heading-width: 949px;
  --hero-lead-width: 504px;
  --hero-focus: center 70%;
}

/* Figma column widths for this page's five steps. */
.site-main--trucking .process-steps .steps li:nth-child(1) { flex-basis: 273px; }
.site-main--trucking .process-steps .steps li:nth-child(2) { flex-basis: 260px; }
.site-main--trucking .process-steps .steps li:nth-child(3) { flex-basis: 255px; }
.site-main--trucking .process-steps .steps li:nth-child(4) { flex-basis: 269px; }
.site-main--trucking .process-steps .steps li:nth-child(5) { flex-basis: 258px; }

/* Nine materials in three columns of three. */
.site-main--trucking .materials .head p {
  max-width: 828px;
}

/* Two 717px columns here, and the heading is brand blue rather than ink. */
.site-main--trucking .seo-copy .columns {
  grid-template-columns: repeat(2, minmax(0, 717px));
}

.site-main--trucking .seo-copy h2 {
  color: var(--brand, #008AF7);
}

.site-main--trucking .seo-copy h2 .ink {
  color: var(--ink, #212529);
}

/* The Figma keeps this callout title on one 696px line, overflowing its own
   665px text column. Reproducing that literally left 9px of right padding at
   1920 and pushed the copy 47px OUTSIDE the blue box at 1512 — the callout keeps
   its 32px inset on all four sides instead, and the title wraps (client round 19). */

/* Products frame is 740px on this page (774px on Concrete Recycling), so the
   shared 120px block padding is 12px too generous here. */
.site-main--trucking .products-inner {
  min-height: 740px;
  padding-block: 97px;
}

/* Figma sizes this page's product copy to the 406px column, not the 361px
   Concrete Recycling uses. */
.site-main--trucking .products .text p {
  max-width: 406px;
}

/* One product card carries its own Figma crop. */
.products .card-material-delivery img {
  object-fit: cover;
  object-position: 72.33% center;
}

.site-main--trucking .cta-band {
  min-height: 613px;
}

@media (max-width: 991px) {
  .site-main--trucking .seo-copy .columns {
    grid-template-columns: 1fr;
  }

  .site-main--trucking .process-steps .steps li {
    flex-basis: auto;
  }

  .site-main--trucking .products-inner {
    min-height: 0;
  }
}

/* This page's haul-material labels are longer than Concrete Recycling's, so the
   three groups still ran 35px past the text column at 1920 with nowrap labels.
   Let them wrap here (client round 19). */
@media (min-width: 1920px) {
  .site-main--trucking .materials .columns li {
    white-space: normal;
  }
}