/* ───────────────────────────────────────────────────────────
   cutreels.com landing — mobile proportion overlay
   Loaded after the main bundle CSS, so these rules win.
   Targets unprefixed Tailwind utilities used at mobile widths
   (the bundle's md:/lg: variants don't apply <768px / <1024px).
   ─────────────────────────────────────────────────────────── */

html, body {
  overflow-x: hidden;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
}

/* Language button — injected by inline JS in index.html. Must look like a
   tinted glass pill at every viewport. iOS Safari paints <button> with a
   native white background unless we explicitly kill the platform style.
   These rules apply on all widths (not gated by the mobile media query). */
#cr-lang-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(255,255,255,0.07) !important;
  background-color: rgba(255,255,255,0.07) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  outline: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 9999px !important;
}
#cr-lang-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  background-color: rgba(255,255,255,0.14) !important;
}

/* Phone portrait (Tailwind <sm = under 640px) */
@media (max-width: 639px) {
  /* Headline scale-down — without these, text-5xl/4xl on 360px viewports
     either wraps awkwardly or pushes layout. */
  .text-7xl { font-size: 2.75rem !important; line-height: 1.05 !important; }
  .text-6xl { font-size: 2.25rem !important; line-height: 1.1 !important; }
  .text-5xl { font-size: 2rem !important;    line-height: 1.1 !important; }
  .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }

  /* Section vertical padding — landing's py-24/py-20 wastes a lot of
     scroll real-estate on a phone */
  .py-24 { padding-top: 3rem !important;   padding-bottom: 3rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pt-32 { padding-top: 5.5rem !important; }
  .pb-16 { padding-bottom: 2rem !important; }

  /* Side padding — keep at least a comfortable gutter without eating width */
  .px-12 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8  { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-6  { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* Feature preview row: was `flex h-[600px]` — collapse to natural height
     and stack any inner columns vertically */
  .h-\[600px\] { height: auto !important; min-height: 360px; }
  .flex.h-\[600px\] { flex-direction: column !important; }

  /* Decorative blurred glows — already inside overflow-hidden parents,
     but cap so they don't influence layout calc */
  .w-\[800px\] { max-width: 100vw; }

  /* Buttons/CTAs: don't let pill buttons run off-screen */
  .gap-8 { gap: 1.25rem !important; }
  .gap-12 { gap: 2rem !important; }

  /* "See the Magic" demo controls bar — 4 buttons in a flex-justify-between
     row with no responsive prefix. On phones, let it wrap and shrink the
     button padding so all 4 still fit. */
  .bg-bg-dark.flex.justify-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
    justify-content: center !important;
  }
  .bg-bg-dark.flex.justify-between > div {
    gap: 0.5rem !important;
  }
  .bg-bg-dark.flex.justify-between button {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.75rem !important;
    flex-shrink: 1;
  }

  /* Top-nav fixed-bar (language + profile injected by inline script).
     Anchor it to the page-flow header zone so it doesn't cover the logo
     or float at an awkward offset on phones. */
  #cr-ui-bar {
    top: 12px !important;
    right: 12px !important;
    gap: 6px !important;
  }
  #cr-ui-bar > div > button,
  #cr-acct-btn,
  #cr-lang-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  /* The language button is injected by inline JS (no Tailwind class). It
     ends up as a sibling of <button> elements which Tailwind's preflight
     resets to background:transparent. Force the glass styling and ensure
     it never inherits solid-white from any reset. */
  #cr-lang-btn {
    background: rgba(255,255,255,0.07) !important;
    color: #fff !important;
    border: none !important;
    outline: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 700 !important;
  }

  /* HEADER "Try for free" CTA — when translated to Russian
     ("Попробовать бесплатно") it's ~21 chars and wraps to 2 lines at
     phone width, ballooning the button height and shoving the language
     button off-axis. Cap padding/font-size and force single-line. */
  button.text-sm.neon-gradient.rounded-full,
  a.text-sm.neon-gradient.rounded-full {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  /* Hero CTAs (Try for free / See how it works) on phones — the buttons
     are width:100% on mobile (sm:w-auto), but text-lg + py-4 makes them
     huge. Trim down a notch. */
  button.text-lg.neon-gradient.rounded-full,
  button.text-lg.glass.rounded-full {
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
  }
}

/* "See the Magic" demo controls bar — desktop tweak for languages whose
   translations of "Trim / Subtitles / Edit Reel / Render Viral Clip" are
   noticeably longer than English (e.g. RU "Рендер вирусного клипа" vs
   "Render Viral Clip"). Without this the button text wraps to two lines
   and the bar looks oversized. Apply at >=640px so mobile keeps its own
   wrap-and-shrink rule above. */
@media (min-width: 640px) {
  html[lang="ru"]  .bg-bg-dark.flex.justify-between button,
  html[lang="uk"]  .bg-bg-dark.flex.justify-between button,
  html[lang="de"]  .bg-bg-dark.flex.justify-between button,
  html[lang="nl"]  .bg-bg-dark.flex.justify-between button,
  html[lang="pl"]  .bg-bg-dark.flex.justify-between button,
  html[lang="pt"]  .bg-bg-dark.flex.justify-between button,
  html[lang="it"]  .bg-bg-dark.flex.justify-between button,
  html[lang="es"]  .bg-bg-dark.flex.justify-between button,
  html[lang="fr"]  .bg-bg-dark.flex.justify-between button,
  html[lang="tr"]  .bg-bg-dark.flex.justify-between button,
  html[lang="id"]  .bg-bg-dark.flex.justify-between button {
    font-size: 0.8125rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    white-space: nowrap !important;
  }
}

/* Very narrow (≤380px — iPhone SE 1st-gen, Galaxy S8/S9, Pixel 4a) */
@media (max-width: 380px) {
  .text-7xl { font-size: 2.25rem !important; }
  .text-6xl { font-size: 2rem !important; }
  .text-5xl { font-size: 1.75rem !important; }
  .text-4xl { font-size: 1.5rem !important; }
  .px-6, .px-8, .px-12 { padding-left: 0.875rem !important; padding-right: 0.875rem !important; }
  .py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}