/* Yuvalim City Boy - project popup.
   A cream panel that slides in from the left over the project list. */

.yvp{
  position: fixed;
  inset-block: 0;
  left: 0;
  /* the 120vh cap keeps the whole panel on screen on short laptops - without it
     the locked gallery ratio pushes the panel past the viewport */
  width: min(1280px, 92vw, 120vh);
  max-width: 1280px;
  background: var(--Cream, #F4F2E6);
  color: var(--Ink, #020202);
  direction: rtl;
  font-family: var(--MainFont, "Noto Sans Hebrew"), sans-serif;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.6vw, 50px) clamp(20px, 3.23vw, 62px) clamp(18px, 2.6vw, 50px);
  box-shadow: 0 0 80px rgba(2, 2, 2, .14);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .62s;
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.yvp.is-open{
  transform: none;
  visibility: visible;
  transition: transform .62s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}

/* the rest of the page dims a little so the panel reads as being on top */
.yvp-veil{
  position: fixed;
  inset: 0;
  background: rgba(2, 2, 2, .28);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
  z-index: 8900;
}
.yvp-veil.is-open{ opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }

.yvp__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

/* stays flat and transparent - no tint, no ring, no highlight */
.yvp__close{
  width: 44px; height: 44px;
  margin: -10px 0 0 -10px;
  border: 0; padding: 0;
  background: none;
  cursor: pointer; color: inherit;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease;
}
.yvp__close,
.yvp__close:hover,
.yvp__close:focus,
.yvp__close:focus-visible,
.yvp__close:active{
  background: none;
  color: var(--Ink, #020202);   /* stays ink on every state, never lightens */
  outline: none;
  box-shadow: none;
}
.yvp__close:hover{ transform: rotate(90deg); }
.yvp__close svg{ width: 20px; height: 20px; display: block; }
.yvp:focus, .yvp:focus-visible{ outline: none; }

.yvp__name{
  font-size: clamp(30px, 3.3333vw, 64px);
  line-height: 1.044;
  letter-spacing: -.02em;
  text-transform: uppercase;
  direction: ltr;
  margin: 0;
  font-weight: 400;
}

.yvp__body{ display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-top: clamp(14px, 1.7vw, 32px); }

/* flex-start is the right edge here: the panel is RTL, and flex-end would push
   the yellow status tag over to the left */
.yvp__facts{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: right; }
.yvp__facts p{ margin: 0; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.32; letter-spacing: -.02em; font-weight: 200; }
.yvp__facts b{ font-weight: 600; }
.yvp__status{ background: var(--Accent, #FDF48B); padding: 0 14px; font-weight: 600; align-self: flex-start; }

.yvp__map{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: clamp(38px, 2.4479vw, 47px);
  width: clamp(190px, 16.7292vw, 321px);   /* 321px in the design */
  flex: 0 0 auto;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 53px;
  font-size: clamp(16px, 1.6667vw, 32px);
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.yvp__map:hover{ background: var(--Accent, #FDF48B); }
.yvp__map i{
  width: .42em; height: .42em;
  border-block-start: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  transform: rotate(-135deg);
  display: block;
}

/* ---- gallery ---- */
/* the aspect is locked to the design (1160 x 590) so the picture keeps its
   height instead of being squashed flat on shorter screens */
.yvp__gallery{
  position: relative;
  margin-top: clamp(16px, 2.1vw, 40px);
  width: 100%;
  aspect-ratio: 1160 / 590;
  flex: 0 0 auto;
  overflow: hidden;
  background: #d9d7cc;
}
.yvp__track{ position: absolute; inset: 0; display: flex; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.yvp__slide{ flex: 0 0 100%; height: 100%; position: relative; }
/* slides are <picture> elements now (WebP with a JPEG fallback); the wrapper
   takes the whole slide so the image inside sizes exactly as it did before */
.yvp__slide picture{ display: block; width: 100%; height: 100%; }
.yvp__slide img, .yvp__slide video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.yvp__empty{ display: grid; place-items: center; height: 100%; font-size: 20px; color: #6b6b64; }

.yvp__bar{
  position: absolute;
  inset-inline: clamp(14px, 1.8vw, 35px);
  bottom: clamp(14px, 1.8vw, 35px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.yvp__bar > *{ pointer-events: auto; }

/* The whole control is the design's own asset (Icon_Button.svg: the tinted
   circle, the white ring and the chevron in one file). Drawing it here in CSS -
   a rotated bordered box, then a hand-written path - never sat straight inside
   the circle, and the exported icon is centred by construction. */
.yvp__arrow{
  width: 47px; height: 47px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: url("https://yuvalimcityboy.ussl.co.il/wp-content/uploads/2026/09/Icon_Button.svg") center / contain no-repeat;
  cursor: pointer;
  transition: filter .25s ease;
  /* nudged in from the left edge of the picture (RTL: inline-end is the left) */
  margin-inline-end: clamp(10px, 1.6vw, 30px);
}
/* the theme paints every button #c36 on hover and focus, and the circle inside
   the icon is only 60% opaque, so the pink would show straight through it */
.yvp__arrow:hover,
.yvp__arrow:focus,
.yvp__arrow:focus-visible,
.yvp__arrow:active{ background-color: transparent !important; }
.yvp__arrow:hover{ filter: brightness(.88); }
/* the arrow sets its own display, which beats the browser's [hidden] rule - so
   a hidden arrow (video tab, one-picture gallery) kept showing */
.yvp__arrow[hidden]{ display: none !important; }
.yvp__arrow svg{ display: none; }

/* the tab strip reads left to right in the design (סרטון / פנים / חוץ) */
.yvp__tabs{ display: flex; direction: ltr; }
.yvp__tab{
  height: 47px;
  min-width: 99px;
  padding: 0 18px;
  border: 1.5px solid var(--Cream, #F4F2E6);
  background: rgba(105, 105, 102, .6);
  color: var(--Cream, #F4F2E6);
  font-family: inherit;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1;
  letter-spacing: -.02em;
  cursor: pointer;
  margin-inline-start: -1px;
  transition: background .25s ease, color .25s ease;
}
.yvp__tab:first-child{ border-start-start-radius: 74px; border-end-start-radius: 74px; }
.yvp__tab:last-child{ border-start-end-radius: 74px; border-end-end-radius: 74px; }
/* only the selected tab is filled - hovering the others changes nothing */
.yvp__tab:hover,
.yvp__tab:focus,
.yvp__tab:active{ background: rgba(105, 105, 102, .6); color: var(--Cream, #F4F2E6); }
.yvp__tab[aria-selected="true"],
.yvp__tab[aria-selected="true"]:hover,
.yvp__tab[aria-selected="true"]:focus,
.yvp__tab[aria-selected="true"]:active{ background: var(--Cream, #F4F2E6); color: #696966; }
.yvp__tab[hidden]{ display: none; }
/* the video tab is the rounded left end of the strip - when it is hidden the
   inside tab becomes the end and takes over the rounding */
.yvp__tab[data-tab="video"][hidden] + .yvp__tab{
  border-start-start-radius: 74px;
  border-end-start-radius: 74px;
  margin-inline-start: 0;
}
/* same again one step along: with the inside tab gone too, "out" is both ends */
.yvp__tab[data-tab="video"][hidden] + .yvp__tab[data-tab="inside"][hidden] + .yvp__tab{
  border-start-start-radius: 74px;
  border-end-start-radius: 74px;
  margin-inline-start: 0;
}
/* and when "out" is the one missing, "inside" closes the strip on the right */
.yvp__tab[data-tab="inside"]:has(+ .yvp__tab[data-tab="out"][hidden]){
  border-start-end-radius: 74px;
  border-end-end-radius: 74px;
}

/* Browser chrome, not design: buttons carry a default appearance and a focus
   ring that showed up as a pale tint the moment a click was released. */
.yvp button, .yvp a{
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.yvp button:focus, .yvp a:focus,
.yvp button:focus-visible, .yvp a:focus-visible,
.yvp button:active, .yvp a:active{
  outline: none !important;
  box-shadow: none !important;
}
.yvp *::-moz-focus-inner{ border: 0; }

@media (max-width: 1024px){
  .yvp{ width: 100%; max-width: none; }
  .yvp__body{ flex-direction: column-reverse; align-items: flex-end; gap: 20px; }
}

/* Phone layout (Figma 35:3385): one screen, no scrolling. The name and the
   facts sit against the right edge, the map button is dropped, and the picture
   runs full bleed from there to the bottom of the panel. Sizes are shares of
   the 1080-wide mobile frame (design px / 10.8 = vw). */
@media (max-width: 768px){
  /* On a phone the panel rises from the bottom, the way the prototype has it.
     The mobile frame is 1688 tall against the 1920 screens, so it stops short
     of the top (87.92%) and the dimmed slide still shows above it. */
  .yvp{
    inset-block: auto 0;
    top: auto;
    bottom: 0;
    height: 87.92dvh;
    overflow: hidden;
    padding: 4.44vw 5.93vw 0 3.7vw;
    transform: translateY(102%);
    box-shadow: 0 -20px 60px rgba(2, 2, 2, .16);
  }
  .yvp__top{ align-items: flex-start; gap: 3vw; }
  .yvp__close{ width: 5.09vw; height: 5.09vw; margin: 0; flex: 0 0 auto; }
  .yvp__close svg{ width: 100%; height: 100%; }
  /* one line, like the design - popup.js steps the size down for the few names
     that are too long for the panel at 14.81vw */
  .yvp__name{ font-size: 14.81vw; line-height: .856em; white-space: nowrap; }

  .yvp__map{ display: none; }
  /* flex-start is the right edge in this RTL panel - flex-end would throw the
     status tag over to the left when a project has no other facts yet */
  .yvp__body{ margin-top: 4.63vw; gap: 0; align-items: flex-start; }
  .yvp__facts{ gap: 1.11vw; }
  .yvp__facts p{ font-size: 4.44vw; line-height: 1.104em; }
  .yvp__status{ padding: 0 1.02vw; }

  /* Full bleed: cancel the panel's own padding on both sides.
     Nothing is cropped on a phone (client feedback, 2026-09-16). Every picture
     runs the full width of the screen, and the frame is as tall as the tallest
     of the project's pictures - popup.js works that out from their real sizes
     and hands it over as --yvp-ratio - so all slides share one height. Shorter
     pictures sit on the bottom edge of the sheet, with the spare cream above
     them. Portrait shots keep their whole height inside the frame. */
  .yvp{ height: auto; max-height: 87.92dvh; }
  /* Width and height are spelled out rather than left to aspect-ratio: with an
     auto width stretched by negative margins, a browser may take the ratio from
     the narrower padded width, leave the frame short, and the tallest picture
     then stops before the edges. 100vw is the screen, whatever the engine. */
  .yvp__gallery{
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: auto;
    width: 100vw;
    height: calc(100vw / var(--yvp-ratio, 1.5));
    margin: 5.09vw -5.93vw 0 -3.7vw;
    background: var(--Cream, #F4F2E6);
  }
  .yvp__slide img,
  .yvp__slide video{ object-fit: contain; object-position: center bottom; }
  /* Every picture runs the full width (client, 2026-09-16). The frame is set by
     the tallest landscape picture, so only portrait shots are narrower than it -
     those fill the frame and lose a little off the top and bottom instead of
     sitting between cream bars. popup.js marks them. */
  .yvp__slide.is-tall img{ object-fit: cover; object-position: center center; }

  /* about a fifth smaller than the Figma sizes, and closer to the edges - at
     full size the strip covered too much of the picture (client, 2026-09-16) */
  .yvp__bar{ inset-inline: 4.5vw; bottom: 4vw; gap: 1.6vw; }
  .yvp__arrow{ width: 7.2vw; height: 7.2vw; margin-inline-end: 0; }
  .yvp__tab{ width: 14.6vw; min-width: 0; padding: 0; height: 7.2vw; font-size: 3.6vw; border-width: 1.2px; }
}

/* ---- full-screen picture (opened by clicking a gallery picture) ---- */
.yvp__slide img{ cursor: zoom-in; }

.yvz{
  position: fixed;
  inset: 0;
  z-index: 9700;
  /* near solid: at 94% the big project names behind still ghosted through */
  background: rgba(2, 2, 2, .985);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  -webkit-tap-highlight-color: transparent;
}
.yvz.is-open{ opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.yvz__img{
  max-width: 100vw;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 769px){
  .yvz__img{ max-width: calc(100vw - 180px); max-height: calc(100dvh - 80px); }
}

/* The theme paints every button #c36 on hover and focus and adds a focus ring;
   none of that belongs on a dark full-screen view. */
.yvz button,
.yvz button:hover,
.yvz button:focus,
.yvz button:focus-visible,
.yvz button:active{
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.yvz__close{
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff !important;
  z-index: 2;
}
.yvz__close svg{ width: 22px; height: 22px; display: block; }

/* same asset as the gallery arrow; the "previous" one is mirrored */
.yvz__nav{
  position: absolute;
  top: 50%;
  width: 47px;
  height: 47px;
  margin-top: -23.5px;
  background: url("https://yuvalimcityboy.ussl.co.il/wp-content/uploads/2026/09/Icon_Button.svg") center / contain no-repeat !important;
  z-index: 2;
  transition: filter .25s ease;
}
.yvz__nav:hover{ filter: brightness(.85); }
.yvz__nav[hidden]{ display: none; }
.yvz__nav--next{ left: 24px; }
.yvz__nav--prev{ right: 24px; transform: scaleX(-1); }
@media (max-width: 768px){
  /* on a phone the arrows sit low, clear of the picture's middle, and swipe does the rest */
  .yvz__nav{ top: auto; bottom: max(20px, env(safe-area-inset-bottom)); margin-top: 0; width: 42px; height: 42px; }
  .yvz__nav--next{ left: 16px; }
  .yvz__nav--prev{ right: 16px; }
}
.yvz__count{
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  right: 20px;
  color: rgba(255, 255, 255, .8);
  font-size: 15px;
  letter-spacing: .04em;
  direction: ltr;
}

@media (prefers-reduced-motion: reduce){
  .yvp, .yvp-veil, .yvp__track, .yvz{ transition: none; }
}