/* ============================================================
   SAPPE — Mobile Layout Fixes (global)
   Loaded site-wide via mu-plugins/enqueue-sappe-mobile-fixes.php
   Tested at 390px (iPhone) and 360px (Android).
   Each page gets its own section below. CSS-only, reversible.
   ============================================================ */

/* Global guardrail: nothing should cause horizontal scroll on mobile */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ---- About (/th/about-us): Qi Addons timeline → single column ----
   Desktop alternating left/right squeezes content into a ~108px column.
   On mobile: hide the empty side spacer, let content fill width, pull the
   line + dots to the far left, left-align everything. */
@media (max-width: 767px) {
  .qodef-qi-timeline .qodef-e-item-inner {
    justify-content: flex-start !important;
    flex-direction: row !important;
  }
  .qodef-qi-timeline .qodef-e-side-holder { display: none !important; }
  .qodef-qi-timeline .qodef-e-content-holder {
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
  }
  .qodef-qi-timeline .qodef-e-content-holder * { text-align: left !important; }
  /* dot is position:absolute — pull it onto the left line (line is at left:7px) */
  .qodef-qi-timeline .qodef-e-point-holder { left: 0 !important; right: auto !important; }
  .qodef-qi-timeline .qodef-e-line-holder,
  .qodef-qi-timeline .qodef-e-line { left: 7px !important; right: auto !important; }
}

/* ---- Organization chart (/th/organization-chart): wide PNG diagrams ----
   The shareholding/org PNGs are ~6000px wide and shrink to ~584px → unreadable.
   Show them at a legible width inside a horizontally-swipeable container. */
@media (max-width: 767px) {
  [class*="elementor-element"]:has(> img[src*="Coporate-Structure"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  img[src*="Coporate-Structure"] {
    min-width: 920px !important;
    width: 920px !important;
    max-width: none !important;
    height: auto !important;
  }
}

/* ---- Board of Directors (/th/board-of-directors): member grid 5-up → 2-up ----
   10 member cards in one flex row wrap to 5 columns @634px → names crammed.
   Force 2 columns, full width, readable. */
@media (max-width: 767px) {
  .elementor-element-da6eede,
  .elementor-element-5e2d92d {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    column-gap: 4% !important;
  }
  .elementor-element-da6eede > .elementor-element,
  .elementor-element-5e2d92d > .elementor-element {
    flex: 0 0 46% !important;
    max-width: 46% !important;
    box-sizing: border-box !important;
    margin-bottom: 28px !important;
  }
}