/* ============================================================
   SAPPE CSR (/sd/) — Mobile Layout Fixes
   Separate WordPress install; loaded via mu-plugins/enqueue-sappe-mobile-fixes.php
   ============================================================ */

@media (max-width: 767px) {
  /* Guardrail: no horizontal scroll */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Hero title is 82px on mobile → each word on its own line, overlaps content */
  .bdt-title-tag { font-size: 34px !important; line-height: 1.25 !important; }

  /* Cross-site-posts (CSR news) carousel: keep it inside the viewport.
     The .sappe-csp-track already scrolls horizontally (swipeable); just stop the
     wrapper from forcing the whole page wider than the screen. */
  .sappe-csp,
  .sappe-csp.is-carousel,
  .sappe-csp-track { max-width: 100% !important; width: 100% !important; }

  /* Animated headline "3 แกนหลักเพื่อความยั่งยืนของเซ็ปเป้" is 50px → its
     rotating-text wrapper grows to ~876px and pushes the page sideways. */
  .elementor-headline,
  .elementor-headline-plain-text,
  .elementor-headline-dynamic-wrapper,
  .elementor-headline-dynamic-text { font-size: 28px !important; line-height: 1.3 !important; }
  .elementor-headline-dynamic-wrapper { max-width: 100% !important; }

  /* Pinch-slider images spilling a few px past the edge */
  .bdt-ps-slide-img { max-width: 100% !important; }
}