/* ============================================================
   Case study — billboard-over-hero overrides
   Loaded after the Webflow bundle, so these rules win.

   Used by any case study whose billboard has been moved into
   the hero: the full-height red billboard section is removed,
   its contents wrapped in .hero-billboard-overlay and laid over
   the hero video, and the TNM-#### meta overlay deleted.

   Currently: /work/oceanview, /work/go
   ============================================================ */

.hero-billboard-overlay {
  position: absolute;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  /* Let the prev/next case-study hexagons underneath stay clickable. */
  pointer-events: none;
}

/* Was .container.fullscreen.red — height in svh plus the red fill.
   Inside the hero it just needs to fill its parent, transparently. */
.hero-billboard-overlay .container.fullscreen {
  height: 100%;
  background-color: transparent;
  overflow: hidden;
}

/* The billboard used to own a full section, so its logo row started at the
   very top. Over the hero it collides with the fixed nav — push it clear. */
.hero-billboard-overlay .billboard-content-wrapper {
  padding-top: 6rem;
}

@media (max-width: 767px) {
  .hero-billboard-overlay .billboard-content-wrapper {
    padding-top: 5rem;
  }
}

/* ------------------------------------------------------------
   Carnival + OceanView logo lockup

   Webflow sizes these by height across six breakpoints
   (40 / 50 / 60 / 70 / 80px). Scale the whole ladder rather
   than pinning one size, so they still grow with the viewport.

   Tune --logo-scale to taste: 1 = Webflow's original size.
   Scoped to the hero, so billboards on other case studies
   keep their own sizing.
   ------------------------------------------------------------ */
.hero-billboard-overlay {
  --logo-scale: 0.65;
}

.hero-billboard-overlay .billboard-image-wrapper.billboard {
  height: calc(50px * var(--logo-scale));
}

@media screen and (min-width: 1280px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(60px * var(--logo-scale));
  }
}

@media screen and (min-width: 1440px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(70px * var(--logo-scale));
  }
}

@media screen and (min-width: 1920px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(80px * var(--logo-scale));
  }
}

@media screen and (max-width: 991px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(50px * var(--logo-scale));
  }
}

@media screen and (max-width: 767px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(40px * var(--logo-scale));
  }
}

@media screen and (max-width: 479px) {
  .hero-billboard-overlay .billboard-image-wrapper.billboard {
    height: calc(50px * var(--logo-scale));
  }
}