/* Plate landing v1, Hebrew. Loaded after ../css/page.css by he/index.html only.

   Type: Bodoni Moda and Archivo have no Hebrew. Each family gets a second face that covers only the
   Hebrew block, with the same descriptors as its Latin face, so the browser joins them into one
   family: Latin letters (the product and tool names) stay in Bodoni Moda and Archivo, Hebrew letters
   come from Frank Ruhl Libre (display, under Bodoni) and Heebo (text, under Archivo, and the face
   Studio's Hebrew already uses). Both SIL OFL 1.1, vendored in ../assets/fonts with their licences.
   Geist (the Meniscus replica's own face, drawn in a canvas) gets Heebo for a Hebrew name typed in.

   Layout: dir="rtl" mirrors the flex rows (nav, open-view buttons, footer) by itself. The rules below
   mirror what page.css places with left/right. Media, video and the mark are never mirrored: the
   brand lockup and the mark-shaped buy button keep left-to-right order. */
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/FrankRuhlLibre-wght-hebrew.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: block;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Archivo'; src: url('../assets/fonts/Heebo-wght-hebrew.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: block;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Geist'; src: url('../assets/fonts/Heebo-wght-hebrew.woff2') format('woff2'); font-weight: 400 700; font-display: block;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

/* ------------------------------------------------------------ Hebrew type */
/* Hebrew has no capitals: the wide tracking that carries an all-caps Latin label only loosens Hebrew */
.lab { letter-spacing: .04em; font-size: 12px; }
.disp, .hero-copy h1, #s-close .head { letter-spacing: 0; }
.hero-copy h1 { line-height: 1.02; }
.ltag .body { letter-spacing: .02em; }
.ltag .pc { unicode-bidi: isolate; direction: ltr; }

/* ------------------------------------------------------------ never mirrored */
.brand { direction: ltr; }
.markcta { direction: ltr; }
.markcta .l { direction: rtl; }
.custom-addr .addr { unicode-bidi: isolate; }
.cp-manual textarea { direction: ltr; text-align: left; }

/* ------------------------------------------------------------ hero */
/* the first-paint block (page.css) on the right: the two right-hand columns */
@media (min-width: 701px) { .hero-copy { left: calc(16px + 2 * (var(--cw) + 10px) + var(--pad)); } }
.replay { right: auto; left: calc(var(--gut) - 10px); }
/* the launch tag hangs off the pill's left end (its far end in Hebrew); tag.js swings it the other way */
.ltag { left: auto; right: calc(100% - 7px); transform-origin: 0 0; }
.ltag .str { left: auto; right: 0; transform: scaleX(-1); }
.ltag .tg { left: auto; right: 24px; }
.ltag .sh { left: 2px; right: 10px; }
.ltag .body { padding: 0 29px 0 17px; clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); border-radius: 6px 0 0 6px; }
.ltag .body::before { left: auto; right: 10px; }

/* ------------------------------------------------------------ the wall and the index */
.tile-lab { left: auto; right: 10px; }
.tile-free { left: auto; right: 12px; }
#list li .dot { left: auto; right: -26px; }
#list.on li.cur .nm { transform: translateX(-14px); }
#list .ftag { margin-left: 0; margin-right: .55em; }
#lens .cap { left: auto; right: 2px; }
#lens .hint { right: auto; left: 0; }

/* ------------------------------------------------------------ the open view */
#open .note { margin-left: 0; margin-right: auto; }
#open .more { padding: 0 18px 0 16px; }
#open .details { left: auto; right: var(--gut); }
#open .details dl { text-align: right; }

/* ------------------------------------------------------------ the films */
.films-cap { left: auto; right: var(--gut); margin-left: 0; margin-right: -18px; }
.films-pick { right: auto; left: var(--gut); }

/* ------------------------------------------------------------ call it yours: the words on the right, the site on the left */
.wow-tile { left: auto; right: var(--gut); }
.wow-side { left: var(--gut); right: calc(var(--gut) + var(--tw) + clamp(40px, 4.6vw, 76px)); }
#ask .lbl { margin: 0 2px 10px 0; }
#ask .field { padding: 0 18px 0 8px; }
#ask .pre { margin-right: 0; margin-left: .36em; }
#note { left: auto; right: 2px; }

/* ------------------------------------------------------------ close */
/* close.js places the copy with margin-left; in a right-to-left block an over-constrained box drops
   margin-left, so the right margin gives way instead */
#s-close .copy { margin-right: auto; }
@media (min-width: 701px) { #s-close.no-gl::before { left: 36vw; } }

/* ------------------------------------------------------------ custom work */
.custom-addr { padding: 6px 16px 6px 6px; }

@media (max-width: 700px) {
  .ltag { left: auto; right: calc(100% - 12px); }
  /* "לרכישת Plate Pro" is wider than "Get Plate Pro": the pill gives back the room the tag needs to
     hang inside a 390 px screen */
  .hero-copy .buy .pill.pro { padding: 0 14px; gap: 8px; font-size: 14px; }
  .ltag .body { padding: 0 23px 0 10px; }
  /* three Hebrew buttons do not fit one phone row: the row wraps instead of running off the screen */
  #open .acts { flex-wrap: wrap; }
  #open .acts .xbtn { right: auto; left: 16px; }
  #open .details { left: 16px; right: 16px; }
  .films-cap { left: 16px; right: 16px; margin: 0; }
  .films-pick { left: 16px; right: 16px; }
  .wow-tile { left: 16px; right: auto; }
  .wow-side { left: 16px; right: 16px; }
}