/* responsive-fix.css
 *
 * Overrides for responsive defects baked into the frozen Framer capture.
 *
 * Root cause (both blocks below): Framer emits fixed pixel widths on flex items
 * that also carry `flex: 0 0 auto`, inside ancestors with `overflow: hidden`.
 * When the viewport is narrower than the baked width, the item cannot shrink,
 * so it is silently clipped instead of rewrapping. Because the clipping happens
 * inside `overflow: hidden`, the page never gains a horizontal scrollbar —
 * `document.scrollWidth === innerWidth` stays true while text is amputated.
 *
 * Each rule is scoped to the measured defect band so the original desktop
 * layout is untouched. Verified with the responsive-audit skill.
 */

/* ---------------------------------------------------------------------------
 * 1. "Kāpēc izvēlēties mūs?" heading — clipped below 364px viewport width.
 *
 * DIV.framer-1i7d6rs { width: 323.55px; flex: 0 0 auto }
 * sits inside DIV.framer-jiizfh { width: 320px; padding-left: 40px;
 * overflow: hidden }, so 40 + 324 = 364 > 320 → 44px sliced off the right and
 * the heading renders as "Kāpēc izvēlēties mū".
 *
 * The h1 also has `white-space: pre`, which makes the line unbreakable, so
 * allowing the box to shrink is not enough on its own — the text must be
 * permitted to wrap. `pre-wrap` (not `normal`) matches the convention the
 * capture already uses on the hero h1.
 * --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .framer-1i7d6rs {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }

  .framer-1i7d6rs h1 {
    width: auto;
    max-width: 100%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Hero row — clipped on both edges between 810px and 899px.
 *
 * HEADER.framer-j04s4d is a `justify-content: center` flex row with
 * `overflow: hidden` and a 48px gap. Its two in-flow children are the text
 * column (baked width, non-shrinking) and the 374px lead form:
 *
 *   vw=810: 421 + 48 + 374 = 843 → 33px over → ±16px clipped each side
 *   vw=860: 447 + 48 + 374 = 869 →  9px over →  ±4px clipped each side
 *   vw=900: 468 + 48 + 374 = 890 → fits
 *
 * Centre-justification splits the overflow, so the h1 loses its left edge AND
 * the form loses its right edge. Letting the text column shrink absorbs the
 * overflow; its h1 is already `pre-wrap` + `break-word`, so it simply rewraps.
 * `min-width: 0` is required because the flex item's default `min-width: auto`
 * otherwise floors it at its content width.
 *
 * `!important` is required here and only here: Framer generates the width for
 * this element via a higher-specificity selector than a bare class, so the
 * plain declarations were silently dropped (measured: min-width applied,
 * width and flex-shrink did not). Blocks 1 and 3 win the cascade without it,
 * so they do not use it.
 *
 * Result after the override:
 *   vw=810: 388 + 48 + 374 = 810 exactly
 *   vw=860: 438 + 48 + 374 = 860 exactly
 * The heading still occupies 3 lines, so the rewrap is visually free.
 * --------------------------------------------------------------------------- */
@media (min-width: 810px) and (max-width: 899px) {
  .framer-1pww2cc {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  .framer-1pww2cc,
  .framer-2s86gz,
  .framer-1pww2cc h1 {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Hero lead form — clipped on both edges below ~374px viewport width.
 *
 * FORM.framer-sbz0ft { width: 374px; min-width: 275px; flex: 0 0 auto } is
 * centred by the header, so at vw=320 it loses 27px off each side and at
 * vw=360 it loses 7px. The clipped strip contains the field edges and part of
 * the submit control, so this is a functional defect, not a cosmetic one.
 *
 * The baked 275px min-width is what floors the shrink, so it has to be
 * released for the form to fit a 320px screen.
 * --------------------------------------------------------------------------- */
@media (max-width: 809px) {
  form.framer-sbz0ft {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Form rows — second-order effect of block 3.
 *
 * The form's rows are baked at `width: 294px`, which is exactly the old
 * 374px form minus its 40px left/right padding. Once block 3 let the form
 * shrink to the viewport, the rows kept their 294px and so began overflowing
 * the narrower parent instead: 40px padding + 294px = 334px against a 320px
 * viewport, clipping the inputs, the textarea and the heading's <strong> by
 * 11-14px. Letting the rows and the controls inside them shrink resolves it;
 * the form's designed 40px padding is deliberately left alone.
 *
 * These hashed class names are stable because the capture is frozen.
 * Both form instances (hero and #sazinieties) share them.
 * --------------------------------------------------------------------------- */
@media (max-width: 809px) {
  form.framer-sbz0ft .framer-1nk90mk,
  form.framer-sbz0ft .framer-csmjm9,
  form.framer-sbz0ft .framer-ypujyz,
  form.framer-sbz0ft .framer-6wb41s,
  form.framer-sbz0ft .framer-vonvb3,
  form.framer-sbz0ft .framer-1hb7eqd,
  form.framer-sbz0ft .framer-form-text-input,
  form.framer-sbz0ft .framer-form-input {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}