/* ============================================================
   ICB MOBILE — responsive retrofit layer
   ------------------------------------------------------------
   Interim layer that sits on top of the existing CSS, before
   the Next.js rebuild. Two parts:
     1. The floor — element-level safety net (images, tables,
        form fields, overflow).
     2. The grid layer — makes the fixed-width 12-column grid
        fluid and stacks columns on mobile.

   Deploy: load LAST in the template, after ICBMain and
   csDefault, so it wins equal-specificity ties.
   ============================================================ */


/* ===== PART 1: THE FLOOR ==================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-wrap: break-word;
}

img,
svg,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

table {
  max-width: 100%;
}

/* Overflow backstop. Now on html AND body — on its own, body
   leaks the scroll up to html, which is why a sideways scroll
   survived on the 404. With the grid layer below making things
   fluid, this should rarely need to do any work; it stays as a
   last-resort catch and comes out once the rebuild lands. */
html,
body {
  overflow-x: hidden;
}


/* ===== PART 2: THE GRID LAYER ============================== */

/* Make the main wrapper fluid WITHOUT widening it on desktop.
   max-width:100% only bites when the viewport is narrower than
   the container's fixed width, so the desktop layout is
   untouched and mobile is capped to the screen. No !important
   needed: #container is an ID and this file loads last. */
#container {
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Collapse the 12-column grid: every column goes full width
     and stops floating, so columns stack instead of sitting
     side by side. !important here is the deliberate retrofit
     exception — the legacy column rules set explicit pixel
     widths and floats that may be scoped more tightly than a
     bare .colN, so we force past them. This whole block is
     thrown away at the rebuild. */
  .col1, .col2, .col3, .col4, .col5, .col6,
  .col7, .col8, .col9, .col10, .col11, .col12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
}