/* Mobile overrides for specific Elementor pages — 2026-07-21.
   These pages store their layout in _elementor_data (the DB), so per-page tweaks
   can't live in a page's own SCSS. Each rule is scoped to a single page so this
   file is safe to load anywhere. Enqueued from functions.php on the target pages. */

/* ── /recruiting-training (94566) + /interviewing-training (94567) ──────────
   Hide the hero product shot on mobile. Both pages use the shared web3 hero
   (#sec-hero .hero__visual = laptop + floating keyword pills). The page's own
   CSS already drops the pills and stacks the grid at <=1100px, which leaves the
   laptop as a large stacked block pushing the CTAs below the fold — so hide the
   whole visual at the same breakpoint the layout stops being side-by-side. */
@media (max-width: 1100px) {
  body.page-id-94566 #sec-hero .hero__visual,
  body.page-id-94567 #sec-hero .hero__visual {
    display: none !important;
  }
}

/* ── /the-hiring-excellence-podcast ────────────────────────────────────────
   Centre the podcast-platform icons under the hero CTA on mobile. The heading,
   copy and CTA all centre at Elementor's mobile breakpoint but the icon row
   (container 20000004 > 20000008) keeps its left alignment. */
@media (max-width: 767px) {
  body.the-hiring-excellence-podcast .elementor-element-20000004,
  body.the-hiring-excellence-podcast .elementor-element-20000008 {
    --justify-content: center;
    justify-content: center !important;
  }
}