/* =========================================================
   בן שאנן · "הרצאה" — lecture landing page
   Same warm-paper design line as the book page (book.css).
   Reuses .hero.hero--banner, .about-after-eyebrow, .about-lead,
   .ph-list/.ph-row, .field and .btn-submit from styles.css.
   ========================================================= */
:root {
  --lec-sand:  #f2ebdd;   /* warm paper */
  --lec-cream: #faf6ef;   /* lighter cream */
  --lec-line:  #e4dac7;   /* warm hairline */
  --lec-gold:  #b0986c;   /* warm gold-taupe accent */
}

body.lecture { background: var(--lec-cream); }

/* =========================================================
   HERO — full-bleed banner, dark copy lifted off a warm scrim
   ========================================================= */
.lec-hero .hero-banner-img { object-position: 50% 34%; }
.lec-hero.hero--banner .hero-overlay {
  background:
    linear-gradient(to right, rgba(247,242,233,.92) 0%, rgba(247,242,233,.46) 42%, rgba(247,242,233,0) 72%),
    linear-gradient(to bottom, rgba(247,242,233,.55) 0%, rgba(247,242,233,0) 26%);
}
.lec-hero .hero-eyebrow { color: var(--sketch-mid); }
.lec-hero .hero-copy-art {
  background:
    radial-gradient(116% 96% at 32% 42%, rgba(255,250,242,.86) 0%, rgba(250,244,234,.50) 42%, rgba(250,244,234,0) 76%);
}
@media (min-width: 761px) {
  .lec-hero .hero-copy { max-width: min(92vw, 600px); }
}
@media (max-width: 760px) {
  /* portrait hero: subject sits lower, copy anchored to the top */
  .lec-hero.hero--banner { align-items: flex-start; }
  .lec-hero.hero--banner .hero-content { padding-top: clamp(104px, 17vh, 162px); padding-bottom: 0; }
  .lec-hero .hero-banner-img { object-position: 63% 24%; }
  .lec-hero.hero--banner .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(247,242,233,.96) 0%, rgba(247,242,233,.80) 22%,
      rgba(247,242,233,.34) 42%, rgba(247,242,233,0) 60%);
  }
}

/* =========================================================
   META — a slim strip of lecture facts under the hero
   ========================================================= */
.lec-meta { background: var(--lec-cream); border-bottom: 1px solid var(--lec-line); }
.lec-meta-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(28px, 3.4vw, 46px);
}
.lec-meta-item { text-align: center; }
.lec-meta-k {
  display: block;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sketch-mid); margin-bottom: 9px;
}
.lec-meta-v {
  display: block;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-weight: 400; color: var(--ink);
}
@media (max-width: 620px) {
  .lec-meta-inner { grid-template-columns: 1fr; gap: 22px; text-align: center; }
}

/* =========================================================
   FEATURE QUOTE — the opening "90%" statement, prominent
   ========================================================= */
.lec-quote { background: var(--lec-sand); padding-block: clamp(64px, 9vw, 130px); }
.lec-quote-inner { max-width: 1000px; margin-inline: auto; text-align: center; }
.lec-quote-text {
  font-size: clamp(1.5rem, 3.3vw, 2.75rem);
  font-weight: 200; line-height: 1.4; letter-spacing: -.015em; color: var(--ink);
}
.lec-quote-text em { font-style: normal; color: var(--sketch-ink); font-weight: 300; }
.lec-quote-num {
  color: var(--lec-gold); font-weight: 400; font-size: 1.14em;
  letter-spacing: .01em; direction: ltr; unicode-bidi: isolate;
}

/* =========================================================
   STORY — the personal narrative behind the lecture
   ========================================================= */
.lec-story { background: var(--lec-cream); padding-block: clamp(72px, 10vw, 150px); }
.lec-story-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 96px); align-items: center;
}
.lec-story-copy .about-lead { margin: clamp(16px, 2.2vw, 26px) 0 clamp(18px, 2.2vw, 26px); max-width: 16ch; }
.lec-p {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 300; line-height: 1.85; color: var(--text);
}
.lec-pull {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-inline-start: clamp(18px, 2vw, 26px);
  border-inline-start: 2px solid var(--lec-gold);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 300; line-height: 1.5; letter-spacing: -.01em; color: var(--ink);
}
.lec-story-media { position: relative; margin: 0; justify-self: center; width: min(100%, 440px); }
.lec-story-media img {
  width: 100%; height: auto; display: block; border-radius: 3px;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
  box-shadow: 0 44px 90px -44px rgba(42,36,28,.5), 0 8px 22px -16px rgba(42,36,28,.4);
}
.lec-story-sign {
  margin-top: 16px; text-align: center;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sketch-mid);
}
.lec-story-flow { max-width: 760px; margin: clamp(46px, 6vw, 84px) auto 0; }
.lec-story-flow .lec-p { margin-bottom: clamp(20px, 2.4vw, 28px); }
.lec-emph {
  margin: clamp(30px, 3.6vw, 46px) 0 clamp(16px, 2vw, 22px);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 300; line-height: 1.34; letter-spacing: -.015em; color: var(--ink);
}
.lec-list {
  list-style: none; margin: clamp(6px, 1vw, 12px) 0 clamp(24px, 3vw, 36px);
  display: grid; gap: clamp(8px, 1vw, 12px);
}
.lec-list li {
  position: relative; padding-inline-start: 26px;
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 300; line-height: 1.5; color: var(--sketch-ink);
}
.lec-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: 13px; height: 1.5px; background: var(--lec-gold);
}
@media (max-width: 860px) {
  .lec-story-grid { grid-template-columns: 1fr; gap: clamp(30px, 7vw, 44px); }
  .lec-story-media { order: -1; width: min(72%, 320px); }
  .lec-story-copy .about-lead { max-width: none; }
}

/* =========================================================
   TAKEAWAYS — topics as an editorial table of contents
   ========================================================= */
.lec-inside { background: var(--lec-sand); padding-block: clamp(72px, 10vw, 156px); }
.lec-inside .about-after-head { margin-bottom: clamp(40px, 5vw, 72px); }

.lec-inside .ph-list { display: block; border-top: 1px solid var(--lec-line); }
.lec-inside .ph-row {
  display: grid;
  grid-template-columns: clamp(2.8rem, 6vw, 5.4rem) 1fr;
  align-items: center;
  column-gap: clamp(20px, 3.4vw, 56px);
  padding-block: clamp(26px, 3.2vw, 46px);
  border-inline-start: none;
  border-bottom: 1px solid var(--lec-line);
}
.lec-inside .ph-row::after { inset-block-start: auto; inset-block-end: -1px; height: 1px; }
.lec-inside .ph-row-index { font-size: clamp(2.1rem, 3.6vw, 3.3rem); }
.lec-inside .ph-row-text { margin-top: 0; }
.lec-inside .ph-row-tag { text-align: right; margin-bottom: 11px; }
.lec-inside .ph-row-name { margin-bottom: 9px; }
.lec-inside .ph-row-desc { max-width: 64ch; }

@media (max-width: 600px) {
  .lec-inside .ph-row { grid-template-columns: clamp(2.4rem, 14vw, 3.4rem) 1fr; column-gap: 20px; }
  .lec-inside .ph-row-desc { max-width: none; }
}

/* =========================================================
   CLOSING — the punchline before the CTA
   ========================================================= */
.lec-closing {
  background: var(--lec-cream); border-top: 1px solid var(--lec-line);
  padding-block: clamp(72px, 10vw, 140px);
}
.lec-closing-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.lec-closing-text {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 200; line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
}
.lec-closing-sub {
  margin-top: clamp(18px, 2.2vw, 28px); max-width: 46ch; margin-inline: auto;
  font-size: clamp(1.08rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.6; color: var(--text);
}

/* =========================================================
   CTA — leave details to book the lecture
   ========================================================= */
.lec-cta { background: var(--lec-sand); padding-block: clamp(72px, 10vw, 150px); }
.lec-cta-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.lec-cta-title {
  margin: clamp(18px, 2.2vw, 26px) 0 14px;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 300; line-height: 1.12; letter-spacing: -.02em; color: var(--ink);
}
.lec-cta-text {
  max-width: 48ch; margin-inline: auto;
  font-size: clamp(1rem, 1.1vw, 1.1rem); font-weight: 300; line-height: 1.7; color: var(--text);
}

.lec-form { margin-top: clamp(36px, 4.5vw, 56px); text-align: center; }
.lec-fields {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px);
  text-align: start; margin-bottom: clamp(30px, 3.4vw, 44px);
}
.lec-form .btn-submit { margin-inline: auto; }
.lec-form-note { margin-top: 22px; font-size: .96rem; font-weight: 500; color: var(--sketch-ink); }
.lec-form.is-sent .lec-fields,
.lec-form.is-sent .btn-submit { display: none; }

@media (max-width: 680px) {
  .lec-fields { grid-template-columns: 1fr; gap: 8px; }
}