/*
 * Bureau Project Hero
 * Responsive project image followed by title and short description.
 */

.block-type-bureau-project-hero {
  padding: 0;
}

.bureau-project-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.bureau-project-hero__media {
  flex: 1 1 0;
  width: 100%;
  min-height: 40svh;
  overflow: hidden;
}

.bureau-project-hero__media .pure-image,
.bureau-project-hero__media .pure-image picture,
.bureau-project-hero__media .pure-video {
  display: block;
  width: 100%;
  height: 100%;
}

.bureau-project-hero__media .pure-image,
.bureau-project-hero__media .pure-video {
  position: relative;
  aspect-ratio: auto !important;
}

.bureau-project-hero__media .pure-image img,
.bureau-project-hero__media .pure-video__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: inherit;
}

.bureau-project-hero__media .pure-video .pseudo-thumbhash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bureau-project-hero__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title tags"
    "text tags";
  column-gap: var(--size-l);
  margin-top: var(--size-xxl);
  padding-bottom: var(--size-xl);
  text-align: left;
}


.bureau-project-hero__title {
  grid-area: title;
  margin-bottom: var(--size-s);
}

.bureau-project-hero__text {
  grid-area: text;
  margin-bottom: 0;
}

.bureau-project-hero__tags {
  grid-area: tags;
  align-self: end;
  justify-self: end;
}

@media (max-width: 767px) {
  .bureau-project-hero__media {
    min-height: 35svh;
  }

  .bureau-project-hero__info {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "text"
      "tags";
  }

  .bureau-project-hero__tags {
    justify-self: start;
    margin-top: var(--size-l);
  }
}

/* Work subpages use the header as an overlay so the project hero starts
 * at the viewport top. */
.work-subpage #site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  background: transparent;
  transition: transform 0.3s ease, background-color 200ms ease;
}

/* Home gets the same transparent-at-top state, but keeps the header in its
 * existing layout flow so the first Block Builder item retains its top offset. */
.home #site-header {
  background: transparent;
  transition: transform 0.3s ease, background-color 200ms ease;
}

.work-subpage #site-header.is-scrolled,
.home #site-header.is-scrolled {
  background: var(--color-secondary);
}

/* .bureau-project-hero__tags .tag{
  border: none;
  background: rgb(235, 236, 237);
} */

/* Next-project transition: show only the lightweight Thumbhash preview while
 * preserving the exact dimensions of the real hero. The hidden info area is
 * still part of the layout, preventing a jump when the next page loads. */
.bureau-next-project__media {
  position: relative;
}

.bureau-next-project__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bureau-next-project__placeholder--fallback {
  background: var(--color-tertiary);
}

.bureau-next-project__info {
  visibility: hidden;
  pointer-events: none;
}

/* Hero videos behave exactly like hero images: fill the available media area
 * and crop overflow instead of preserving the source video's aspect ratio. */
.bureau-project-hero__media .pure-video__media,
.bureau-project-hero__media .pure-video__media video,
.bureau-project-hero__media .pure-video video {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center;
}

.bureau-project-hero__media .pure-video__media {
  position: absolute;
  inset: 0;
}

.bureau-project-hero__tags .tag{
  cursor: default;
  pointer-events: none;
}
/* Keep the Pure Video media wrapper filling the project hero. */
.bureau-project-hero__media .pure-video > .pure-video__media-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bureau-project-hero__media .pure-video__media-container > .pseudo-thumbhash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}