/* ===== Contact page (Figma 4960:9669 desktop / 4984:15833 mobile) =====
   3-column layout (RTL):  MAP (left)  ·  DETAILS (center)  ·  FORM (right / first)
   Loaded AFTER footer.css. Header is .hdr--solid (white + dark text via menu.js). */

:root {
  --blk: #030a11;
  --gray: #6c6c6c;
  --ct-field-bg: #f5f5f5;
  --ct-field-border: #03203d;
  --ct-placeholder: #56575c;
}

.hdr.hdr--solid { background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.07); }

.ct {
  position:relative;             /* anchor for the full-height absolute map */
  background:#fff;
  direction:rtl;
  /* clear the fixed white header (150px in the 1920 canvas) */
  padding-top:calc(100vw * 150 / 1920);
  /* map runs header→footer; 80vh keeps the footer close to the form (no big gap) */
  min-height:80vh;
}

/* ---------- shared scale helper: 1px-of-figma = (1/1920)*100vw ---------- */
.ct-hero {
  position:relative;
  max-width:1920px;
  margin:0 auto;
  padding-bottom:calc(100vw * 56 / 1920);
}

/* ---------- breadcrumb (TOP-RIGHT) ---------- */
.ct__crumb {
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;          /* RTL: flex-start = visual RIGHT */
  direction:rtl;
  color:var(--blk);
  font-family:var(--font-body);
  font-size:calc(100vw * 22 / 1920);
  font-weight:400;
  padding:calc(100vw * 30 / 1920) calc(100vw * 320 / 1920) 0 0;
}
.ct__crumb a { display:flex; align-items:center; color:var(--blk); }
.ct__crumb-home { width:calc(100vw * 16 / 1920); height:calc(100vw * 16 / 1920); display:block; opacity:.85; }
.ct__crumb span { color:var(--gray); }
.ct__crumb-cur { color:var(--blk); }

/* ---------- 3-column grid ---------- */
.ct__grid {
  position:relative;
  display:grid;
  direction:ltr;                 /* visual L→R = MAP · DETAILS · FORM (matches Figma) */
  /* MAP(left) | DETAILS(center) | FORM(right) — source order: map, details, form */
  grid-template-columns:
      1fr                        /* details */
      calc(100vw * 470 / 1920);  /* form */
  column-gap:calc(100vw * 60 / 1920);
  align-items:start;
  padding-top:calc(100vw * 40 / 1920);
  padding-bottom:calc(100vw * 40 / 1920);
  /* clear the absolute map on the left (map width 723 + 60 gap) */
  padding-left:calc(100vw * 783 / 1920);
  /* right margin so the form block ends at figma x≈1610 (≈310px from edge) */
  padding-right:calc(100vw * 310 / 1920);
}

/* ---------- MAP — live Google map, absolute, full screen height ---------- */
.ct__map {
  position:absolute;             /* anchored to .ct → spans header→footer */
  top:0;
  bottom:0;
  left:0;
  width:calc(100vw * 723 / 1920);
  overflow:hidden;
  z-index:1;                     /* above the (transparent) content overlay so the map is draggable; below header (z100) */
}
.ct__map iframe { display:block; width:100%; height:100%; border:0; }
.ct__map img { display:block; width:100%; height:100%; object-fit:cover; }

/* ---------- DETAILS (center) ---------- */
.ct__details {
  grid-column:1;
  direction:rtl;
  text-align:right;
  padding-top:calc(100vw * 80 / 1920);
}
.ct__details-title {
  margin:0;
  font-family:var(--font-body);
  font-weight:800;
  font-size:calc(100vw * 36 / 1920);
  line-height:1.2;
  color:var(--blk);
}
.ct__details-sub {
  margin:calc(100vw * 12 / 1920) 0 0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:calc(100vw * 22 / 1920);
  color:var(--gray);
}

.ct__rows { list-style:none; margin:calc(100vw * 38 / 1920) 0 0; padding:0; }
.ct__row {
  display:flex;
  flex-direction:row-reverse;          /* icon on the visual RIGHT, text to its left */
  align-items:center;
  justify-content:flex-end;            /* pack to the RIGHT edge → icons flush-right & aligned across rows */
  gap:calc(100vw * 18 / 1920);
  margin-bottom:calc(100vw * 22 / 1920);
}
.ct__row-tx {
  display:flex;
  flex-direction:column;
  align-items:flex-start;              /* RTL column cross-start = visual RIGHT → labels/values right-aligned */
  text-align:right;
  line-height:1.25;
}
.ct__row-label {
  font-family:var(--font-body);
  font-weight:700;
  font-size:calc(100vw * 19 / 1920);
  color:var(--blk);
}
.ct__row-val {
  font-family:var(--font-body);
  font-weight:400;
  font-size:calc(100vw * 18 / 1920);
  color:#3a3a3a;
}
a.ct__row-val { transition:color .15s ease; }
a.ct__row-val:hover { color:var(--gold-deep); }
.ct__row-val--mail { text-decoration:underline; }

.ct__row-ic {
  flex:0 0 auto;
  width:calc(100vw * 46 / 1920);
  height:calc(100vw * 46 / 1920);
  border-radius:50%;
  background:#b58d41;                   /* gold filled circle */
  display:flex;
  align-items:center;
  justify-content:center;
}
.ct__row-ic img { width:50%; height:50%; object-fit:contain; display:block; }

/* social */
.ct__social { margin-top:calc(100vw * 30 / 1920); }
.ct__social-label {
  display:block;
  text-align:right;
  font-family:var(--font-body);
  font-weight:700;
  font-size:calc(100vw * 18 / 1920);
  color:var(--blk);
  margin-bottom:calc(100vw * 12 / 1920);
}
.ct__social-icons {
  display:flex;
  flex-direction:row;                  /* RTL: first link (youtube) on the right */
  justify-content:flex-start;          /* RTL flex-start = pack RIGHT */
  gap:calc(100vw * 14 / 1920);
}
.ct__social-icons a {
  width:calc(100vw * 50 / 1920);
  height:calc(100vw * 50 / 1920);
  border:1px solid #d6b577;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, transform .18s ease;
}
.ct__social-icons a:hover { background:#faf4e8; transform:translateY(-2px); }
.ct__social-icons img { width:calc(100vw * 18 / 1920); height:calc(100vw * 18 / 1920); object-fit:contain; }

/* ---------- FORM (right / first in RTL) ---------- */
.ct__formwrap {
  grid-column:2;
  direction:rtl;
  text-align:right;
}
.ct__form-title {
  margin:0;
  font-family:var(--font-body);
  font-weight:800;
  font-size:calc(100vw * 40 / 1920);
  line-height:1.1;
  color:var(--blk);
}
.ct__form-sub {
  margin:calc(100vw * 14 / 1920) 0 calc(100vw * 28 / 1920);
  font-family:var(--font-body);
  font-weight:400;
  font-size:calc(100vw * 20 / 1920);
  color:var(--gray);
}

.ct__form { display:flex; flex-direction:column; gap:calc(100vw * 16 / 1920); }
.ct__form-row2 {
  display:flex;
  flex-direction:row;                  /* RTL: first field (שם מלא) on the right */
  gap:calc(100vw * 16 / 1920);
}
.ct__form-row2 .field-wrap { flex:1 1 0; }

.ct__input {
  width:100%;
  height:calc(100vw * 52 / 1920);
  border:0;
  border-bottom:1px solid var(--ct-field-border);
  border-radius:0;
  background:var(--ct-field-bg);
  padding:0 calc(100vw * 16 / 1920);
  font-family:var(--font-body);
  font-size:calc(100vw * 18 / 1920);
  color:#161616;
  text-align:right;
  direction:rtl;
  outline:none;
}
.ct__input::placeholder { color:var(--ct-placeholder); opacity:1; }
.ct__textarea {
  height:calc(100vw * 198 / 1920);
  padding:calc(100vw * 14 / 1920) calc(100vw * 16 / 1920);
  resize:vertical;
  line-height:1.5;
}

/* Figma button-2: rectangular outlined, arrow segment on LEFT split by a divider line */
.ct__submit {
  align-self:flex-end;
  display:flex;
  direction:ltr;
  align-items:stretch;
  width:calc(100vw * 150 / 1920);
  height:calc(100vw * 48 / 1920);
  margin-top:calc(100vw * 6 / 1920);
  border:1px solid var(--green-900);
  border-radius:2px;
  overflow:hidden;
  padding:0;
  background:#fff;
  cursor:pointer;
  transition:background .18s ease;
}
.ct__submit:hover { background:#f6f3ec; }
.ct__submit-tx {
  order:2;                             /* text on the right */
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:calc(100vw * 20 / 1920);
  color:var(--green-900);
}
.ct__submit-ic {
  order:1;                             /* arrow segment on the left */
  flex:0 0 calc(100vw * 48 / 1920);
  width:calc(100vw * 48 / 1920);
  height:100%;
  border:0;
  border-right:1px solid rgba(var(--navy-rgb), .4);
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ct__submit-ic img { width:calc(100vw * 22 / 1920); height:calc(100vw * 22 / 1920); display:block; }

.ct__form-ok {
  display:none;
  margin-top:calc(100vw * 14 / 1920);
  color:var(--green-900);
  font-weight:700;
  font-size:calc(100vw * 18 / 1920);
}
.ct__form-ok.is-shown { display:block; }

/* invalid state for ct inputs (re-using interactions.js .is-invalid + .field-err) */
.ct__input.is-invalid { border-color:#d23b3b !important; background:#fff4f4; }

/* =========================================================================
   TABLET ≤1024  +  MOBILE ≤768
   Order: FORM → DETAILS → MAP  (per figma 4984:15833)
   ========================================================================= */
@media (max-width:1024px) {
  .ct { padding-top:96px; min-height:0; display:flex; flex-direction:column; }  /* reset desktop full-screen; stack so map (order:3) goes LAST */
  .ct-hero { padding:0 0 40px; margin:0; max-width:none; }

  .ct__crumb {
    padding:14px 16px 0 0;
    font-size:15px;
  }
  .ct__crumb-home { width:14px; }

  .ct__grid {
    display:flex;
    flex-direction:column;
    column-gap:0;
    padding:18px 16px 0;
  }

  /* FORM first */
  .ct__formwrap { order:1; width:100%; }
  .ct__form-title { font-size:30px; text-align:right; }
  .ct__form-sub { font-size:16px; text-align:right; margin:8px 0 22px; }
  .ct__form { gap:14px; }
  .ct__form-row2 { flex-direction:column; gap:14px; }
  .ct__input { height:52px; font-size:16px; padding:0 14px; }
  .ct__textarea { height:150px; padding:12px 14px; }
  .ct__submit {
    align-self:flex-end;               /* visual LEFT in RTL column */
    width:150px;
    height:48px;
    padding:0;
  }
  .ct__submit-tx { font-size:18px; }
  .ct__submit-ic { flex-basis:48px; width:48px; height:100%; }
  .ct__submit-ic img { width:22px; height:22px; }
  .ct__form-ok { font-size:15px; margin-top:12px; }

  /* DETAILS second — right-aligned (per figma mobile) */
  .ct__details {
    order:2;
    width:100%;
    padding-top:42px;
    text-align:right;
  }
  .ct__details-title { font-size:28px; }
  .ct__details-sub { font-size:16px; margin-top:8px; }
  .ct__rows {
    margin:28px 0 0;
    width:100%;
  }
  .ct__row { gap:14px; margin-bottom:20px; }
  .ct__row-ic { width:46px; height:46px; }
  .ct__row-label { font-size:18px; }
  .ct__row-val { font-size:16px; }
  .ct__social { margin-top:26px; }
  .ct__social-label { text-align:right; font-size:17px; }
  .ct__social-icons { justify-content:flex-start; gap:14px; }
  .ct__social-icons a { width:46px; height:46px; }
  .ct__social-icons img { width:17px; height:17px; }

  /* MAP last — full-bleed, back in normal flow (reset desktop absolute) */
  .ct__map {
    position:static;
    top:auto; bottom:auto; left:auto; z-index:auto;
    order:3;
    margin:36px -16px 0;
    width:calc(100% + 32px);
    height:auto;
    border-radius:0;
    aspect-ratio:375 / 360;
  }
}

@media (max-width:768px) {
  .ct__form-title { font-size:26px; }
  .ct__details-title { font-size:24px; }
}