/* ---------------------------------------------------------------------------
 * concrete-recycling.css — sections unique to this template (Figma 738:1259).
 * Reused patterns (page-hero, stats-band, photo-band, eyebrow-band, photo-grid,
 * cta-band) live in interior.css.
 * ------------------------------------------------------------------------- */

/* Figma text-node widths for this hero (738:1260). */
.page-hero--concrete {
  --hero-heading-width: 963px;
  --hero-lead-width: 504px;
}

/* Three 515px columns here; Trucking uses two 717px columns. */
.site-main--concrete-recycling .seo-copy .columns {
  grid-template-columns: repeat(3, minmax(0, 515px));
}

/* Figma column widths for the five steps; the line art keeps its own size.
   The per-step padding-top that used to sit here nudged each column down to
   compensate for its illustration's height. interior.css now gives the art a
   fixed 137px box, so those offsets double-counted and pushed the numbers
   31px apart — the box does the alignment (client round 20). */
.process-steps .steps li:nth-child(1) { flex-basis: 273px; }
.process-steps .steps li:nth-child(2) { flex-basis: 351px; }
.process-steps .steps li:nth-child(3) { flex-basis: 364px; }
.process-steps .steps li:nth-child(4) { flex-basis: 278px; }
.process-steps .steps li:nth-child(5) { flex-basis: 269px; }

/* --- Responsive ---------------------------------------------------------- */
/* Banded: page CSS loads after interior.css, so an open-ended max-width
   block here would override interior's <=991 pattern collapses (same
   specificity, later source). The band hands off cleanly at 991. */
@media (min-width: 992px) and (max-width: 1399px) {
  .statement-band-inner {
    gap: 48px;
  }

  .materials {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    padding-inline: var(--gutter);
  }

  .materials .columns {
    gap: 22px 24px;
  }

  .products-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 48px;
    padding: 80px var(--gutter);
  }

  .process-steps .steps {
    gap: 24px;
    padding: 32px;
  }

  .process-steps .steps .art {
    margin-bottom: 24px;
  }
}

/* Shared-pattern mobile collapses live in interior.css; only genuine
   per-page values remain here. */
@media (max-width: 991px) {
  .materials .content {
    gap: 40px;
  }

  .seo-copy-inner {
    gap: 48px;
  }

  /* Must match the specificity of the 3-column override above, or that
     (0,3,0) selector wins at every width and the columns never collapse. */
  .site-main--concrete-recycling .seo-copy .columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* This page's CTA frame is 613px (738:1293), shorter than About's 668px. */
.site-main--concrete-recycling .cta-band {
  min-height: 613px;
}