/* Home page. Measurements follow the live page at 1440px wide. */

.bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}

/* Hero */
.hero { position: relative; height: 660px; overflow: hidden; background: #3b2a12; }
.hero__content { position: relative; z-index: 1; padding-top: 264px; text-align: center; }
.hero__title {
  font: 700 56px/76px var(--f-display); color: var(--navy);
}
.hero__subtitle {
  width: 580px; max-width: calc(100% - 32px); margin: 25px auto 0;
  font: italic 400 30px/33px var(--f-display); letter-spacing: -1.2px; color: #f5f5f5;
}

/* Navy text bands */
.band { background: var(--navy); color: var(--mist); text-align: center; }
.band p { font: 400 20px/32px var(--f-serif); letter-spacing: -0.8px; margin: 0 auto; }
.band--intro { height: 191px; padding-top: 65px; }
.band--intro p { width: 680px; max-width: calc(100% - 32px); }
.band--quote { height: 174px; padding-top: 56px; }
.band--quote blockquote { margin: 0; }
.band--quote p { width: 690px; max-width: calc(100% - 32px); }
.band--quote cite { font: 400 13px/32px var(--f-serif); font-style: normal; margin-left: 14px; }

/* Egypt / Sinai / Jerusalem columns */
.trio {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--page); margin: 0 auto;
  text-align: center;
}
.trio--short { height: 339px; padding-top: 53px; }
.trio--long { padding-top: 23px; height: 840px; grid-template-rows: auto 1fr; }
.trio__col { display: flex; flex-direction: column; align-items: center; }
.trio__col p {
  width: 325px; max-width: calc(100% - 24px);
  font: 400 14px/22.4px var(--f-sans); color: var(--navy);
}
.trio--short .trio__col:nth-child(2) p { width: 310px; }
.trio--long .trio__col:nth-child(2) p { width: 310px; }
.trio__col--wide p { width: 310px; }
.trio__title {
  position: relative; width: 183px; padding-bottom: 0; margin-bottom: 32px;
  font: 700 60px/60px var(--f-display); letter-spacing: -3px; color: var(--navy);
  border-bottom: 1px solid var(--gold);
  height: 77px; padding-top: 10px;
}
.trio__title--narrow { width: 287px; height: 137px; padding: 10px 68px 0; word-break: break-all; }
.rtl .trio__title--narrow { height: 77px; word-break: normal; } /* "القدس" / "ירושלים" fit on one line */

.pillars {
  grid-column: 1 / -1; align-self: end;
  display: flex; justify-content: center; gap: 17px;
  margin: 0 40px 53px; padding: 15px 0 23px; list-style: none;
  background: var(--navy);
}
.trio--long .trio__col p { margin-bottom: 0; }
.pillars li { position: relative; width: 293px; height: 374px; overflow: hidden; }
.pillars img { width: 100%; height: 100%; object-fit: cover; }
.pillars span {
  position: absolute; left: 12px; bottom: 9px;
  font: 700 20px/26px var(--f-display); letter-spacing: -0.2px; color: var(--cream);
}

/* Film */
.film {
  display: flex; justify-content: center;
  height: 853px; background: var(--navy);
}
.film__text {
  width: 752px; display: flex; flex-direction: column; align-items: center;
  padding-top: 153px; text-align: center;
}
.film__text p {
  width: 400px; font: 400 28px/39.2px var(--f-serif); letter-spacing: -1.12px; color: var(--mist);
  margin-top: 56px;
}
.film__watch { width: 142px; height: 42px; margin-top: 47px; border-radius: 0; color: var(--cream); background: var(--navy); }
.film__watch:hover { background: var(--cream); color: var(--navy); }
.film__media { position: relative; width: 400px; height: 847px; background: #000; flex: none; }
.film__media video { width: 100%; height: 100%; object-fit: cover; }
.film__spacer { flex: 1; }
.play-btn {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border: 2px solid #fff; border-radius: 50%; background: rgba(0,0,0,.15); cursor: pointer;
}
.play-btn::after {
  content: ''; position: absolute; left: 19px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #fff;
}
.film__media.is-playing .play-btn { display: none; }

/* Moses Foundation */
.foundation {
  position: relative; max-width: var(--page); height: 315px; margin: 0 auto;
}
.foundation__title {
  position: absolute; left: 225px; top: 79px;
  font: 700 44px/44px var(--f-display); letter-spacing: -2.2px; color: var(--navy);
}
.foundation__text { position: absolute; left: 784px; top: 50px; width: 616px; }
.foundation__text p { font: 300 16px/24px var(--f-body); letter-spacing: -0.16px; color: var(--navy); }
.foundation__text p + p { margin-top: 24px; }
.foundation__actions { position: absolute; left: 1005px; top: 249px; display: flex; gap: 11px; }
.foundation__actions .btn { width: 126px; padding: 0; }
.foundation__actions .btn--light { width: 127px; }

.btn--raised { box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.btn--slate { background: #3b3f52; }
span.btn { cursor: default; }
span.btn:hover { background: var(--navy); }
span.btn--slate:hover { background: #3b3f52; }

/* Bio */
.bio {
  display: flex; gap: 42px; padding: 31px 0 0 265px;
  height: 401px; background: var(--navy);
}
.bio__photo { width: 251px; height: 338px; object-fit: cover; flex: none; }
.bio__text { width: 572px; padding-top: 0; }
.bio__text p { font: 400 14px/18.2px var(--f-sans); color: var(--cream); }
.bio__text p + p { margin-top: 18px; }
.bio__text a { color: inherit; }
.bio__actions { display: flex; align-items: center; gap: 9px; margin: 25px 0 0 148px; }
.bio__text .bio__linkedin { display: block; color: #0a66c2; width: 52px; height: 32px; padding: 3px 13px; }
.bio__actions .btn { width: 136px; padding: 0; }

/* Marquee */
.marquee { position: relative; height: 248px; overflow: hidden; background: #6b5d44; }
.marquee__track {
  position: absolute; z-index: 1; top: 68px; left: 0;
  display: flex; white-space: nowrap;
  font: 700 56px/67.2px var(--f-display); color: var(--cream);
  animation: marquee 30s linear infinite;
}
.marquee__track span { padding-right: 120px; }
@keyframes marquee { from { transform: translateX(-89px); } to { transform: translateX(calc(-89px - 33.333%)); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.marquee__btn { position: absolute; z-index: 1; left: 395px; top: 182px; width: 136px; padding: 0; }

/* Blog teasers */
.reads { position: relative; overflow: hidden; height: 746px; padding-top: 70px; background: var(--navy); text-align: center; }
.reads__title {
  position: absolute; left: 629px; top: 37px;
  font: 300 24px/36px var(--f-body); color: var(--navy);
}
.reads__grid { display: flex; justify-content: center; gap: 24px; }
.read-card { width: 411px; height: 574px; overflow: hidden; border: 1px solid var(--gold); text-align: left; }
.read-card a { display: block; height: 100%; text-decoration: none; color: var(--cream); }
.read-card img { width: 100%; height: 307px; object-fit: cover; }
.read-card__body { height: 242px; overflow: hidden; padding: 37px 24px 0; }
.read-card__meta { font: 300 12px/15px var(--f-body); }
.read-card__title { margin: 23px 0 11px; font: 400 28px/39.2px var(--f-serif); }
.read-card__excerpt {
  font: 300 16px/24px var(--f-body);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.read-card:hover .read-card__title { text-decoration: underline; text-underline-offset: 4px; }
.reads__btn { margin-top: 28px; width: 136px; padding: 0; }

/* Closing */
.closing { position: relative; height: 530px; overflow: hidden; background: #3b2a12; text-align: center; }
.closing__content { position: relative; z-index: 1; padding-top: 218px; }
.closing__text { font: italic 400 30px/33px var(--f-display); letter-spacing: -1.2px; color: #f5f5f5; }
.closing__content .btn { margin-top: 30px; width: 126px; padding: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1240px) {
  .foundation { height: auto; padding: 60px 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px 48px; }
  .foundation__title, .foundation__text, .foundation__actions { position: static; width: auto; }
  .foundation__actions { grid-column: 2; }
  .bio { padding-left: 32px; justify-content: center; height: auto; padding-bottom: 32px; }
  .reads__grid { padding: 0 24px; }
  .read-card { flex: 1 1 0; }
  .marquee__btn { left: 32px; }
  .film__text { width: auto; flex: 1; }
  .pillars { margin-left: 16px; margin-right: 16px; }
}

/* ---------- Mobile (sizes in Wix's 320px mobile units, see site.css) ---------- */
@media (max-width: 760px) {
  .hero { height: calc(299 * var(--m)); }
  .hero__content { padding-top: calc(101 * var(--m)); }
  .hero__title { display: none; }
  .hero__subtitle {
    width: calc(215 * var(--m)); margin: 0 auto;
    font-size: calc(27 * var(--m)); line-height: calc(29.7 * var(--m)); letter-spacing: calc(-1.08 * var(--m));
  }

  .band--intro { height: calc(169 * var(--m)); padding: calc(36 * var(--m)) 0 0; }
  .band--intro p {
    width: calc(269 * var(--m));
    font-size: calc(14 * var(--m)); line-height: calc(22.4 * var(--m)); letter-spacing: calc(-0.56 * var(--m));
  }
  .band--quote { height: calc(186 * var(--m)); padding: calc(22 * var(--m)) 0 0; }
  .band--quote p {
    width: calc(280 * var(--m));
    font-size: calc(18 * var(--m)); line-height: calc(28.8 * var(--m)); letter-spacing: calc(-0.72 * var(--m));
  }
  .band--quote cite { font-size: calc(13 * var(--m)); margin-left: calc(8 * var(--m)); }

  .trio { display: block; height: auto !important; }
  .trio--short { padding: calc(34 * var(--m)) 0 calc(42 * var(--m)); }
  .trio--long { padding: calc(14 * var(--m)) 0 0; }
  .trio__col + .trio__col { margin-top: calc(26 * var(--m)); }
  .trio--long .trio__col + .trio__col { margin-top: calc(22 * var(--m)); }
  .trio__title {
    width: auto; height: auto; padding: 0 0 calc(10 * var(--m)); margin-bottom: calc(16 * var(--m));
    font-size: calc(33 * var(--m)); line-height: calc(33 * var(--m)); letter-spacing: calc(-1.65 * var(--m));
  }
  .trio--long .trio__title { margin-bottom: calc(6 * var(--m)); }
  .trio__title--narrow { width: calc(169 * var(--m)); padding: 0 calc(43 * var(--m)) calc(10 * var(--m)); }
  .trio--long .trio__title--narrow {
    width: auto; padding: 0 0 calc(10 * var(--m)); word-break: normal;
    font-size: calc(29 * var(--m)); line-height: calc(29 * var(--m)); letter-spacing: calc(-1.45 * var(--m));
  }
  .trio__col p, .trio--short .trio__col:nth-child(2) p, .trio--long .trio__col:nth-child(2) p, .trio__col--wide p {
    width: calc(280 * var(--m)); max-width: none;
    font-size: calc(14 * var(--m)); line-height: calc(22.4 * var(--m));
  }

  .film { display: block; height: auto; }
  .film__text { display: none; }
  .film__media { width: 100%; height: calc(776 * var(--m)); }

  .pillars {
    flex-direction: column; align-items: center; gap: calc(61 * var(--m));
    margin: 0; padding: calc(62 * var(--m)) 0 calc(38 * var(--m)); background: var(--cream);
  }
  .pillars li { width: calc(260 * var(--m)); height: calc(250 * var(--m)); }
  .pillars span {
    left: 0; right: 0; bottom: calc(44 * var(--m)); text-align: center;
    font-size: calc(19 * var(--m)); line-height: calc(24.7 * var(--m));
  }

  .foundation { display: block; height: calc(580 * var(--m)); padding: calc(24 * var(--m)) calc(20 * var(--m)) 0; }
  .foundation__title {
    text-align: center; font-size: calc(24 * var(--m)); line-height: calc(32 * var(--m)); letter-spacing: calc(-1.2 * var(--m));
  }
  .foundation__text { margin-top: calc(6 * var(--m)); }
  .foundation__text p { font-size: calc(16 * var(--m)); line-height: calc(24 * var(--m)); }
  .foundation__text p + p { margin-top: calc(24 * var(--m)); }
  .foundation__actions { flex-direction: column; align-items: center; gap: calc(15 * var(--m)); margin-top: calc(25 * var(--m)); }
  .foundation__actions .btn, .foundation__actions .btn--light { width: calc(130 * var(--m)); height: calc(34 * var(--m)); }

  .bio { display: block; height: calc(1036 * var(--m)); padding: calc(34 * var(--m)) calc(20 * var(--m)) 0; }
  .bio__photo { width: calc(280 * var(--m)); height: calc(323 * var(--m)); }
  .bio__text { width: auto; margin-top: calc(34 * var(--m)); }
  .bio__text p { font-size: calc(14 * var(--m)); line-height: calc(18.2 * var(--m)); }
  .bio__text p + p { margin-top: calc(18 * var(--m)); }
  .bio__actions { justify-content: center; margin: calc(23 * var(--m)) 0 0; }
  .bio__actions .btn { display: none; }

  .marquee { height: calc(296 * var(--m)); }
  .marquee__track { display: none; }
  .marquee h2.sr-only {
    position: absolute; z-index: 1; left: 50%; top: calc(40 * var(--m)); transform: translateX(-50%);
    width: calc(258 * var(--m)); height: auto; clip: auto; overflow: visible; white-space: normal;
    font: 700 calc(30 * var(--m))/calc(36 * var(--m)) var(--f-display); color: var(--cream); text-align: center;
  }
  .marquee__btn { left: 50%; top: calc(238 * var(--m)); transform: translateX(-50%); width: calc(85 * var(--m)); }

  .reads { height: calc(610 * var(--m)); padding: calc(35 * var(--m)) calc(10 * var(--m)) 0; }
  .reads__grid { flex-direction: column; gap: calc(20 * var(--m)); padding: 0; }
  .read-card { flex: none; width: 100%; height: calc(160 * var(--m)); }
  .read-card a { position: relative; }
  .read-card img { position: absolute; right: calc(13 * var(--m)); top: calc(13 * var(--m)); width: calc(60 * var(--m)); height: calc(60 * var(--m)); }
  .read-card__body { display: flex; flex-direction: column; height: auto; padding: calc(13 * var(--m)) calc(85 * var(--m)) 0 calc(13 * var(--m)); }
  .read-card__meta { order: 2; margin-top: calc(18 * var(--m)); font-size: calc(12 * var(--m)); line-height: 1.25; }
  .read-card__title { order: 1; margin: 0; font-size: calc(14 * var(--m)); line-height: calc(19.6 * var(--m)); }
  .read-card__excerpt { display: none; }
  .reads__btn { margin-top: calc(15 * var(--m)); width: calc(85 * var(--m)); }

  .closing { height: calc(318 * var(--m)); }
  .closing__content { padding-top: calc(81 * var(--m)); }
  .closing__text {
    width: calc(200 * var(--m)); margin: 0 auto;
    font-size: calc(27 * var(--m)); line-height: calc(29.7 * var(--m)); letter-spacing: calc(-1.08 * var(--m));
  }
  .closing__content .btn { margin-top: calc(25 * var(--m)); width: calc(85 * var(--m)); }
}