/* ===========================================================
   responsive.css
   -----------------------------------------------------------
   Mobile retrofit layer for the 2015 table/fixed-width layout.
   Loaded AFTER style.css and style2.css so it can override them.
   Does not touch the desktop experience - everything here is
   scoped inside @media (max-width) blocks.

   This is a pragmatic retrofit, not a rebuild: the underlying
   pages are built with fixed-pixel HTML tables and background-
   image navigation, which is why a full "true" responsive
   redesign would mean rebuilding the page markup itself. This
   file targets the specific things that break worst on a phone:
   horizontal overflow, an unreadable/overflowing image nav, and
   the fixed-pixel photo grid.
   =========================================================== */

* { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

@media (max-width: 900px) {

  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Generic fixed-width containers used across the 2015 pages
     (.content-container, .top2, and any inline width:NNNpx on a
     wrapping div/table) become fluid instead of forcing a
     horizontal scrollbar. .profilel is excluded here because it
     gets its own explicit width further down (some profilel tabs
     also carry an inline width, e.g. style="width: 16%", and an
     attribute selector would otherwise out-specificity the class
     rule below and force every tab to 100% width). */
  .content-container,
  table[width],
  div[style*="width:"]:not(.profilel),
  div[style*="width: "]:not(.profilel) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .top2 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 29px;
    padding: 6px 14px !important;
    white-space: normal !important;
  }

  #footer {
    height: auto !important;
    min-height: 125px;
    padding: 10px 0;
  }

  /* The decorative fixed-height boxes (#lbox login box, #sbox
     search box, #abox/#pbox banner boxes) are built entirely
     from a fixed-size background-image, so they can't reflow -
     scale them down as a whole unit instead of letting them
     force the page wider than the screen. Their heights are also
     fixed in the stylesheet (not just inline), so they need an
     explicit auto override here too. */
  #lbox, #sbox, #abox, #pbox {
    width: 100% !important;
    max-width: 302px;
    height: auto !important;
    min-height: 0 !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    background-size: contain !important;
    background-position: center top !important;
    overflow: hidden;
  }

  /* Top image navigation (logo + button0..button6 images inside
     a <table>): let the table wrap onto multiple lines instead
     of overflowing, and let each nav image shrink to fit. */
  table[align="center"] > tbody > tr > td img,
  td img[id^="camsite_homepage"],
  td img[name] {
    max-width: 100%;
    height: auto;
  }

  /* Generic fallback for any layout table that isn't specifically
     handled above: drop it from a rigid grid into stacked blocks
     so nothing gets clipped or forces horizontal scroll. Matches
     at ANY nesting depth (several pages wrap the page table in
     one or two extra <div>s), not just direct children of <body>.
     Only applies to the outermost page-structure tables, not
     every table - use the .keep-table escape hatch to opt out. */
  body table:not(.keep-table) {
    display: block !important;
    width: 100% !important;
  }
  body table:not(.keep-table) > tbody,
  body table:not(.keep-table) > tbody > tr,
  body table:not(.keep-table) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center;
  }

  /* Keep nested tables (a table inside another table's cell, e.g.
     grouped action buttons) as real compact tables instead of
     double-stacking them - the outer table already achieves the
     row-stacking goal, so block-ifying the inner table too just
     adds redundant vertical whitespace between related fields. */
  .keep-table, .keep-table tbody, .keep-table tr, .keep-table td,
  table table, table table tbody, table table tr, table table td {
    display: revert !important;
    width: revert !important;
  }

  /* The nationality/language filter (and anything else inside the
     search box) is a compact checkbox+label grid table that
     already fits within #sbox's capped width - leave it as a real
     table instead of stacking every cell onto its own line. */
  #sbox table, #sbox table tbody, #sbox table tr, #sbox table td {
    display: revert !important;
    width: revert !important;
    text-align: revert !important;
  }
  #sbox table {
    font-size: 12px;
  }

  /* Fixed inline heights (e.g. the 1033px profile-panel wrapper on
     bface2015_girl.php) don't grow to fit content that reflows
     taller on mobile - the box clips at its old height and the
     overflow visually spills into whatever comes next (like the
     footer), instead of pushing it down. Let these grow naturally.
     overflow:hidden + the ::after clearfix contain any floated
     children (like the .profilel submenu tabs) that would
     otherwise collapse the now-auto-height box back to ~0px. */
  div[style*="height:"], div[style*="height: "] {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }
  div[style*="height:"]::after, div[style*="height: "]::after {
    content: "";
    display: table;
    clear: both;
  }

  .content-container {
    position: static !important;
  }
  .content-container > div {
    position: static !important;
  }

  /* Girl/shop thumbnail grid cards: these are emitted with an
     inline style="float: left; width: 121px; ..." from PHP, so a
     normal class-based override can't reach them - match the
     inline style attribute directly instead. Reflow into a
     2-column grid on phones. */
  div[style*="width: 121px"] {
    float: left !important;
    width: 47% !important;
    margin: 1.5% !important;
    padding-top: 10px !important;
  }

  .profilel {
    width: 33% !important;
  }

  /* Buttons/inputs/links: bigger tap targets and readable text
     on touch screens. */
  input, button, select, textarea {
    font-size: 16px !important; /* also prevents iOS auto-zoom on focus */
  }
  input[type="submit"], input[type="button"], input[type="image"], a {
    min-height: 32px;
  }

  .whitet, .whitet2, .whitet3 {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  div[style*="width: 121px"] {
    width: 96% !important;
    margin: 2% !important;
  }
  .profilel {
    width: 50% !important;
  }
}