/* ===========================================================================
   MAP — the fullscreen interactive Israel map. Dark-gold cartography in the
   brand system: black canvas, gold coast, one pin per project.
   =========================================================================== */

.map-page{height:100svh;overflow:hidden;background:var(--black)}
.map-page main{position:fixed;inset:0;display:flex;flex-direction:row}

/* ---------- top chrome ---------- */
.map-top{position:fixed;inset-inline:0;inset-block-start:0;z-index:40;display:flex;
  align-items:center;justify-content:space-between;padding:14px 18px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,11,9,.82),transparent)}
.map-top .brand{display:flex;align-items:center;gap:14px;pointer-events:auto}
.map-top .brand img{height:44px;width:auto}
.map-top .brand b{font-family:var(--display);font-weight:300;font-size:18px;color:var(--off);letter-spacing:.01em}
.map-top .brand i{display:block;font-style:normal;font-family:var(--label);font-size:10px;
  letter-spacing:.3em;color:var(--gold)}
.map-actions{display:flex;gap:10px;pointer-events:auto}
.map-actions a,.map-actions button{display:flex;align-items:center;gap:9px;background:rgba(11,11,9,.72);
  backdrop-filter:blur(10px);border:1px solid var(--gold-hair);color:var(--off);cursor:pointer;
  font-family:var(--label);font-size:11.5px;letter-spacing:.14em;padding:11px 16px;text-decoration:none;
  transition:border-color .3s var(--ease-lux),color .3s var(--ease-lux)}
.map-actions a:hover,.map-actions button:hover{border-color:var(--gold);color:var(--gold)}
.map-actions .exit{border-color:var(--gold);color:var(--gold);font-weight:700}
.map-actions svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---------- sidebar ---------- */
.map-side{width:min(360px,88vw);flex:none;display:flex;flex-direction:column;z-index:30;
  background:rgba(15,15,12,.96);border-inline-end:1px solid var(--gold-hair);padding-top:76px}
.map-cats{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 14px;border-bottom:1px solid var(--gold-hair)}
.map-cats button{background:none;border:1px solid var(--gold-hair);color:rgba(242,238,230,.7);
  cursor:pointer;font-family:var(--label);font-size:10.5px;letter-spacing:.1em;padding:8px 12px;
  transition:all .3s var(--ease-lux)}
.map-cats button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.map-cats button:not([aria-pressed="true"]):hover{border-color:var(--gold);color:var(--off)}
.map-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:10px 16px 26px;display:grid;gap:10px;align-content:start}
.map-card{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:center;
  border:1px solid var(--gold-hair);padding:10px;cursor:pointer;background:none;text-align:right;
  transition:border-color .3s var(--ease-lux),background .3s var(--ease-lux)}
.map-card:hover,.map-card[data-active="1"]{border-color:var(--gold);background:var(--gold-veil)}
.map-card img{width:86px;height:60px;object-fit:cover;display:block}
.map-card .noimg{width:86px;height:60px;display:grid;place-items:center;border:1px solid var(--gold-hair);
  color:rgba(242,238,230,.4);font-family:var(--label);font-size:9px;letter-spacing:.1em}
.map-card h3{margin:0;font-family:var(--display);font-weight:400;font-size:15.5px;color:var(--off);line-height:1.3}
.map-card p{margin:3px 0 0;font-size:12px;font-weight:300;color:rgba(242,238,230,.55)}
.map-card .st{display:inline-block;margin-top:5px;font-family:var(--label);font-size:9.5px;
  letter-spacing:.12em;color:var(--gold)}

/* ---------- stage ---------- */
.map-stage{position:relative;flex:1;overflow:hidden;cursor:grab;touch-action:none;
  background:radial-gradient(120% 100% at 30% 40%,#101418 0%,#0B0E11 55%,#080A0C 100%)}
.map-stage[data-drag="1"]{cursor:grabbing}
.map-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* svg parts */
.m-sea{fill:url(#seaGrad)}
.m-land{fill:#1A1812;stroke:none}
.m-coast{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:1}
.m-lake{fill:#0E1418;stroke:rgba(209,169,66,.5);stroke-width:.8}
.m-road{fill:none;stroke:rgba(242,238,230,.13);stroke-width:.9}
.m-city{font-family:var(--label);font-size:11px;letter-spacing:.18em;fill:rgba(242,238,230,.42)}
.m-citydot{fill:rgba(242,238,230,.35)}
.m-sealbl{font-family:var(--label);font-size:12px;letter-spacing:.5em;fill:rgba(242,238,230,.2)}

/* pins */
.m-pin{cursor:pointer}
.m-pin circle.halo{fill:rgba(209,169,66,.16)}
.m-pin .drop{fill:var(--gold);stroke:#0B0B09;stroke-width:1}
.m-pin text{font-family:var(--display);font-weight:700;fill:#0B0B09;text-anchor:middle}
.m-pin[data-dim="1"]{opacity:.18;pointer-events:none}
.m-pin:hover .drop,.m-pin[data-active="1"] .drop{fill:var(--gold-bright)}

/* ---------- popup ---------- */
.map-pop{position:absolute;z-index:35;width:min(330px,86vw);background:rgba(11,11,9,.94);
  backdrop-filter:blur(16px);border:1px solid var(--gold);box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translate(-50%,calc(-100% - 26px));visibility:hidden;opacity:0;
  transition:opacity .35s var(--ease-lux)}
.map-pop[data-open="1"]{visibility:visible;opacity:1}
.map-pop img{width:100%;height:170px;object-fit:cover;display:block}
.map-pop .in{padding:16px 18px 18px}
.map-pop h3{margin:0;font-family:var(--display);font-weight:300;font-size:21px;color:var(--off)}
.map-pop .pl{margin:4px 0 0;font-family:var(--label);font-size:10.5px;letter-spacing:.16em;color:var(--gold)}
.map-pop p{margin:10px 0 0;font-size:13.5px;font-weight:300;line-height:1.6;color:rgba(242,238,230,.72)}
.map-pop .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.map-pop .row a{font-family:var(--label);font-size:10.5px;letter-spacing:.12em;text-decoration:none;
  padding:9px 13px;border:1px solid var(--gold-hair);color:var(--off);
  transition:all .3s var(--ease-lux)}
.map-pop .row a:hover{border-color:var(--gold);color:var(--gold)}
.map-pop .row a.hot{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.map-pop .row a.hot:hover{background:var(--gold-bright);color:var(--black)}
.map-pop .x{position:absolute;inset-inline-start:8px;inset-block-start:8px;background:rgba(11,11,9,.6);
  border:0;color:var(--off);cursor:pointer;width:30px;height:30px;display:grid;place-items:center}
.map-pop .x:hover{color:var(--gold)}
.map-pop .x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7}

/* zoom buttons + note */
.map-zoom{position:absolute;inset-inline-end:18px;inset-block-end:18px;z-index:30;display:grid;gap:8px}
.map-zoom button{width:44px;height:44px;background:rgba(11,11,9,.72);border:1px solid var(--gold-hair);
  color:var(--gold);font-size:20px;cursor:pointer;display:grid;place-items:center}
.map-zoom button:hover{border-color:var(--gold)}
.map-note{position:absolute;inset-inline-start:16px;inset-block-end:14px;z-index:30;
  font-family:var(--label);font-size:9.5px;letter-spacing:.08em;color:rgba(242,238,230,.4)}

/* sidebar collapse on phones */
.map-side-toggle{display:none}
@media (max-width:900px){
  .map-page main{flex-direction:column}
  .map-side{position:fixed;inset-block:0;inset-inline-start:0;transform:translateX(101%);
    transition:transform .5s var(--ease-lux);width:min(330px,88vw)}
  .map-page[data-side="1"] .map-side{transform:translateX(0)}
  .map-side-toggle{display:flex}
  .map-top .brand b,.map-top .brand i{display:none}
}

/* ---------- MapLibre stage v2 ---------- */
#mstage{position:absolute;inset:0}
#mstage canvas{outline:none}
/* IMPORTANT: never set `position` here — MapLibre owns the marker element's
   position/transform. A `position:relative` override detaches the pin from the
   map's coordinate system and makes it drift on zoom. */
.tz-marker{background:none;border:0;cursor:pointer;padding:0;width:40px;height:48px;
  will-change:transform;-webkit-tap-highlight-color:transparent}
.tz-marker .pin{position:absolute;inset:0;display:block;
  transition:transform .28s var(--ease-lux),filter .28s var(--ease-lux);transform-origin:50% 100%}
.tz-marker .pin::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0;width:26px;height:38px;background:var(--gold);
  clip-path:path("M13 38C5 26 0 20 0 13a13 13 0 0 1 26 0c0 7-5 13-13 25z");
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.tz-marker i{position:absolute;left:50%;transform:translateX(-50%);top:9px;
  font-style:normal;font-family:var(--display);font-weight:700;font-size:11px;color:#0B0B09;z-index:1}
.tz-marker:hover .pin,.tz-marker[data-active="1"] .pin{transform:scale(1.14) translateY(-2px)}
.tz-marker:hover .pin::before,.tz-marker[data-active="1"] .pin::before{background:var(--gold-bright)}
.tz-marker::after{content:"";position:absolute;left:50%;bottom:-3px;width:7px;height:7px;
  margin-left:-3.5px;border-radius:50%;background:rgba(11,11,9,.55);
  box-shadow:0 0 0 1px var(--gold-bright)}

/* 3D / basemap chrome */
.map-modes{position:absolute;inset-inline-start:18px;inset-block-start:88px;z-index:30;display:grid;gap:8px}
.map-modes button{min-width:44px;height:40px;padding:0 12px;background:rgba(11,11,9,.72);
  backdrop-filter:blur(10px);border:1px solid var(--gold-hair);color:rgba(242,238,230,.78);
  font-family:var(--label);font-size:10.5px;letter-spacing:.12em;cursor:pointer;
  transition:border-color .3s var(--ease-lux),color .3s var(--ease-lux),background .3s var(--ease-lux)}
.map-modes button:hover{border-color:var(--gold);color:var(--gold)}
.map-modes button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);
  color:var(--black);font-weight:700}
@media (max-width:900px){
  .map-modes{inset-block-start:auto;inset-block-end:74px;inset-inline-start:12px;
    grid-auto-flow:column;gap:6px}
  .map-modes button{height:36px;padding:0 10px;font-size:9.5px}
}

.maplibregl-popup.tz-pop .maplibregl-popup-content{padding:0;background:rgba(11,11,9,.95);
  border:1px solid var(--gold);border-radius:0;box-shadow:0 26px 70px rgba(0,0,0,.55);
  font-family:var(--body);direction:rtl}
.maplibregl-popup.tz-pop .maplibregl-popup-tip{border-top-color:var(--gold);border-bottom-color:var(--gold)}
.tz-pop-in img{width:100%;height:160px;object-fit:cover;display:block}
.tz-pop-in .in{padding:16px 18px 18px}
.tz-pop-in h3{margin:0;font-family:var(--display);font-weight:300;font-size:20px;color:var(--off)}
.tz-pop-in .pl{margin:4px 0 0;font-family:var(--label);font-size:10px;letter-spacing:.14em;color:var(--gold)}
.tz-pop-in p{margin:9px 0 0;font-size:13px;font-weight:300;line-height:1.55;color:rgba(242,238,230,.72)}
.tz-pop-in .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.tz-pop-in .row button{background:none;cursor:pointer}
.tz-pop-in .row a,.tz-pop-in .row button{font-family:var(--label);font-size:10px;letter-spacing:.1em;text-decoration:none;
  padding:8px 12px;border:1px solid var(--gold-hair);color:var(--off);transition:all .3s var(--ease-lux)}
.tz-pop-in .row a:hover,.tz-pop-in .row button:hover{border-color:var(--gold);color:var(--gold)}
.tz-pop-in .row a.hot{background:var(--gold);border-color:var(--gold);color:var(--black);font-weight:700}
.map-fallback{display:none;position:absolute;inset:0;place-content:center;text-align:center;
  color:rgba(242,238,230,.7)}
[data-map-error] .map-fallback{display:grid}
.maplibregl-ctrl-attrib{direction:ltr;font-size:10px}

/* ---------- phones: the chrome must not stack on top of itself ---------- */
@media (max-width:640px){
  .map-top{padding:10px 12px;gap:10px;align-items:flex-start}
  .map-top .brand img{height:34px}
  .map-actions{gap:6px;max-width:calc(100% - 46px);overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .map-actions::-webkit-scrollbar{display:none}
  .map-actions a,.map-actions button{flex:none;gap:6px;font-size:10px;letter-spacing:.1em;padding:9px 11px}
  .map-actions svg{width:13px;height:13px}
  .map-zoom{inset-inline-end:12px;inset-block-end:12px;gap:6px}
  .map-zoom button{width:40px;height:40px}
  .map-note{display:none}
  .map-modes{inset-block-end:64px;inset-inline-start:10px}
  .maplibregl-popup.tz-pop{max-width:calc(100vw - 24px) !important}
  .tz-pop-in img{height:120px}
  .tz-pop-in .in{padding:13px 14px 15px}
  .tz-pop-in h3{font-size:17px}
  .tz-pop-in .row a,.tz-pop-in .row button{padding:8px 10px}
}

/* ===========================================================================
   v4 — day/night chrome + real tablet/phone layout
   =========================================================================== */

/* mode bar lives opposite the sidebar so the two never stack */
.map-modes{inset-inline-start:auto;inset-inline-end:18px;inset-block-start:auto;
  inset-block-end:74px;grid-auto-flow:row}

/* ---- day theme (default): light chrome over a bright basemap ---- */
[data-map-theme="day"] .map-stage{background:radial-gradient(120% 100% at 30% 40%,#F7F4ED 0%,#EFEBE1 55%,#E7E2D6 100%)}
[data-map-theme="day"] .map-top{background:linear-gradient(to bottom,rgba(247,244,237,.9),transparent)}
[data-map-theme="day"] .map-top .brand b{color:#1B1A16}
[data-map-theme="day"] .map-actions a,
[data-map-theme="day"] .map-actions button,
[data-map-theme="day"] .map-modes button,
[data-map-theme="day"] .map-zoom button{background:rgba(255,253,247,.9);color:#2C2A24;
  border-color:rgba(138,100,32,.35)}
[data-map-theme="day"] .map-actions a:hover,
[data-map-theme="day"] .map-actions button:hover,
[data-map-theme="day"] .map-modes button:hover{border-color:#8A6420;color:#8A6420}
[data-map-theme="day"] .map-modes button[aria-pressed="true"]{background:#D1A942;border-color:#B2822B;
  color:#1B1A16}
[data-map-theme="day"] .map-side{background:rgba(255,253,247,.97);border-inline-end-color:rgba(138,100,32,.22)}
[data-map-theme="day"] .map-cats{border-bottom-color:rgba(138,100,32,.22)}
[data-map-theme="day"] .map-cats button{border-color:rgba(138,100,32,.3);color:#5A5347}
[data-map-theme="day"] .map-cats button[aria-pressed="true"]{background:#D1A942;border-color:#B2822B;color:#1B1A16}
[data-map-theme="day"] .map-card{border-color:rgba(138,100,32,.2)}
[data-map-theme="day"] .map-card:hover,
[data-map-theme="day"] .map-card[data-active="1"]{border-color:#B2822B;background:rgba(209,169,66,.1)}
[data-map-theme="day"] .map-card h3{color:#1B1A16}
[data-map-theme="day"] .map-card p{color:#6B6455}
[data-map-theme="day"] .map-card .st{color:#8A6420}
[data-map-theme="day"] .maplibregl-popup.tz-pop .maplibregl-popup-content{background:rgba(255,253,247,.98);
  border-color:#B2822B;box-shadow:0 26px 70px rgba(60,50,25,.22)}
[data-map-theme="day"] .maplibregl-popup.tz-pop .maplibregl-popup-tip{border-top-color:#B2822B;border-bottom-color:#B2822B}
[data-map-theme="day"] .tz-pop-in h3{color:#1B1A16}
[data-map-theme="day"] .tz-pop-in .pl{color:#8A6420}
[data-map-theme="day"] .tz-pop-in p{color:#4E483C}
[data-map-theme="day"] .tz-pop-in .row a,
[data-map-theme="day"] .tz-pop-in .row button{color:#2C2A24;border-color:rgba(138,100,32,.32)}
[data-map-theme="day"] .tz-pop-in .row a.hot,
[data-map-theme="day"] .tz-pop-in .row button.hot{background:#D1A942;border-color:#B2822B;color:#1B1A16}
[data-map-theme="day"] .map-note{color:#7A7364}

.map-modes button[data-flash="1"]{border-color:var(--gold-bright);color:var(--gold-bright)}

/* ---- tablets: the list becomes a drawer instead of eating the map ---- */
@media (max-width:1180px){
  .map-page main{flex-direction:column}
  .map-side{position:fixed;inset-block:0;inset-inline-start:0;transform:translateX(101%);
    transition:transform .5s var(--ease-lux);width:min(360px,86vw);z-index:45}
  .map-page[data-side="1"] .map-side{transform:translateX(0)}
  .map-side-toggle{display:flex}
  .map-modes{inset-block-end:86px}
}

/* ---- phones: popup docks to the bottom, controls scroll sideways ---- */
@media (max-width:640px){
  .map-modes{inset-inline-start:10px;inset-inline-end:10px;inset-block-end:12px;
    grid-auto-flow:column;grid-auto-columns:max-content;gap:6px;
    overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .map-modes::-webkit-scrollbar{display:none}
  .map-zoom{inset-block-end:64px}
  .maplibregl-popup.tz-pop{max-width:min(94vw,420px) !important}
  .maplibregl-popup.tz-pop .maplibregl-popup-content{max-height:62svh;overflow-y:auto}
  .tz-pop-in .row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .tz-pop-in .row a,.tz-pop-in .row button{text-align:center}
  .maplibregl-ctrl-bottom-left{transform:scale(.85);transform-origin:bottom left}
}

/* mode buttons: never clip their own label */
.map-modes{justify-items:start}
.map-modes button{white-space:nowrap;width:auto}