/* ===== GFT Tree Scale - homepage scene, klimintaal =====================================
   Problem it solves: the scene (#interactive-area) is a locked square whose contents are
   percentage based, so it shrinks in both directions, while the white intro card only
   shrinks in width and therefore grows TALLER (806px at 1440 -> 1142px at 1025). The art
   shrinks while the copy grows, so the bear and the rope run into the card below ~1440.

   1200-1439px : render the scene at its 1440 design size and scale it down as one unit.
                 The hotspot script works in % of the scene's own rect, and a CSS scale
                 changes rect and pointer coordinates alike, so hover/click stay exact.
   below 1200  : handled by Elementor itself - the kit's tablet breakpoint (viewport_lg)
                 was raised from 1025 to 1200, so the authored tablet layout takes over.
   no hover    : the scene is hover driven, so pointer capability decides too, not width.
   ===================================================================================== */

/* ---- 1200-1439px: scale the whole scene ------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  body.gft-scene-scale .elementor-element-e5da848 {
    overflow: hidden;   /* the scene renders at its 1440 design width, then scales down */
  }
  body.gft-scene-scale #interactive-area {
    width: 1440px !important;
    height: 1440px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;   /* the parent is a flex container: without this the
                                    scene shrinks back to the parent's height */
    transform: scale(var(--gft-scene-scale, 1));
    transform-origin: top left;
  }
}

/* ---- wide screens without hover: use the row layout too ---------------------------
   Elementor's tablet breakpoint now ends at 1199 (kit setting viewport_lg = 1200), so the
   1025-1199 band gets the authored tablet layout on its own. This block only covers the
   remaining case: a wide device that cannot hover, where the hover-driven tree is useless. */
@media (min-width: 1200px) and (hover: none) {
  body.gft-scene-scale .elementor-element-e5da848 { display: none !important; }

  body.gft-scene-scale .elementor-element-b8fbc5f,   /* welkom heading + intro   */
  body.gft-scene-scale .elementor-element-1abca79,   /* Asset-1.png              */
  body.gft-scene-scale .elementor-element-716176f,   /* the 6 kamer rows         */
  body.gft-scene-scale .elementor-element-bb9446d,   /* flat tree image          */
  body.gft-scene-scale .elementor-element-bae5e05 {  /* HV + FAQ rows            */
    display: flex !important;
  }

  /* those rows are authored against the tablet breakpoint, so mirror its direction */
  body.gft-scene-scale .elementor-element-716176f,
  body.gft-scene-scale .elementor-element-716176f > .e-con,
  body.gft-scene-scale .elementor-element-bae5e05,
  body.gft-scene-scale .elementor-element-bae5e05 > .e-con {
    flex-direction: column !important;
  }
}