/* LynxCraft responsive layer.
 *
 * The pages carry ~3,850 inline style attributes and no media queries of their
 * own, so this file is the only place layout responds to viewport width.
 *
 * Breakpoints
 *   >= 1440px   desktop, byte-for-byte the layout that shipped before this file
 *               existed: the 1440px min-width is restored here, so nothing in
 *               the desktop rendering can change.
 *    768-1439   tablet, fluid
 *     < 768     phone (390px is the design target)
 *
 * Inline styles outrank stylesheets, so rules that have to beat one use
 * !important — and every such rule lives inside a max-width media query, which
 * is why none of them can reach the desktop layout.
 *
 * The build (tools/build.mjs) adds the .lx-* hooks and strips the two
 * `min-width: 1440px` declarations per page; everything else is matched either
 * semantically or through [style*="…"] attribute selectors.
 */

/* ---------------------------------------------------------------- desktop */
/* Restores exactly what the inline `min-width: 1440px` used to do, including
   the horizontal scroll between 1024px and 1440px. Desktop is untouched. */
@media (min-width: 1440px) {
  .lx-root,
  .lx-header { min-width: 1440px; }
}

/* ------------------------------------------------------------- everywhere */
.lx-root { max-width: 100%; }

/* Media never outgrows its column, whatever inline width it carries. */
img, video, svg, iframe { max-width: 100%; }
img:not([style*="height:"]), video:not([style*="height:"]) { height: auto; }

/* ------------------------------------------------- tablet and below (fluid) */
@media (max-width: 1439px) {
  .lx-root,
  .lx-header { min-width: 0 !important; }

  /* the 1360px header bar and the 1200px content containers become fluid,
     keeping a gutter so text never touches the edge */
  /* !important on the gutter: many of these containers carry an inline
     `padding: 120px 0px` shorthand, whose 0 would otherwise win and leave the
     copy flush against the screen edge. */
  .lx-bar,
  .lx-container { max-width: 100% !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; }

  /* Images with an inline pixel width may shrink, but only when they do not
     also set an explicit height — the header logo is `height: 20px` and must
     keep it. NOTE: `[style*="width:"]` also matches `max-width:`/`min-width:`,
     so it must never be used as a descendant selector; that is what blew the
     logo up to 327x44. */
  img[style*="width:"]:not([style*="height:"]),
  video[style*="width:"]:not([style*="height:"]) { max-width: 100% !important; height: auto !important; }

  /* Hero sections hang a decorative motif off the right edge
     (position:absolute; right:-140px). Contain it. `clip` rather than
     `hidden` because `hidden` would break the sticky header. */
  .lx-root { overflow-x: clip; }
}

/* ----------------------------------------------------------------- hero */
/* The homepage hero. Its height is a three-way trade-off:
 *   taller  = more impact, but object-fit: cover crops more of the sides
 *             (the video is 1280x720, so height drives the crop: at 1440px
 *             wide, 810px crops nothing, 1000px crops 19%, 1080px crops 25%)
 *   taller  = the bottom-aligned CTA drops below the fold. Content sits 40px
 *             off the bottom, so "START HERE" is only visible while
 *             hero height <= viewport height + 40.
 *   fixed   = wrong on phones. 920px on a 390x844 screen made the hero taller
 *             than the display and threw away 76% of the frame.
 *
 * So desktop tracks the viewport: laptops keep the CTA in view, tall displays
 * get the longer hero. Everything below desktop steps down to fit.
 */
@media (min-width: 1440px) {
  .lx-hero { min-height: clamp(900px, calc(100vh + 20px), 1080px) !important; }
}
@media (max-width: 1439px) {
  .lx-hero { min-height: 860px !important; }
}
@media (max-width: 1023px) {
  .lx-hero { min-height: 720px !important; }
}
@media (max-width: 767px) {
  /* Viewport-relative so the hero never exceeds the screen, with a floor for
     short phones and a ceiling for tall ones. svh accounts for mobile browser
     chrome; the vh line above it is the fallback for engines without svh. */
  .lx-hero { min-height: clamp(420px, 74vh, 600px) !important; }
  .lx-hero { min-height: clamp(420px, 74svh, 600px) !important; }
}

/* ------------------------------------------------- tablet and below: grids */
@media (max-width: 1023px) {
  /* Grids with a fixed pixel track are the ones that cannot shrink: the
     sidebar family (`48px 1fr` … `520px 1fr`) and the article body
     (`1fr 720px 1fr`). Collapse those to one column. */
  /* `48px 1fr` and `64px 1fr` are marker gutters, not layout columns: the
     process timeline's rail sits at left:31px, dead centre of the 64px track.
     Collapsing them stranded the rail and the step dots away from the cards,
     so they keep their gutter at every width. */
  [style*="px 1fr"]:not([style*="48px 1fr"]):not([style*="64px 1fr"]),
  [style*="1fr 720px 1fr"],
  [style*="1fr 380px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    /* Not !important: an inline `gap`/`row-gap` still wins, so grids that
       already space their rows keep their own value. This only supplies a gap
       to grids that set column-gap alone — stacked, those had none at all. */
    row-gap: 28px;
  }
  /* Children placed with `grid-area: 1 / 2` stay in column 2 after the
     collapse, which creates an IMPLICIT auto column. That column takes the
     content width and starves the 1fr to zero — the process cards rendered
     their text one character per line. Re-flow them into the single column. */
  [style*="px 1fr"]:not([style*="48px 1fr"]):not([style*="64px 1fr"]) > *,
  [style*="1fr 720px 1fr"] > *,
  [style*="1fr 380px"] > * { grid-area: auto !important; }

  /* stop long words and wide children blowing a grid or flex track open */
  [style*="display: grid"] > *,
  [style*="display: flex"] > * { min-width: 0; }

  /* fixed pixel widths on layout boxes stop being fixed */
  div[style*="width:"],
  p[style*="width:"],
  span[style*="width:"],
  section[style*="width:"],
  figure[style*="width:"] { max-width: 100% !important; }
}

/* ------------------------------------------------------------- mobile menu */
/* Built by tools/build.mjs as a native <details>, so it opens with scripts
   disabled. Hidden on wide screens, where the original nav is untouched. */
.lx-menu { display: none; }

@media (max-width: 767px) {
  .lx-bar,
  .lx-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Sections whose inner box is not one of the tagged containers still need a
     gutter, or copy sits flush against the screen edge. */
  /* Only the outermost container. Applying this at two nesting levels padded
     inner boxes twice, which pushed the process timeline's step dots 16px off
     the rail they are supposed to sit on. */
  [data-screen-label] > div:not(.lx-bar):not(.lx-container) {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* every remaining grid becomes a single column on a phone */
  [style*="grid-template-columns"]:not([style*="48px 1fr"]):not([style*="64px 1fr"]) {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 28px;                      /* see the note above — no !important */
  }
  [style*="grid-template-columns"]:not([style*="48px 1fr"]):not([style*="64px 1fr"]) > * {
    grid-area: auto !important;
  }

  /* The process timeline is desktop furniture: a 2px rail at left:31px with a
     64px dot gutter beside every card. On a phone that gutter eats a sixth of
     the screen and the rail connects nothing worth the space, so drop both and
     let the cards run the full width. Four grids carry it -- the three steps
     and the closing copilot row -- and the first cell of each holds the dot. */
  [data-screen-label="02 The process"] div[style*="left: 31px"][style*="width: 2px"] {
    display: none !important;
  }
  [data-screen-label="02 The process"] [style*="64px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  [data-screen-label="02 The process"] [style*="64px 1fr"] > :first-child {
    display: none !important;
  }

  /* The closing card's note is right-aligned so it lands at the far end of a
     wide card. Stacked under the heading on a phone, that reads as a mistake. */
  [data-screen-label="02 The process"] [style*="text-align: right"] {
    text-align: left !important;
  }

  /* Nothing keeps an inline min-width — except a <table>, whose 520px floor is
     deliberate: it is what makes the overflow wrapper scroll rather than
     letting the columns crush together. */
  [style*="min-width:"]:not(table) { min-width: 0 !important; }
  [style*="white-space: nowrap"] { white-space: normal !important; }

  /* the locator map on About draws at a fixed size */
  lynx-map, lynx-map svg { max-width: 100% !important; height: auto !important; }

  /* Long strings wrap instead of pushing the page wide. Headings use
     break-word, not anywhere, so a word only splits when it alone overflows
     — `anywhere` was cutting the hero headline as "COPILO / T". */
  h1, h2, h3, h4, figcaption, summary { overflow-wrap: break-word; }
  p, span, li, td, th, a { overflow-wrap: anywhere; }

  /* Display type is set in fixed px for a 1440px canvas. Scale it. */
  h1[style*="font-size"] { font-size: clamp(32px, 9.5vw, 56px) !important; line-height: 1.02 !important; }
  h2[style*="font-size"] { font-size: clamp(25px, 6.8vw, 38px) !important; line-height: 1.08 !important; }
  h3[style*="font-size"] { font-size: clamp(19px, 5vw, 26px) !important; }

  /* rows of cards/media stop insisting on sitting side by side */
  /* Row-direction flex only. On a `flex-direction: column` container,
     flex-wrap:wrap makes it wrap into extra COLUMNS and blows the width
     out — that is what happened to the article body. */
  /* Only containers, not text rows. These lists are <p style="display:flex">
     holding a dash and a label; wrapping them put the dash on its own line. */
  div[style*="display: flex"]:not(.lx-menu-panel):not(.lx-bar):not([style*="flex-direction: column"]),
  section[style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }

  .lx-wide-only { display: none !important; }
  .lx-menu { display: block; margin-left: auto; }

  .lx-menu-btn {
    list-style: none;
    cursor: pointer;
    width: 44px; height: 44px;            /* a real touch target */
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    padding: 0 10px; box-sizing: border-box;
  }
  .lx-menu-btn::-webkit-details-marker { display: none; }
  .lx-menu-btn > span {
    display: block; height: 2px; background: #FFFFFF; border-radius: 2px;
    transition: transform 140ms ease, opacity 140ms ease;
  }
  .lx-menu[open] .lx-bar1 { transform: translateY(7px) rotate(45deg); }
  .lx-menu[open] .lx-bar2 { opacity: 0; }
  .lx-menu[open] .lx-bar3 { transform: translateY(-7px) rotate(-45deg); }

  /* the panel drops out of the sticky header, full width */
  .lx-menu-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #232C3A;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: 8px 16px 20px;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    max-height: calc(100vh - 76px); overflow-y: auto;
  }
  .lx-menu-panel nav {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 0 !important;
  }
  .lx-menu-panel nav > a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 16px !important;
  }
  /* the language row and the CTA that follow the nav */
  .lx-menu-panel > div {
    display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 16px !important; margin-top: 16px;
  }
  .lx-menu-panel > div > div {
    display: flex !important; gap: 18px !important; justify-content: flex-start;
  }
  .lx-menu-panel > div > a { justify-content: center; }

  /* the header bar is the positioning context for the panel */
  .lx-header { position: sticky; }
  .lx-bar { position: relative; }
}