/* ═══════════════════════════════════════════════════════════
   components.css — כפתורים, שדות, אקורדיון, לוחית staging, לייטבוקס
   ═══════════════════════════════════════════════════════════ */

/* ── כפתורים ── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 clamp(18px, 2.4vw, 26px);
  border:1px solid transparent;
  border-radius:var(--radius-control);
  font-family:var(--font-body);
  font-weight:600;
  font-size:1rem;
  line-height:1;
  text-align:center;
  cursor:pointer;
  text-decoration:none;
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease);
}
.btn:hover{ text-decoration:none; }
.btn--primary{ background:var(--accent); color:var(--on-accent); }
.btn--primary:hover{ background:var(--accent-hover); }
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn--ghost:hover{ background:color-mix(in srgb, var(--ink) 7%, transparent); }
.btn--sm{
  min-height:44px;
  font-size:.9375rem;
  padding:0 clamp(14px, 2vw, 20px);
}
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }

/* ── קישור-פעולה בתוך טקסט ── */
.link-cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:600;
  color:var(--accent-ink);
  text-decoration:none;
  border-block-end:1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
}
.link-cta:hover{ border-block-end-color:var(--accent-ink); text-decoration:none; }

/* ── שדות טופס ── */
.field{ display:grid; gap:7px; }
.field__label{
  font-weight:600;
  font-size:.9375rem;
}
.field__control{
  width:100%;
  min-height:48px;
  padding:11px 14px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  font-size:1rem;
  line-height:1.4;
  transition:border-color var(--t-fast) var(--ease);
}
.field__control:hover{ border-color:var(--ink-muted); }
.field__control::placeholder{ color:var(--ink-muted); opacity:1; }
.field__control--select{
  appearance:none;
  padding-inline-end:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 1px),
    calc(100% - 16px) calc(50% + 1px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
[dir="rtl"] .field__control--select{
  background-position:
    18px calc(50% + 1px),
    24px calc(50% + 1px);
}
.field__control[aria-invalid="true"]{ border-color:var(--accent); border-width:2px; }

.form-error{
  grid-column:1 / -1;
  color:var(--accent-ink);
  font-weight:600;
  font-size:.9375rem;
}
.lead-form__note{
  grid-column:1 / -1;
  color:var(--ink-muted);
  font-size:.9375rem;
  max-width:52ch;
}

/* ── הערת staging ── */
.note{
  font-size:.9375rem;
  line-height:1.55;
  border-radius:var(--radius-control);
  padding:14px 16px;
  max-width:60ch;
}
.lead-form .note{ grid-column:1 / -1; }
.note--staging{
  margin-block-start:14px;
  background:color-mix(in srgb, var(--accent) 9%, var(--paper));
  border:1px dashed var(--line-strong);
  color:var(--ink);
}

/* ── שאלות נפוצות ── */
.faq__item{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  padding-inline:clamp(15px, 2.2vw, 22px);
}
.faq__q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:58px;
  padding-block:10px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem);
  cursor:pointer;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"";
  flex:0 0 auto;
  width:10px; height:10px;
  border-inline-end:2px solid var(--ink-muted);
  border-block-end:2px solid var(--ink-muted);
  transform:rotate(45deg) translate(-2px, -2px);
  transition:transform var(--t-fast) var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg) translate(-2px, -2px); }
.faq__a{
  padding-block-end:clamp(14px, 2vw, 20px);
  color:var(--ink-muted);
  max-width:56ch;
}

/* ── גלריה: כפתור פתיחה + לייטבוקס ── */
.shot__btn{
  position:absolute;
  inset:0;
  z-index:2;
  border:0;
  padding:0;
  background:transparent;
  cursor:zoom-in;
}
.shot__btn:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:-3px; }

.lightbox{
  border:0;
  padding:0;
  background:transparent;
  max-width:none;
  max-height:none;
  overflow:visible;
}
.lightbox::backdrop{ background:rgb(35 29 25 / 84%); }
.lightbox__inner{
  display:grid;
  gap:12px;
  justify-items:center;
  max-width:min(94vw, 1080px);
  max-height:90dvh;
  overflow:auto;
  padding:clamp(12px, 2vw, 18px);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--radius-control);
  box-shadow:0 24px 70px rgb(0 0 0 / 40%);
}
.lightbox__img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:72dvh;
  border-radius:var(--radius-image);
  background:var(--paper-soft);
}
.lightbox__cap{
  font-size:.9375rem;
  color:var(--ink-muted);
  text-align:center;
  max-width:60ch;
}
.lightbox__close{
  justify-self:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-control);
  background:transparent;
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
}
.lightbox__close:hover{ background:color-mix(in srgb, var(--ink) 7%, transparent); }

/* ═══ השולחן האיטלקי השלם — קרוסלה אופקית ═══════════════════ */
.menu{ position:relative; height:300vh; }
.menu__pin{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden; padding-block:13vh 9vh;
}
.menu__title{
  margin:0 0 clamp(26px,5vh,44px);
  padding-inline:var(--gutter);
  font-family:var(--display,var(--serif)); font-weight:700;
  font-size:clamp(26px,7.2vw,42px); line-height:1.18; text-wrap:balance;
}
.menu__track{
  display:flex; gap:clamp(18px,4vw,30px);
  padding-inline:var(--gutter);
  will-change:transform;
}
.mcard{
  flex:0 0 72vw; max-width:400px;
  border-top:1px solid rgb(42 35 32 / 24%);
  padding-top:clamp(16px,3vh,26px);
}
.mcard__n{
  display:block;
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.28em; color:var(--accent); margin-bottom:14px;
}
.mcard__t{
  margin:0 0 10px;
  font-family:var(--display,var(--serif)); font-weight:700;
  font-size:clamp(20px,5.2vw,27px); line-height:1.25;
}
.mcard__p{
  margin:0; max-width:34ch;
  font-weight:300; font-size:16.5px; line-height:1.8;
  color:var(--ink-muted);
}
.menu__hint{
  margin:clamp(22px,4vh,38px) var(--gutter) 0;
  font-size:12.5px; letter-spacing:.06em; color:var(--ink-muted);
}
@media (min-width:900px){
  .mcard{ flex:0 0 34vw; }
  .menu{ height:260vh; }
}
@media (prefers-reduced-motion: reduce){
  .menu{ height:auto; }
  .menu__pin{ position:static; height:auto; }
  .menu__track{ flex-wrap:wrap; }
  .mcard{ flex:0 0 44%; }
}