/* Responsive override for Nauka Japan */

/* 0) Sensible sizing that scales with screen */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img, iframe { max-width: 100%; height: auto; }

/* Base rules for all screens */
html, body {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* Scale fonts relative to screen */
body {
  font-size: 100%;
  line-height: 1.5;
}

/* Let blocks expand fluidly */
#contents, #left, #main_contents, #main_pages, .main_detail_sec {
  width: auto;
  max-width: 100%;
}

/* -----------------------------------------------
   Mobile layout adjustments
------------------------------------------------ */
@media screen and (max-width: 600px) {

  /* Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden;
  }

  /* Navigation moves above main content */
  #main_side, #contents #right {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #main_side .main_side_con,
  #main_side .main_side_con ul,
  #main_side .main_side_con li {
    width: 100% !important;
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Main content expands to full width */
  #contents #left, 
  #main_pages, 
  #main_detail_con,
  #main_pages_con {
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  /* Book image and detail layout */
  .main_img_sec {
    width: 30% !important;
    height: auto !important;
    float: left;
  }

  .main_detail_sec {
    margin-left: 32% !important;
  }

} /* end @media */

/* Extra gentle guards for narrow screens */
@media screen and (max-width: 600px) {
  /* In-content nav/filters/pagers often live here */
  .contents_nav, .pager, .filter, #search_section, #search_all,
  #search_op_btn, .buy_selection_sec {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  /* Tables: prevent page blowout */
  .table-wrap, .table_container {
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { width: 100% !important; border-collapse: collapse; }

  /* Generic list cards/grids inside topics */
  .topics, .topics ul, .topics li {
    width: 100% !important;
    float: none !important;
  }
}