/* Skupiny shares Home's green dissolve, with framing for its banquet film. */
.hero--skupiny {
  isolation: isolate;
  align-items: stretch;
  min-height: clamp(820px, 100svh, 1040px);
  padding-top: 0;
  background: #08160e;
}
.hero--skupiny .hero__inner {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: 1740px;
  min-height: inherit;
  margin: 0 auto;
  padding: 176px clamp(30px, 6.7vw, 100px) 72px;
  align-items: flex-start;
  justify-content: center;
  gap: 54px;
}
.hero--skupiny .hero__video-wrap {
  --film-height: 38.281482vw;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
  overflow: hidden;
  pointer-events: none;
}
.skupiny-hero__media {
  position: absolute;
  top: 50%;
  left: 32%;
  width: 68%;
  height: var(--film-height);
  transform: translateY(-50%);
}
.skupiny-hero__media picture { display: block; width: 100%; height: 100%; }
.hero--skupiny .skupiny-hero__poster,
.hero--skupiny .skupiny-hero__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 55% 50%;
  filter: none;
  border-radius: 0;
}
.hero--skupiny .skupiny-hero__poster { opacity: 1; }
.hero--skupiny .skupiny-hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 180ms ease;
}
.hero--skupiny .skupiny-hero__video.is-ready { opacity: 1; }
/* Keep the source ratio; dissolve only the edges of the film into green. */
.hero--skupiny .hero__video-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, #08160e 0%, #08160e calc(50% - var(--film-height) / 2), rgba(8, 22, 14, .42) calc(50% - var(--film-height) * .32), transparent calc(50% - var(--film-height) * .1), transparent calc(50% + var(--film-height) * .14), #08160e calc(50% + var(--film-height) / 2)),
    linear-gradient(90deg, #05120b 0%, #05120b 32%, rgba(5, 18, 11, .97) 37%, rgba(5, 18, 11, .8) 44%, rgba(5, 18, 11, .42) 54%, rgba(5, 18, 11, .08) 68%, transparent 82%),
    linear-gradient(270deg, rgba(5, 18, 11, .28), transparent 20%),
    radial-gradient(ellipse at 76% 37%, rgba(228, 157, 64, .1), transparent 43%);
}
.hero--skupiny .hero__video-wrap::after {
  content: '';
  position: absolute;
  inset: 0 36% 0 24%;
  z-index: 2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .25) 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .25) 70%, transparent);
}
.hero--skupiny .hero__content { z-index: 3; width: min(49%, 660px); text-align: left; }
.hero--skupiny .hero__label { justify-content: flex-start; margin: 0 0 22px; font-size: clamp(12px, 1.1vw, 16px); }
.hero--skupiny .hero__title {
  max-width: 100%;
  margin: 0 0 24px;
  font-size: clamp(44px, 4.15vw, 70px);
  line-height: 1.1;
  letter-spacing: .3px;
  text-wrap: balance;
}
.hero--skupiny .hero__description {
  max-width: 540px;
  margin: 0 0 32px;
  font-size: clamp(17px, 1.39vw, 21px);
  font-weight: 400;
  line-height: 1.6;
  color: #d5d9d0;
}
.hero--skupiny .hero__actions { flex-flow: row wrap; justify-content: flex-start; gap: 22px 28px; margin: 0; }
.hero--skupiny .hero__blocks { position: relative; z-index: 3; margin: 0; justify-content: flex-start; gap: clamp(24px, 3vw, 48px); }
.hero--skupiny .hero__item { gap: 12px; }
.hero--skupiny .hero__item::before { content: none; }
.hero--skupiny .hero__item img { height: 34px; }
.hero--skupiny .hero__item span { font-size: 13px; line-height: 1.6; color: #c5cbbc; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero--skupiny .hero__content { width: 52%; }
  .hero--skupiny .hero__inner { padding-top: 150px; gap: 40px; }
}
@media (max-width: 1023px) {
  .hero--skupiny { min-height: max(900px, 100svh); }
  .hero--skupiny .hero__inner { justify-content: flex-end; padding-top: 440px; padding-bottom: 56px; gap: 36px; }
  .hero--skupiny .hero__video-wrap { --film-top: 70px; --film-height: 100vw; }
  .skupiny-hero__media { top: var(--film-top); left: 0; width: 100%; height: var(--film-height); transform: none; }
  .hero--skupiny .skupiny-hero__poster,
  .hero--skupiny .skupiny-hero__video { object-position: 50% 48%; }
  .hero--skupiny .hero__video-wrap::before {
    background:
      linear-gradient(180deg, #08160e 0%, #08160e var(--film-top), rgba(8, 22, 14, .15) calc(var(--film-top) + var(--film-height) * .18), rgba(8, 22, 14, .12) calc(var(--film-top) + var(--film-height) * .4), rgba(8, 22, 14, .86) calc(var(--film-top) + var(--film-height) * .72), #08160e calc(var(--film-top) + var(--film-height) * .96)),
      linear-gradient(110deg, rgba(5, 18, 11, .35), transparent 76%),
      radial-gradient(ellipse at 72% 24%, rgba(228, 157, 64, .08), transparent 38%);
  }
  .hero--skupiny .hero__video-wrap::after {
    inset: auto 0;
    top: calc(var(--film-top) + var(--film-height) * .48);
    height: calc(var(--film-height) * .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    -webkit-mask-image: linear-gradient(transparent, rgba(0, 0, 0, .45), transparent);
    mask-image: linear-gradient(transparent, rgba(0, 0, 0, .45), transparent);
  }
  .hero--skupiny .hero__content { width: 100%; max-width: 620px; }
  .hero--skupiny .hero__title { max-width: 590px; font-size: 48px; }
  .hero--skupiny .hero__description { max-width: 560px; font-size: 18px; }
}
@media (max-width: 767px) {
  .hero--skupiny { min-height: max(900px, 100svh); }
  .hero--skupiny .hero__inner { padding: calc(70px + 100vw * .65) 24px 44px; gap: 34px; justify-content: flex-start; }
  .hero--skupiny .hero__label { margin-bottom: 16px; font-size: 10px; letter-spacing: .8px; }
  .hero--skupiny .hero__title { font-size: clamp(32px, 8.5vw, 40px); margin-bottom: 20px; line-height: 1.13; }
  .hero--skupiny .hero__description { font-size: 16px; line-height: 1.6; margin-bottom: 26px; }
  .hero--skupiny .hero__actions { gap: 22px; align-items: flex-start; }
  .hero--skupiny .hero__blocks { width: 100%; gap: 12px; justify-content: space-between; flex-wrap: nowrap; }
  .hero--skupiny .hero__item { gap: 8px; }
  .hero--skupiny .hero__item img { height: 25px; }
  .hero--skupiny .hero__item span { font-size: 10px; line-height: 1.55; }
}
@media (max-width: 374px) {
  .hero--skupiny .hero__inner { padding-inline: 20px; }
  .hero--skupiny .hero__blocks { flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--skupiny .skupiny-hero__video { transition: none; }
}