/* ===================================================================
   Responsive layer.

   The public pages were converted from fixed 1680px design canvases:
   the page root is a hard 1680px wide and every section carries the
   96px/168px gutter inline. Inline styles outrank a stylesheet, so
   every override here needs !important -- that is a property of the
   source, not a shortcut.

   Every layout rule here lives inside a media query -- above 1700px none
   of them apply and the desktop composition renders exactly as it was
   authored. The single exception is the .mb-nav-toggle base rule below,
   flagged where it stands.

   Hooks (added to the templates mechanically):
     .mb-page    page root that was width:1680px
     .mb-nav     the top bar   .mb-nav-links / .mb-nav-right / .mb-nav-toggle
     .mb-sec     any section carrying the 96px page gutter
     .mb-grid    any inline grid, plus .mb-cols-2..5 / .mb-cols-rail
     .mb-scroll  a block that should scroll sideways rather than reflow
   =================================================================== */


/* The one rule here that is NOT in a media query, and it has to be: the
   hamburger is markup that only the mobile layout uses, and a <button> is
   visible by default. Section 4 turns it back on and styles it. */
.mb-nav-toggle { display: none; }


/* ============================================ 1. let the canvas breathe */
/* 1700px: the authored canvas is 1680 wide, and a window of exactly 1680 has
   only ~1665 usable once the scrollbar is deducted, so switching to fluid a
   little above 1680 removes the sliver of horizontal scroll that the fixed
   canvas always had there. Past 1700 the centred 1680 composition is intact.
   100vw is deliberately not used as a cap -- it counts the scrollbar and
   would reintroduce that sliver. */
@media (max-width: 1700px) {
  .mb-page,
  .mb-page-inner {          /* the landing page nests a second 1680px box */
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ================================================ 2. laptop / small desktop */
@media (max-width: 1240px) {
  .mb-sec { padding-left: 52px !important; padding-right: 52px !important; }

  .mb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mb-cols-rail { grid-template-columns: 200px minmax(0, 1fr) !important; gap: 36px !important; }

  /* The scroll-depth rail is furniture pinned to the left margin, and there is
     no margin left to pin it to. Matched as a direct child of the page root so
     nothing positioned at left:40px inside a section is caught by this. */
  .mb-page > [style*="position:fixed"][style*="left:40px"],
  .mb-page > [style*="left:40px"][style*="width:1px"] { display: none !important; }
}


/* ============================================================ 3. tablet */
@media (max-width: 1000px) {
  .mb-sec { padding-left: 32px !important; padding-right: 32px !important; }

  .mb-grid { gap: 18px !important; }
  .mb-cols-2, .mb-cols-3 { grid-template-columns: minmax(0, 1fr) !important; }
  .mb-cols-rail { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  /* four-up groups are stat tiles and short labels, so they hold two columns
     further down than the content-card grids do */
  .mb-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* wide data tables scroll instead of collapsing into nonsense */
  .mb-scroll { overflow-x: auto !important; overflow-y: hidden !important; }
  .mb-cols-5 { min-width: 660px; }

  .mb-page h1 { font-size: 42px !important; line-height: 1.08 !important; }
  .mb-page h2 { font-size: 25px !important; }

  /* fixed pixel widths on prose, left over from the canvas */
  .mb-page p { width: auto !important; height: auto !important; max-width: 100% !important; }

  /* the landing hero reserved 1312px of vertical space for the artwork */
  .mb-page-hero { min-height: 0 !important; }
}


/* ====================================== 4. nav collapses into a menu */
/* 1100 statt 1000: mit "Work with us" sind es sechs Punkte, und die brechen
   schon ab etwa 1060px in eine zweite Zeile um. Der Umschalter muss also
   greifen, bevor das passiert. Die Zahl steht ein zweites Mal in site.js
   (MENU_BREAKPOINT) -- beide muessen gleich bleiben, sonst bleibt das Panel
   beim Vergroessern des Fensters offen haengen. */
@media (max-width: 1100px) {
  /* the bar has to outrank every section below it while the panel is open */
  .mb-nav { padding-top: 10px !important; z-index: 80 !important; }

  .mb-nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    padding: 0; border-radius: 10px; cursor: pointer;
    background: rgba(109, 227, 255, .06);
    border: 1px solid rgba(109, 227, 255, .22);
    color: #E4EAF1;
  }
  .mb-nav-toggle:hover { background: rgba(109, 227, 255, .12); }

  .mb-nav-right { gap: 12px !important; }
  .mb-nav-right > a, .mb-nav-right > span {
    padding: 10px 16px !important; font-size: 14px !important; border-radius: 10px !important;
  }

  /* the link row becomes a panel hanging off the bar */
  .mb-nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    display: none !important;
    flex-direction: column !important; align-items: stretch !important;
    /* a wrapping column flexbox with a max-height spills into a second column
       off the right edge -- this panel must stay a single column */
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin-top: 10px; padding: 8px 18px 16px;
    max-height: calc(100vh - 92px);
    overflow-y: auto !important; overflow-x: hidden !important;
    background: #050b16 !important;
    border-top: 1px solid rgba(109, 227, 255, .16);
    border-bottom: 1px solid rgba(109, 227, 255, .16);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
  }
  .mb-nav.is-open .mb-nav-links { display: flex !important; }

  .mb-nav-links > * { width: 100%; }
  .mb-nav-links > a,
  .mb-nav-links > div > a:first-of-type {
    display: flex !important; padding: 13px 2px !important; font-size: 16px !important;
    border-bottom: 1px solid rgba(109, 227, 255, .09);
  }

  /* dropdown panels drop into the flow as indented sub-lists */
  .mb-nav-links [data-ref] {
    position: static !important; transform: none !important;
    opacity: 1 !important; visibility: visible !important;
    width: auto !important; padding: 4px 0 10px 12px !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important;
  }
  /* the little pointer triangle above each panel */
  .mb-nav-links [data-ref] > div[style*="rotate(45deg)"] { display: none !important; }
  .mb-nav-links [data-ref] a { padding: 9px 10px !important; }
}


/* ============================================================= 5. phone */
@media (max-width: 640px) {
  .mb-sec { padding-left: 18px !important; padding-right: 18px !important; }
  .mb-nav-links { padding-left: 14px; padding-right: 14px; }

  .mb-page h1 { font-size: 31px !important; letter-spacing: -.01em !important; }
  .mb-page h2 { font-size: 21px !important; }
  .mb-page h3 { font-size: 18px !important; }

  .mb-nav img { height: 38px !important; }
  .mb-nav-right > a, .mb-nav-right > span { padding: 9px 12px !important; font-size: 13px !important; }

  .mb-grid { gap: 14px !important; }
  .mb-cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
}


/* ============================== 6. the reef, scaled for narrow screens */
@media (max-width: 1000px) {
  .mb-reef { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  .mb-reef-card { min-height: 168px !important; }
  .mb-reef-text { max-width: 420px !important; }
}
@media (max-width: 640px) {
  .mb-reef-card { min-height: 158px !important; padding: 18px 20px 22px !important; }
  .mb-reef-title { font-size: 20px !important; margin-top: 14px !important; }
  .mb-motif { width: 104px !important; }
  .mb-motif-bubbles { width: 70px !important; }
  .mb-seabed { height: 62px !important; }
}


/* ================================ 7. rows that were never meant to wrap */
@media (max-width: 1000px) {
  /* The canvas laid every row out at 1680px, so almost no flex row carries
     flex-wrap. Inline-flex is left alone -- those are buttons and pills, and
     they should keep their label on one line. */
  .mb-page [style*="display:flex"]:not([style*="flex-wrap"]):not([style*="flex-direction:column"]):not(.mb-nav-links) {
    flex-wrap: wrap !important;
  }

  /* an auto-sized grid track is floored at min-content and blows the page out */
  .mb-post-list { grid-template-columns: minmax(0, 1fr) !important; }
  .mb-post-list > a { gap: 16px !important; }

}

/* The track map keeps its geometry and scrolls; reflowing a diagram of nine
   curves converging on one line would only scramble it. It needs 1180px plus
   the 96/168px gutters, so the scroller starts at 1460px. */
@media (max-width: 1460px) {
  .mb-map { overflow-x: auto !important; overflow-y: hidden !important; }
  /* Track labels live inside the svg, so they scale and scroll with the lines
     and cannot drift out of line any more. The floor keeps the 11px mono
     labels legible: it is the width the box has on desktop (1680 minus the
     168/96 gutters and the box's own 40px padding). */
  .mb-map > svg { min-width: 1336px; }
}

@media (max-width: 640px) {
  /* post thumbnails go full width above the text rather than eating half the row */
  .mb-post-list > a > img { width: 100% !important; height: 150px !important; flex: none !important; }
}