/* ==========================================================================
 * lua-page-fixes.css — layout corrections for the mobile breakpoint.
 *
 * Buttons do NOT belong here. Their canon lives in lua-button.css; if a
 * button looks wrong, fix it there.
 *
 * Rules here win by CASCADE ORDER, not by !important. If a rule does not
 * apply, the blocker is an !important in lua-fixes.css — remove it there
 * instead of adding one here.
 *
 * Desktop (>=1024px) is the reference design and is never touched here.
 * ========================================================================== */

:root {
  --lua-fs-section: 2.667rem;
  --lua-fs-title: 2.133rem;
  --lua-fs-lead: 2rem;
  --lua-fs-body: 1.867rem;
  --lua-fs-note: 1.6rem;
}

@media (max-width: 1023px) {

  /* -- Reveal inside horizontal scrollers ----------------------------
     animation.js uses IntersectionObserver (threshold .1). Items parked
     right of an overflow-x container never intersect the viewport, never
     get .visible, block renders empty. That is why the whole mobile reveal
     was killed in lua-fixes "pass 5". Scope the exception instead — these
     arrive horizontally and need no vertical reveal. */
  .lua-slider .fade-in,
  .lua-slider [class*="-reveal"],
  .stages-content .fade-in,
  .stages-content [class*="-reveal"] {
    opacity: 1;
    transform: none;
  }

  /* -- Fractional ----------------------------------------------------
     order:0 — lua-mobile.js moves the video inside the white card, right
     under the label; order:-1 from lua-fixes would push it above that
     label, so reset it and let DOM order decide in both positions.
     label — repeats the section heading one screen above it.
     text-wrap:pretty — keeps "рахунок." off a line of its own without
     touching the font size; browsers without it render exactly as today.
     price-note — lua-mobile.js splits it into two .lua-nl sentences. */
  .fractional__video { order: 0; }
  .fractional__label { display: none; }
  .fractional__text  { text-wrap: pretty; }

  .fractional__price-note { text-align: center; }
  .fractional__price-note .lua-nl { display: block; }

  /* -- SMM -----------------------------------------------------------
     min-width:0 — .smm__inner is a flex column, so .smm__grid inherits
     min-width:auto and grows to its content past the screen edge.
     row-gap — 4.267rem read as a hole under the heading; the other
     sections sit at 2.4rem (testing 21px, fractional 19px at 440px).
     addons — two columns on mobile, so the last ROW is the last TWO
     items; the border under "Google Reviews" was a half-underline. */
  .smm__inner { min-width: 0; row-gap: 2.4rem; }
  .smm__grid  { min-width: 0; width: 100%; }
  .smm__addons-item:nth-last-child(-n+2) { border-bottom: 0; }

  /* -- Cases ---------------------------------------------------------
     Desktop shows all 12 at once. On mobile the grid is a horizontal
     scroller and the cards load as you reach them, so the fold and its
     "Показати більше" button bought nothing. Same specificity as the
     outcome-dark.css rule it replaces; this sheet loads later. */
  .lp-cases:not(.is-mopen) .lp-kase--mfold { display: block; }
  .lp-cases__foot { display: none; }

  /* -- Contact form --------------------------------------------------
     The submit was stretched to its flex wrapper's height instead of
     sitting at the canon 55px. */
  .contact_main__form_submit,
  .contact_main__form_submit .wpcf7-submit { height: auto; }

  /* -- Hero pair -----------------------------------------------------
     lua-fixes squeezed two hero CTAs into one row, hid their arrows and
     dropped the label to 1.6rem so the text would fit. Stack them
     instead — each gets the full width and the canon applies unchanged.
     The :has() guard is the theme's own: a hero carrying partner badges
     keeps its row layout. */
  .internal_hero__btns:not(:has(.hero__partners)) {
    flex-direction: column;
    align-items: stretch;
  }
  .internal_hero__btns:not(:has(.hero__partners)) > .btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* ---- Hero, mobile ------------------------------------------------------
   animation.css keeps the ENTIRE hero motion system behind
   @media (min-width: 1024px) - the travel, the stagger, all of it. On mobile
   only the shared heroFadeIn survives, with animation-delay 0 on every
   element, so the first screen snaps in all at once and reads as "in pieces".

   Own keyframe with fill:both rather than the theme's .visible toggle: the
   end state is then guaranteed. .visible never lands on .hero__partners, and
   anything that depends on it gets stranded mid-travel - measured. */
@keyframes luaHeroRise {
  from { opacity: 0; transform: translate3d(0, var(--lua-rise, 1.8rem), 0); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .hero--v2 .hero-anim            { animation: .6s cubic-bezier(.22, 1, .36, 1) both luaHeroRise; }
  .hero--v2 .hero-anim--eyebrow   { --lua-rise: 1.6rem; animation-delay: 0s; }
  .hero--v2 .hero-anim--title     { --lua-rise: 2rem;   animation-delay: .08s; }
  .hero--v2 .hero-anim--text      { --lua-rise: 1.8rem; animation-delay: .16s; }
  .hero--v2 .hero-anim--media     { --lua-rise: 2rem;   animation-delay: .24s; }
  .hero--v2 .hero-anim--button    { --lua-rise: 1.8rem; animation-delay: .32s; }
  .hero--v2 .hero-anim--partners  { --lua-rise: 1.6rem; animation-delay: .40s; }
}

@media (max-width: 1023px) {

  /* -- Reviews: three facts, three columns, one row --------------------
     The theme lets them wrap (flex-wrap + 5.8rem gap), so at phone width two
     facts sit on the first line and the third is orphaned below. Locked to
     nowrap with three equal 1fr columns; the type steps down so the widest
     number still clears a ~104px column at 375px. Captions wrap to two lines
     on purpose - the columns stay equal height because li stretches. */
  .reviews__stats {
    width: 100%;
    flex-wrap: nowrap;
    gap: 1.6rem;
    align-items: flex-start;
  }

  .reviews__stats > li {
    flex: 1 1 0;
    min-width: 0;
    gap: .4rem;
  }

  .reviews__stats > li > strong {
    font-size: 4.4rem;
    line-height: 1.1;
  }

  .reviews__stats > li > span {
    font-size: 1.6rem;
    line-height: 1.35;
    text-wrap: pretty;
  }

  /* -- /about/: Spline globe -------------------------------------------
     A WebGL globe that makes the page crawl on a phone. lua-mobile.js
     removes the <spline-viewer> outright so nothing initialises; this hides
     the frame it sat in. The rest of the .geography section stays. */
  .geography__map { display: none; }
}