/* =========================================================================
   Tablet / foldable fixes
   -------------------------------------------------------------------------
   On mid-size viewports (Surface Pro 7 ~912/1368px, Asus Zenbook Fold
   ~853/1280px) the hero slide keeps the desktop's fixed image height while
   the first slide's content (headline + copy + CTAs + the Salesforce card)
   grows past it. Because .cd-full-width is position:absolute / height:100%
   and .cd-slider-nav is position:absolute / bottom:80px, the overflowing
   Salesforce card and the slide text/nav end up stacked on top of each
   other.

   Fix: below 1200px, let the first slide (the only one using .cd-full-width)
   grow with its content and let the slider nav sit in normal flow beneath
   it. The background image is pinned behind the content with object-fit so
   it still covers the taller slide. Slides 2-4 use .cd-half-width and are
   left untouched.
   ========================================================================= */

@media (max-width: 1199px) {
  /* Hero container follows its content instead of a fixed height */
  #main-slide.cd-hero,
  #main-slide .cd-hero-slider,
  .cd-hero-slider li.selected:has(.cd-full-width) {
    height: auto !important;
    min-height: 0 !important;
  }

  /* Background image sits behind the content and covers the taller slide */
  .cd-hero-slider li:has(.cd-full-width) .overlay2 {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    width: 100%;
  }
  .cd-hero-slider li:has(.cd-full-width) .overlay2 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 0.4 !important;
  }

  /* First slide's content flows normally, with room for the fixed header */
  .cd-hero-slider .cd-full-width {
    position: relative !important;
    height: auto !important;
    padding: 130px 15px 48px !important;
  }

  /* Slider nav drops below the slide instead of floating over the card */
  .cd-slider-nav {
    position: relative !important;
    bottom: auto !important;
    height: auto !important;
    margin-top: 18px;
    padding-bottom: 24px;
  }

  /* Keep the two hero columns from colliding before they stack at 992px */
  .saleforce-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
  }
}