/* =============================================================
   mobile-he.css — CBS Site Mobile HEBREW styles
   Breakpoint: @media (max-width: 480px)

   Why this file exists (item 1): the mobile-first homepage design lived only
   in mobile-en.css, which is loaded ONLY on the English homepage and is
   scoped html[lang="en"]. The Hebrew homepage therefore fell back to the
   generic responsive layout: the hero animation rendered ABOVE the text and
   the H1 rendered at ~47px (vs 35px on English).

   This mirrors mobile-en.css's hero layout for the Hebrew markup. The two
   heroes share the same class names (.hero, .hero-bg-anim, .hero-text-layer,
   .hero-title, .hero-content, .hero-text, .hero-buttons) — only the DOM order
   differs (Hebrew puts .hero-bg-anim first), so the order is fixed with flex.

   Typography note: the English mobile hero uses Georgia (a Latin-only serif)
   with -0.03em tracking. Hebrew keeps its own sans (IBM Plex Sans Hebrew) and
   normal tracking — negative tracking hurts Hebrew legibility — while matching
   English's SIZE and LAYOUT so the two feel like one design.

   Selectors use `html[lang="he"] body .hero…` to match the specificity of the
   desktop rules in styles-new.css, and this file is linked AFTER it.
   ============================================================= */

@media (max-width: 480px) {

  /* ── Hero shell: white, mobile padding, and TEXT-FIRST order ── */
  html[lang="he"] body .hero {
    background: #FFFFFF;
    padding: 40px 20px 24px;
    display: flex;
    flex-direction: column;
  }

  /* The Hebrew DOM is [.hero-bg-anim, .hero-text-layer]; flip it so the
     wording leads and the animation follows — same as the English hero. */
  html[lang="he"] body .hero > .hero-text-layer {
    order: 1;
    width: 100%;
  }
  html[lang="he"] body .hero > .hero-bg-anim {
    order: 2;
  }

  html[lang="he"] body .hero .container {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  /* ── Hero title: match the English mobile size (~35px), Hebrew tracking ──
     Needs `body .hero .hero-title` (0,3,2) to beat styles-new.css's
     `html[lang="he"] .hero .hero-title{font-size:2.95rem}` (0,3,1) — that
     rule is what rendered the Hebrew H1 at 47px on mobile. */
  html[lang="he"] body .hero .hero-title {
    font-size: clamp(2.2rem, 8.5vw, 2.8rem);
    line-height: 1.18;
    letter-spacing: normal;
    margin-bottom: 12px;
  }

  html[lang="he"] body .hero-content,
  html[lang="he"] body .hero-text {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }

  /* ── Hero animation: normal-flow block under the text (English parity) ── */
  html[lang="he"] .hero-bg-anim {
    display: block;
    position: relative;
    width: 100%;
    height: 180px;
    margin: 16px 0 0;
    overflow: hidden;
    pointer-events: none;
    inset: auto;
  }
  html[lang="he"] .hero-bg-anim svg {
    width: 100%;
    height: 100%;
  }

  /* ── Video preview: lighter thumbnail on mobile ──
     The desktop rule uses maxresdefault (1280x720, ~62KB) because the frame is
     ~960px wide. On a ~350px mobile frame that's wasted bytes, so drop to
     hqdefault (~8.6KB) — exactly what mobile-en.css does for English.
     Needs (0,3,2) to beat the desktop `html[lang="he"] .video-frame .video-lazy`. */
  html[lang="he"] body .video-frame .video-lazy {
    background: linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
                url('https://img.youtube.com/vi/gGS2Yq9BV-4/hqdefault.jpg') center / cover no-repeat,
                #000;
  }

  /* Hebrew keeps its hero CTA (English replaces it with a scroll link, which
     the Hebrew markup does not have — hiding it would leave no call to action). */
  html[lang="he"] body .hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    width: 100%;
  }
  html[lang="he"] body .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  /* Zoom the drawing in from the centre. The SVG's viewBox is 680x260 (ratio
     2.6) inside a 350x180 box, so it letterboxed to 350x134 — only 74% of the
     box height, which is why it read as small. 1.35 is 180/134: it takes the
     drawing to the full height. The sides overflow, which is what a centre zoom
     means, and the container's `overflow: hidden` clips them — so no horizontal
     scroll. */
  html[lang="he"] .hero-bg-anim svg {
    transform: scale(1.35);
    transform-origin: center center;
  }
}