/**
 * Page Header Block Styles
 * Using ACSS variables and methodology
 */

 .page-header {
  position: relative;
  background-color: var(--bg-ultra-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header__container {
  padding-block: calc(var(--section-space-l) * 1.25);
  max-inline-size: var(--content-width);
  margin-inline: auto;
}

.page-header__title,
.editor-styles-wrapper .page-header__title,
.block-editor-block-list__layout .page-header__title {
  font-family: var(--heading-font-family);
  font-weight: 200;
  line-height: 1.1;
  font-size: var(--h1);
  color: var(--text-light);
}

.page-header__headline,
.editor-styles-wrapper .page-header__headline,
.block-editor-block-list__layout .page-header__headline {
  font-family: var(--heading-font-family);
  font-weight: 200;
  line-height: 1.1;
  font-size: var(--h2);
  color: var(--text-light);
  margin-block-end: var(--space-xs);
}

.page-header__lede,
.editor-styles-wrapper .page-header__lede,
.block-editor-block-list__layout .page-header__lede {
  font-family: var(--heading-font-family);
  color: var(--text-light);
  font-style: italic;  
  font-size: calc(var(--h3) * .85);
}

.page-header__actions {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  flex-wrap: wrap;
  margin-block-start: var(--space-s);
}

/* Responsive */
@media (max-width: 768px) {
  .page-header__container {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  .page-header__title,
  .editor-styles-wrapper .page-header__title,
  .block-editor-block-list__layout .page-header__title {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 42px;
  }

  .page-header__headline,
  .editor-styles-wrapper .page-header__headline,
  .block-editor-block-list__layout .page-header__headline {
    font-size: 24px;
    margin-bottom: 0.75rem;
  }

  .page-header__lede,
  .editor-styles-wrapper .page-header__lede,
  .block-editor-block-list__layout .page-header__lede {
    font-size: var(--text-s);
    margin-bottom: 1.5rem;
    max-width: 100%;
  }
  
  .page-header__button {
    width: 100%;
    justify-content: center;
  }

  .page-header__actions {
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .page-header__title,
  .editor-styles-wrapper .page-header__title,
  .block-editor-block-list__layout .page-header__title {
    font-size: 36px;
  }
  
  .page-header__headline,
  .editor-styles-wrapper .page-header__headline,
  .block-editor-block-list__layout .page-header__headline {
    font-size: 20px;
  }
}