/* Responsive overrides for the framelab template (loaded after styles.css).
   Desktop (> 980px) is left exactly as the original. */

#footer { box-sizing: border-box; }

/* No beige line along the top edge of the header */
.topground { border-top: 0; }
.aircrafttop { top: 0; }
#col1 img { max-width: 100%; height: auto; }
#col1 iframe, #col1 object, #col1 embed { max-width: 100%; }

/* ---------- Tablet: fluid width, keep the two columns ---------- */
@media (max-width: 980px) {
  #wrapper { width: auto !important; padding: 0 16px; }
  div.logo { width: auto; max-width: 100%; }

  /* Aircraft strip: anchor it next to the logo instead of the 960px centre line */
  .aircrafttop { left: 270px; margin-left: 0; width: auto; right: 0; background-position: left top; }

  #nav li a { padding: 0 18px; }

  /* Photos beside text in layout tables keep their size instead of collapsing */
  #col1 td img { max-width: none; }
}

/* ---------- Phone: one column ---------- */
@media (max-width: 760px) {
  #main { font-size: 1.5em; }
  .aircrafttop { display: none; }

  div.logo { height: auto; padding: 22px 0 16px; text-align: center; }
  #logo { font-size: 34px; }

  /* Menu bar wraps instead of overflowing */
  #nav, #nav ul { height: auto; }
  #nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
  #nav li { float: none; height: auto; }
  #nav li a { padding: 0 12px; line-height: 42px; }

  /* Undo the holy-grail column trick: stack content, then sidebar */
  #main-content #colmask,
  #main-content #colmid,
  #main-content #colright,
  #main-content #col1wrap,
  #main-content #col1pad,
  #main-content #col1,
  #main-content #col2,
  #main-content #col3 {
    float: none; position: static; left: auto; right: auto;
    width: auto; margin-left: 0; margin-right: 0; overflow: visible;
  }
  #main-content #col3:empty { display: none; }

  /* Sidebar boxes span the full width */
  #col2 .moduletable { padding: 0 0 20px; }
  #col2 .res, #col2 .moduletable .res { background: #fff; padding: 16px 16px 4px !important; border: 1px solid #dbdcde; }
  #col2 .modul, #col2 .moduletable .modul { display: none; }
  #col2 h3, #col2 .moduletable h3 {
    background: none; height: auto; line-height: 1.3; margin: 0; padding: 10px 16px;
    border: 1px solid #dbdcde; border-bottom: 0; background-color: #f3f4e8; font-family: 'Lekton', monospace; font-size: 120%;
  }
  #col2 ul.menu li a { margin: 0 8px; padding: 6px 1px; }
  #col2 ul.menu li { margin: 0; }

  /* YouTube modules: full width, 16:9 */
  #col2 iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; left: 0 !important; margin-bottom: 0 !important; }

  /* Article content */
  #col1 { padding: 0 2px; }
  #col1 img[style*="float"], #col1 img[align] { float: none !important; display: block; margin: 10px auto !important; }
  /* Layout tables (text beside photos) stack; data tables scroll sideways */
  #col1 table:has(img), #col1 table:has(img) > tbody, #col1 table:has(img) > tbody > tr,
  #col1 table:has(img) > tbody > tr > td { display: block; width: auto !important; height: auto !important; }
  /* Photos in stacked tables fill the width so they line up with the text and coloured bars */
  #col1 table:has(img) td img { display: block; width: 100% !important; max-width: 100%; height: auto !important; margin: 10px 0 !important; }
  #col1 table:has(img) td a.thumbnail, #col1 table:has(img) td a:has(img) { display: block; }

  /* Overview lists (count | name | icon): number and name on one line, icon full width below */
  #col1 table:has(img) tr:has(> td:nth-child(3)) {
    display: grid !important; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; padding: 0 8px 4px;
  }
  #col1 table:has(img) tr:has(> td:nth-child(3)) > td { padding: 6px 0 0; background: none !important; }
  #col1 table:has(img) tr:has(> td:nth-child(3)) > td:has(img) { grid-column: 1 / -1; padding: 0; }
  #col1 table:has(img) tr:has(> td:nth-child(3)):has(img) { background-color: #f3f4e8; margin-bottom: 8px; }
  #col1 table:has(img) tr:has(> td:nth-child(3)):has(img):nth-child(even) { background-color: #e8e8d0; }
  /* Category header rows: keep only the cell with the heading */
  #col1 table:has(img) tr:has(h3) { display: block !important; background-color: #596437; padding: 4px 10px; margin: 16px 0 8px; }
  #col1 table:has(img) tr:has(h3) > td:not(:has(h3)) { display: none; }
  #col1 table:has(img) tr:has(h3) > td { background: none !important; }
  #col1 table:not(:has(img)) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #col1 p[style*="justify"] { text-align: left !important; }
  .colpad h2.contentheading { padding-right: 0; }

  #footer { float: none; }
}