/* responsive.css: mobile-first improvements */
/* 1) Reset/viewport handled in HTML */

/* 2) Layout: make main container fluid on small screens */
@media (max-width: 767.98px){
  #container,
  body #subcontainer-R { float: none; width: 100%; margin: 0; padding: 0 1rem; box-sizing: border-box; }
  body #subcontainer-L {
    float: none;
    position: fixed;
    top: 0; left: 0; right:0;
    width: 100%;
    max-height: 100vh;
    background: #fff;
    overflow-y: auto;
    z-index: 1200;
    transform: translateY(-100%);
    transition: transform .25s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
    padding: 1rem;
    display:flex;
    flex-direction:column;
  }
  body.nav-open #subcontainer-L { transform: translateY(0); }

  /* Navigation bars */
  .nav__bar{ width:100%; background:#fff; display:flex; justify-content:space-between; align-items:center; }
  .nav__bar--fixed{
    position:fixed;
    top:0; left:0;
    z-index:1200;
    box-shadow:0 2px 12px rgba(0,0,0,.2);
  }
  #subcontainer-L .nav__bar{
    position:sticky;
    top:0;
    margin:-1rem -1rem 1rem -1rem;
    z-index:1300;
    box-shadow:0 2px 12px rgba(0,0,0,.2);
  }
  .nav__bar .nav__toggle{
    position:static;
    display:inline-flex;
    align-items:center;
    margin:.5rem;
    padding:.5rem;
    font: inherit;
    background:#fff;
    border:1px solid #ccc;
    border-radius:.5rem;
    cursor:pointer;
  }
  .nav__contact{ margin:.5rem; font-size:.9rem; display:flex; align-items:center; gap:.25rem; }
  .nav__close{ align-self:flex-start; }

  #navi-s-H .menu--contact,
  #navi-w-H .menu--contact{ display:none; }

  /* Space for header bar */
  #navi-s-H,
  #navi-w-H{
    position: sticky;
    top: 0;
    z-index: 1100;
    padding-top:3rem; /* room for fixed menu button */
  }
}

/* 3) Show desktop layout again on wider screens */
@media (min-width: 768px){
  .nav__toggle{ display:none; }
  .nav__bar{ display:none; }
}

/* 4) Medium two-column images should stack on narrow screens */
/* Small .pictL/.pictR images stay floated on mobile */
@media (max-width: 767.98px){
  #subcontainer-R div.pictL-medium,
  #subcontainer-R div.pictR-medium,
  #tour div.img-L,
  #tour div.img-R {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
  }
  #subcontainer-R div.pictL img,
  #subcontainer-R div.pictR img,
  #subcontainer-R div.pictL-medium img,
  #subcontainer-R div.pictR-medium img,
  #tour div.img-L img,
  #tour div.img-R img {
    max-width: 100%;
    height: auto;
  }
  /* Generic: side-by-side images within a paragraph or section become stacked */
  #subcontainer-R .para img,
  #subcontainer-R .section img,
  #tour .para img,
  #tour .section img { max-width: 100%; height: auto; }
}

/* 5) Table responsiveness */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
#subcontainer-R table{ width:100%; border-collapse: collapse; }

/* 6) Misc spacing */
@media (max-width: 767.98px){
  body{ line-height:1.6; }
  #page{ padding: 0; }
}