/* ==========================================================================
   PAGES/PROJECTS.CSS
   Styles unique to projects.html — just the header banner's background
   image, reusing the shared .page-header component from 05-components.css.
   ========================================================================== */

.page-header--projects {
  background-image:
    linear-gradient(180deg, rgba(15, 39, 71, 0.55) 0%, rgba(15, 39, 71, 0.75) 100%),
    url('../../images/content/projects-header.jpg');
  background-position: top center;
}

/* Closing "Contact the ProjectBank Team" CTA banner. Genuinely centers
   its content (unlike the generic .text-center utility, which only
   handles inline text alignment — it doesn't center the paragraph as a
   block, since paragraphs have a max-width with no auto margins by
   default; see 03-base.css). The heading is also visually reduced to
   read as a sub-header rather than a full section heading, while staying
   an <h2> in the markup so the page's heading hierarchy remains correct
   for accessibility/SEO — this is a visual-only adjustment. */
.projects-cta {
  text-align: center;
}

.projects-cta h2 {
  font-size: var(--font-size-lg);
}

.projects-cta p {
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
}