/* Custom styling for the heros_super paragraph type. */

.event-page .hero-super.frontend-editing,
.hero-super.frontend-editing,
.hero-super {
  position: relative;
  display: grid;
}
.hero-super::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: inherit;
}

.hero-super__media {
  grid-area: 1/-1;
  position: relative;
}
.hero-super__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Force aspect ratio only on larger screens where we have 16:9 images */
@media screen and (min-width: 576px) {
  .hero-super__media img {
    height: 100%;
    object-fit: cover;
  }
}
/* Responsive image visibility */
.hero-super__image--desktop {
  display: none;
}
.hero-super__image--mobile {
  display: block;
}

@media screen and (min-width: 768px) {
  .hero-super__image--desktop {
    display: block;
  }
  .hero-super__image--mobile {
    display: none;
  }
}

.hero-super__media--overlay::after {
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  content: '';
  top: 0;
}
[data-text-shade="light_overlay"] .hero-super__media--overlay::after {
  background-color: rgba(0, 0, 0.2, 0.2);
}
[data-text-shade="dark_overlay"] .hero-super__media--overlay::after {
  background-color: rgba(255, 255, 255, 0.5);
}

.hero-super__words {
  grid-area: 1/-1;
  z-index: 2;
  margin: auto;
  max-width: 664px; /*584 + 2*40 */
  padding: 20px;
}
[data-text-shade="light"] .hero-super__words,
[data-text-shade="light_overlay"] .hero-super__words {
  color: #fff;
}
[data-text-position="center"] .hero-super__words {
  text-align: center;
}

.hero-super__title {
  font: var(--font-hd-s);
}
.hero-super__subtitle {
  font: var(--font-sh-s);
}
.hero-super__text {
  margin-top: 24px;
  font: var(--font-bd-l);
}
.hero-super__link {
  margin-top: 32px;
}
[data-text-shade="light"] .ButtonTertiary.hero-super__link::before {
  color: currentColor;
  background-color: currentColor;
}

/* Hero Super and carousel video styles */
.hero-super__video,
.portrait-carousel-item__video {
  position: relative;
  height: 0;
  overflow: hidden;
}

.hero-super__video iframe,
.portrait-carousel-item__video iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hero-super__video {
  padding-bottom: 56.25%;
}

.portrait-carousel-item__video {
  padding-bottom: 116.67%;
  width: 325px;
}

.portrait-carousel-item__video iframe {
  top: 50%;
  left: 50%;
  width: 210%;
  transform: translate(-50%, -50%);
  border: 0;
}

/* Hero Super Bling variation styles */

.hero-super--bling .hero-super-hero__words {
  padding: 8px 8px 8px 8px;
  max-width: max-content;
  grid-area: 1/-1;
  z-index: 2;
  position: absolute;
  bottom: 8%;
  left: 40px;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .hero-super--bling .hero-super-hero__words {
    padding: 38px 44px 33px 44px;
  }
}

.hero-super--bling .hero-super__title {
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  letter-spacing: -2%;
}

@media screen and (min-width: 768px) {
  .hero-super--bling .hero-super__title {
    font-size: 48px;
    line-height: 56px;
  }
}

@media screen and (min-width: 1024px) {
  .hero-super--bling .hero-super__title {
    font-size: 64px;
    line-height: 76px;
  }
}

.hero-super--bling .Bling {
  left: -5.3%;
}

/* Adjust bling position on tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .hero-super--bling .Bling {
    left: -5.3% !important;
  }
}

/* Specific adjustments for 1024px width tablets */
@media screen and (width: 1024px) {
  .hero-super--bling .Bling {
    left: -5.2% !important;
  }

  .hero-super--bling .Bling--parent--center {
    top: 41% !important;
  }
}

/* Specific adjustments for 834px width tablets */
@media screen and (width: 834px) {
  .hero-super--bling .Bling {
    left: -5.2% !important;
  }
}

/* Make bling smaller on mobile */
@media screen and (max-width: 767px) {
  .hero-super--bling .Bling.Bling--align--left.Bling--vertical--down-ish.Bling--color--tertiary.Bling--parent--center.Bling--overlay {
    display: block !important;
    position: absolute !important;
    top: 54% !important;
    left: -75px !important;
    right: auto !important;
    width: 152px !important;
    height: 50.9px !important;
    z-index: 1 !important;
    /* Ensure color variables are available */
    --bling-color-a: var(--theme-color-tertiary, #00d4aa) !important;
    --bling-color-b: var(--theme-color-secondary, #0061ff) !important;
    --bling-width: 300 !important;
    --bling-offset: 0 !important;
  }

  .hero-super--bling .Bling > svg {
    width: 100% !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    position: relative !important;
    left: 50% !important;
    top: 50% !important;
  }

  .hero-super--bling .hero-super-hero__words {
    left: 20px;
    bottom: 10%;
  }
}

/* Specific adjustments for mobile devices with 428px width */
@media screen and (width: 428px) {
  .hero-super--bling .Bling.Bling--align--left.Bling--vertical--down-ish.Bling--color--tertiary.Bling--parent--center.Bling--overlay {
    top: 58% !important;
  }
}

@media screen and (min-width: 768px) {
  .hero-super__media img {
    height: auto;
    object-fit: none;
  }
  .hero-super__words {
    padding: 40px;
  }
  [data-text-position="left"] .hero-super__words {
    margin: auto auto auto 20px;
  }
  [data-text-shade="light"][data-text-position="left"] .hero-super__media--overlay::after {
    background-color: transparent;
    background-image: linear-gradient(102.04deg, rgba(0, 0, 0, 0.45) 8.13%, rgba(0, 0, 0, 0) 73.93%);
  }
  [data-text-shade="dark"][data-text-position="left"] .hero-super__media--overlay::after {
    background-color: transparent;
    background-image: linear-gradient(102.04deg, rgba(255, 255, 255, 0.5) 8.13%, rgba(255, 255, 255, 0) 73.93%);
  }

  [data-text-position="right"] .hero-super__words {
    margin: auto 20px auto auto;
  }
  [data-text-shade="light"][data-text-position="right"] .hero-super__media--overlay::after {
    background-color: transparent;
    background-image: linear-gradient(-102.04deg, rgba(0, 0, 0, 0.45) 8.13%, rgba(0, 0, 0, 0) 73.93%);
  }
  [data-text-shade="dark"][data-text-position="right"] .hero-super__media--overlay::after {
    background-color: transparent;
    background-image: linear-gradient(-102.04deg, rgba(255, 255, 255, 0.5) 8.13%, rgba(255, 255, 255, 0) 73.93%);
  }
}

@media screen and (min-width: 1368px) {
  [data-text-position="left"] .hero-super__words {
    margin: auto auto auto 40px;
  }
  [data-text-position="right"] .hero-super__words {
    margin: auto 40px auto auto;
  }
}