/* ==========================================================================
   City page components — extends hetel.css (v2 design system).
   Used by every /היטל-השבחה-<city>/ page. Nothing here is Holon-specific.
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.82rem;color:#8FA0BA;margin-bottom:1.6rem}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:#D9A188}
.crumbs span[aria-current]{color:var(--parchment)}
.crumbs .sep{opacity:.45}

/* ---------- City hero ---------- */
.cityhero{display:grid;grid-template-columns:1.05fr .92fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.cityhero h1{
  font-size:clamp(1.95rem,3.9vw,3.15rem);line-height:1.16;font-weight:600;
  letter-spacing:-.035em;color:var(--parchment);
}
.cityhero .lede{margin-top:1.5rem;max-width:46ch}
.cityhero .lede + .lede{margin-top:.9rem}
.cityhero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* ---------- Lead form card ---------- */
.leadcard{
  background:var(--parchment);color:var(--ink);border-radius:var(--r-card);
  box-shadow:var(--shadow-float);padding:clamp(1.6rem,3vw,2.2rem);position:relative;
}
.js .leadcard{transform:translateY(36px) scale(.985)}
.js.loaded .leadcard{transform:none;transition:transform 1s var(--ease) .28s}
.leadcard__tag{
  position:absolute;top:-.85rem;inset-inline-start:1.8rem;
  background:var(--accent);color:#fff;font-size:.72rem;font-weight:500;
  letter-spacing:.08em;padding:.45rem 1rem;border-radius:var(--r-pill);
}
.leadcard h2{font-size:1.35rem;line-height:1.3;margin-bottom:.5rem}
.leadcard__hint{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:1.5rem}
.leadcard .btn{width:100%;justify-content:center;margin-top:.4rem}
.leadcard__legal{font-size:.73rem;line-height:1.55;color:var(--muted);margin-top:1rem;text-align:center}

/* ---------- Sticky category sub-nav ---------- */
.subnav{
  position:sticky;top:66px;z-index:50;background:rgba(244,237,225,.97);
  backdrop-filter:blur(12px);border-block:1px solid var(--line);
}
.subnav__in{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-block:.7rem}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{
  flex-shrink:0;padding:.6rem 1.1rem;border-radius:var(--r-pill);font-size:.93rem;
  color:var(--ink-3);white-space:nowrap;border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.subnav a:hover{background:var(--parchment);border-color:var(--line)}
.subnav a.is-active{background:var(--ink);color:var(--parchment);border-color:var(--ink)}

/* ---------- Category cards ---------- */
.cats{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.75rem}
.cat{
  display:grid;gap:.55rem;align-content:start;padding:1.5rem 1.35rem;
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-card);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.cat:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-float)}
.cat__ico{
  width:44px;height:44px;border-radius:14px;background:var(--accent-wash);color:var(--accent);
  display:grid;place-items:center;margin-bottom:.35rem;
}
.cat h3{font-size:1.1rem;font-weight:600;line-height:1.25}
.cat p{font-size:.88rem;color:var(--muted);line-height:1.55}

/* ---------- Long-form guide sections ---------- */
.guide{padding-block:clamp(3rem,6vw,4.75rem);border-top:1px solid var(--line)}
.guide:first-of-type{border-top:0}
.guide__kicker{
  font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:600;line-height:1.35;
  letter-spacing:-.03em;max-width:46ch;
}
.guide__kicker::before{
  content:"";display:block;width:38px;height:3px;border-radius:2px;
  background:var(--accent);margin-bottom:1.1rem;
}

/* A single תכנית: title + the two labelled explainers */
.plan{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.1rem);margin-top:1.75rem;
}
.band--paper .plan{background:var(--parchment)}
.plan__title{
  font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:600;line-height:1.25;
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.plan__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem);margin-top:1.5rem}
.plan__block h4{
  font-size:.78rem;font-weight:600;letter-spacing:.09em;color:var(--accent);
  margin-bottom:.7rem;line-height:1.4;
}
.plan__block p{color:var(--ink-3);font-size:1rem;line-height:1.8}
.plan__block p + p{margin-top:.85rem}
.plan--single .plan__body{grid-template-columns:1fr}
.plan--single .plan__block p{max-width:80ch}
.plan__list{display:grid;gap:.6rem;margin-top:.85rem;color:var(--ink-3);line-height:1.75}

/* ---------- Worked example ---------- */
.calc{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.calc__facts{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2rem);color:var(--ink-3);line-height:1.85;
}
.calc__steps{display:grid;gap:1rem}
.calc__step{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.3rem;color:var(--ink-3);line-height:1.7;font-size:.97rem;
}
.calc__step strong{color:var(--ink);font-weight:600}
.calc__total{
  background:var(--sage-wash);border:1px solid var(--sage);border-radius:var(--r-md);
  padding:1.25rem 1.4rem;
}
.calc__total-label{font-size:.8rem;font-weight:600;letter-spacing:.05em;color:#5E7052}
.calc__total-num{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:600;letter-spacing:-.035em;margin-top:.2rem;font-variant-numeric:tabular-nums}

/* ---------- Municipality panel ---------- */
.muni{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.muni p{color:var(--ink-3);line-height:1.85}
.muni p + p{margin-top:1rem}
.muni__docs{display:grid;gap:.6rem;margin-top:1rem}
.muni__docs li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;color:var(--ink-3)}
.muni__docs svg{margin-top:.5rem;color:var(--accent);flex-shrink:0}
.muni__card{
  background:var(--ink);color:var(--parchment);border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2rem);
}
.muni__card h3{font-size:1.15rem;font-weight:600;margin-bottom:1.25rem;color:var(--parchment)}
.muni__rows{display:grid;gap:1rem}
.muni__row{display:grid;gap:.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.13)}
.muni__row:last-child{border-bottom:0;padding-bottom:0}
.muni__k{font-size:.72rem;letter-spacing:.12em;font-weight:500;color:#8FA0BA}
.muni__v{font-size:1rem;color:#DCE3ED;line-height:1.6}
.muni__v a{border-bottom:1px solid rgba(217,161,136,.5)}
.muni__v a:hover{color:#D9A188}

/* ---------- Inline disclaimer ---------- */
.note{
  font-size:.82rem;line-height:1.75;color:var(--muted);
  border-inline-start:2px solid var(--line);padding-inline-start:1.1rem;max-width:90ch;
}

/* ---------- Reviews slot ---------- */
.reviews{
  border:1px dashed var(--line);border-radius:var(--r-card);
  padding:clamp(2rem,4vw,3rem);text-align:center;color:var(--muted);
  display:grid;gap:.5rem;place-items:center;margin-top:2rem;
}
.reviews b{font-size:1.05rem;color:var(--ink-3);font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .cityhero,.calc,.muni{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(2,1fr)}
  .plan__body{grid-template-columns:1fr}
  .subnav{top:0}
}
@media (max-width:720px){
  .cats{grid-template-columns:1fr}
  .cat{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:center}
  .cat__ico{grid-row:span 2;margin-bottom:0}
}

/* ---------- Section heading above each guide block ---------- */
.guide__h2{
  font-size:clamp(1.5rem,2.7vw,2.15rem);font-weight:600;line-height:1.2;
  letter-spacing:-.035em;max-width:26ch;
}
.guide__intro{
  margin-top:1rem;color:var(--muted);font-size:1.02rem;line-height:1.7;max-width:56ch;
}
.guide__kicker{margin-top:2rem}
.guide__kicker::before{display:none}

/* ---------- Testimonials ---------- */
.testis{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.25rem}
.testi{
  background:var(--parchment);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.4rem,2.6vw,1.9rem);display:grid;gap:1rem;align-content:start;
}
.testi__stars{display:flex;gap:.2rem;color:var(--accent)}
.testi__body{color:var(--ink-3);line-height:1.8;font-size:1rem}
.testi__by{display:flex;align-items:baseline;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line)}
.testi__name{font-weight:600}
.testi__date{font-size:.82rem;color:var(--muted)}
@media (max-width:860px){.testis{grid-template-columns:1fr}}

/* ---------- Long-form prose sections ----------
   Used by the article pages (Rova 3, Pinui Binui) and by the "הפחתת היטל
   השבחה" / "שמאי היטל השבחה" blocks that only some city pages carry. These are
   body sections, not page-level statements, so the heading steps down from
   .h-section rather than competing with the H1. */
.prose{max-width:74ch}
.prose .h-section{
  font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.2;
  letter-spacing:-.035em;max-width:28ch;
}
.prose p{margin-top:1.05rem;color:var(--ink-3);line-height:1.85;font-size:1.02rem}
.prose p:first-of-type{margin-top:1.4rem}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-wash)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose .media{margin-top:2rem}

.prose__list{
  margin-top:1.05rem;display:grid;gap:.55rem;
  padding-inline-start:1.15rem;color:var(--ink-3);line-height:1.8;
}
.prose__list li{list-style:disc}

/* A sub-heading inside a prose section is a step down, marked by a rule on the
   start edge rather than another card. */
.prose__sub{
  margin-top:2.25rem;padding-inline-start:1.15rem;
  border-inline-start:2px solid var(--line);
}
.prose__sub h3{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;color:var(--ink-2)}

/* ---------- Data tables ---------- */
.tablewrap{
  margin-top:1.6rem;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--parchment);
}
.dtable{width:100%;border-collapse:collapse;font-size:.97rem;min-width:22rem}
.dtable th,.dtable td{
  text-align:start;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);
}
.dtable th{font-weight:600;background:var(--paper);color:var(--ink-2);white-space:nowrap}
.dtable td{color:var(--ink-3);font-variant-numeric:tabular-nums}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:hover td{background:var(--paper)}

/* A long list splits into two columns on wide screens. Applied by item count,
   not by page, so it follows the content rather than a guess about it. */
.prose__list--two{display:block;columns:2;column-gap:2.4rem}
.prose__list--two li{break-inside:avoid;margin-bottom:.55rem}
@media (max-width:820px){.prose__list--two{columns:1}}

/* The lead card sits on parchment, but .btn--ghost is styled for the dark hero
   around it — parchment text on a parchment card, i.e. an empty outline. Inside
   the card it takes the ink treatment instead. */
.leadcard .btn--ghost{color:var(--ink);border-color:var(--line);background:transparent}
.leadcard .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.leadcard__actions{display:grid;gap:.7rem;margin-top:1.4rem}

/* ---------- Hero as two Elementor columns ----------
   The hero carries a real form, and a form widget cannot live inside an HTML
   block — so the markup and the widget are siblings in two columns, and the
   right-hand column IS the lead card. */
.hero-el > .elementor-container{
  max-width:var(--container)!important;width:100%;
  padding-inline:var(--gutter);
  align-items:center;gap:clamp(2rem,4vw,3.5rem);
}
/* Elementor columns are position:relative. Left alone, each column becomes the
   positioning context for the hero's absolutely positioned glow, texture and
   skyline, and the skyline collapses into a 58%-wide box instead of spanning
   the hero. Static hands that role back to .hero-el. */
.hero-el .elementor-column:not(.leadcard-el),
.hero-el .elementor-column:not(.leadcard-el) .elementor-widget-wrap,
.hero-el .elementor-column:not(.leadcard-el) .elementor-widget-container,
.hero-el .elementor-column:not(.leadcard-el) .elementor-widget{position:static}

/* The prototype's inner wrappers are redundant once Elementor supplies the
   container and the columns. */
.hero-el .wrap{max-width:none;padding-inline:0;width:100%}
.hero-el .cityhero{display:block}

/* The card is the column itself. */
.leadcard-el{
  background:var(--parchment);border-radius:var(--r-card);
  padding:clamp(1.6rem,3vw,2.2rem);
  box-shadow:var(--shadow-float);
  align-self:center;
  /* The decoration is absolutely positioned and therefore paints above static
     content. The text column is covered by .hero__in, which already lifts
     itself; the card is not inside it, so the skyline was drawn straight over
     the form. Relative is safe here precisely because the decoration lives in
     the OTHER column — this one is not its containing block. */
  position:relative;z-index:2;
}
/* Specificity has to beat the static rule above, or the card stops being a
   positioning context and its "למימוש זכויותך" tag flies to the top of the
   hero — the tag is absolutely positioned against the card. */
.hero-el .elementor-column.leadcard-el{position:relative;z-index:2}
.leadcard-el .elementor-widget:not(:last-child){margin-bottom:0}
/* In the prototype the tag is absolutely positioned to straddle the card's top
   edge. Here the card is an Elementor column, so "top:-.85rem" resolves against
   the column's padding box and the tag lands 28px INSIDE the card, on top of
   the heading. In flow it needs no reference box at all. */
.leadcard-el .leadcard__tag{
  position:static;display:inline-block;margin-bottom:.9rem;
}
.leadcard-el h2{font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.35;color:var(--ink)}
.leadcard-el .leadcard__hint{margin-top:.7rem;color:var(--muted);font-size:.92rem;line-height:1.6}
.leadcard-el .leadcard__legal{margin-top:.9rem;color:var(--muted);font-size:.75rem;line-height:1.5}
.leadcard-el .elementor-field-group{margin-bottom:.2rem}
.leadcard-el .elementor-button{width:100%;justify-content:center}

@media (max-width:900px){
  .hero-el > .elementor-container{flex-direction:column;align-items:stretch}
  .hero-el .elementor-column{width:100%!important}
  .leadcard-el{margin-top:2rem}
}