/**
 * Responsive styles for premium theme
 * Mobile-first approach with breakpoints
 */

/* ===== Base: Prevent horizontal scroll ===== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

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

/* ===== Mobile: < 768px ===== */
@media screen and (max-width: 767px) {
  /* Container & layout */
  #wrap, #inner, #header-site, #footer-side,
  .content-wrap, #content-container {
    width: 100% !important;
    max-width: 100%;
  }

  #inner {
    padding: 0 8px;
    box-sizing: border-box;
  }

  /* Content + Sidebar */
  #content-sidebar-wrap {
    width: 100% !important;
    display: block;
  }

  #content, .content-sidebar #content {
    width: 100% !important;
    float: none;
    padding: 0 4px;
  }

  .sidebar {
    width: 100% !important;
    float: none;
    display: block;
    clear: both;
  }

  /* Login widget */
  .login-widget-header .widgettitle {
    float: left;
  }
  .login-widget-header .np-viewall {
    position: static;
    float: right;
    margin-top: 8px;
  }

  /* Grid: 2 columns on mobile (two per row) */
  .marxpost {
    overflow: hidden;
  }

  .one-4 {
    width: 50% !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
  }

  .one-4.first {
    padding-left: 0;
  }

  .one-4:nth-child(odd) {
    clear: both;
    padding-left: 0;
  }

  .one-4:nth-child(2n) {
    margin-right: 0;
  }

  /* Detail page: Stack image above info */
  .detail-fileinfo-container .pt-img {
    float: none;
    text-align: center;
  }

  .detail-fileinfo-container .img img {
    width: 100%;
    max-width: 240px;
    height: auto;
  }

  .detail-fileinfo-subcontainer {
    padding-left: 0 !important;
    height: auto !important;
  }

  .detail-fileinfo-bottom-text {
    position: static;
    width: 100%;
  }

  .detail-fileinfo-lt-text {
    position: static;
    margin-top: 0;
  }

  /* Slider: Fluid viewport on mobile */
  #marx-slider .viewport {
    width: 100% !important;
    max-width: 100%;
  }

  #marx-slider .post-thumb {
    max-width: 100%;
    height: auto;
  }

  /* Header / Menu */
  #header .content-wrap {
    width: 100% !important;
  }

  #header-site {
    padding: 0 8px;
  }

  #header-site img {
    max-width: 100%;
  }

  #content-top li ul.nam-sx-anime,
  #content-top li ul,
  #content-top ul li {
    width: 100%;
    max-width: 280px;
  }

  #content-top li ul li.nam-sx-anime,
  #content-top li ul li {
    width: 50%;
    box-sizing: border-box;
  }

  .h-sh {
    float: none;
    width: 100%;
  }

  .h-sh form {
    display: flex;
  }

  .search-keyword-inputbox {
    flex: 1;
  }

  /* Detail download list */
  .detail-file-download-container,
  .detail-file-downloadlist {
    width: 100% !important;
    max-width: 100%;
  }

  .detail-file-download-container {
    margin-top: 20px !important;
  }

  .detail-fileinfo-buttons {
    position: static !important;
  }

  .detail-fileinfo-filelist {
    display: block;
  }

  .detail-fileinfo-file {
    display: inline-block;
    margin: 2px;
  }

  /* Grid thumbnails */
  .img170, .img170 img {
    max-width: 100%;
  }
}

/* ===== Tablet: 768px - 959px ===== */
@media screen and (min-width: 768px) and (max-width: 959px) {
  #wrap, #inner, #header-site, #footer-side,
  .content-wrap, #content-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #inner {
    padding: 0 12px;
  }

  .content-sidebar #content {
    width: 65% !important;
  }

  .sidebar {
    width: 33% !important;
  }

  .one-4 {
    width: 33.333% !important;
  }

  .one-4.first,
  .one-4:nth-child(3n+1) {
    clear: both;
  }

  #marx-slider .viewport {
    width: 100% !important;
    max-width: 640px;
  }
}

/* ===== Desktop: 960px+ (default layout preserved) ===== */
@media screen and (min-width: 960px) {
  #inner {
    max-width: 960px;
  }
}

/* ===== Small mobile: < 480px ===== */
@media screen and (max-width: 479px) {
  .one-4 {
    width: 100% !important;
    padding-left: 0;
  }

  .one-4.first,
  .one-4:nth-child(odd) {
    clear: none;
  }

  .detail-fileinfo-container .img img {
    max-width: 100%;
  }
}

/* ===== Tables: Horizontal scroll on small screens ===== */
@media screen and (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Hashover comment form ===== */
#hashover form textarea,
#hashover form input[type="text"],
#hashover form input[type="email"],
#hashover form input[type="url"] {
  max-width: 100%;
  box-sizing: border-box;
}