/* 20-knowledge.css — Agent B
 * Knowledge page (/knowledge/) intro section.
 *
 * Elementor generates this desktop rule for the intro column (post id 75):
 *   .elementor-75 .elementor-element.elementor-element-9f70f18
 *       > .elementor-element-populated { padding: 0 160px }
 * On tablet/mobile that 160px side padding squeezes the intro paragraph
 * into a ~70px-wide ribbon (2-3 words per line). We collapse it to an
 * edge-safe gutter below the theme's 768px breakpoint. Desktop untouched.
 *
 * Specificity: the Elementor rule is 0-4-0 and Autoptimize aggregates it
 * AFTER this file, so we must out-specify it (not just rely on order). We
 * mirror Elementor's selector and add `.elementor-widget-wrap` (0-5-0) so
 * our mobile override wins cleanly, without !important.
 */

@media (max-width: 768px) {
  .elementor-75 .elementor-element.elementor-element-9f70f18
    > .elementor-widget-wrap.elementor-element-populated {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .elementor-75 .elementor-element.elementor-element-9f70f18
    > .elementor-widget-wrap.elementor-element-populated {
    padding-left: 16px;
    padding-right: 16px;
  }
}