/* ══════════════════════════════════════════════════════════════════════════
   THE PRODUCT PAGE LAYOUT — shared by all five, loaded after product.css.

   Replaces the old template, which opened with four paragraphs of prose and
   then repeated the same photo/number/title/paragraph stack once per variant.
   On a phone that was two and a half screens of unbroken text followed by four
   identical blocks, and it was rejected on exactly those grounds.

   Two changes carry the whole thing:

   1. Choosing between variants is a COMPARISON, and prose is the worst form for
      one — you have to hold three options in your head to judge the fourth.
      Every variant now answers the same three questions in the same order, and
      subgrid lines those answers up across the cards so the eye can read ACROSS
      a row rather than down a column.
   2. A jump bar under the hero. Nobody should scroll five screens to reach the
      part they came for.

   Light and dark alternate down the page so it has somewhere to breathe.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── in-page jump links ──
   These used to be a white full-bleed bar sitting directly under the dark rail,
   which read as a SECOND navigation row — and since only the five product pages
   have one, the header appeared to change shape as you moved around the site.
   The client's words: "כשאני לוחץ על עמוד כל התפריט למעלה גם משתנה, זה צריך
   להיות עיצוב אחד". The links are still useful, so they stay — but as chips on
   the page's own paper, inside the content column, clearly part of the page and
   not part of the header. The rail is now identical on all twelve pages. */
.jump{background:transparent;border:0;padding-block:clamp(16px,2.4vh,26px) 0}
.jump ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  width:var(--wrap);margin-inline:auto;padding:0}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;
  white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink-2);
  background:var(--white);border:1px solid var(--line);border-radius:100px;transition:.2s}

/* ── opening claim ── */
.claim{padding-block:clamp(30px,5vh,64px) clamp(22px,3.5vh,40px)}
.claim h2{margin-top:14px;font-size:clamp(26px,3.9vw,50px);max-width:17ch}
.claim h2 em{font-style:normal;color:var(--azure)}
.claim .lede{margin-top:16px;max-width:54ch;font-size:clamp(16.5px,1.35vw,19px);
  line-height:1.75;color:var(--ink-2)}

/* ── the comparison ── */
.cmp{padding-block:clamp(28px,4.5vh,56px) clamp(34px,6vh,76px);background:var(--paper-2)}
.cmp h2{margin-top:14px;font-size:clamp(25px,3.4vw,44px);max-width:18ch}
.cmp h2 em{font-style:normal;color:var(--azure)}
.cmp .lede{margin-top:14px;max-width:54ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.cards{margin-top:clamp(22px,3.5vh,42px);display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(var(--n,4),1fr)}
.mc{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.mc figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.mc figure img,.mc figure video{width:100%;height:100%;object-fit:cover;display:block}
.mc .live{position:absolute;inset-block-start:10px;inset-inline-start:10px;
  font-family:Plex,monospace;font-size:12px;letter-spacing:.12em;color:#fff;
  background:rgba(8,21,31,.62);padding:5px 9px;backdrop-filter:blur(4px)}
.mc .hd{padding:16px 18px 0;display:flex;align-items:baseline;gap:9px}
.mc .hd s{text-decoration:none;font-family:Plex,monospace;font-size:13px;color:var(--azure-ink);
  direction:ltr;unicode-bidi:isolate}
.mc h3{font-size:clamp(19px,1.7vw,23px)}
.mc dl{margin:14px 0 0;padding:0 18px 18px;display:grid;gap:0}
.mc dt{font-family:Plex,monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-3);
  padding-top:11px;border-top:1px solid rgba(15,35,51,.07)}
.mc dt:first-of-type{border-top:0;padding-top:0}
.mc dd{margin:5px 0 11px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.mc dd:last-child{margin-bottom:0}
.mc dd b{font-weight:700;color:var(--ink)}

/* The point of a comparison is reading ACROSS it. With cards sizing themselves,
   the rows drifted apart the moment one answer ran to two lines and another to
   one — and a comparison whose rows do not line up is just a row of cards.
   subgrid hands the card, and the list inside it, the parent's row track.
   Only where the cards are actually side by side. */
@supports (grid-template-rows: subgrid){
  @media(min-width:621px){
    .cards{grid-template-rows:auto auto repeat(6,auto)}
    .mc{grid-row:span 8;display:grid;grid-template-rows:subgrid}
    .mc dl{grid-row:span 6;display:grid;grid-template-rows:subgrid;align-content:start}
  }
}

/* ── "this is not the catalogue" ──
   A grid of four cards reads as a closed list, and the client's point was that
   customers were coming away thinking those four are all they make. Everything
   here is cut to measure, so the range is not four — it is whatever the opening
   needs. This sits directly under the cards, where the assumption forms. */
.openrange{margin-top:clamp(18px,2.6vh,28px);padding:18px 22px;background:var(--white);
  border:1px solid var(--line);border-inline-start:3px solid var(--azure);border-radius:2px;
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.openrange p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0;flex:1;min-width:15rem}
.openrange p b{color:var(--ink);font-weight:700}
.openrange a{flex:none;font-weight:700;font-size:15.5px;color:var(--azure-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ── per-product signature ──
   The five pages share a skeleton, but the crop of the variant photograph is
   set by the product, because the products are not the same shape: a fence is a
   long horizontal run, a railing sits on a tall balcony edge, a pergola is read
   by looking up. Same layout, different rhythm — which is what stops five pages
   built from one generator from feeling like one page printed five times. */
.mc figure{aspect-ratio:var(--ar,16/10)}

/* ── the second axis ──
   Mechanism answers "how does it open"; design answers "what does it look
   like". They are independent — the archive holds panels-lifting-275 and
   gate-sliding-strips-285 — and putting them in one list is what made "שער
   פנלים" read as a fourth way of opening. Deliberately a lighter treatment than
   the comparison above it: a picture and a line, because unlike the mechanism
   this choice has no wrong answer to warn about. */
.design{padding-block:clamp(30px,5vh,64px) clamp(34px,6vh,72px)}
.design h2{margin-top:14px;font-size:clamp(25px,3.4vw,44px);max-width:18ch}
.design h2 em{font-style:normal;color:var(--azure)}
.design .lede{margin-top:14px;max-width:56ch;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.dgrid{margin-top:clamp(20px,3vh,36px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px)}
.dcell{margin:0}
.dcell img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:var(--navy)}
.dcell figcaption{padding-top:12px}
.dcell b{display:block;font-family:var(--display);font-size:clamp(17px,1.5vw,20px);
  font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.dcell s{display:block;text-decoration:none;margin-top:6px;font-size:14.5px;line-height:1.55;
  color:var(--ink-2)}

/* ── one full-bleed photograph, as a breather ── */
.bleedband{position:relative;height:clamp(230px,40svh,460px);overflow:hidden;margin:0;
  background:var(--navy-deep)}
.bleedband img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}
/* the scrim carries the caption on its own — several of these frames end in
   bright render and white slats, and an azure eyebrow vanished on them */
/* The caption block runs from roughly 22px to 130px off the bottom, and the old
   ramp had already fallen to 28% opacity by 62% height — so on the brighter
   frames (the lifting gate is shot against a white slatted fence in full sun)
   the azure eyebrow at the top of the block sat on almost bare photograph and
   washed out. The scrim now stays above 80% for the whole height the caption
   occupies, and only opens up above it. */
.bleedband .g{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,35,51,.97) 0%,rgba(15,35,51,.93) 22%,
    rgba(15,35,51,.82) 38%,rgba(15,35,51,.42) 62%,rgba(15,35,51,.12) 84%,
    rgba(15,35,51,.34) 100%)}
.bleedband figcaption{position:absolute;inset-block-end:22px;inset-inline:0;width:var(--wrap);
  margin-inline:auto;color:#fff;font-size:clamp(16px,1.5vw,21px);font-weight:600;max-width:32ch;
  line-height:1.5}
.bleedband figcaption s{text-decoration:none;display:block;font-family:Plex,monospace;
  font-size:12px;letter-spacing:.18em;color:var(--azure-lite);margin-bottom:9px;
  direction:ltr;unicode-bidi:isolate;text-align:right}

/* ── spec, in Hebrew, on paper ── */
.spec{padding-block:clamp(30px,5vh,64px) clamp(34px,6vh,72px)}
.spec h2{margin-top:14px;font-size:clamp(24px,3.2vw,40px)}
.sgrid{margin-top:clamp(20px,3vh,34px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
.sgrid div{background:var(--paper);padding:18px 20px}
.sgrid b{display:block;font-size:13.5px;font-weight:700;color:var(--ink-3);margin-bottom:8px}
.sgrid s{display:block;text-decoration:none;font-size:16px;line-height:1.55;color:var(--ink);
  font-weight:600}

/* ── work strip, edge to edge on a phone ── */
.work{padding-block:clamp(26px,4vh,52px) clamp(36px,6vh,80px);background:var(--navy);color:#fff}
.work .hd{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.work h2{font-size:clamp(24px,3.2vw,42px);color:#fff}
.work .all{margin-inline-start:auto;font-weight:700;font-size:15px;color:var(--azure-lite);
  text-decoration:underline;text-decoration-color:var(--azure-lite);
  text-decoration-thickness:2px;text-underline-offset:5px}
.wgrid{margin-top:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.wgrid a{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-deep);display:block}
.wgrid img{width:100%;height:100%;object-fit:cover}

@media(hover:hover){
  .mc:hover{border-color:var(--azure-ink);box-shadow:0 18px 40px -30px rgba(15,35,51,.5)}
  .jump a:hover{color:var(--ink);border-color:var(--azure-ink);background:var(--paper)}
  .work .all:hover{color:#fff}
  .wgrid a:hover img{transform:scale(1.05);transition:transform 1.1s var(--e)}
}

/* ── screens ──
   Four across needs roughly 1100px. Below that: two, then one. Never a
   horizontal scroll — a comparison you have to drag sideways is not one. */
@media(max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .sgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .design{padding-block:26px 30px}
  .design h2{font-size:clamp(24px,7.5vw,34px)}
  .design .lede{font-size:16px}
  /* two across on a phone, not one: these are four small "which look do you
     like" pictures, and one per row would make the section four screens long */
  .dgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .dcell s{font-size:14px}
}
@media(max-width:820px){
  .jump a{min-height:44px;padding-inline:14px;font-size:14px}
  .claim{padding-block:24px 18px}
  .claim h2{font-size:clamp(26px,8vw,36px)}
  .claim .lede{margin-top:13px;font-size:16.5px}
  .cmp{padding-block:24px 30px}
  .cmp h2{font-size:clamp(24px,7.5vw,34px)}
  .cmp .lede{font-size:16px}
  .cards{margin-top:20px;gap:12px}
  .bleedband{height:clamp(210px,34svh,300px)}
  .spec{padding-block:26px 30px}
  .spec h2{font-size:clamp(23px,7vw,32px)}
  .sgrid{margin-top:18px}
  .sgrid div{padding:15px 16px}
  .work{padding-block:24px 32px}
  .work h2{font-size:clamp(23px,7vw,32px)}
  .work .wrap{width:100%}
  .work .hd{padding-inline:var(--gut)}
  .work .all{margin-inline-start:0;display:inline-block;padding-block:11px;min-height:44px}
  .wgrid{grid-template-columns:repeat(2,1fr);gap:2px}
}
@media(max-width:820px){
  .openrange{padding:15px 16px;gap:10px}
  .openrange p{font-size:15.5px;min-width:0}
  .openrange a{display:inline-block;padding-block:10px;min-height:44px}
}
@media(max-width:620px){
  .cards{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr}
  /* one per row is already wide, so the tall crops stop earning their height */
  .mc figure{aspect-ratio:var(--ar-m,16/9)}
}
/* 320px is still a real device */
@media(max-width:360px){
  .jump a{padding-inline:12px;font-size:13.5px}
  .mc .hd{padding:14px 15px 0}
  .mc dl{padding:0 15px 15px}
  .sgrid div{padding:13px 14px}
}

/* ── section heads: two columns on a wide screen ──
   MUST stay last in this file. Media queries add no specificity, so the base
   `.claim h2{max-width:17ch}` above would otherwise win over the override here
   and the heading would keep its narrow measure.

   Every head was a right-aligned stack — eyebrow, heading, lede — which at 1440
   left roughly 730px of empty paper down the left of the page. That is what
   "לא נראה טוב במחשב" was pointing at. This is the home page's own .head2
   arrangement: the heading holds the right, the argument sits to its left,
   both bottom-aligned, so no section opens with half a screen of nothing. */
@media(min-width:1001px){
  .claim{display:grid;grid-template-columns:1.15fr 1fr;
    column-gap:clamp(32px,5vw,84px);align-items:end}
  .claim .kick{grid-column:1;grid-row:1}
  .claim h2{grid-column:1;grid-row:2;max-width:none}
  .claim .lede{grid-column:2;grid-row:2;margin-top:0;padding-bottom:6px;max-width:46ch}

  .cmp .wrap,.design .wrap{display:grid;grid-template-columns:1.15fr 1fr;
    column-gap:clamp(32px,5vw,84px);align-items:end}
  .cmp .kick,.design .kick{grid-column:1;grid-row:1}
  .cmp h2,.design h2{grid-column:1;grid-row:2;max-width:none}
  .cmp .lede,.design .lede{grid-column:2;grid-row:2;margin-top:0;
    padding-bottom:6px;max-width:46ch}
  .cards,.openrange,.dgrid,.dnames{grid-column:1/-1}

  /* the spec head has no lede, so its grid gets the table alongside instead */
  .spec{display:grid;grid-template-columns:.8fr 2fr;
    column-gap:clamp(32px,5vw,84px);align-items:start}
  .spec .kick{grid-column:1;grid-row:1}
  .spec h2{grid-column:1;grid-row:2;margin-top:14px}
  .sgrid{grid-column:2;grid-row:1/span 2;margin-top:0}
}

/* ── the design vocabulary, as names ──
   The four photographs above are examples. The names here are the whole set,
   taken from the client's own archive rather than from me — הייטק, פסים,
   רפרפות and חצי אטום all appear there and none of them had reached the site.
   Names carry no photograph, and that is the point: a complete list is possible
   only if it does not need one picture per entry, and it removes the failure
   that put the wrong image under a label three times. */
.dnames{margin-top:clamp(18px,2.6vh,28px);padding:18px 22px;background:var(--white);
  border:1px solid var(--line);border-inline-start:3px solid var(--azure);border-radius:2px}
.dnames p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin:0}
.dnames p b{color:var(--ink);font-weight:700}
.dnames .dnote{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-3)}
@media(max-width:820px){
  .dnames{padding:15px 16px}
  .dnames p{font-size:16px}
  .dnames .dnote{font-size:14.5px}
}

/* The shared-designs link lives inside .dnote prose, where the global
   a{color:inherit;text-decoration:none} reset had swallowed it — it rendered as
   plain grey text with no affordance at all. Same treatment as every other
   inline link on these pages. */
.dnames a{color:var(--azure-ink);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:5px}
.dnames a:hover{color:var(--ink)}

/* ── photos that no longer carry a name ──
   A caption naming a design was a claim the photograph could not support, so
   the design grid is now a plain gallery: it shows the range without asserting
   which example is which. The names live in .dnames underneath, as text.
   Slightly taller crop, since there is no caption to balance the cell. */
.dcell img{aspect-ratio:5/4}

/* Fences cards lost their photo for the same reason — their headings name
   designs, unlike the railings/pergolas/cladding cards, whose headings name a
   PLACE and are therefore legible in the picture. Without the figure the card
   starts on its heading, so the subgrid run is one row shorter. */