/* Shared uncropped editorial hero treatment for article and qTool pages. */

.q-editorial-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bs-tertiary-bg, #eef1f4);
}

.q-editorial-hero__backdrop {
  position: absolute;
  inset: -5%;
  z-index: 0;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  filter: blur(14px) brightness(.80) saturate(.86);
  transform: scale(1.04);
  pointer-events: none;
  user-select: none;
}

.q-editorial-hero__picture {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.q-editorial-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.q-editorial-hero--feather-sides .q-editorial-hero__image {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 1%, #000 99%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 1%, #000 99%, transparent 100%);
}

.q-editorial-hero--feather-vertical .q-editorial-hero__image {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 1%, #000 99%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 1%, #000 99%, transparent 100%);
}

.q-editorial-hero--article {
  height: min(46vh, 455px);
}

.q-editorial-hero--tool {
  height: clamp(240px, 38vw, 480px);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}

.q-editorial-hero > .hero-cap,
.q-editorial-hero > .hero-lang {
  z-index: 3;
}

[data-bs-theme="dark"] .q-editorial-hero {
  background: var(--bs-tertiary-bg, #23272b);
}

@media (max-width: 767.98px) {
  .q-editorial-hero--article {
    height: min(45vh, 360px);
  }

  .q-editorial-hero--tool {
    height: clamp(220px, 62vw, 360px);
  }

  .q-editorial-hero__backdrop {
    filter: blur(12px) brightness(.68) saturate(.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .q-editorial-hero__backdrop {
    transform: none;
  }
}