/* ==========================================================================
   Progressive Builders — commercial-projects.css
   Commercial Projects page. Loads on /commercial-projects/.
   Hero, buttons, and CTA band come from component.css.

   Section-background rhythm:
     hero (navy) → approach (ivory) → services (white) → why (ivory)
     → clients (white) → CTA (sawdust)
   ========================================================================== */

/* Every content section on this page is direct prose (no card wrapper for
   the lead/intro paragraphs) — kept on a flat, light surface for readability
   rather than the photo+overlay backdrop other pages' sections get. */
.pb-commercial {
  background: var(--pb-ivory);
  background-image: none;
  color: var(--pb-slate);
}
.pb-commercial .pb-section-title {
  color: var(--pb-head);
}
.pb-commercial--white {
  background: var(--pb-white);
}
.pb-commercial__lead,
.pb-commercial__intro {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  color: var(--pb-ash);
  line-height: 1.8;
}
.pb-commercial__lead {
  margin-top: 32px;
  text-align: center;
}
.pb-commercial__intro {
  margin-top: 8px;
  text-align: center;
}

/* --- Approach (3 highlights) ------------------------------------------ */
.pb-approach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1040px;
  margin: 40px auto 0;
}
.pb-approach__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 28px 20px;
  background: var(--pb-white);
  /*border: 1px solid var(--pb-border);*/
  border: 1px solid var(--pb-amber);
  border-radius: var(--pb-radius);
  font-family: var(--pb-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--pb-head);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}
.pb-approach__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--pb-shadow-lg);
}
.pb-approach__item i {
  font-size: 26px;
  color: var(--pb-amber);
}

/* --- Checklist (services / why-use) — bordered chips ------------------ */
.pb-checklist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 36px auto 0 !important;
  padding: 0;
  list-style: none;
  max-width: 1040px;
}
.pb-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--pb-white);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
  box-shadow: var(--pb-shadow-sm);
  color: var(--pb-slate);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: left;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}
.pb-checklist li:hover {
  transform: translateY(-3px);
  border-color: var(--pb-amber);
  box-shadow: var(--pb-shadow-md);
}
.pb-checklist li::before {
  content: "\f00c"; /* Font Awesome: fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pb-tint);
  color: var(--pb-amber-dark);
  font-size: 0.72rem;
}

.pb-commercial__cta {
  margin-top: 36px;
}

/* --- Clients ----------------------------------------------------------- */
.pb-commercial__prose {
  max-width: 860px;
  margin: 32px auto 0;
  text-align: center;
}
.pb-commercial__prose p {
  color: var(--pb-ash);
  line-height: 1.8;
  margin-bottom: 16px;
}
.pb-commercial__subtitle {
  text-align: center;
  color: var(--pb-head);
  font-size: 1.5rem;
  margin-top: 48px;
}
.pb-clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 28px auto;
  max-width: 1040px;
}
.pb-client-card {
  background: var(--pb-white);
  /*border: 1px solid var(--pb-border);*/
  border: 1px solid var(--pb-amber);
  border-radius: var(--pb-radius);
  padding: 20px 22px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}
.pb-client-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pb-shadow-md);
}
.pb-client-card__name {
  font-family: var(--pb-font-display);
  font-weight: 600;
  color: var(--pb-head);
  margin-bottom: 4px;
}
.pb-client-card__desc {
  color: var(--pb-ash);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 820px) {
  .pb-approach {
    grid-template-columns: 1fr;
  }
  .pb-clients {
    grid-template-columns: 1fr;
  }
  .pb-checklist {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .pb-checklist {
    grid-template-columns: 1fr;
  }
}