/* Forestry page overrides (loaded after TeleportHQ ./index.css)
   Purpose: remove huge gaps caused by absolute-positioned headings and ensure
   the injected video + cards stack normally.
*/

.foresty-thq-text-elm196 {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  margin: 0 !important;
}

.foresty-video-title {
  color: var(--dl-color-solid-tealdark);
  font-family: Inter;
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  width: min(900px, 100%);
  margin: 0 auto 8px;
  text-align: left;
}

.foresty-video-cards-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}

.foresty-thq-video-elm {
  width: 100% !important;
  max-width: 900px;
  height: auto !important;
  display: block;
  margin: 0 auto !important;
  border-radius: 20px;
}

.foresty-after-video {
  width: 100% !important;
  margin-top: 20px !important;
}

/* Carousel arrows: ensure they are not clipped and feel clickable */
.foresty-thq-frame48095936-elm1,
.foresty-thq-frame48095936-elm2 {
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

/* Fig 12 (manager carousel): on desktop, overlay arrows so they can't be
   pushed off-screen by a wide screenshot. */
@media (min-width: 681px) {
  .foresty-thq-frame48095936-elm2 {
    position: relative;
    padding-left: 96px !important;
    padding-right: 96px !important;
  }

  .foresty-thq-frame48095936-elm2 [data-foresty-carousel-prev] {
    position: absolute !important;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }

  .foresty-thq-frame48095936-elm2 [data-foresty-carousel-next] {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}

[data-foresty-carousel-prev],
[data-foresty-carousel-next] {
  cursor: pointer;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  /* Keep TeleportHQ default sizing (large arrows) on desktop.
     Mobile sizing is handled below in the 680px media query. */
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 44px;
}

/* Desktop: match TeleportHQ arrow asset size so it stays visible */
@media (min-width: 681px) {
  [data-foresty-carousel-prev],
  [data-foresty-carousel-next] {
    width: 89px !important;
    height: 58px !important;
  }
}

[data-foresty-carousel-image] {
  position: relative;
  z-index: 1;
}

/* Let the middle image shrink so arrows never get clipped */
.foresty-thq-frame48095936-elm1 [data-foresty-carousel-image] {
  width: 886px;
  max-width: calc(100% - 340px);
  height: auto !important;
  flex: 1 1 auto;
}

.foresty-thq-frame48095936-elm2 [data-foresty-carousel-image] {
  width: 841px;
  max-width: calc(100% - 218px);
  height: auto !important;
  flex: 1 1 auto;
}

/* Project cards at the end: keep the shared (home-style) cards centered */
/* Forestry body is a narrow centered column on desktop; make the cards section
   break out to viewport width so the card grid can center correctly. */
.foresty-after-video {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.foresty-after-video.home-projects-thq .safemap-thq-listing-elm {
  width: min(1280px, calc(100% - 32px)) !important;
  margin: 44px auto 0 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* If the injected cards render as the newer .pc-* component, center that too */
.foresty-after-video .pc-container {
  max-width: 1280px !important;
  width: min(1280px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ------------------------------
   Responsive layout (mobile/tablet)
   ------------------------------ */

/* Prevent accidental horizontal scrolling from fixed-width TeleportHQ blocks */
.foresty-container1 {
  overflow-x: hidden !important;
}

html,
body {
  overflow-x: hidden !important;
}

@media (max-width: 991px) {
  .foresty-thq-body-elm {
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Safety net: prevent any nested fixed-width blocks from overflowing */
  .foresty-thq-body-elm * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Personas + Manager carousels: cap image size on tablets */
  .foresty-thq-frame48095936-elm1 [data-foresty-carousel-image],
  .foresty-thq-frame48095936-elm2 [data-foresty-carousel-image] {
    width: min(88vw, 520px) !important;
    max-width: calc(100% - 160px) !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Make all main figure blocks fluid */
  .foresty-thq-section3-elm1,
  .foresty-thq-section3-elm2,
  .foresty-thq-section3-elm3,
  .foresty-thq-section3-elm4,
  .foresty-thq-section3-elm5,
  .foresty-thq-section3-elm6 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure big images never overflow their containers */
  img[class*="foresty-thq-fig"],
  img[class*="foresty-thq-screenshot"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Caption containers: remove absolute positioning + fixed widths */
  .foresty-thq-title-elm1,
  .foresty-thq-title-elm2,
  .foresty-thq-title-elm3,
  .foresty-thq-title-elm4,
  .foresty-thq-title-elm5,
  .foresty-thq-title-elm6,
  .foresty-thq-title-elm7,
  .foresty-thq-title-elm-carousel1,
  .foresty-thq-title-elm-fig5,
  .foresty-thq-title-elm-fig6,
  .foresty-thq-title-elm-manager,
  .foresty-thq-title-elm-fig15,
  .foresty-thq-title-elm-driver {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .foresty-thq-title-elm1 > *,
  .foresty-thq-title-elm2 > *,
  .foresty-thq-title-elm3 > *,
  .foresty-thq-title-elm4 > *,
  .foresty-thq-title-elm5 > *,
  .foresty-thq-title-elm6 > *,
  .foresty-thq-title-elm7 > *,
  .foresty-thq-title-elm-carousel1 > *,
  .foresty-thq-title-elm-fig5 > *,
  .foresty-thq-title-elm-fig6 > *,
  .foresty-thq-title-elm-manager > *,
  .foresty-thq-title-elm-fig15 > *,
  .foresty-thq-title-elm-driver > * {
    position: static !important;
    width: 100% !important;
    display: block !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* Text blocks: avoid right-side clipping on small screens */
  .foresty-thq-body-elm [class^="foresty-thq-text-"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* The top metrics cards: stack cleanly on mobile */
  .foresty-thq-frame1000000886-elm1 {
    width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
  }

  .foresty-thq-frame1000000886-elm1 > * {
    width: 100% !important;
  }

  /* Fix right-side clipping inside the four top cards */
  .foresty-thq-frame1000000884-elm1,
  .foresty-thq-frame1000000884-elm2,
  .foresty-thq-frame1000000885-elm,
  .foresty-thq-frame1000000886-elm2 {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
  }

  .foresty-thq-text-elm106,
  .foresty-thq-text-elm108,
  .foresty-thq-text-elm112,
  .foresty-thq-text-elm115 {
    position: static !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }

  .foresty-thq-text-elm107,
  .foresty-thq-text-elm110,
  .foresty-thq-text-elm113,
  .foresty-thq-text-elm116 {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-right: 4px !important;
  }

  /* The Problem list (pills): remove fixed widths + absolute positioning */
  .foresty-thq-frame48095940-elm {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .foresty-thq-frame48095941-elm,
  .foresty-thq-frame48095942-elm,
  .foresty-thq-frame48095943-elm,
  .foresty-thq-frame48095944-elm,
  .foresty-thq-frame48095945-elm,
  .foresty-thq-frame48095946-elm,
  .foresty-thq-frame48095947-elm {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 72px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  /* Background rectangles should scale to the pill width */
  .foresty-thq-rectangle39649-elm,
  .foresty-thq-rectangle39651-elm1,
  .foresty-thq-rectangle39651-elm2,
  .foresty-thq-rectangle39651-elm3,
  .foresty-thq-rectangle39651-elm4,
  .foresty-thq-rectangle39651-elm5,
  .foresty-thq-rectangle39651-elm6 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* Check icon: participate in layout instead of absolute */
  .foresty-thq-questioncirclesvgrepocom-elm1,
  .foresty-thq-questioncirclesvgrepocom-elm2,
  .foresty-thq-questioncirclesvgrepocom-elm3,
  .foresty-thq-questioncirclesvgrepocom-elm4,
  .foresty-thq-questioncirclesvgrepocom-elm5,
  .foresty-thq-questioncirclesvgrepocom-elm6 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 auto !important;
    z-index: 1 !important;
  }

  /* Text inside pills: flow + wrap, no clipping */
  .foresty-thq-text-elm120,
  .foresty-thq-text-elm121,
  .foresty-thq-text-elm122,
  .foresty-thq-text-elm123,
  .foresty-thq-text-elm124,
  .foresty-thq-text-elm125,
  .foresty-thq-text-elm126 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Traditional Process Breakdown block */
  .foresty-thq-section6-elm2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 680px) {
  /* Make carousel arrows smaller so the middle image stays readable */
  .foresty-thq-polygon1-elm1,
  .foresty-thq-polygon2-elm1,
  .foresty-thq-polygon1-elm2,
  .foresty-thq-polygon2-elm2,
  .foresty-thq-polygon1-elm3,
  .foresty-thq-polygon2-elm3 {
    width: 20px !important;
    height: auto !important;
  }

  .foresty-thq-frame48095936-elm1,
  .foresty-thq-frame48095936-elm2 {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 12px !important;
  }

  /* Make figures smaller on phones (not full-bleed) */
  img[class*="foresty-thq-fig"],
  img[class*="foresty-thq-screenshot"] {
    width: min(86vw, 420px) !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Carousels: keep images a bit smaller and centered */
  .foresty-thq-frame48095936-elm1 [data-foresty-carousel-image],
  .foresty-thq-frame48095936-elm2 [data-foresty-carousel-image],
  .foresty-thq-frame48095936-elm3 [data-foresty-carousel-image] {
    width: min(78vw, 320px) !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Personas (Fig2–Fig4): slightly smaller than other carousels on phones */
  [data-foresty-carousel="figs-2-4"] [data-foresty-carousel-image] {
    width: min(72vw, 280px) !important;
  }

  /* TeleportHQ class used for Personas carousel image */
  .foresty-thq-fig3-elm {
    width: min(72vw, 280px) !important;
    max-width: calc(100% - 112px) !important;
    height: auto !important;
  }

  .foresty-thq-frame48095936-elm3 {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 12px !important;
  }

  .foresty-thq-frame48095936-elm1 [data-foresty-carousel-image],
  .foresty-thq-frame48095936-elm2 [data-foresty-carousel-image],
  .foresty-thq-frame48095936-elm3 [data-foresty-carousel-image] {
    max-width: calc(100% - 112px) !important;
  }
}

@media (max-width: 430px) {
  /* Extra-small phones: keep Persona figures compact */
  [data-foresty-carousel="figs-2-4"] [data-foresty-carousel-image] {
    width: min(70vw, 250px) !important;
    max-width: calc(100% - 104px) !important;
  }

  .foresty-thq-fig3-elm {
    width: min(70vw, 250px) !important;
    max-width: calc(100% - 104px) !important;
    height: auto !important;
  }
}