.panel-single-header {
  --h: auto;
  --bg: #fff;
  --text-main: color-mix(in srgb, var(--color-subtle) 95%, transparent);
  --text-soft: color-mix(in srgb, var(--color-subtle) 70%, transparent);
  --text-muted: color-mix(in srgb, var(--color-subtle) 45%, transparent);
  --border: color-mix(in srgb, var(--color-subtle) 20%, transparent);
  padding: 1rem 0 3rem 0;
  background-color: var(--bg);
  height: var(--h);
  display: flex;
  align-items: center;

  @media (width >=992px) {
    --h: 56rem;
    padding: 4.5rem 0 3rem;
  }
}

.panel-single-header__inner {
  max-width: 1312px;
  margin: 0 auto;
  align-items: center;
}

.panel-single-header__layout {
  --gap: 1rem;
  display: grid;
  grid-template: 'header' 'image' 'layers' 'metas' 'footer';
  column-gap: var(--gap);

  @media (width >=992px) {
    --gap: 3rem;
    grid-template: 'header image' 'layers image' 'footer metas' / 1fr 1fr;
  }
}

#panel-single-header-header {
  grid-area: header;
}

#panel-single-header-layers {
  grid-area: layers;
}

#panel-single-header-meta {
  grid-area: metas;
}

#panel-single-header-footer {
  grid-area: footer;
}

#panel-single-header-image-section {
  grid-area: image;

  @media (width >=992px) {
    align-self: flex-end;
    margin-bottom: 2rem;
  }
}

.panel-single-header__kicker {
  --mb: 2rem;
  margin-bottom: var(--mb);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  color: var(--text-soft);
}

.panel-single-header__kicker-category,
.panel-single-header__kicker-tag {
  display: inline-flex;
  --px: .75rem;
  --py: .25rem;
  padding-inline: var(--px);
  padding-block: var(--py);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--color-subtle) 10%, transparent);
  color: var(--color-neutral-1);
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  font-weight: 400;
}

.panel-single-header__title {
  margin: 0 0 1rem;
  color: var(--text-main);
  font-size: var(--text-h1);
  line-height: var(--text-h1-line);
  font-weight: 600;
}

.panel-single-header__description {
  color: var(--text-soft);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);

  @media (width >=992px) {
    padding-right: 6rem;
    font-size: var(--text-body-lg);
    line-height: var(--text-body-lg-line);
  }

  p {
    margin: 0;
  }
}

.panel-single-header__layers {
  --mt: 2rem;
  list-style: none;
  margin-top: var(--mt);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  @media (width >=992px) {
    --mt: 4rem;
  }
}

.panel-single-header__layer-item {
  --gap: 1rem;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
}

.panel-single-header__layer-index {
  --size: 1.75rem;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background-color: var(--color-neutral-border);
  color: var(--color-neutral-1);
  font-size: var(--text-body-md);
  line-height: 1;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  @media (width >=992px) {
    --size: 2rem;
  }
}

.panel-single-header__layer-text {
  display: flex;
  flex-direction: column;
}

.panel-single-header__layer-name {
  margin: 0;
  color: var(--text-main);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);
  font-weight: 600;
}

.panel-single-header__layer-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-line);
}

.panel-single-header__footer {
  --mt: 2rem;
  margin-top: var(--mt);

  @media (width >=992px) {
    --mt: 8.25rem;
  }
}

.panel-single-header__cta {
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-neutral-5);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);
  font-weight: 700;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  width: 100%;

  @media (width >=992px) {
    width: auto;
  }

  &::before {
    background-color: var(--color-black) !important;
  }
}

.panel-single-header__media {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-single-header__image-stage {
  position: relative;
  aspect-ratio: 16 / 10;
}

.panel-single-header__layer-image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s ease, opacity 0.45s ease;
  transform: translateY(0);

  &:nth-child(1) {
    .panel-single-header__layer-image-index {
      --right: 5rem;
      --bottom: 7rem;
      right: var(--right);
      bottom: var(--bottom);
    }
  }

  &:nth-child(2) {
    .panel-single-header__layer-image-index {
      --left: 3rem;
      --top: 14rem;
      left: var(--left);
      top: var(--top);
    }
  }

  &:nth-child(3) {
    .panel-single-header__layer-image-index {
      --right: 16rem;
      --top: 4rem;
      right: var(--right);
      top: var(--top);
    }
  }

  &:nth-child(4) {
    .panel-single-header__layer-image-index {
      --left: 16rem;
      --bottom: 4rem;
      left: var(--left);
      bottom: var(--bottom);
    }
  }
}

.panel-single-header__image-stage.is-expanded {
  .panel-single-header__layer-image-wrap {
    --translate-y: 2rem;

    &:nth-child(1) {
      transform: translateY(var(--translate-y));

      .panel-single-header__layer-image-index {
        right: var(--right);
        bottom: var(--bottom);
      }
    }

    &:nth-child(2) {
      transform: translateY(0);

      .panel-single-header__layer-image-index {
        left: var(--left);
        top: var(--top);
      }
    }

    &:nth-child(3) {
      transform: translateY(calc(var(--translate-y) * -1));

      .panel-single-header__layer-image-index {
        right: var(--right);
        top: var(--top);
      }
    }

    &:nth-child(4) {
      transform: translateY(calc(var(--translate-y) * -2));

      .panel-single-header__layer-image-index {
        left: var(--left);
        bottom: var(--bottom);
      }
    }
  }
}

.panel-single-header__layer-image {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  scale: 1.25;
}

.panel-single-header__layer-image-index {
  --size: 2rem;
  position: absolute;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-md);
  border: 1px solid var(--border);
  line-height: var(--text-body-md-line);
  font-weight: 700;
  color: var(--text-main);
  background-color: #fff;
  border-radius: 999px;
  z-index: 2;
}

.panel-single-header__expand {
  --px: 1.25rem;
  --py: .75rem;
  padding-inline: var(--px);
  padding-block: var(--py);
  align-self: flex-end;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 700;
  background: #fff;
  color: var(--text-main);
  text-transform: lowercase;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-line);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  margin-left: auto;

  &:hover {
    border-color: var(--color-primary);
    background-color: #fff !important;
    color: var(--color-primary);
  }
}

.panel-single-header__expand-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.panel-single-header__meta {
  --mt: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: var(--mt);
  align-items: flex-end;
  text-align: right;
}

.panel-single-header__meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.panel-single-header__meta-label {
  color: var(--text-main);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);
  font-weight: 600;
}

.panel-single-header__meta-value {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-line);

  a {
    color: var(--text-soft);
    text-decoration: underline;

    &:hover {
      color: var(--color-primary);
    }
  }
}