/* ==========================================================================
   QH mobile spacing  (phones only, max-width 767px — desktop is untouched)
   Loaded LAST, after the other qh-*.css files.

   Two jobs:
   1. Even rhythm between page sections (the gaps were 100–150px because
      containers inside containers each add their own padding).
   2. Comfortable padding inside cards so buttons/text don't touch edges.

   Change the two numbers below to make it tighter or looser.
   ========================================================================== */
@media (max-width: 767px) {

  body.page.qhw-theme {
    --qhm-y: 28px;      /* space above AND below each top-level section (gap between sections = 2x) */
    --qhm-card: 20px;   /* padding inside cards / boxes */
  }

  /* ---- 1. Top-level sections -------------------------------------------
     Only direct children of the page content. The first one is the hero, so
     it is skipped. Header, footer, popups, sliders and sticky bars are not
     touched because they are not in this part of the page. Containers with
     no direct Elementor widgets/containers (custom-coded pages like Team) and spacer-only
     containers are skipped too, and so is a section that is just one card grid
     (Team page: already has its own spacing). */

  /* Full-width containers carry the padding themselves */
  body.page.qhw-theme .elementor[data-elementor-type="wp-page"] > .e-con.e-con-full:not(:first-child):has(> .elementor-widget, > .e-con):not(:has(> .elementor-widget-spacer:only-child)):not(:has(> .e-grid:only-child)),
  body.page.qhw-theme .elementor[data-elementor-type="wp-post"] > .e-con.e-con-full:not(:first-child):has(> .elementor-widget, > .e-con):not(:has(> .elementor-widget-spacer:only-child)):not(:has(> .e-grid:only-child)) {
    padding-top: var(--qhm-y) !important;
    padding-bottom: var(--qhm-y) !important;
  }

  /* Boxed containers keep their padding on the inner wrapper */
  body.page.qhw-theme .elementor[data-elementor-type="wp-page"] > .e-con-boxed:not(:first-child):has(> .e-con-inner > .elementor-widget, > .e-con-inner > .e-con):not(:has(> .e-con-inner > .elementor-widget-spacer:only-child)) > .e-con-inner,
  body.page.qhw-theme .elementor[data-elementor-type="wp-post"] > .e-con-boxed:not(:first-child):has(> .e-con-inner > .elementor-widget, > .e-con-inner > .e-con):not(:has(> .e-con-inner > .elementor-widget-spacer:only-child)) > .e-con-inner {
    padding-top: var(--qhm-y) !important;
    padding-bottom: var(--qhm-y) !important;
  }

  /* A section that only holds a title: no space under it, so the title sits
     close to the content it introduces (needs a modern browser; older ones
     just keep the normal gap). */
  body.page.qhw-theme .elementor[data-elementor-type="wp-page"] > .e-con-boxed:not(:first-child) > .e-con-inner:has(> .elementor-widget-heading:only-child),
  body.page.qhw-theme .elementor[data-elementor-type="wp-post"] > .e-con-boxed:not(:first-child) > .e-con-inner:has(> .elementor-widget-heading:only-child) {
    padding-bottom: 0 !important;
  }

  /* ---- 2. Stacked padding inside sections (specific elements only) ------
     These had their own 25–50px of padding on top of the section's. */

  /* Section-title headings that had 50px above and below them (Home, Solution, Pricing) */
  body.page.qhw-theme .elementor-element-9ef699d,   /* Home: after the tabs */
  body.page.qhw-theme .elementor-element-f1ce2bb,   /* Home: "Customer Success" */
  body.page.qhw-theme .elementor-element-03cd20c,   /* Home: "2 ways to start" */
  body.page.qhw-theme .elementor-element-993e9fd,   /* Home: "Connect with your other tools" */
  body.page.qhw-theme .elementor-element-b2b88eb,   /* Solution page title */
  body.page.qhw-theme .elementor-element-9b08895 {  /* Pricing page title */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Home: intro block above the product tabs */
  body.page.qhw-theme .elementor-element-6564cc4 {
    padding-top: 0 !important;
    padding-bottom: 20px !important;
  }

  /* Home hero: whitespace piled up under the "Try for free" button */
  body.home.qhw-theme .elementor-element-defae97 { padding-bottom: 0 !important; }
  body.home.qhw-theme .elementor-element-babf1a7,
  body.home.qhw-theme .elementor-element-1c60b5c { margin-bottom: 0 !important; }

  /* Solution + Prospecting hero: extra 50px left under the hero content */
  body.page.qhw-theme .elementor-element-e3f837e > .e-con-inner,
  body.page.qhw-theme .elementor-element-867af8a { padding-bottom: 20px !important; }

  /* ---- 3. Cards / boxes -------------------------------------------------
     Glass cards had 0–15px padding, so the graphic, text and button sat on
     the border. Same inner padding for all of them. */
  body.page.qhw-theme .qhw-glass-card.e-con {
    padding: var(--qhm-card) !important;
  }

  /* ---- 4. Solution page: tabbed box (Sellers / Marketers / RevOps / CRO) --
     Outer dark card > tabs row > one inner card per tab. Each layer had its
     own padding and the inner list container added another 50px on top, so
     the spacing was uneven. Now: one even padding on the inner card and the
     same gap (20px) between title, "Top Challenges" and the list. */
  /* outer dark card: even space around the tabs + inner card */
  body.page.qhw-theme .elementor-element-cc0ec86 { padding: 20px 12px !important; }
  /* tabs row: even space all round, tab names spread across the width */
  body.page.qhw-theme .elementor-element-035be0c .e-n-tabs-heading {
    padding: 8px 12px 12px !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  body.page.qhw-theme .elementor-element-035be0c .e-n-tab-title { padding: 8px 4px 10px !important; }
  /* the four tab cards: same padding on all sides */
  body.page.qhw-theme .elementor-element-73a176c,
  body.page.qhw-theme .elementor-element-1ffb7e1,
  body.page.qhw-theme .elementor-element-16e8758,
  body.page.qhw-theme .elementor-element-586e70c {
    padding: 22px !important;
  }
  /* title -> challenges block: was 50px margin + 30px gap */
  body.page.qhw-theme .elementor-element-035be0c .e-n-tabs-content .e-con-inner { gap: 20px !important; }
  body.page.qhw-theme .elementor-element-8372a76,
  body.page.qhw-theme .elementor-element-035be0c .e-n-tabs-content .e-con-inner > .e-con-full { margin-top: 0 !important; }
  /* "Top Challenges" heading -> list */
  body.page.qhw-theme .elementor-element-035be0c .e-n-tabs-content .elementor-widget-heading { padding-bottom: 16px !important; }

  /* "Top Challenges" list (white circle + text rows)
     - each row was cut to the text height, so the circle of a one-line row
       was clipped at the bottom -> every row is now at least as tall as the circle
     - circle and text are centred on each other
     - the little dotted connector lines between circles looked broken at this
       size, so they are hidden
     - same 16px gap between rows */
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-item { margin: 0 0 16px !important; overflow: visible !important; }
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-item:last-child { margin-bottom: 0 !important; }
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-item-inner {
    margin: 0 !important;
    min-height: 44px;
    align-items: center !important;
  }
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-icon-wrapper { flex: 0 0 44px; top: 0 !important; } /* had top:14px, which pushed the circle out of its row */
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-icon-wrapper::before,
  body.page.qhw-theme .elementor-element-035be0c .trx-addons-info-list-icon-wrapper::after { display: none !important; }
  /* list -> image card gap */
  body.page.qhw-theme .elementor-element-035be0c .e-n-tabs-content .e-con-inner > .e-con-full { gap: 24px !important; }

  /* tab names: a little air inside the white "active" label */
  body.page.qhw-theme .elementor-element-035be0c .e-n-tab-title h5 { padding: 2px 6px !important; }

  /* ---- 5. Oversized text -------------------------------------------------
     Desktop sizes of 40–70px (and 120px decorative numbers) were still being
     used on a 390px screen. Scaled down with clamp(min, fluid, max); body
     text is not touched. Rough targets: page hero 36–42px, section title
     28–34px, big numbers 44–48px. */

  /* Page hero titles on the product pages (Planning, Automation, ... 70px) */
  body.page.qhw-theme .elementor-element-5602728 .trx-addons-advanced-title-item-text {
    font-size: clamp(34px, 10.4vw, 42px) !important;
    line-height: 1.12 !important;
  }
  /* Trust hero (46px) */
  body.page.qhw-theme .qhw-hero__title,
  body.page.qhw-theme .qhw-hero__title .qhw-hl {
    font-size: clamp(34px, 10.4vw, 42px) !important;
    line-height: 1.1 !important;
    hyphens: none !important;   /* no "thoughtful-ly" splits in a hero title */
  }

  /* Section titles that were 40–47px: now ~31px at 390px wide, never above 32px */
  body.page.qhw-theme .elementor-widget-heading h1.elementor-heading-title,
  body.page.qhw-theme .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.14 !important;
  }
  body.page.qhw-theme .elementor-element-ce6cf39 .trx-addons-advanced-title-item-text,   /* Home: "Connect with your other tools" */
  body.page.qhw-theme .elementor-element-745cb78 .trx-addons-advanced-title-item-text {  /* Home: "Enterprise-grade security." */
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.12 !important;
  }

  /* Home: three 35px feature titles */
  body.page.qhw-theme .elementor-element-576dac2 .trx-addons-info-box-title,
  body.page.qhw-theme .elementor-element-1168832 .trx-addons-info-box-title,
  body.page.qhw-theme .elementor-element-5b38281 .trx-addons-info-box-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Home: stat counters (60px numbers, 40px %/unit) */
  body.page.qhw-theme .trx-addons-counter-number { font-size: 48px !important; line-height: 1.1 !important; }
  body.page.qhw-theme .elementor-element-a9fac28 .trx-addons-counter-number-prefix { font-size: 48px !important; line-height: 1.1 !important; }  /* the "<" */
  body.page.qhw-theme .trx-addons-counter-number-suffix { font-size: 32px !important; line-height: 1.1 !important; }

  /* Pricing cards: 48px prices */
  body.page.qhw-theme .qh-card__price { font-size: 40px !important; line-height: 1 !important; }
  body.page.qhw-theme .qh-card__price--contact { font-size: 32px !important; }

  /* Careers / About: 120px decorative "01" and "Q" */
  body.page.qhw-theme .qhw-cstory__ghost,
  body.page.qhw-theme .qhw-cjoin__q { font-size: 80px !important; line-height: 0.8 !important; }

  /* Legal pages (e.g. Data Processing Addendum): a wide table scrolls sideways inside its own box instead of stretching the whole page */
  body.page.qhw-theme table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==========================================================================
   Tablet only (768px - 1024px): Solution page tabs section
   Same layout as desktop (3 columns: challenges | photo | capabilities).
   Elementor's tablet settings made the bullet dots 50px white circles and
   squeezed the spacing, so the desktop dot size and spacing are put back here.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* bullet: small 13px dot like on desktop */
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .trx-addons-info-list-icon-wrapper {
    width: 13px !important;
    height: 13px !important;
    margin-right: 12px !important;
  }
  /* dotted connector line starts under the small dot, not the big circle */
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .trx-addons-info-list-icon-wrapper::after { left: 5px !important; top: 23px !important; }
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .trx-addons-info-list-icon-wrapper::before { left: 5px !important; }
  /* row spacing and the gap under "Top Challenges" / "QH Capabilities", as on desktop */
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .trx-addons-info-list-item-inner { margin-bottom: 21.5px !important; }
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .e-n-tabs-content .elementor-widget-heading { padding-bottom: 50px !important; }
  /* photo fills its whole card (a white strip showed under it when the lists were taller) */
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .e-n-tabs-content .elementor-widget-image .elementor-widget-container { height: 100%; }
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .e-n-tabs-content .elementor-widget-image img { height: 100%; max-height: none; }
  /* "Sell more, type less" stays left-aligned like on desktop */
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .e-n-tabs-content .elementor-widget-trx_elm_advanced_title,
  body.page.qhw-theme.qhw-sol .elementor-element-035be0c .e-n-tabs-content .trx-addons-advanced-title { text-align: left !important; }
}