/* =========================================================
   DANGYLSIRL_SUPPORTED_LAYOUT_V44_16

   Goal:
   - Supported Devices uses the SAME outer container width as
     the rest of dangylsirl.com.
   - The comparison table can never widen the whole page.
   - If space becomes too small, only the table wrapper scrolls.
   ========================================================= */

/* Keep the entire page inside the viewport. */
html,
body[data-page="supported"]{
  max-width:100%;
}

body[data-page="supported"]{
  overflow-x:hidden;
}

body[data-page="supported"] main{
  width:100%;
  min-width:0;
  max-width:100%;
}

/*
 * IMPORTANT:
 * The global site container is:
 * width:min(calc(100% - 34px), var(--max))
 * with --max:1180px.
 *
 * Old Supported-specific rules changed it to 1500/1540px,
 * which made this page/header/footer visually wider than
 * every other subpage. Reset it to the normal site geometry.
 */
body[data-page="supported"] .container{
  width:min(calc(100% - 34px),var(--max))!important;
  max-width:var(--max)!important;
  margin-inline:auto!important;
}

/* The TABLE may scroll, the PAGE must not. */
body[data-page="supported"] .support-table-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

/* Desktop: keep the current fixed-column look inside normal width. */
body[data-page="supported"] .support-table{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}

/* Prevent individual content from forcing viewport width. */
body[data-page="supported"] .support-table th,
body[data-page="supported"] .support-table td,
body[data-page="supported"] .support-table .device-head-inner{
  min-width:0!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* Keep hero/content/footer aligned exactly like other pages. */
body[data-page="supported"] .page-hero .container,
body[data-page="supported"] .section-tight .container,
body[data-page="supported"] .site-header .container,
body[data-page="supported"] .site-footer .container{
  width:min(calc(100% - 34px),var(--max))!important;
  max-width:var(--max)!important;
}

/* Normal site mobile gutter: 12px each side. */
@media(max-width:700px){
  body[data-page="supported"] .container,
  body[data-page="supported"] .page-hero .container,
  body[data-page="supported"] .section-tight .container,
  body[data-page="supported"] .site-header .container,
  body[data-page="supported"] .site-footer .container{
    width:min(calc(100% - 24px),var(--max))!important;
  }

  /*
   * Keep the comparison readable on phones.
   * Horizontal movement is contained INSIDE the panel only.
   */
  body[data-page="supported"] .support-table{
    min-width:860px!important;
    font-size:10px!important;
  }

  body[data-page="supported"] .support-table th,
  body[data-page="supported"] .support-table td{
    padding:9px 7px!important;
  }

  body[data-page="supported"] .support-table .row-head{
    width:150px!important;
    min-width:150px!important;
  }

  body[data-page="supported"] .support-table .device-head{
    width:177px!important;
    min-width:177px!important;
  }

  body[data-page="supported"] .support-table .device-head-inner{
    font-size:10px!important;
    line-height:1.3!important;
  }
}

/* END_DANGYLSIRL_SUPPORTED_LAYOUT_V44_16 */