/**
 * @file
 * Page header styles.
 *
 */

:where([data-theme="surface"]) {
  --page-header-overlay: linear-gradient(
    90deg,
    var(--ucla-blue),
    rgba(40, 116, 175, 0.9) 5%,
    rgba(40, 116, 175, 0.6) 35%,
    rgba(40, 116, 175, 0.2) 50%,
    rgba(40, 116, 175, 0.2) 70%,
    rgba(40, 116, 175, 0.9) 95%,
    var(--ucla-blue)
  );
}

:where([data-theme="dgsom"]) {
  --page-header-bg-color: var(--midnight-joshua-tree);
  --page-header-text-shadow: var(--ucla-blue);
  --page-header-overlay: linear-gradient(
    90deg,
    var(--midnight-joshua-tree),
    rgba(0, 58, 92, 0.9) 5%,
    rgba(0, 58, 92, 0.6) 35%,
    rgba(0, 58, 92, 0.2) 50%,
    rgba(0, 58, 92, 0.2) 70%,
    rgba(0, 58, 92, 0.9) 95%,
    var(--midnight-joshua-tree)
  );
}

:where([data-theme="labs"]) {
  --page-header-overlay: linear-gradient(
    90deg,
    var(--ucla-blue),
    rgba(40, 116, 175, 0.9) 5%,
    rgba(40, 116, 175, 0.6) 35%,
    rgba(40, 116, 175, 0.2) 50%,
    rgba(40, 116, 175, 0.2) 70%,
    rgba(40, 116, 175, 0.9) 95%,
    var(--ucla-blue)
  );
}

:where([data-theme="labs-dynamic"]) {
  --page-header-bg-color: var(--midnight-joshua-tree);
  --page-header-text-shadow: var(--ucla-blue);
  --page-header-overlay: linear-gradient(
    90deg,
    var(--midnight-joshua-tree),
    rgba(0, 58, 92, 0.9) 5%,
    rgba(0, 58, 92, 0.6) 35%,
    rgba(0, 58, 92, 0.2) 50%,
    rgba(0, 58, 92, 0.2) 70%,
    rgba(0, 58, 92, 0.9) 95%,
    var(--midnight-joshua-tree)
  );
}

.page-header {
  background-color: var(--ucla-blue);
  background-color: var(--page-header-bg-color, var(--ucla-blue));
  color: var(--white);
}

.page-header .container {
  height: 100%;
  position: relative;
}

.page-header__content {
  padding-block: var(--size-8);
  position: relative;
  z-index: var(--layer-10);
}

@media (min-width: 768px) {
  .page-header__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

@media (--tablet) {
  .page-header__content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

:where(.article--full, .event--full) .page-header__content {
  -webkit-padding-after: var(--size-24);
  padding-block-end: var(--size-24);
}

.page-header__content .breadcrumb__item,
.page-header__content .breadcrumb__link {
  color: var(--white);
}

.page-header__text {
  width: 100%;
}

@media (min-width: 768px) {
  .page-header__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
  }
}

@media (--tablet) {
  .page-header__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
  }
}

.page-header__text h1 {
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-400);
  -webkit-margin-before: var(--size-8);
  margin-block-start: var(--size-8);
}

@media (min-width: 1024px) {
  .page-header__text h1 {
    font-size: var(--font-size-10);
    line-height: var(--leading-none);
    text-shadow: var(--silver-lake-reservoir) 0 0 0.5rem;
    text-shadow: var(--page-header-text-shadow, var(--silver-lake-reservoir)) 0
      0 0.5rem;
  }
}

@media (min-width: 1024px) {
  .page-header__text h1 {
    font-size: var(--font-size-10);
    line-height: var(--leading-none);
    text-shadow: var(--silver-lake-reservoir) 0 0 0.5rem;
    text-shadow: var(--page-header-text-shadow, var(--silver-lake-reservoir)) 0
      0 0.5rem;
  }
}

@media (--laptop) {
  .page-header__text h1 {
    font-size: var(--font-size-10);
    line-height: var(--leading-none);
    text-shadow: var(--silver-lake-reservoir) 0 0 0.5rem;
    text-shadow: var(--page-header-text-shadow, var(--silver-lake-reservoir)) 0
      0 0.5rem;
  }
}

.page-header__text p {
  font-family: var(--font-body);
  font-size: var(--font-size-3);
  -webkit-margin-before: var(--size-2);
  margin-block-start: var(--size-2);
}

@media (min-width: 1024px) {
  .page-header__text p {
    font-size: var(--font-size-5);
  }
}

@media (--laptop) {
  .page-header__text p {
    font-size: var(--font-size-5);
  }
}

/* Page header short */

.page-header--short .page-header__content {
  -webkit-padding-after: var(--size-8);
  padding-block-end: var(--size-8);
}

/* Page header banner */

.page-header--banner {
  -webkit-padding-after: var(--size-6);
  padding-block-end: var(--size-6);
}

@media (min-width: 768px) {
  .page-header--banner {
    height: 22rem;
    -webkit-padding-after: 0;
    padding-block-end: 0;
  }
}

@media (--tablet) {
  .page-header--banner {
    height: 22rem;
    -webkit-padding-after: 0;
    padding-block-end: 0;
  }
}

@media (min-width: 1024px) {
  .page-header--banner {
    height: 33rem;
  }
}

@media (--laptop) {
  .page-header--banner {
    height: 33rem;
  }
}

@media (min-width: 768px) {
  .page-header--banner .page-header__text {
    width: 75%;
  }
}

@media (--tablet) {
  .page-header--banner .page-header__text {
    width: 75%;
  }
}

@media (min-width: 1024px) {
  .page-header--banner .page-header__text {
    width: 50%;
  }
}

@media (--laptop) {
  .page-header--banner .page-header__text {
    width: 50%;
  }
}

.page-header--banner .page-header__text h1 {
  font-size: var(--font-size-8);
}

@media (min-width: 1024px) {
  .page-header--banner .page-header__text h1 {
    font-size: var(--font-size-11);
  }
}

@media (--laptop) {
  .page-header--banner .page-header__text h1 {
    font-size: var(--font-size-11);
  }
}

@media (min-width: 1024px) {
  .page-header--banner .page-header__text p {
    font-size: var(--font-size-7);
  }
}

@media (--laptop) {
  .page-header--banner .page-header__text p {
    font-size: var(--font-size-7);
  }
}

@media (min-width: 768px) {
  .page-header--banner .page-header__media {
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
  }
}

@media (--tablet) {
  .page-header--banner .page-header__media {
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
  }
}

@media (min-width: 768px) {
  .page-header--banner .page-header__media .media {
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (--tablet) {
  .page-header--banner .page-header__media .media {
    height: 100%;
    inset: 0;
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.page-header--banner .page-header__media .media img {
  aspect-ratio: var(--ratio-widescreen);
  width: 100%;
}

@media (min-width: 768px) {
  .page-header--banner .page-header__overlay {
    background: var(--page-header-overlay);
    height: 100%;
    inset: 0;
    position: absolute;
  }
}

@media (--tablet) {
  .page-header--banner .page-header__overlay {
    background: var(--page-header-overlay);
    height: 100%;
    inset: 0;
    position: absolute;
  }
}