/* Generic Hero Section — minimal image-only hero. Same container/image treatment as
   the banner block's own slide-background (width:100%, height:auto, no cropping) —
   the image's own uploaded dimensions/aspect ratio drive the rendered height. */

.generic-hero-section {
  position: relative;
}

/* Full-bleed on desktop (default; authored via "Full Width" — omit or set anything
   other than "false" to keep this) — breaks out of the page's main > .section
   max-width/padding constraint (styles.css) so the image spans the full viewport
   width, unlike banner. Same breakout technique used on the HD Upgrade blocks. Not
   needed on mobile — a separate global rule already zeroes .section's side padding
   under 600px. */
.generic-hero-section.full-width {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
}

/* Full Width: false — stays contained at the parent's width instead of breaking out. */
.generic-hero-section:not(.full-width) {
  margin: 0 auto;
  margin-top: -17px;
}

.generic-hero-section picture {
  display: block;
  width: 100%;
}

.generic-hero-section img {
  width: 100%;
  height: auto;
  display: block;
}

/* !important: styles.css's `main > .section { margin: 0 auto; }` has higher
   specificity (element + class beats a single class here) and would otherwise
   override this and silently cancel the pull-up. */
@media (width < 900px) {
  .generic-hero-section-container {
    margin: -10px 0 auto !important;
  }
}

@media (width >= 900px) {
  .generic-hero-section-container {
    margin-top: -16px !important;
  }
}

/* language-popup variant — the whole image is a plain, unstyled click target; popup
   values below are copied from promo-bar's own `language-popup` variant, which is
   pixel-matched to the classic `stbdonglepopup` component's clientlib CSS. Kept in sync
   manually rather than shared, matching this repo's existing per-block popup convention
   (see the JS doc comment). */
.generic-hero-section-trigger {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.generic-hero-section .generic-hero-section-popup {
  display: none;
  position: fixed;
  top: 16vh;
  left: 50%;
  width: 500px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  z-index: 999;
}

.generic-hero-section .generic-hero-section-popup.show {
  display: block;
}

.generic-hero-section .generic-hero-section-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  background: rgb(0 0 0 / 40%);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.generic-hero-section .generic-hero-section-popup-close::before,
.generic-hero-section .generic-hero-section-popup-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  transform-origin: center;
}

.generic-hero-section .generic-hero-section-popup-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.generic-hero-section .generic-hero-section-popup-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.generic-hero-section .generic-hero-section-popup-banner {
  position: relative;
  overflow: hidden;
  background: #ffded7;
}

.generic-hero-section .generic-hero-section-popup-image {
  display: block;
  width: 100%;
}

.generic-hero-section .generic-hero-section-popup-body {
  padding: 20px;
}

.generic-hero-section .generic-hero-section-popup-heading {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  text-align: center;
}

.generic-hero-section .generic-hero-section-popup-message {
  margin: 0 0 12px;
  font-size: 13px;
  color: #f04c23;
  text-align: center;
}

.generic-hero-section .generic-hero-section-language-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 20px;
}

.generic-hero-section .generic-hero-section-language {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 146px;
  height: 35px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 75pt;
  cursor: pointer;
}

.generic-hero-section .generic-hero-section-language input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.generic-hero-section .generic-hero-section-language span {
  font-size: 11px;
  font-weight: 400;
  color: #f04c23;
  text-align: center;
  letter-spacing: 0.28px;
}

.generic-hero-section .generic-hero-section-language input:checked + span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #444;
  border-radius: 75pt;
}

.generic-hero-section .generic-hero-section-popup-continue {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #f04c23;
  border: none;
  border-radius: 8px;
  filter: drop-shadow(0 4px 12px rgb(56 56 56 / 20%));
  cursor: pointer;
}

.generic-hero-section .generic-hero-section-popup-continue:disabled {
  background: #ccc;
  cursor: not-allowed;
}