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

/* White content box overlaying the image. */
.super-hero-city .hero-super__words {
  background-color: #fff;
  z-index: 3;
}

/* Explicit stacking for the transformed media element. */
.super-hero-city .hero-super__media {
  z-index: 1;
}

.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;
}

/* Anchor the box to the image's bottom edge, then pull it up by 1/3 of its
   own height, so 1/3 overlaps the image and 2/3 sits below it. No left
   inset here — the container's own padding already provides the gap;
   ≥768px overrides it with a wider inset below. */
.super-hero-city .hero-super__words {
  position: absolute;
  top: 100%;
  transform: translateY(-33.333%);
  margin: 0;
}

/* Reserve room below the image for the 2/3 of the words box that hangs
   outside it, so it doesn't overlap whatever section follows the hero. */
.super-hero-city.hero-super {
  margin-bottom: 80px;
}

/* "Bottom Space" behavior adds on top of the reserve above (80px + 80px = 160px). */
.super-hero-city.hero-super.paragraph--submenu-bottom-space {
  margin-bottom: 160px;
}

.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 24px;
  max-width: max-content;
  grid-area: 1/-1;
  z-index: 2;
  position: absolute;
  top: 100%;
  transform: translateY(-33.333%);
  /* left: 40px; */
  margin: 0;
  font-weight: 900;
}

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

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

@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 .hero-super__media {
  overflow: hidden;
}

.hero-super--bling .Bling {
  top: 83px;
  left: 39px;
  right: 0;
}

@media screen and (max-width: 1279px) {
  .hero-super--bling .hero-super-hero__words {
    left: 24px;
  }

  /* Bling: force visibility and position at top-right on mobile.
     Percentages keep proportions locked as the container scales with the viewport.
     The Hanna library hides and unsticks the Bling on narrow screens,
     so position/display/size all need !important to take effect. */
  .super-hero-city.hero-super--bling .Bling {
    display: block !important;
    position: absolute !important;
    top: 21px !important;
    left: auto !important;
    right: -19.5% !important;
    width: 54% !important;
    z-index: 1 !important;
  }

  .super-hero-city.hero-super--bling .Bling > svg {
    width: 100% !important;
    height: auto !important;
  }
}

/* Restore base centering when frontend editing is active. */
.super-hero-city.hero-super.frontend-editing .hero-super__media {
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Base centering — inherited by tablet and desktop breakpoints. */
.super-hero-city .hero-super__media {
  width: 390px;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Mobile: viewport-aware full-bleed that works regardless of container padding. */
@media screen and (max-width: 767px) {
  .super-hero-city .hero-super__media {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    transform: none;
  }
}

@media screen and (min-width: 768px) {
  .hero-super__media img {
    height: auto;
    object-fit: none;
  }

  /* Tablet: viewport-aware full-bleed (same formula as mobile). */
  .super-hero-city .hero-super__media {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    transform: 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%);
  }

}

/* Tablet+: super-hero-city desktop image layout.
   Overrides the unscoped height:auto/object-fit:none above (higher specificity wins). */
@media screen and (min-width: 768px) {
  .super-hero-city .hero-super__image--desktop {
    display: block;
    width: 100%;
  }

  .super-hero-city .hero-super__image--desktop img {
    display: block;
    width: 100%;
    height: 416px;
    object-fit: cover;
    margin: 0;
  }

  /* Position/top/transform inherited from the unscoped base rule above. */
  .super-hero-city .hero-super__words {
    left: 40px;
  }

  /* Reserve room below the image for the 2/3 of the words box that now hangs
     outside it, so it doesn't overlap whatever section follows the hero. */
  .super-hero-city.hero-super {
    margin-bottom: 120px;
  }

  /* "Bottom Space" behavior adds on top of the reserve above (120px + 80px = 200px). */
  .super-hero-city.hero-super.paragraph--submenu-bottom-space {
    margin-bottom: 200px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .super-hero-city.hero-super--bling .Bling {
    width: 26vw !important;
    right: -3% !important;
    top: 50px !important;
  }

  .super-hero-city .hero-super--bling .hero-super__title {
    font-size: 32px;
    line-height: 40px;
  }

  .super-hero-city .hero-super--bling .hero-super-hero__words {
    max-width: 260px;
  }
}

@media screen and (min-width: 1280px) {
  /* Desktop: keep viewport-bleed until the viewport is wide enough for 1368px. */
  .super-hero-city .hero-super__media {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    transform: none;
  }

  /* Desktop image fills the full-bleed container at 416px tall. */
  .super-hero-city .hero-super__image--desktop img {
    display: block;
    width: 100%;
    height: 416px;
    object-fit: cover;
    margin: 0;
  }
}

@media screen and (min-width: 1368px) {
  /* Wide enough for the fixed 1368px design width — switch to centered fixed size. */
  .super-hero-city .hero-super__media {
    width: 1368px;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .super-hero-city .hero-super__image--desktop img {
    width: 1368px;
  }
}

@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;
  }
}