/* qh-tablet.css
   Tablet-only layout fixes (768px to 1024px). Phones and desktop are not touched.
   Loaded last, after qh-mobile-spacing.css. Each block is labelled with the page. */

@media (min-width: 768px) and (max-width: 1024px) {

  /* ---------- HOME: "Connect with your other tools" ----------
     Desktop: title | tools card | MCP card in one row.
     Tablet: title and button on top, the two cards side by side below. */
  body.home.qhw-theme .elementor-element-7b0e744 > .e-con-inner{
    flex-direction:column !important;
    align-items:stretch !important;
    flex-wrap:nowrap !important;
  }
  body.home.qhw-theme .elementor-element-26fa62a,
  body.home.qhw-theme .elementor-element-c847502{
    width:100% !important;
    max-width:100% !important;
  }
  body.home.qhw-theme .elementor-element-ce6cf39{
    width:100% !important;
    max-width:100% !important;
  }
  body.home.qhw-theme .elementor-element-c847502{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    gap:20px !important;
  }
  /* tools card takes the free space, MCP card keeps a readable width */
  body.home.qhw-theme .elementor-element-998e861{
    flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
  }
  body.home.qhw-theme .elementor-element-998e861 img{
    width:100% !important;
    height:auto !important;
  }
  body.home.qhw-theme .elementor-element-e71f16f{
    flex:0 0 38% !important;
    width:38% !important;
    min-width:240px !important;
    min-height:0 !important;
  }

  /* ---------- HOME: hero "powered by Agent Q" row ----------
     On tablet Elementor makes the two items 750px and 375px wide, so the row spills off-centre.
     Let them be as wide as their content and centre them like on desktop. */
  body.home.qhw-theme .elementor-element-f5ed03c{ justify-content:center !important; }
  body.home.qhw-theme .elementor-element-6820412,
  body.home.qhw-theme .elementor-element-5e26f39{ width:auto !important; max-width:100% !important; }

  /* ---------- HOME: "Enterprise-grade security" card ----------
     Elementor sets it to 45% on tablet, which crushes the title into one word per line.
     Full width like desktop. */
  body.home.qhw-theme .elementor-element-fdb5a9e{ width:100% !important; max-width:100% !important; }

  /* ---------- FEATURE PAGES (Planning, Prospecting, Opportunities, Forecasting, Conversation,
     Enablement, Consumption, Commissions, Automation, Integrations, Analytics) ----------
     Each feature is a row: graphic on one side, text on the other.
     1) Outer spacing: 95px top and bottom made the gaps between rows huge, use 40px.
     2) Inner spacing: the text column had 0px on the side that touches the screen edge, so the words
        sat against the edge. Give the text column 32px each side. */
  body.page:not(.home).qhw-theme :is(.elementor-element-900bc14, .elementor-element-00a2065, .elementor-element-e5adf60, .elementor-element-1647123, .elementor-element-4e3c49b, .elementor-element-0d5c6bd, .elementor-element-6caf1bc, .elementor-element-7acffc4, .elementor-element-30560ea){
    padding-top:40px !important; padding-bottom:40px !important;
  }
  body.page:not(.home).qhw-theme :is(.elementor-element-900bc14, .elementor-element-00a2065, .elementor-element-e5adf60, .elementor-element-1647123, .elementor-element-4e3c49b, .elementor-element-0d5c6bd, .elementor-element-6caf1bc, .elementor-element-7acffc4, .elementor-element-30560ea) > .e-con:has(.elementor-widget-heading){
    padding:30px 32px !important;
  }

  /* ---------- TEAM page ----------
     Names broke in the middle of a word because the name block was only ~90px wide.
     Make the name/role row use the whole card width and slightly tighten the grid gap. */
  body.page-id-519.qhw-theme .elementor-element-37bb191{ gap:24px 18px !important; }
  /* grid > card > name row > (name block | linkedin icon) */
  body.page-id-519.qhw-theme .elementor-element-37bb191 > .e-con > .e-con{ width:100% !important; gap:8px !important; }
  body.page-id-519.qhw-theme .elementor-element-37bb191 > .e-con > .e-con > .e-con:first-child{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; }
  body.page-id-519.qhw-theme .elementor-element-37bb191 > .e-con > .e-con > .e-con:last-child{ flex:0 0 40px !important; width:40px !important; }
  body.page-id-519.qhw-theme .elementor-element-37bb191 .elementor-heading-title{ font-size:15px !important; line-height:1.3 !important; }

  /* ---------- HOME: photo cards (AI Native / Unified Revenue Team / Mobile First) ---------- */
  /* Was edge to edge. Give it the same 32px left/right outer padding as the other sections.
     Top and bottom padding stay as they were. */
  body.home.qhw-theme .elementor-element-4ed94f0{
    padding-left:32px !important; padding-right:32px !important;
  }

  /* ---------- HOME: product tabs card (Planning / Prospecting / ...) ---------- */
  /* Even 24px padding on all four sides of the dark rounded card. */
  body.home.qhw-theme .elementor-element-16a07e9.elementor-widget{ padding:24px !important; }
  /* Tabs line up with that padding (no extra left/right padding of their own). */
  body.home.qhw-theme .elementor-element-16a07e9 .e-n-tabs-heading{
    padding-left:0 !important; padding-right:0 !important; margin:0 !important;
  }
  /* Smaller gap between the tab strip and the media (the default 37px looked like an empty band).
     Only below 1024px, where the tabs sit on top; at 1024 the tabs are a side column. */
  @media (max-width: 1023px){
    body.home.qhw-theme .elementor-element-16a07e9 .e-n-tabs{ gap:14px !important; }
  }
}