/* Mobile support shim for the legacy tender_home pages — added 2026-08.
 *
 * Why this exists: each page used to run Mobile_Detect and redirect phones to
 * /m/ (or the bare homepage), which DISCARDED the requested URL — every deep
 * link, including chatbot citations and the mobile site's own links, landed on
 * a homepage. The redirects were removed, so these desktop pages now serve
 * phones directly and need to reflow.
 *
 * Rules are confined to `@media (max-width: 900px)`, so desktop rendering is
 * byte-for-byte unchanged. !important is required because the fixed widths
 * live in inline style attributes.
 */

@media (max-width: 900px) {

  /* --- 1. Fluid shells: the 1000/1010/800px boxes ------------------------ */
  [style*="width:1000px"], [style*="width: 1000px"],
  [style*="width:1010px"], [style*="width: 1010px"],
  [style*="width:800px"],  [style*="width: 800px"] {
    width: auto !important;
    max-width: 100% !important;
  }
  nav, .menu, .wrapper, .header-shining, .header-indent {
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
  }
  table[width="1000"], table[width="800"] { width: 100% !important; }
  .header-shining { min-height: 0 !important; margin-bottom: 12px !important; }

  /* --- 2. Media never overflows the viewport ----------------------------
   * min-width is the real hazard: several CMS images carry inline
   * `min-width:225px`, which refuses to shrink inside a narrow column. */
  img:not([style*="height"]), iframe, video, embed, object {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  /* An image that declares its own height (logo rows, flyers) keeps it —
   * overriding it to auto re-inflates a 170px logo to full-bleed. Cap the
   * width and let object-fit prevent distortion. */
  img[style*="height"] {
    max-width: 100% !important;
    min-width: 0 !important;
    object-fit: contain;
  }
  /* --- 3. Header: logo / tagline / contact stack instead of colliding --- */
  .ti-stack-header, .ti-stack-header > tbody, .ti-stack-header > tbody > tr { display: block !important; width: 100% !important; }
  .ti-stack-header > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 2px 0 !important;
  }

  /* --- 4. Top nav becomes a wrapping, touch-sized menu ------------------ */
  .menu {
    display: flex !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: #151138 !important;
  }
  .menu > li {
    float: none !important;
    padding: 0 !important;
    background: none !important;
    flex: 1 1 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .menu > li > a {
    display: block !important;
    font-size: 14px !important;
    padding: 12px 8px !important;   /* >=44px touch target */
    white-space: nowrap;
  }

  /* --- 5. Page body: one column, ARTICLE FIRST, sidebar below ----------
   * The layout table carries an explicit .ti-stack class (added per page), so
   * CMS-authored tables that happen to use rowspan are never restructured.  */
  .ti-stack, .ti-stack > tbody { display: block !important; width: 100% !important; }
  .ti-stack > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .ti-stack > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* the content cell is the rowspan'd one — pull it above the rubrik index */
  .ti-stack > tbody > tr > td[rowspan] { order: -1 !important; }
  /* spacer column is pure desktop gutter */
  .ti-stack > tbody > tr > td[width="1%"] { display: none !important; }
  /* the content cell is the rowspan'd / full-width one — pull it above the
   * rubrik index (the 13 rubrik-style pages use rowspan, tender.php uses 100%) */
  .ti-stack > tbody > tr > td[rowspan],
  .ti-stack > tbody > tr > td[width="100%"] { order: -1 !important; }
  /* --- 6. Wide CMS tables scroll sideways instead of widening the page ---
   * A table ignores width:100% when its content needs more room (table layout
   * uses min-content), so nested tables become scrollable blocks instead. */
  /* Any table that is not one of the two layout tables gets the same
   * treatment - top-level tables overflow the page otherwise. */
  table:not(.ti-stack):not(.ti-stack-header),
  td table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 6b. Fixed-width containers that set their width in CSS, not inline - */
  #header, #header2, #footer, #footer2, #wrapper, #container, #main, #content,
  table[id^="AutoNumber"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Decorative fullscreen background slideshow: fixed 1020px and pure weight
   * on a phone. */
  #cbp-bislideshow { display: none !important; }

  /* --- 7. Reading comfort ---------------------------------------------- */
  body { -webkit-text-size-adjust: 100%; }
  .ti-stack td p, .ti-stack td li, .ti-stack td span { line-height: 1.55; }
  .ti-stack > tbody > tr > td[rowspan] font[size="3"] { font-size: 16px !important; }

  /* --- 8. Footer strip ------------------------------------------------- */
  #AutoNumber52, table[id^="AutoNumber"] {
    width: 100% !important;
    height: auto !important;
  }

  /* --- 9. Legacy float grid: 24% columns are unusable at phone width, and
   * their 10px padding must live inside the box. ------------------------- */
  .column {
    width: 50% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
  }
  .ti-stack > tbody > tr > td,
  .ti-stack-header > tbody > tr > td { box-sizing: border-box !important; }

  /* --- 10. Homepage (body.ti-home) ------------------------------------
   * The homepage is built from nested layout tables plus 100vh hero cells.
   * The generic scroll-box treatment above collapses its cells to ~63px, so
   * here tables STACK instead: rows become wrapping flex lines and cells
   * become full-width blocks. */
  .ti-home table, .ti-home tbody {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ti-home tr {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .ti-home td, .ti-home th {
    display: block !important;
    flex: 1 1 240px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* 100vh hero cells leave giant empty gaps on a phone */
  .ti-home [style*="100vh"], .ti-home .mainUtama, .ti-home .mainUtama2 {
    height: auto !important;
    min-height: 0 !important;
  }

  /* the 50/50 and 25% float grids stack */
  .ti-home .column50, .ti-home .column {
    float: none !important;
    width: 100% !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* header / nav strip */
  .ti-home #headerUtama, .ti-home .nav, .ti-home .main_nav {
    width: auto !important;
    max-width: 100% !important;
  }
  .ti-home .main_nav { display: flex !important; flex-wrap: wrap !important; padding-left: 0 !important; }
  .ti-home .main_nav > li { float: none !important; flex: 1 1 auto; list-style: none; }

  /* the news ticker keeps its own clipping */
  .ti-home marquee { width: 100% !important; max-width: 100% !important; }

  /* homepage: logo/icon grids stay 2-up, and capped in height — the global
   * img{height:auto} above otherwise blows inline height:170px logos up to
   * full-bleed. */
  .ti-home .column { width: 50% !important; padding: 8px !important; }
  .ti-home .column img, .ti-home .column image {
    max-height: 96px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }

  /* W3.CSS absolute overlays sit on top of the hero art on a narrow screen;
   * drop them into normal flow so the copy is readable. */
  .ti-home .w3-display-container { position: static !important; }
  .ti-home [class*="w3-display-"] {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* the date ticker is absolutely positioned and lands mid-page on a phone */
  .ti-home .mainbottom { position: static !important; width: 100% !important; }

  /* cells the author marked as half-width stay 2-up instead of stacking */
  .ti-home td[width="50%"] { flex: 1 1 45% !important; }

  /* Portrait flyers sized in vh get a full-width row of their own — squeezed
   * into a half cell they letterbox to a 152px sliver. */
  .ti-home td:has(img[style*="vh"]) { flex: 1 1 100% !important; }
  .ti-home img[style*="vh"] { height: auto !important; max-height: 70vh !important; }

  /* Hero copy sits directly on the photo; a translucent panel keeps it
   * readable at phone size without touching the desktop composition. */
  .ti-home .section-title {
    background: rgba(255, 255, 255, .88) !important;
    padding: 12px 10px !important;
    border-radius: 6px;
  }

  /* Hero copy overlaps the slideshow photo behind it at phone width; the one
   * cell holding it (verified: a single match on the homepage) gets a
   * translucent panel so the text stays readable. */
  .ti-home td:has(> u) {
    background: rgba(255, 255, 255, .88) !important;
    border-radius: 6px;
    padding: 12px 10px !important;
  }
}