/* Mobile layout. Loaded only at narrow widths (media attribute on the <link>);
   everything is also wrapped in the same media query, so desktop rendering is untouched. */
@media (max-width: 768px) {
  html, body { height: auto !important; }
  body {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  /* ---- language / sound links (top right) ---- */
  #lang {
    top: 24px !important;
    right: 60px !important;
    font-size: 16px !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  #lang a { vertical-align: middle; }
  #lang .ins { width: 18px; height: 18px; margin-right: 2px; }
  #lang .sound_toggle { margin-right: 4px; line-height: 18px; }

  /* ---- header bar: logo + hamburger ---- */
  #header {
    width: 100% !important;
    padding: 14px 16px 0 !important;
  }
  #header .mobile_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
  }
  #header .logo { height: 56px !important; }
  #header .logo img { max-height: 100% !important; margin-top: 0 !important; }
  #header .nav_icon_wrap { width: auto !important; margin-top: -2px; }
  #header .nav_icon {
    display: block !important;
    width: 28px;
    height: 28px;
    cursor: pointer;
    background:
      linear-gradient(#030000, #030000) center 6px / 24px 2px no-repeat,
      linear-gradient(#030000, #030000) center 13px / 24px 2px no-repeat,
      linear-gradient(#030000, #030000) center 20px / 24px 2px no-repeat;
  }

  /* ---- slide-in menu (Vue toggles .show via the hamburger) ---- */
  #header .content {
    display: none !important;
    position: fixed !important;
    top: 0 !important; left: 0; right: 0; bottom: 0 !important;
    padding: 96px 24px 24px !important;
    background: #fff;
    z-index: 1000;
    overflow-y: auto;
  }
  #header .content.show { display: block !important; }
  #header .nav_bg {
    display: block !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
  }
  #header .nav {
    position: relative !important;
    width: auto !important;
  }
  #header .nav > a { font-size: 26px !important; }
  #header .nav_bottom {
    position: relative !important;
    bottom: auto !important;
    margin-top: 32px;
  }

  /* ---- main column ---- */
  #main,
  #main.hasLeft,
  body.EN #main.hasLeft {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 16px 24px !important;
    display: flex;
    flex-direction: column;
  }
  #main::before,
  #right_info::before { display: none !important; }
  #main > .wrap, #main > .wrap2, .wrap2 { min-width: 0 !important; }

  /* Pay / Edit */
  #main .action_box {
    position: static !important;
    order: 0;
    text-align: right;
    margin: 12px 0 8px;
  }
  #main .action_box .action_btn { min-width: 72px; font-size: 14px; padding: 5px 12px; }

  /* project info: was a fixed side column, now flows above the images */
  #main.hasLeft #right_info,
  body.EN #main.hasLeft #right_info {
    order: 1;
    position: static !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
  }
  #right_info .title1 { font-size: 26px !important; padding-bottom: 12px !important; }
  #right_info .title2 { font-size: 15px !important; }
  #right_info .title4 { font-size: 18px !important; }

  /* images + video */
  #main .content {
    order: 2;
    height: auto !important;
    overflow: visible !important;
  }
  #main .content .list { display: block !important; }
  #main .content .list .item,
  #main .info_box .cover {
    width: 100% !important;
    padding-bottom: 75% !important;
    margin-bottom: 16px !important;
  }
  #main .content .pt50 { padding-top: 0 !important; }

  /* footer line */
  #footer2 {
    position: static !important;
    text-align: center !important;
    padding: 8px 16px 24px;
    font-size: 11px;
  }

  /* full-screen image viewer */
  .img_view { padding: 8px !important; font-size: 36px !important; }
  .img_view .prev, .img_view .next {
    width: 32px !important;
    height: 60px !important;
    line-height: 60px !important;
  }
}