/* ==========================================================================
   ro-ga by ida@  —  LTR corrections for the English translation
   Loaded AFTER css/style.css. Every rule here is scoped to html[dir="ltr"],
   so the Hebrew site is untouched.

   Why this file exists
   --------------------
   The layout is built almost entirely on CSS logical properties, which mirror
   by themselves when documentElement.dir flips to "ltr". Two rules do not:
   the crossing image bands bleed out to the window edge using *physical*
   margins (css/style.css §12ב, commented there as
   "מאפיינים פיזיים בכוונה — האתר תמיד RTL").

   In LTR the grid columns swap sides but those physical margins do not, so
   each band would bleed inward instead of outward — overlapping the text
   column beside it and pushing the document wider than the viewport.

   The fix is to move the bleed to the other physical side. Nothing else in
   the stylesheet needed changing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The crossing bands — index.html .sec--zig-top / .sec--zig-bottom

   RTL: .zig--media-right puts the media in grid column 1 = the RIGHT side,
        so style.css bleeds it with a negative margin-right.
   LTR: grid column 1 is the LEFT side, so the bleed moves to margin-left.
        .zig--media-left mirrors the same way.

   Wrapped in min-width: 1025px because below that breakpoint style.css
   collapses the zigzag to one column and zeroes the bleed with
   `margin-inline: 0`. This file loads later, so without the media query it
   would win there and re-break the mobile layout.

   The bleed itself is capped by --bleed (declared in css/style.css §1) so a
   wide monitor cannot inflate each band by ~400px. That token also subtracts
   --zig-gutter, the strip of --paper that stays visible outside each band
   image at the window edge, so the image stops short of the glass instead of
   touching (or overshooting) it.

   This file only chooses the physical SIDE — it must keep using that same
   token, or English and Hebrew would drift apart at wide widths. Do not
   re-derive the gutter here.

   Nothing else in this round needed mirroring: the text-to-image void is a
   `column-gap` (direction-agnostic), the section break before the about block
   is vertical, and the full-width navbar mirrors on its own because its sides
   are placed with `grid-column` + `justify-self: start/end`, which flip with
   documentElement.dir. Verified in both languages at 2560 -> 390.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  html[dir="ltr"] .zig--media-right .zig__media {
    margin-right: 0;
    margin-left: calc(-1 * var(--bleed));
  }

  html[dir="ltr"] .zig--media-left .zig__media {
    margin-left: 0;
    margin-right: calc(-1 * var(--bleed));
  }
}

/* --------------------------------------------------------------------------
   English words do not wrap the way Hebrew does, and the editorial copy in
   the crossing band is set to a fixed measure. A hint so a long word can
   never be the thing that forces a horizontal scrollbar.
   -------------------------------------------------------------------------- */
html[dir="ltr"] .zig__text--lg p,
html[dir="ltr"] .hero__sub,
html[dir="ltr"] .values__item p,
html[dir="ltr"] .split__text p {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   The cart drawer — mirror it to the other edge in English.

   style.css anchors the panel with physical `left: 0` and slides it in from
   translateX(-100%). In Hebrew that is correct: the cart control sits at the
   visual left of the navbar, so the drawer arrives from the side you clicked.
   In English the utilities column moves to the visual right, so the drawer
   has to arrive from the right or it flies in from the far side of the screen.

   `border-inline-start` needs no override — it already resolves to the
   panel's inner edge in both directions (right edge in RTL, left edge in LTR).
   -------------------------------------------------------------------------- */
html[dir="ltr"] .drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

html[dir="ltr"] .drawer.is-open .drawer__panel {
  transform: translateX(0);
}