/*
 * meinshop.cc landing — mobile overflow correction.
 *
 * WHY THIS EXISTS
 * The landing page is a designer-delivered dc-runtime bundle that lays its
 * sections out with inline `style="display:grid; grid-template-columns: …"`.
 * Those tracks are declared as bare `1fr` / `1.05fr 0.95fr`, and a bare `fr`
 * track carries an implicit `min-width:auto` on its items — so the track never
 * shrinks below the item's min-content width. With long German labels
 * ("Angebot offen — er fasst nach", "Beratung oder Reservierung") the desktop
 * grids stayed at their desktop geometry on a phone: measured 2026-08-17, the
 * document was a constant 740px wide at 320, 360, 390 and 414px viewports,
 * i.e. the page genuinely scrolled sideways. That violates the standing
 * no-horizontal-scroll rule on the most important sales surface we have.
 *
 * The bundle itself is designer-owned and gets re-spliced from the design
 * master, so the correction cannot live inside it — it ships as this separate
 * stylesheet, injected next to /landing-i18n.js by server.js.
 *
 * WHAT IT DOES (mobile only — desktop is untouched by construction)
 *   1. Lets grid items shrink: cancels the implicit min-width:auto floor.
 *   2. Collapses 3-and-more-column grids to two columns.
 *   3. Collapses fractional two-column grids (e.g. `1.05fr 0.95fr`) to one.
 *
 * WHAT IT DELIBERATELY DOES NOT DO
 *   - No `overflow-wrap:anywhere`. It looks like the obvious companion fix, but
 *     it lowers min-content width, and a flex sibling then collapses the demo
 *     panel's title into a one-character-per-line column. Verified in the
 *     browser before this file was written. `break-word` is unnecessary: rules
 *     1–3 alone already bring scrollWidth down to the viewport width.
 *   - No `overflow-x:hidden/clip` backstop. That would hide a future regression
 *     instead of failing loudly; the smoke journey guards this instead.
 *   - Nothing touches .msMarqueeTrack / .msMarqueeWrap. That ticker is SUPPOSED
 *     to be wider than the screen and is already correctly clipped by its own
 *     wrapper — it never reaches document.scrollWidth.
 *
 * Verified live at 360 / 375 / 390 / 414px in all ten languages:
 * scrollWidth === clientWidth, and it stays that way after clicking through the
 * animated demo dashboard (whose KPI row was the single worst offender at 350px
 * past the right edge) and after switching language.
 *
 * 320px (the 2016 iPhone SE class) needed three extra rules and is now clean
 * too — de/pl/ro/ar all measure scrollWidth === clientWidth and a scrollLeft
 * probe returns 0. Two separate causes lived down there: the sticky nav's
 * action group, and long Polish compounds inside the KPI cards.
 */

@media (max-width: 767px) {

  /* 1 — a grid item may shrink below its content. Without this, every `1fr`
     track is floored at min-content and the whole row blows past the screen. */
  #dc-root [style*="grid-template-columns"] > * { min-width: 0; }

  /* 2 — desktop columns counts (3–6 up) become two columns on a phone. */
  #dc-root [style*="repeat(3"],
  #dc-root [style*="repeat(4"],
  #dc-root [style*="repeat(5"],
  #dc-root [style*="repeat(6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* 3 — asymmetric two-column layouts (text + media) stack. */
  #dc-root [style*="fr 0."],
  #dc-root [style*="fr 1."],
  #dc-root [style*="fr 2."] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /*
   * 4 — the hero headline. The designer's 40px is simply too large for a phone
   * once the copy is a German compound: "Mitarbeiter," does not fit on a 390px
   * line. Before rules 1-3 that went unnoticed, because the page was 740px wide
   * and the word had room off-screen; once the page is correctly 390px wide the
   * same word gets clipped, which is worse than the sideways scroll it replaced.
   * The headline therefore needs its own treatment — a consequence of the fix
   * above, not an unrelated tidy-up.
   *
   * Three declarations, in the order they do work:
   *   font-size   — smaller type alone clears German, but not Polish, Romanian
   *                 or Italian. The descendants need it too: the hero is
   *                 assembled from spans carrying their own inline font-size.
   *   hyphens     — Chrome hyphenates from the document language, which the i18n
   *                 runtime keeps correct, so German breaks as "Ko-ordination"
   *                 with a real hyphen instead of mid-word.
   *   break-word  — last resort for a word no dictionary covers.
   * Measured across de/pl/ro/it/ar at 390px: zero line boxes exceed the heading,
   * checked with Range.getClientRects() rather than by eye.
   */
  #dc-root h1,
  #dc-root h1 * {
    font-size: clamp(25px, 7.4vw, 32px) !important;
    line-height: 1.18 !important;
  }
  #dc-root h1 {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    overflow-wrap: break-word !important;
  }
}

/*
 * Below 380px (iPhone SE class) two columns still squeeze long compound words
 * in German, Polish and Romanian into four-line stacks. One column reads far
 * better and costs nothing but scroll length.
 */
@media (max-width: 380px) {
  #dc-root [style*="repeat(3"],
  #dc-root [style*="repeat(4"],
  #dc-root [style*="repeat(5"],
  #dc-root [style*="repeat(6"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
 * At 360px and below the sticky nav's 34px side padding no longer leaves room
 * for logo + section links + language switcher + WhatsApp + CTA, and the action
 * group is what escapes the viewport. Deliberately capped at 360 rather than
 * 420, so the common 375/390/414 widths keep the designed padding.
 */
/*
 * Mobile navigation. The bundle has none: one desktop row with logo, five
 * section links, language switcher, WhatsApp pill and CTA. At 740px document
 * width that row ran off-screen unnoticed; held to the viewport it wraps into
 * three lines and a 226px sticky bar. So below 768px the section links and the
 * WhatsApp pill move into a burger panel (built by landing-i18n.js, because the
 * runtime discards anything it does not own), and what stays in the bar is
 * logo · burger · language · CTA on one line.
 */
@media (max-width: 767px) {
  /* the section-links row — the only nav child that is neither the logo
     anchor nor the right-hand action group */
  #dc-root nav > div > div:not([style*="margin-left: auto"]) { display: none !important; }
  /* the WhatsApp pill is reachable from the panel instead */
  #dc-root nav [style*="margin-left: auto"] > a[href^="https://wa.me/"] { display: none !important; }
  /* Logo becomes the mark alone. Measured at 393px: the bar has 365px of
     content width, the action group needs 274 of it, and the wordmark makes the
     logo 168 — the row cannot hold both. The wordmark is the thing that can go:
     it repeats immediately below in the hero, and the mark still carries the
     brand and still links home. */
  #dc-root nav > div > a > span { display: none !important; }

  #ms-burger { display: flex !important; }

  #dc-root nav > div {
    padding: 9px 14px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  #dc-root nav [style*="margin-left: auto"] { gap: 8px !important; }
  #ms-lang-switch [data-ms-lang-toggle] {
    padding: 7px 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  #dc-root nav [style*="margin-left: auto"] > button {
    font-size: 11px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  #dc-root nav > div {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Even with the padding back, the action group's own content (language
     switcher + WhatsApp pill + CTA) is ~328px against a 300px content box, and
     the German CTA is the longest. Shrinking the two pills is what finally
     brings 320px to zero — and it makes the sticky nav 8px shallower, which on
     a screen this small is a gain rather than a compromise. */
  #dc-root nav [style*="margin-left: auto"] > * { min-width: 0; }
  #dc-root nav [style*="margin-left: auto"] button,
  #dc-root nav [style*="margin-left: auto"] a {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }

  /* Long Polish compounds inside the KPI cards are the last few pixels. Three
     deliberate limits on this rule, each one learned by measuring:
       · `break-word`, never `anywhere` — `anywhere` also lowers min-content
         width, and a flex sibling then collapses the demo panel's title into a
         one-character-per-line column.
       · only below 360px — applied from 767px down it costs nothing in pixels
         and breaks the hero headline mid-word ("Mitar/beiter") at 390px, which
         is the most prominent text on the page.
       · headings excluded — they are large enough that a break inside a word
         is always more damaging than an extra line. */
  #dc-root { overflow-wrap: break-word; }
  #dc-root h1, #dc-root h2, #dc-root h3 { overflow-wrap: normal; }
}