/* למענך, home page. Loaded after site.css and only on the home page (index.php); every rule is scoped by an hm- class, so the other pages keep their styles.
   Idea: indigo is the evening light, gold is the thread that connects people (the logo's three figures, the "bridge" sentence), paper is the page of an open book.
   The one bold moment is the opening: a photograph that dissolves into the indigo, a very large serif headline, and the gold bridge laid across the seam. */

body.home {
  --hm-r: 22px;
  --hm-ease: cubic-bezier(.2, .7, .2, 1);
  --hm-fade: to left;        /* the direction the hero photo dissolves in, toward the text (right to left in Hebrew) */
  --hm-night: #1f1448;
}
html[dir="ltr"] body.home { --hm-fade: to right; }

/* focus on dark surfaces */
.hm-hero :focus-visible, .hm-night :focus-visible, .hm-donate :focus-visible, .hm-way-give :focus-visible { outline-color: var(--gold); }
.hm-bridge :focus-visible { outline-color: var(--indigo-deep); }

/* ---------- shared pieces ---------- */
.hm-section { padding-block: clamp(64px, 9vw, 124px); }
.hm-paper { background: var(--paper); }
.hm-lav { background: var(--lav); }
.hm-night { background: linear-gradient(180deg, var(--indigo-deep) 0%, var(--hm-night) 100%); color: #fff; }
.hm-h2 { margin: 0 0 .45em; font-size: clamp(2.05rem, 1.2rem + 3.4vw, 3.7rem); line-height: 1.07; }
.hm-lead { max-width: 54ch; margin: 0 0 1.4em; color: var(--muted); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); line-height: 1.75; text-wrap: pretty; }
.hm-head { max-width: 46rem; margin-bottom: clamp(32px, 4.5vw, 60px); }
.hm-head .hm-lead { margin-bottom: 0; }
.hm-more { margin: clamp(28px, 4vw, 48px) 0 0; }
.hm-night .hm-h2, .hm-night h3, .hm-donate .hm-h2 { color: #fff; }
.hm-night .text-link, .hm-donate .text-link { color: #fff; text-decoration-color: var(--gold); }
.hm-night .text-link:hover { text-decoration-color: #fff; }

/* the small drawn marks: a round plate, the outline in indigo, the one detail in gold */
.hm-section .ico-badge { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(72, 48, 136, .16); }
.hm-section .ico-badge .ico { width: 1.9rem; height: 1.9rem; }
.hm-night .ico-badge { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 216, 0, .5); color: #fff; }
.hm-night .ico .g { stroke: #fff; }

/* ---------- opening ---------- */
.hm-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(168deg, var(--indigo) 0%, var(--indigo-deep) 86%); color: #fff; }
.hm-hero-photo { order: -1; position: relative; height: clamp(240px, 64vw, 400px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 100%); mask-image: linear-gradient(to bottom, #000 56%, transparent 100%); }
.hm-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 88% 34%; scale: 1.1; }
.hm-hero-text { position: relative; z-index: 1; margin-top: calc(-1 * clamp(18px, 6vw, 44px)); padding: 0 var(--gutter) clamp(92px, 24vw, 124px); }
.hm-hero h1 { max-width: 13em; margin: 0 0 .38em; color: #fff; font-size: clamp(2.5rem, min(1.35rem + 5.6vw, 9.8vh + .7rem), 6.1rem); line-height: 1.02; text-wrap: balance; }
.hm-hero-sub { max-width: 44ch; margin: 0; color: #e6dffb; font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); line-height: 1.7; text-wrap: pretty; }
.hm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(1.6rem, 3vw, 2.3rem); }
.hm-hero .btn { min-height: 52px; padding-inline: 1.7em; border-radius: 999px; }
@media (max-width: 600px) { .hm-hero-actions .btn { flex: 1 1 100%; } }

@media (min-width: 960px) {
  .hm-hero { min-height: clamp(600px, 84vh, 800px); justify-content: center; }
  .hm-hero-photo {
    position: absolute; inset-block: 0; inset-inline-end: 0; order: 0; width: 57%; height: auto;
    -webkit-mask-image: linear-gradient(var(--hm-fade), transparent 0, rgba(0, 0, 0, .6) 13%, #000 31%);
    mask-image: linear-gradient(var(--hm-fade), transparent 0, rgba(0, 0, 0, .6) 13%, #000 31%);
  }
  .hm-hero-photo img { object-position: 92% 36%; }
  html[dir="ltr"] .hm-hero-photo img { object-position: 42% 36%; }   /* French reads left to right, so the photograph sits on the right and its child should stay clear of the dissolving edge */
  .hm-hero-text { margin-top: 0; width: 52%; padding: clamp(44px, 5.4vw, 84px) 0 clamp(112px, 10.5vw, 152px); padding-inline-start: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
}

/* the gold bridge, laid across the seam between the photograph and the page */
.hm-bridge { position: relative; z-index: 2; width: min(var(--max), 100% - 2 * var(--gutter)); margin: calc(-1 * clamp(36px, 5vw, 56px)) auto 0; padding: clamp(24px, 3.2vw, 40px) clamp(22px, 4vw, 64px); background: var(--gold); color: var(--indigo-deep); text-align: center; box-shadow: 0 34px 50px -30px rgba(18, 9, 48, .75); }
.hm-bridge::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(43, 28, 89, .3); pointer-events: none; }
.hm-bridge p { margin: 0; font: 700 clamp(1.5rem, 1.05rem + 2vw, 2.7rem)/1.2 var(--serif); text-wrap: balance; }

/* the one orchestrated moment on load: the photograph settles, then the bridge is drawn across */
@media (prefers-reduced-motion: no-preference) {
  .hm-hero-photo img { animation: hm-settle 1.8s var(--hm-ease) backwards; }
  .hm-bridge { animation: hm-bridge 1s .35s var(--hm-ease) backwards; }
  @keyframes hm-settle { from { scale: 1.2; } }
  @keyframes hm-bridge { from { clip-path: inset(-60px -60px -90px 100%); } to { clip-path: inset(-60px -60px -90px -60px); } }
  html[dir="ltr"] .hm-bridge { animation-name: hm-bridge-ltr; }
  @keyframes hm-bridge-ltr { from { clip-path: inset(-60px 100% -90px -60px); } to { clip-path: inset(-60px -60px -90px -60px); } }
}

/* the one-tap jar, for a signed-in visitor (filled in by jar.js) */
body.home .jar-home { padding-top: clamp(28px, 4vw, 44px); background: var(--paper); border: 0; }
body.home .jar-home-inner { padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid rgba(72, 48, 136, .14); border-top: 5px solid var(--gold); border-radius: var(--hm-r); box-shadow: 0 28px 44px -34px rgba(43, 28, 89, .5); }
body.home .jar-home[hidden] + .hm-ways { padding-top: clamp(44px, 6vw, 84px); }

/* ---------- three ways to continue ---------- */
.hm-ways { padding-top: clamp(52px, 7vw, 96px); }
.hm-ways-grid { display: grid; gap: 18px; }
.hm-way { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); background: #fff; border: 1px solid rgba(72, 48, 136, .14); border-radius: var(--hm-r); transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease), border-color .3s; }
.hm-way::before { content: ''; position: absolute; top: -1px; inset-inline-start: clamp(26px, 3vw, 38px); width: 58px; height: 6px; border-radius: 0 0 5px 5px; background: var(--gold); }
.hm-way .ico-badge { background: var(--lav); box-shadow: none; }
.hm-way h2 { margin: 1.1rem 0 .4em; font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.hm-way p { color: var(--muted); }
.hm-way-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: auto; padding-top: .8rem; }
.hm-way-give { border-color: transparent; background: linear-gradient(162deg, var(--indigo) 0%, var(--indigo-deep) 100%); color: #fff; }
.hm-way-give h2 { color: #fff; }
.hm-way-give p { color: #e6dffb; }
.hm-way-give .ico-badge { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 216, 0, .5); }
.hm-way-give .ico .g { stroke: #fff; }
@media (min-width: 900px) { .hm-ways-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (hover: hover) {
  .hm-way:hover { transform: translateY(-5px); border-color: rgba(72, 48, 136, .38); box-shadow: 0 30px 46px -30px rgba(43, 28, 89, .5); }
  .hm-way-give:hover { border-color: transparent; }
}

/* ---------- about: text, and a photograph that runs off the edge of the page ---------- */
.hm-about { overflow: hidden; overflow: clip; }   /* the photograph runs past the page's text column to the edge of the screen; nothing may add a sideways scroll */
.hm-about-grid { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hm-about .hm-h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.3rem); }
.hm-about-photo { position: relative; margin: 0; height: clamp(260px, 62vw, 420px); overflow: hidden; border-radius: 16px; }
.hm-about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 40%; scale: 1.14; }
@media (min-width: 900px) {
  .hm-about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .hm-about-photo { height: clamp(440px, 46vw, 600px); border-radius: 0; border-start-start-radius: 22px; border-end-start-radius: 22px; margin-inline-end: calc(-1 * (100vw - min(var(--max), 100vw - 2 * var(--gutter))) / 2); }
}

/* ---------- programmes ---------- */
.hm-prog-grid { display: grid; gap: clamp(36px, 4vw, 56px); }
.hm-prog-frame { overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.hm-prog-frame img { width: 100%; height: clamp(210px, 52vw, 340px); object-fit: cover; transition: scale .8s var(--hm-ease); }
.hm-prog-body { padding-top: 1.4rem; }
.hm-prog-body .ico-badge { margin-bottom: .9rem; }
.hm-prog h3 { margin: 0 0 .3em; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; }
.hm-prog p { max-width: 46ch; color: #dcd4f3; }
.hm-prog-rest { display: grid; border-top: 1px solid rgba(255, 255, 255, .22); }
.hm-prog-rest article { padding: 1.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.hm-prog-rest .ico-badge { width: 3rem; height: 3rem; margin-bottom: .8rem; }
.hm-prog-rest .ico-badge .ico { width: 1.6rem; height: 1.6rem; }
.hm-prog-rest h3 { margin: 0 0 .25em; font-size: 1.6rem; }
.hm-prog-rest p { margin: 0 0 .7em; color: #dcd4f3; }
@media (min-width: 900px) {
  .hm-prog-grid { grid-template-columns: repeat(12, 1fr); }
  .hm-prog-a { grid-column: span 7; }
  .hm-prog-b { grid-column: span 5; }
  .hm-prog-frame img { height: clamp(260px, 26vw, 360px); }
  .hm-prog-rest { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .hm-prog-rest article { padding: 2rem 2rem 1.2rem; border-bottom: 0; border-inline-start: 1px solid rgba(255, 255, 255, .14); }
  .hm-prog-rest article:first-child { padding-inline-start: 0; border-inline-start: 0; }
}
@media (hover: hover) { .hm-prog:hover .hm-prog-frame img { scale: 1.05; } }

/* ---------- how we work: three steps, a real sequence, joined by the gold thread ---------- */
.hm-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.hm-steps li { position: relative; counter-increment: step; display: grid; grid-template-columns: 4.2rem 1fr; column-gap: 1.3rem; padding-bottom: 2.4rem; }
.hm-steps li:last-child { padding-bottom: 0; }
.hm-steps li::before { content: counter(step, hebrew); grid-row: 1 / span 2; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--indigo); color: var(--gold); font: 700 2rem/1 var(--serif); box-shadow: 0 0 0 6px var(--paper); }
.hm-lav .hm-steps li::before { box-shadow: 0 0 0 6px var(--lav); }
.hm-steps li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: calc(2.1rem - 2px); top: calc(4.2rem + 6px); bottom: 6px; width: 4px; border-radius: 2px; background: var(--gold); transform-origin: top; }
.hm-steps h3 { margin: .2em 0 .2em; font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9rem); }
.hm-steps p { margin: 0; color: var(--muted); }
@media (min-width: 800px) {
  .hm-steps { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
  .hm-steps li { display: block; padding-bottom: 0; }
  .hm-steps li::before { margin-bottom: 1.4rem; }
  .hm-steps li:not(:last-child)::after { inset-inline-start: calc(4.2rem + 18px); top: calc(2.1rem - 2px); bottom: auto; width: calc(100% + 3rem - 4.2rem - 36px); height: 4px; transform-origin: left; }
  html[dir="rtl"] .hm-steps li:not(:last-child)::after { transform-origin: right; }
}
html[lang="fr"] .hm-steps li::before { content: counter(step); }
/* drawn once, when the section scrolls into view (home.js adds the classes; without it everything is simply there) */
@media (prefers-reduced-motion: no-preference) {
  .hm-steps.is-armed li::before { transform: scale(.55); opacity: 0; }
  .hm-steps.is-armed li::after { transform: scaleY(0); }
  @media (min-width: 800px) { .hm-steps.is-armed li::after { transform: scaleX(0); } }
  .hm-steps.is-armed.is-drawn li::before { transform: none; opacity: 1; transition: transform .5s var(--hm-ease), opacity .4s; transition-delay: calc((var(--i) - 1) * .55s); }
  .hm-steps.is-armed.is-drawn li::after { transform: none; transition: transform .55s var(--hm-ease); transition-delay: calc((var(--i) - 1) * .55s + .3s); }
}

/* ---------- articles ---------- */
.hm-edu-grid { display: grid; gap: 20px; }
.hm-card { display: flex; flex-direction: column; padding: clamp(24px, 2.8vw, 34px); background: #fff; border: 1px solid rgba(72, 48, 136, .13); border-radius: 18px; transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease), border-color .3s; }
.hm-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.hm-card-top .ico-badge { width: 2.7rem; height: 2.7rem; }
.hm-card-top .ico-badge .ico { width: 1.5rem; height: 1.5rem; }
.hm-card-top .tag { margin: 0; }
.hm-card h3 { margin: 0 0 .4em; font-size: clamp(1.45rem, 1.2rem + .6vw, 1.75rem); line-height: 1.18; }
.hm-card h3 a { color: inherit; text-decoration: none; }
.hm-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.hm-card p { color: var(--muted); }
.hm-card .text-link { margin-top: auto; align-self: flex-start; }
@media (min-width: 900px) { .hm-edu-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (hover: hover) { .hm-card:hover { transform: translateY(-4px); border-color: rgba(72, 48, 136, .35); box-shadow: 0 26px 40px -30px rgba(43, 28, 89, .45); } }

/* ---------- updates ---------- */
.hm-updates { display: grid; }
.hm-update { padding: 1.9rem 0; border-top: 1px solid rgba(72, 48, 136, .2); }
.hm-update:first-child { border-top: 3px solid var(--indigo); }
.hm-update time { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .98rem; }
.hm-update h3 { margin: 0 0 .3em; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); }
.hm-update h3 a { color: inherit; text-decoration: none; }
.hm-update h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.hm-update p { max-width: 62ch; white-space: pre-line; }
@media (min-width: 900px) {
  .hm-update { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; }
  .hm-update time { padding-top: .6rem; }
}

/* ---------- what is said about the connection ---------- */
.hm-quote-grid { display: grid; gap: clamp(32px, 4.5vw, 64px); }
.hm-quotes blockquote { margin: 0; }
.hm-quotes cite { display: block; margin-top: 1rem; color: var(--muted); font: 400 1rem var(--sans); font-style: normal; }
.hm-quote-big { position: relative; padding-top: clamp(64px, 8vw, 92px); }
.hm-quote-big::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: clamp(48px, 6vw, 72px); height: clamp(36px, 4.5vw, 54px); background: var(--indigo); -webkit-mask: url('/assets/img/quote.svg') no-repeat center / contain; mask: url('/assets/img/quote.svg') no-repeat center / contain; }
.hm-quote-big p { margin: 0; font: 500 clamp(1.7rem, 1.1rem + 2.3vw, 2.8rem)/1.45 var(--serif); color: var(--indigo-deep); text-wrap: pretty; }
.hm-quote-stack { display: grid; gap: 2.2rem; align-content: start; }
.hm-quote-stack blockquote { padding: 1.6rem clamp(1.4rem, 2vw, 2rem); background: #fff; border-radius: 18px; border-inline-start: 5px solid var(--gold); box-shadow: 0 24px 40px -34px rgba(43, 28, 89, .5); }
.hm-quote-stack p { margin: 0; font: 500 1.25rem/1.75 var(--serif); }
@media (min-width: 960px) { .hm-quote-grid { grid-template-columns: 7fr 5fr; align-items: start; } }

/* ---------- donation ---------- */
.hm-donate { position: relative; overflow: hidden; scroll-margin-top: 84px; background: linear-gradient(176deg, var(--indigo) 0%, var(--indigo-deep) 100%); border-bottom: 6px solid var(--gold); color: #fff; }   /* the gold line is also the floor that the two figures stand on */
.hm-donate-grid { display: grid; gap: clamp(30px, 5vw, 72px); }
.hm-donate-intro { padding-top: clamp(64px, 9vw, 116px); }
.hm-donate-intro .hm-lead { color: #e6dffb; }
.hm-donate-links { margin-top: 1.6rem; }
.hm-donate .btn { border-radius: 999px; padding-inline: 1.8em; }
.hm-duo { display: none; width: min(100%, 470px); height: auto; }
.hm-donate-card-wrap { padding-bottom: clamp(56px, 8vw, 112px); }
.hm-donate-card { padding: clamp(22px, 3.2vw, 40px); border-radius: var(--hm-r); border-top: 6px solid var(--gold); background: #fff; color: var(--ink); box-shadow: 0 44px 80px -44px rgba(0, 0, 0, .75); }
.hm-donate-card h3 { color: var(--indigo-deep); }
@media (min-width: 960px) {
  .hm-donate-grid { grid-template-columns: 5fr 6fr; align-items: stretch; }
  .hm-donate-intro { display: flex; flex-direction: column; }
  .hm-duo { display: block; margin-top: auto; padding-top: 2.4rem; }
  .hm-donate-card-wrap { padding-top: clamp(64px, 9vw, 116px); }
}

/* ---------- French: longer words, so a calmer scale ---------- */
html[lang="fr"] .hm-hero h1 { font-size: clamp(2.05rem, 1.1rem + 4.3vw, 4.7rem); line-height: 1.06; }
html[lang="fr"] .hm-hero-sub { max-width: 52ch; }
html[lang="fr"] .hm-h2 { font-size: clamp(1.85rem, 1.1rem + 2.7vw, 3.1rem); }
html[lang="fr"] .hm-about .hm-h2 { font-size: clamp(1.95rem, 1.1rem + 3vw, 3.4rem); }
html[lang="fr"] .hm-bridge p { font-size: clamp(1.3rem, 1rem + 1.5vw, 2.15rem); }
html[lang="fr"] .hm-quote-big p { font-size: clamp(1.45rem, 1rem + 1.7vw, 2.2rem); }
html[lang="fr"] .hm-way h2 { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.75rem); }
html[lang="fr"] .hm-prog h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.15rem); }