/* site.css — שלד האתר: תריס, כותרת, פוטר, לייטבוקס.
   הגלריות עצמן מוסיפות את הסגנונות שלהן בקבצים נפרדים. */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--slate);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--slate);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 2px; }

/* ═══ התריס ═══════════════════════════════════════════════
   שני פאנלים עם קצה פליז שנפגשים באמצע בצורת גג.
   הפאנל הוא הפליז; הפנים הכהה קטן ממנו ומשאיר רצועת פליז לאורך השן. */

.shutter {
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
}
.shutter.is-done { display: none; }

/* הרקע שמאחורי התריס — עליו יושב הלוגו עד שהפאנלים חושפים אותו */
.shutter__back {
  position: absolute; inset: 0;
  background: var(--slate-dn);
}

.shutter__panel {
  position: absolute; inset-inline: 0; z-index: 2;
  background: var(--brass);
  will-change: transform;
}
.shutter__face {
  position: absolute; inset-inline: 0;
  background: var(--slate-dn);
}

/* עליון — הקצה התחתון מתרומם באמצע */
.shutter__panel--top {
  top: 0; height: calc(50% + var(--chev));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--chev)), 0 100%);
}
.shutter__panel--top .shutter__face {
  top: 0; height: calc(100% - var(--chev-edge));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--chev)), 0 100%);
}

/* תחתון — הקצה העליון מתרומם באמצע */
.shutter__panel--bot {
  top: calc(50% - var(--chev)); height: calc(50% + var(--chev));
  clip-path: polygon(0 var(--chev), 50% 0, 100% var(--chev), 100% 100%, 0 100%);
}
.shutter__panel--bot .shutter__face {
  bottom: 0; height: calc(100% - var(--chev-edge));
  clip-path: polygon(0 var(--chev), 50% 0, 100% var(--chev), 100% 100%, 0 100%);
}

/* הלוגו שנוחת בין הלשוניות בזמן הפתיחה — לוקאפ מלא, גדול מספיק
   כדי ששורת התיוג תהיה קריאה, כמו בסרטוני הסטטוס */
.shutter__mark {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  translate: -50% -50%;
  width: min(48vw, 540px); aspect-ratio: 3.463;
  background: var(--brass);
  -webkit-mask: url('../img/logo.svg') no-repeat center / contain;
  mask: url('../img/logo.svg') no-repeat center / contain;
}

.skip {
  position: fixed; z-index: 201;
  inset-block-end: 22px; inset-inline-start: 22px;
  padding: 7px 18px; border-radius: 20px;
  border: 1px solid var(--brass-dim);
  background: rgba(30, 38, 45, .8); color: var(--ink-2);
  font-size: 13.5px;
}
.skip:hover { color: var(--ink); border-color: var(--brass); }
.skip.is-gone { display: none; }

/* ═══ כותרת ═══════════════════════════════════════════════ */

/* רישום המשתנה כאחוז — בלי זה הדפדפן לא יודע להנפיש אותו,
   ונקודת חילוף הגוון בקו הייתה קופצת במקום להחליק עם הגמלון */
@property --split {
  syntax: '<percentage>'; inherits: true; initial-value: 50%;
}

/* נקודת החילוף בתוך הפלקט. אותה נקודה פיזית כמו --split, רק
   כאחוז מרוחב הפלקט במקום מרוחב הכותרת — הפלקט צר וממורכז. */
@property --split-p {
  syntax: '<percentage>'; inherits: false; initial-value: 50%;
}

/* z-index גבוה מהפלקט ומחלון הפרויקט — הכותרת אטומה ויושבת מעליהם,
   ולכן הפלקט מחליק החוצה מתחתיה בלי צורך בגזירה, והגמלון שיושב על
   הקו לעולם אינו מוסתר. ההצללה היא זו שממחישה את היציאה מתחתיה. */
.head {
  position: sticky; top: 0; z-index: 110;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 3vw, 40px);
  height: var(--head-h); padding-inline: var(--pad-x);
  background: var(--slate-dn);
  box-shadow: 0 18px 30px -12px rgba(10, 14, 17, .95);
  /* --split הוא מיקום חוד הגמלון באחוזים מרוחב הכותרת. app.js מעדכן אותו
     בכל החלפת גלריה, וגם הקו וגם הגמלון מחליפים גוון בדיוק בנקודה הזו. */
  --split: 50%;
  transition: --split var(--t-mid) var(--ease);
}

/* הקו שתחת הכותרת, בשני קטעים. הוא אינו עובר מתחת לגמלון אלא נעצר
   בכף רגלו ועולה איתו — הקו והגמלון הם משיכה אחת רצופה, בדיוק כמו
   בשרטוט. השמאלי בהיר, הימני כהה, והחילוף בחוד. */
.head::before, .head::after {
  content: ''; position: absolute; bottom: 0; z-index: 1;
  height: var(--rule-w);
}
.head::before {
  left: 0; width: calc(var(--split) - var(--apex-left));
  background: var(--brass-a);
}
.head::after {
  right: 0; left: calc(var(--split) + var(--apex-right));
  background: var(--brass-b);
}

/* בכותרת מוצג שם המותג בלבד. שורת התיוג שבקובץ הלוגו נחתכת —
   בגודל הזה היא בלתי קריאה. הלוקאפ המלא נשאר בפוטר. */
.head__logo {
  flex: none;
  width: clamp(180px, 21vw, 290px);
  aspect-ratio: 4.346;
  background: var(--brass);
  -webkit-mask: url('../img/logo.svg') no-repeat center top / 100% auto;
  mask: url('../img/logo.svg') no-repeat center top / 100% auto;
  transition: background var(--t-fast);
}
.head__logo:hover { background: var(--brass-lit); }

/* הגמלון מסמן את הגלריה הפעילה — במקום קו תחתון.
   הצורה היא "element 4" של הסטודיו, מוגשת כמסכה כדי שהצבע
   יישאר טוקן של הפלטה ויוכל להשתנות במעבר.
   יושב על קו הבסיס של הכותרת, וכיוון שהסמל של הגלריה הפעילה
   נמצא מתחתיו בפלקט — הוא נקרא כגג מעליו. */
.head__apex {
  /* left:0 מפורש — בלי זה, אלמנט מוחלט ב-RTL נעגן לימין
     ו-translateX מזיז אותו לכיוון ההפוך */
  position: absolute; bottom: 0; left: 0; z-index: 2;
  height: var(--apex-h); aspect-ratio: var(--apex-ar);
  /* החוד יושב בדיוק במרכז התיבה, ולכן חילוק הגוון הוא ב-50% חלק */
  background: linear-gradient(to right,
    var(--brass-a) 0 50%, var(--brass-b) 50% 100%);
  -webkit-mask: url('../img/gable-line.svg') no-repeat center bottom / 100% 100%;
  mask: url('../img/gable-line.svg') no-repeat center bottom / 100% 100%;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast);
  opacity: 0;
  will-change: transform;
}
.head__apex.is-on { opacity: 1; }

.head__reach { display: flex; gap: 4px; flex: none; }
.reach {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid transparent; color: var(--ink-2);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.reach:hover { color: var(--brass-lit); border-color: var(--brass-dim); }
.reach svg { width: 20px; height: 20px; fill: currentColor; }

.head__burger { display: none; }

/* ═══ הפלקט ═══════════════════════════════════════════════
   השלט הממורכז שנתלה מתחת לכותרת ובו שלוש הגלריות.

   הרצועה עצמה שקופה לגמרי ואינה קולטת עכבר — בלי הביטול הזה,
   לחיצה על תמונה שגללה לאזור הזה הייתה נופלת על הרצועה.
   התמונות חולפות משני צדי הפלקט ונחתכות תחת הצללת הכותרת. */
.nav {
  position: sticky; top: var(--head-h); z-index: 105;
  display: grid; justify-items: center;
  min-height: var(--nav-h);
  pointer-events: none;
}

/* המסגרת בצורת U — העליונה מוסתרת מאחורי הכותרת.
   טריק שני הרקעים: הכהה נעצר ב-padding-box, והמדרג הזהוב ממלא
   את ה-border-box — כלומר את המסגרת בלבד. --split-p מוזרם מ-app.js,
   ולכן החילוף במסגרת נמצא על אותו קו אנכי כמו זה שבקו ובגמלון. */
.nav__plaque {
  position: relative; pointer-events: auto;
  display: flex; align-items: stretch;
  height: var(--nav-h);
  border: var(--rule-w) solid transparent; border-top-width: 0;
  border-radius: 0 0 var(--plaque-r) var(--plaque-r);
  background:
    linear-gradient(var(--slate-dn), var(--slate-dn)) padding-box,
    linear-gradient(to right,
      var(--brass-a) 0 var(--split-p),
      var(--brass-b) var(--split-p) 100%) border-box;
  box-shadow: 0 16px 28px -16px rgba(10, 14, 17, .85);
  --split-p: 50%;
  transition: --split-p var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
  will-change: transform;
}

/* ── קיפול בגלילה ──
   נסוג עד שנשארת רק השפה התחתונה — קו הפליז והפינות המעוגלות.
   היא הידית שפותחת אותו בריחוף, והגמלון שעל קו הכותרת מכתיר
   אותה גם כשהוא מקופל, ולכן עדיין רואים באיזו גלריה נמצאים. */
body.is-nav-folded .nav__plaque {
  transform: translateY(calc(var(--peek) - 100%));
}
body.is-nav-folded.is-nav-peek .nav__plaque { transform: none; }

/* הרחבת שטח הריחוף מתחת לשפה — 17px לבדם הם מטרה קטנה מדי
   לעכבר. קיימת רק במצב מקופל; בפתוח היא הייתה חוסמת לחיצות
   על התמונות שברצועה שמתחת לפלקט. */
.nav__plaque::after { content: ''; display: none; }
body.is-nav-folded .nav__plaque::after {
  display: block;
  position: absolute; inset-inline: 0; top: 100%; height: 15px;
}

.nav__plaque button {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px;
  padding: 0 clamp(18px, 2.4vw, 34px);
  border: 0; border-radius: 0;
  background: transparent; color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 300;
  letter-spacing: .025em; white-space: nowrap;
  transition: color var(--t-fast);
}
.nav__plaque button:hover { color: var(--ink); }
.nav__plaque button.is-on { color: var(--brass-lit); }
.nav__plaque button b { font-weight: inherit; }
.nav__plaque button em { display: none; font-style: normal; }

/* הסמל צובע את עצמו ב-currentColor, ולכן כלל הצבע של הכפתור
   מניע גם אותו. הקבצים זמניים — להחליף ב-public/img/nav/. */
.nav__icon {
  flex: none;
  width: var(--nav-icon); height: var(--nav-icon);
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  transition: transform var(--t-mid) var(--ease);
}
.nav__icon--gallery  { -webkit-mask-image: url('../img/nav/gallery.svg');  mask-image: url('../img/nav/gallery.svg'); }
.nav__icon--projects { -webkit-mask-image: url('../img/nav/projects.svg'); mask-image: url('../img/nav/projects.svg'); }
.nav__icon--tours    { -webkit-mask-image: url('../img/nav/tours.svg');    mask-image: url('../img/nav/tours.svg'); }
.nav__plaque button:hover .nav__icon { transform: translateY(-2px); }

/* הסינון אינו כאן — הוא עבר לשוליים הימניים של הגלריה עצמה,
   ומעוצב ב-gallery.css. הוא שייך לגלריה ולא לניווט הגלובלי. */

/* ═══ תוכן ═══════════════════════════════════════════════ */

.view { min-height: calc(100vh - var(--head-h) - var(--nav-h)); }

.seed {
  max-width: 62ch; margin-inline: auto;
  padding: clamp(40px, 9vh, 96px) var(--pad-x);
  text-align: center;
}
.seed h1 { font-size: clamp(22px, 3vw, 31px); font-weight: 300; letter-spacing: .02em; margin: 0 0 14px; }
.seed p { color: var(--ink-2); margin: 0 0 10px; }
.seed__wait { color: var(--brass-lit); font-size: 14px; }

.vhead {
  padding: clamp(22px, 4vh, 42px) var(--pad-x) 0;
  max-width: var(--max); margin-inline: auto;
}
.vhead h2 {
  margin: 0 0 4px; font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 300; letter-spacing: .03em;
}
.vhead p { margin: 0; color: var(--ink-2); font-size: 14px; }

.empty-note {
  padding: clamp(50px, 12vh, 110px) var(--pad-x);
  text-align: center; color: var(--ink-2);
}

/* ═══ פוטר ═══════════════════════════════════════════════ */

.foot {
  position: relative;
  margin-top: clamp(48px, 9vh, 96px);
  padding: clamp(40px, 7vh, 72px) var(--pad-x) clamp(30px, 5vh, 50px);
  background: var(--slate-dn);
  text-align: center;
}
/* צ'ברון הפוך מעל הפוטר — סוגר את המסגרת */
.foot::before {
  content: ''; position: absolute; inset-inline: 0; top: 0;
  height: var(--chev-foot); background: var(--brass);
  clip-path: polygon(
    0 0, 50% calc(100% - var(--chev-edge)), 100% 0,
    100% var(--chev-edge), 50% 100%, 0 var(--chev-edge));
}
.foot__logo {
  width: clamp(180px, 26vw, 300px); height: clamp(52px, 7.5vw, 87px);
  margin: 0 auto 22px;
  background: var(--brass);
  -webkit-mask: url('../img/logo.svg') no-repeat center / contain;
  mask: url('../img/logo.svg') no-repeat center / contain;
}
.foot__reach {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 14px; margin-bottom: 22px;
}
.foot__reach a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border-radius: 24px;
  border: 1px solid var(--brass-dim); color: var(--ink);
  font-size: 14.5px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.foot__reach a:hover { border-color: var(--brass); background: rgba(154,129,73,.1); }
.foot__reach svg { width: 17px; height: 17px; fill: var(--brass-lit); flex: none; }
.foot__reach b { font-weight: 400; direction: ltr; unicode-bidi: isolate; }
.foot__note { margin: 0; color: var(--ink-2); font-size: 13px; }

/* ═══ לייטבוקס ═══════════════════════════════════════════ */

/* minmax(0,1fr) ולא 1fr — אחרת שורת התוכן לא מוכנה להתכווץ מתחת
   לגובה הטבעי של התמונה, והיא נחתכת בתחתית המסך. */
.lb {
  position: fixed; inset: 0; z-index: 120;
  display: none; grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(20, 26, 31, .96);
}
.lb.is-open { display: grid; }

.lb__stage {
  position: relative; min-height: 0;
  margin: clamp(46px, 6vh, 72px) clamp(16px, 4vw, 64px) 0;
}
/* inset:0 + margin:auto ממרכז את התמונה ונותן להגבלות אחיזה אמיתית */
.lb__img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  background: var(--slate-dn);
  border: clamp(4px, .7vw, 9px) solid var(--frame);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0;
  /* השכבה הרדומה שקופה אך עדיין תופסת שטח — בלי זה היא בולעת
     לחיצות בצדדים ומונעת סגירה */
  pointer-events: none;
}
.lb__img.is-on { opacity: 1; pointer-events: auto; }

.lb__x {
  position: absolute; top: 16px; inset-inline-start: 18px; z-index: 3;
  width: 44px; height: 44px; border: 0;
  background: transparent; color: var(--ink-2);
  font-size: 22px; line-height: 1;
  transition: color var(--t-fast);
}
.lb__x:hover { color: var(--ink); }

/* פס קבוע — לא זז עם גודל התמונה */
.lb__bar {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(14px, 2.2vh, 24px) var(--pad-x) clamp(18px, 3vh, 30px);
}
.lb__nav {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border: 1px solid transparent; border-radius: 0;
  background: rgba(255, 255, 255, .05); color: var(--ink);
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.lb__nav svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.lb__nav:hover:not(:disabled) {
  background: rgba(154, 129, 73, .3); border-color: var(--brass);
}
.lb__nav:disabled { opacity: .16; cursor: default; }

.lb__count {
  min-width: 8ch; text-align: center;
  color: var(--ink-2); font-size: 15px; letter-spacing: .02em;
}

/* ═══ מובייל ═══════════════════════════════════════════════ */

@media (max-width: 780px) {
  .head { gap: 10px; }
  .head__reach {
    position: fixed; inset-block-start: var(--head-h); inset-inline: 0;
    flex-direction: column; gap: 0; padding: 8px;
    background: var(--slate-dn); border-bottom: 1px solid var(--brass-dim);
    /* הפאנל יושב מתחת לכותרת — ההזזה חייבת לכלול גם את גובהה,
       אחרת קצהו מציץ מעליה */
    transform: translateY(calc(-100% - var(--head-h) - 2px));
    transition: transform var(--t-mid) var(--ease);
    z-index: 109;
  }
  .head__reach.is-open { transform: none; }
  .reach { width: auto; height: 46px; border-radius: var(--radius); justify-content: flex-start; padding-inline: 14px; gap: 12px; }
  .reach::after { content: attr(data-label); font-size: 15px; }

  .head__burger {
    display: grid; place-items: center; gap: 5px;
    width: 38px; height: 38px; flex: none;
    border: 0; background: transparent;
  }
  .head__burger span {
    display: block; width: 19px; height: 1.5px; background: var(--ink-2);
    transition: transform var(--t-fast), opacity var(--t-fast);
  }
  .head__burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .head__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

  .nav__plaque button { padding-inline: 14px; font-size: 15px; gap: 6px; }
}

@media (max-width: 560px) {
  .head { gap: 6px; }
  .head__logo { width: 100px; }
  .nav__plaque button { padding-inline: 11px; font-size: 14px; }
  .nav__plaque button b { display: none; }
  .nav__plaque button em { display: inline; }
}

/* תצוגה מרתקת — הבמה תופסת את המסך המלא ואין פוטר.
   פרטי הקשר נשארים זמינים בכותרת. */
body.is-immersive .foot { display: none; }
body.is-immersive .view { min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}