/* layout.css - Main content section and responsive layout styles */

/* Desktop layout for #ja-containerwrap-c section */
#ja-containerwrap-c {
  margin: 20px 0;
  clear: both;
}

#ja-containerwrap-c #ja-container {
  background: url(/images/hline.gif) repeat-y 200px 0;
}

#ja-containerwrap-c #ja-container-inner {
  background: #F3F3F3;
}

#ja-containerwrap-c #ja-content {
  width: calc(100% - 200px);
  float: right;
  padding-right: 2%;
  box-sizing: border-box;
}

#ja-containerwrap-c #ja-colwrap {
  width: 200px;
  float: left;
}

#ja-containerwrap-c #ja-col1,
#ja-containerwrap-c #ja-col2 {
  width: 100%;
}

/* Styles for content within .post div */
.post {
  width: 100%;
}

.post table {
  width: 100%;
  border-collapse: collapse;
}

.post table td {
  padding: 10px;
  vertical-align: top;
}

.post .image-grid {
  width: 100%;
  margin: 20px 0;
  display: table;
  table-layout: fixed;
}

.post .image-grid a {
  display: table-cell;
  width: 25%;
  text-align: center;
  padding: 0 10px;
}

.tour1 {
  clear: both;
  overflow: hidden;
  padding: 15px 0;
  border-bottom: 1px solid #CCCCCC;
}

.tour1:after {
  content: "";
  display: table;
  clear: both;
}

ul.m_doc2 {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

ul.m_doc2 li {
  background: none !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #EEEEEE;
}

/* Mobile layout - applies to both portrait and landscape */
@media (max-width: 1024px) {
  /* Mobile layout - sidebar first, content second */
  #ja-containerwrap-c #ja-container-inner {
    display: flex !important;
    flex-direction: column !important;
  }

  #ja-colwrap {
    float: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    order: 1 !important;
  }

  #ja-content {
    float: none !important;
    width: 100% !important;
    order: 2 !important;
  }

  #ja-containerwrap-c #ja-content {
    width: 100% !important;
  }

  #ja-containerwrap-c #ja-colwrap {
    width: 100% !important;
    padding-left: 0 !important;
  }

  #ja-content div.ja-innerpad {
    padding: 0 10px;
  }

  /* Make images responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Image grid - 2x2 in portrait */
  .image-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin: 20px 0;
  }

  .image-grid a {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .image-grid img {
    width: 100%;
    height: auto;
  }

  /* Tour sections */
  .tour1 img {
    float: none !important;
    display: block;
    margin: 0 auto 10px auto !important;
  }

  .moduletable img,
  .post img,
  .tour1 img,
  iframe {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }

  .ja-innerpad {
    padding: 10px !important;
  }

  #ja-content div.ja-innerpad {
    padding: 10px !important;
  }

  #ja-col1 .ja-innerpad {
    padding: 10px !important;
  }

  .post {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .post .image-grid {
    width: 100%;
    margin: 20px 0;
    padding: 0;
    box-sizing: border-box;
    display: grid;
  }

  .post .image-grid a {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }

  .post table {
    width: 100%;
  }

  .post table td {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
}

/* Landscape mobile - Only adjust image grid to 1x4, keep everything else the same */
@media (max-width: 1024px) and (orientation: landscape) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}