/* Impact360 — blog post (/blog/<slug>/). Cards come from blog.css.
   v2 corporate restraint: the standard navy film hero (title, byline, the original top image in a plain frosted
   frame), a thin flat progress bar, a frosted reading sheet with calm long-form Hebrew typography, share chips. */

/* ---------------------------------------------------------------- hero: the standard film window (site.css §8) */
.post-hero .page-hero-window { min-height: clamp(360px, 48vh, 540px); }
.post-hero .page-hero-inner { padding-block-end: calc(var(--lap) + clamp(36px, 5vw, 64px)); gap: clamp(24px, 4vw, 56px); }
/* the copy shrinks beside the top-image plate (a fixed max-width wrapped the 416px Stargate plate under the title) */
.post-hero .page-hero-copy { flex: 1 1 30rem; min-width: 0; max-width: 46rem; }
.post-hero .page-title { max-width: 19em; font-size: clamp(31px, 3.6vw, 54px); line-height: 1.14; letter-spacing: -.012em; }
.post-hero .crumbs { margin-block-end: clamp(14px, 2vw, 24px); }
.post-hero .crumbs ol { flex-wrap: nowrap; }
.post-hero .crumbs li { flex: none; }
.post-hero .crumbs li:last-child { flex: 0 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(40ch, 60vw); font-weight: 500; opacity: .85; }
.post-hero .crumbs li:last-child::before { display: inline-block; vertical-align: .12em; margin-inline-end: 8px; }
/* a Latin-only title on the Hebrew page is an LTR run: it truncates at its own end ("Let’s Make Isr…"), not its start */
.post-hero .crumbs li:last-child:has(> .crumb-ltr) { display: inline-flex; align-items: center; gap: 0; }
.post-hero .crumbs .crumb-ltr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the byline rides in the hero's lead slot: a plain row, hairline separators */
.post-hero .page-lead { margin-block-start: clamp(20px, 2.4vw, 30px); font: 500 15px/1.4 var(--font-body); color: #fff; }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
.post-byline > * + *::before { content: ""; display: inline-block; width: 1px; height: 14px; margin-inline: 16px; background: rgba(255, 255, 255, .4); vertical-align: -2px; }
.pm-author { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.pm-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.pm-i { color: rgba(255, 255, 255, .9); }
/* the original top image beside the title: a plain frosted frame */
.post-plate {
  --tint-a: rgba(255, 255, 255, .3); --tint-b: rgba(255, 255, 255, .14); --blur: 14px;
  width: calc(min(400px, 30vw, 330px * var(--ar)) + 16px); padding: 8px; border-radius: 24px;
}
.post-plate-in { display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: 17px; background: var(--night); }
.post-plate-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- reading layout: sheet + share column */
.post-layout {
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56rem) minmax(0, 1fr); align-items: start;
}
.post-sheet {
  grid-column: 2; grid-row: 1; min-width: 0;
  --tint-a: rgba(255, 255, 255, .84); --tint-b: rgba(255, 255, 255, .74); --blur: 24px;
  border-radius: clamp(28px, 3vw, 44px);
  padding: clamp(30px, 5.2vw, 80px) clamp(20px, 6vw, 100px) clamp(28px, 4vw, 60px);
}
/* the sheet is .glass--long (site.css): rim as inset shadows + a 900px top sheen, no full-size pseudo layers */
.post-rail { grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: calc(var(--nav-top) + var(--bar-h) + 28px); margin-block-start: calc(var(--lap) + 24px); margin-inline-end: clamp(18px, 2.2vw, 36px); }
.rail-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-share { display: flex; flex-direction: column; gap: 8px; }
.rail-up { margin-block-start: 10px; }

/* reading progress: a thin flat blue bar along the top edge */
.post-progress { position: fixed; z-index: 60; top: 0; inset-inline: 0; height: 3px; pointer-events: none; }
.post-progress i { display: block; height: 100%; background: var(--blue); transform-origin: left center; transform: scaleX(var(--read, 0)); }
[dir="rtl"] .post-progress i { transform-origin: right center; }
@supports (animation-timeline: view()) {
  .post { timeline-scope: --read; }
  .post-prose { view-timeline: --read block; view-timeline-inset: 96px 0px; }
  .post-progress i { animation: pp-grow linear both; animation-timeline: --read; animation-range: contain 0% contain 100%; }
}
@keyframes pp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- long-form Hebrew typography */
.post-prose { font: 400 clamp(17.5px, 1.3vw, 19px)/1.9 var(--font-body); color: var(--ink-2); max-width: 44rem; margin-inline: auto; }
.post-prose > * + * { margin-block-start: .5em; }       /* lines of one original paragraph group */
.post-prose > .gap { margin-block-start: 1.3em; }        /* an "empty" block = a paragraph break */
.post-prose > .lead { font-size: 1.12em; line-height: 1.8; font-weight: 500; color: var(--ink); }
.post-prose > .kicker { font: 900 clamp(19.5px, 1.5vw, 22px)/1.5 var(--font-display); color: var(--ink); }
.post-prose > .kicker strong { font-weight: inherit; }
.post-prose > .gap.kicker { margin-block-start: 1.9em; }
.post-prose > .kicker + :not(.gap) { margin-block-start: .3em; }
.post-prose strong { font-weight: 700; color: var(--ink); }
.post-prose .ph2 { margin-block-start: 1.9em; font: 900 clamp(22px, 2.1vw, 30px)/1.32 var(--font-display); color: var(--ink); text-wrap: balance; }
.post-prose .ph3 { margin-block-start: 1.6em; font: 900 clamp(19px, 1.7vw, 24px)/1.4 var(--font-display); color: var(--ink); }
.post-prose > :is(.ph2, .ph3) + * { margin-block-start: .5em; }
.hnum { color: var(--blue); margin-inline-end: .3em; }   /* "1." in a heading: plain blue type */
.post-prose a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.post-prose a:hover { text-decoration-thickness: 2px; }
.post-prose a[href^="#_ftn"] { font-size: .72em; font-weight: 700; vertical-align: super; line-height: 0; text-decoration: none; padding-inline: 1px; scroll-margin-top: 120px; }
.post-prose .fn { font-size: .8em; line-height: 1.75; color: var(--ink-3); overflow-wrap: anywhere; scroll-margin-top: 120px; }
.post-prose > :not(.fn) + .fn { margin-block-start: 2.6em; padding-block-start: 1.5em; border-block-start: 1px solid rgba(10, 31, 68, .14); }
.post-prose .fn a[href^="#_ftnref"] { font-size: 1em; vertical-align: baseline; margin-inline-end: .3em; }
.post-prose ul, .post-prose ol { padding-inline-start: 1.4em; }
.post-prose li + li { margin-block-start: .35em; }
.post-prose li::marker { color: var(--blue); }
.post-prose .bullet { padding-inline-start: 1.1em; text-indent: -1.1em; }
.post-prose blockquote {
  margin-inline: 0; padding: 16px 22px; border-radius: var(--r-sm); border-inline-start: 3px solid var(--blue);
  font-size: 1.06em; color: var(--ink); background: rgba(232, 240, 255, .6);
}
.pdiv { border: 0; height: 1px; margin-block: 2.4em; background: rgba(10, 31, 68, .14); }

/* figures: the picture at its own size (low-res originals stay crisp) in a plain hairline-rimmed frame */
.post-prose > .pf { margin-block: 2.1em; }
.pf-mat {
  display: grid; place-items: center; overflow: hidden;
  padding: clamp(12px, 2.4vw, 26px); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px rgba(10, 31, 68, .1);
}
.pf-img { width: min(100%, var(--w, 100%), calc(500px * var(--ar, 1))); height: auto; border-radius: 10px; }
.pf figcaption { margin-block-start: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); text-align: center; }

/* ---------------------------------------------------------------- end of the article: byline + share */
.post-end {
  max-width: 44rem; margin: clamp(44px, 5vw, 72px) auto 0;
  padding-block-start: clamp(22px, 2.6vw, 32px); border-block-start: 1px solid rgba(10, 31, 68, .14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
}
.pe-author { display: flex; align-items: center; gap: 14px; }
.pe-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.pe-who { display: flex; flex-direction: column; gap: 2px; }
.pe-name { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.pe-date { font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.pe-share { display: flex; align-items: center; gap: 12px; }
.pe-label { font: 700 14px/1 var(--font-body); color: var(--ink-3); }
.end-share { display: flex; flex-wrap: wrap; gap: 8px; }
.sh .i { width: 18px; height: 18px; }
.sh:hover { color: var(--blue); }
html:not(.js) [data-copy] { display: none; }
.post-copied {
  position: fixed; z-index: 70; left: 50%; bottom: 28px; translate: -50% 16px;
  padding: 12px 22px; border-radius: 999px; pointer-events: none;
  font: 700 15px/1.2 var(--font-body); color: #fff;
  background: var(--night);
  box-shadow: 0 20px 40px -14px rgba(10, 31, 68, .6);
  opacity: 0; transition: opacity .35s var(--ease), translate .5s var(--spring);
}
.post-copied:empty { padding: 0; }
.post-copied.on { opacity: 1; translate: -50% 0; }

/* ---------------------------------------------------------------- previous / next: clean cards */
.post-pn { padding-block-start: clamp(40px, 5vw, 72px); }
.pn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.pn {
  --tint-a: rgba(255, 255, 255, .76); --tint-b: rgba(255, 255, 255, .6);
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 12px; border-radius: var(--r-lg); color: inherit; text-decoration: none;
  transition: transform .5s var(--spring), opacity 1s var(--ease);
}
.pn:focus-visible { outline-offset: 3px; }
.pn:hover { transform: translateY(-3px); }
.pn--next { justify-content: flex-end; text-align: end; }
.pn-thumb.cb { flex: none; width: 104px; border-radius: calc(var(--r-lg) - 10px); box-shadow: 0 0 0 1px rgba(10, 31, 68, .08); }
.pn-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; padding-inline: 4px; }
.pn-label { font: 500 13px/1.2 var(--font-body); color: var(--blue); }
.pn-title { font: 900 17px/1.35 var(--font-display); color: var(--ink); text-wrap: balance; } /* never clamped: a cut title ("… ו-ROI…") hides content */
.pn-date { font-size: 13.5px; line-height: 1.3; color: var(--ink-3); }
.pn-go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--blue); }
.pn-go .i { width: 22px; height: 22px; transition: translate .4s var(--spring); }
.pn-icon { flex: none; display: grid; place-items: center; width: 104px; aspect-ratio: 4 / 3; border-radius: calc(var(--r-lg) - 10px); color: #fff; background: var(--night); }
.pn-icon .i { width: 26px; height: 26px; }
.i-back { transform: scaleX(-1); }
[dir="rtl"] .i-back { transform: none; }
.pn--prev:hover .pn-go .i { translate: -3px 0; }
.pn--next:hover .pn-go .i { translate: 3px 0; }
[dir="rtl"] .pn--prev:hover .pn-go .i { translate: 3px 0; }
[dir="rtl"] .pn--next:hover .pn-go .i { translate: -3px 0; }

/* ---------------------------------------------------------------- recent posts */
.post-recent { padding-block: clamp(56px, 7vw, 104px) var(--sec-y); }
.pr-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin-block-end: clamp(18px, 2.4vw, 30px); padding-block-end: 14px; border-block-end: 1px solid rgba(10, 31, 68, .14);
}
.pr-title { font: 900 clamp(24px, 2.4vw, 34px)/1.15 var(--font-display); letter-spacing: -.012em; color: var(--ink); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1179px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-sheet { grid-column: 1; width: 100%; max-width: 56rem; margin-inline: auto; }
  .post-rail { display: none; }
}
@media (max-width: 900px) {
  .post-hero .page-hero-window { min-height: 0; }
  .post-plate { width: calc(min(100%, 380px, 260px * var(--ar)) + 16px); }
  /* prev / next stack as full-width rows (half-width cards left a ~180px column for the title);
     both rows read the same way: picture, copy, then the arrow on the side it points to */
  .pn-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pn--next { justify-content: flex-start; text-align: start; }
  .pn--next .pn-thumb, .pn--next .pn-icon { order: 1; }
  .pn--next .pn-copy { order: 2; }
  .pn--next .pn-go { order: 3; }
}
@media (max-width: 640px) {
  .post-hero .page-hero-inner { padding-block-end: calc(var(--lap) + 28px); gap: 22px; }
  .post-hero .crumbs { font-size: 13.5px; }
  .post-hero .crumbs li:last-child { max-width: 42vw; }
  .post-hero .page-title { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.2; }
  .post-hero .page-lead { margin-block-start: 18px; font-size: 14px; }
  /* the author takes its own line; date · read time share the second (no separator opening a line) */
  .post-byline { gap: 10px 0; }
  .pm-author { flex-basis: 100%; }
  .pm-author + .pm-i::before { display: none; }
  .post-byline > * + *::before { margin-inline: 12px; }
  .pm-av { width: 32px; height: 32px; }
  .post-plate { width: calc(min(100%, 220px * var(--ar)) + 12px); padding: 6px; border-radius: 20px; }
  .post-plate-in { border-radius: 15px; }
  .post-layout { padding-inline: 10px; }
  .post-sheet { border-radius: 26px; padding: 28px 18px 24px; }
  .post-prose { font-size: 17.5px; line-height: 1.85; }
  .post-prose > .lead { font-size: 1.08em; }
  .pf-mat { padding: 12px; border-radius: 16px; }
  .post-end { flex-direction: column; align-items: flex-start; }
  .pe-share { flex-wrap: wrap; }
  .pn { padding: 10px; border-radius: 22px; }
  .pn-thumb.cb, .pn-icon { width: 88px; }
  .pr-head .pr-back, .pr-head .pr-back .glass-button { display: block; width: 100%; }
  .pr-head .pr-back .glass-button-text { justify-content: center; }
}
@media print {
  .post-rail, .post-progress, .post-pn, .post-recent, .pe-share { display: none !important; }
  .post-hero .page-hero-window { background: none; box-shadow: none; }
  .post-hero .page-title, .post-hero .page-lead, .post-hero .crumbs { color: #000; text-shadow: none; }
}