/*
===============================================================================
 OSCILLOSAURUS — RESPONSIVE / MOBILE
 Breakpoint: 760px.
===============================================================================
*/

@media (max-width:760px) {
  :root {
    --rail:0px;
    --pad:20px;
  }

  .rail,
  .site-rail { display:none; }

  .mobile-bar {
    display:flex;
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    height:68px;
    padding:14px 18px;
    align-items:center;
    justify-content:space-between;
    background:#000;
    border-bottom:1px solid rgba(187,140,17,.55);
  }

  .mobile-bar img {
    display:block;
    width:min(210px,58vw);
    height:auto;
    max-height:38px;
    object-fit:contain;
    object-position:left center;
    filter:invert(68%) sepia(65%) saturate(875%) hue-rotate(5deg) brightness(78%);
  }

  .menu-button {
    display:block;
    appearance:none;
    padding:8px 10px;
    border:1px solid var(--gold);
    background:transparent;
    color:var(--paper);
    cursor:pointer;
    font:500 14px Dosis,Arial,sans-serif;
    letter-spacing:.12em;
  }

  .mobile-menu {
    display:none;
    position:fixed;
    z-index:999;
    top:68px;
    left:0;
    right:0;
    bottom:0;
    padding:34px 24px;
    background:rgba(0,0,0,.97);
    flex-direction:column;
  }

  .mobile-menu.open { display:flex; }

  .mobile-menu a {
    display:block;
    padding:15px 0;
    border-bottom:1px solid rgba(187,140,17,.28);
    color:var(--paper);
    font:400 26px Dosis,Arial,sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .page {
    width:100%;
    margin-left:0;
    padding-top:68px;
  }

  .gen-field {
    left:0;
    width:100vw;
  }

  .hero {
    min-height:calc(100vh - 68px);
    padding:44px var(--pad) 58px;
  }

  /* Mobile banner already contains the wordmark. */
  .hero .wordmark,
  .hero .micro { display:none; }

  .hero h1 {
    max-width:100%;
    margin:0 0 24px;
    font-size:clamp(44px,10.5vw,68px);
    line-height:.98;
    letter-spacing:.01em;
  }

  .section,
  .page-title,
  .product-hero {
    padding-left:var(--pad);
    padding-right:var(--pad);
  }

  .section-head {
    grid-template-columns:1fr;
    gap:18px;
  }

  .routes,
  .cards {
    grid-template-columns:minmax(0,1fr);
  }

  .route {
    width:100%;
    min-width:0;
    min-height:310px;
    margin:0;
    padding:36px;
  }

  .card {
    width:100%;
    min-width:0;
    margin:0;
    padding:34px;
  }

  .item {
    grid-template-columns:90px 1fr 60px;
  }

  .item .status { display:none; }

  .product-hero {
    grid-template-columns:1fr;
  }

  .product-art { min-height:360px; }

  .page-bmc003 .spec-grid {
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:520px) {
  .item {
    grid-template-columns:1fr 60px;
    gap:6px;
  }

  .item .code { grid-column:1 / -1; }
}