/* VoicePilot — mobile fixes applied by the build.
 *
 * Loaded right AFTER website/assets/mobile.css (which is maintained in Claude
 * Design), so it can correct things without touching that file — a fresh design
 * export therefore never wipes these, and never conflicts with them.
 *
 * Same convention as mobile.css: the pages are styled inline, so overrides go
 * through [style*=…] attribute selectors, each in the source spelling
 * ("prop:value") and the CSSOM serialisation ("prop: value").
 */

@media (max-width: 760px) {

  /* ---- 1. Decorative blocks bled past the viewport ----------------------
     The hero/section mockups sit on tinted panels positioned with negative
     insets (e.g. inset:-26px -26px -26px 0). Vertically that bleed is wanted;
     horizontally it pushed the artwork off-screen and made the mockup look cut
     off. Keep the vertical bleed, pin the horizontal edges. */
  [style*="position:absolute"][style*="inset:-"],
  [style*="position: absolute"][style*="inset: -"] {
    left: 0 !important;
    right: 0 !important;
  }

  /* Any remaining decorative overhang is clipped rather than scrolled. */
  [style*="position:relative"] > [style*="position:absolute"],
  [style*="position: relative"] > [style*="position: absolute"] { max-width: 100vw; }

  /* ---- 2. Primary call-to-action buttons --------------------------------
     Side-by-side desktop CTAs wrapped into a ragged stack of different widths
     (measured 202px next to 176px). On a phone they read as one column of
     equal, comfortably tappable buttons. */
  a[style*="padding:14px 26px"], a[style*="padding: 14px 26px"],
  a[style*="padding:14px 24px"], a[style*="padding: 14px 24px"],
  a[style*="padding:14px 28px"], a[style*="padding: 14px 28px"],
  button[style*="padding:14px 26px"], button[style*="padding: 14px 26px"],
  button[style*="padding:14px 24px"], button[style*="padding: 14px 24px"],
  button[style*="padding:14px 22px"], button[style*="padding: 14px 22px"] {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ---- 3. Headline wrapping ---------------------------------------------
     Headings carry desktop <br>s and were breaking mid-word ("Diktier-/App").
     Balance the lines and never split a word. */
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    text-wrap: balance;
  }

  /* ---- 4. Floating accent cards -----------------------------------------
     Small cards pinned to a mockup's corner (negative bottom/left) are a nice
     desktop accent, but on a 390px screen they cover a third of the artwork.
     Let them flow underneath instead. */
  [style*="position:absolute"][style*="bottom:-"][style*="background:#fff"],
  [style*="position: absolute"][style*="bottom: -"][style*="background: rgb(255, 255, 255)"] {
    position: static !important;
    margin-top: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- 5. Comfortable reading measure ------------------------------------
     Lead paragraphs keep desktop max-widths that are wider than the phone, so
     they hugged both edges. */
  p[style*="max-width"] { max-width: 100% !important; }
}

/* ---- 6. Feature/Command rows on tablets & large phones -------------------
   The design's mobile.css only stacks the alternating feature/command rows
   below 760px. Between 761–1080px they stayed side-by-side with a fixed 440px
   animation, which squeezed the text column to a sliver (headline wrapping one
   letter per line). Stack them here too. */
@media (min-width: 761px) and (max-width: 1080px) {
  [style*="flex-direction:row"][style*="gap:48px"], [style*="flex-direction: row"][style*="gap: 48px"],
  [style*="flex-direction:row-reverse"][style*="gap:48px"], [style*="flex-direction: row-reverse"][style*="gap: 48px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 24px !important;
  }
}