/* ─────────────────────────────────────────────────────────────────────────
   /dumpster-rental/concrete-dirt-dumpster-rental

   Page-local rules only. Sections, tables, priced cards, worked example,
   sizing cards, icon cards and fee cards all come from the cdr-* rules in
   construction-dumpster-rental.css, which this page loads. Only the three
   material boxes are new, styled like the site's accepted / fee / not-allowed
   panels (same palette as residential-dumpster-rental.css).

   Note for whoever edits this next: site.combined.css is NOT served. Add
   rules here, and register the file in the page's @section Styles.
   ───────────────────────────────────────────────────────────────────────── */

.cdd-materials-section { padding: 64px 0; background: #f7f7f7; }

.cdd-materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1180px;
    margin: 32px auto 0;
}

.cdd-materials-card {
    border-radius: 20px;
    padding: 28px 28px 24px;
    text-align: left;
}

.cdd-materials-card h3 { margin: 0 0 16px; text-align: center; }

.cdd-materials-ok  { background: #E1EFDE; border: 1px solid #67AD5B; }
.cdd-materials-ok h3  { color: #2E8B3D; }
.cdd-materials-fee { background: #FFF4DB; border: 1px solid #E5A93B; }
.cdd-materials-fee h3 { color: #B7791F; }
.cdd-materials-no  { background: #F9DCD9; border: 1px solid #E15241; }
.cdd-materials-no h3  { color: #F44336; }

.cdd-materials-list { list-style: none; margin: 0; padding: 0; }
.cdd-materials-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    line-height: 1.6;
}
.cdd-materials-list li:before {
    content: "\2022";
    position: absolute;
    left: 4px;
    font-weight: 700;
}

.cdd-materials-note { margin: 12px 0 0; color: #555; }
.cdd-materials-note a { color: inherit; text-decoration: underline; }

/* The cost section on this page has a single card group; the shared grid is
   sized for five general cards and leaves two inert cards stranded left. */
.cdr-cost-section .inert-material-grid {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .cdd-materials-section { padding: 40px 0; }
    .cdd-materials-card { padding: 22px 18px 18px; border-radius: 16px; }
}

/* dumpster-size.css pins .dumpster-hero-image to the bottom of the hero row
   (align-self: flex-end; fixed 304px height) for the size pages, whose art carries
   dimension labels. This page uses a plain photo, so centre it beside the copy. */
.dumpster-hero-section .dumpster-hero-image {
    align-self: center;
    height: auto;
}