/**
 * @file
 * MLT Modern — Page title region.
 *
 * Wraps Drupal core's "Page title" block when placed in the `page_title`
 * region. Provides a constrained container, big blue heading, and a soft
 * separator below it.
 *
 * Drupal's Page Title block renders:
 *   <div class="block block-page-title-block ...">
 *     <h1 class="page-title">{{ title }}</h1>
 *   </div>
 *
 * We target the region wrapper (.mlt-region--page-title) so the styling
 * applies whether the H1 sits inside the default Drupal markup or any
 * future override.
 *
 * No styling appears if no block is placed in the region — the region
 * wrapper itself only renders when `page.page_title` evaluates truthy
 * in page.html.twig.
 */

.mlt-region--page-title {
  background: #fff;
  padding: 40px 0 30px;
  border-bottom: 1px solid var(--mlt-border);
}

/* Inner container — matches the rest of the site's max-width. */
.mlt-region--page-title > * {
  max-width: var(--mlt-container-max);
  margin: 0 auto;
  padding: 0 var(--mlt-container-pad);
}

/* The H1 itself. Big, blue, tight line-height. */
.mlt-region--page-title h1,
.mlt-region--page-title .page-title {
  font-size: 38px;
  font-weight: 800;
  color: var(--mlt-primary);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .mlt-region--page-title {
    padding: 28px 0 22px;
  }
  .mlt-region--page-title h1,
  .mlt-region--page-title .page-title {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .mlt-region--page-title h1,
  .mlt-region--page-title .page-title {
    font-size: 24px;
  }
}