/* ═══════════════════════════════════════════════════════════════
   ABOUT THE LECTURER - styles for three surfaces
     .lecturer-view    - main /about-lecturer page
     .lecturer-meet    - home-page editorial teaser
     .lecturer-card    - course-overview instructor card
   All selectors prefixed .lecturer-* to avoid collisions.
   Reuses global tokens from global.css; no new CSS variables.
   ═══════════════════════════════════════════════════════════════ */


/* ═══ § Shared - CMS prose blocks (DB-backed rich text) ═══════
   These wrappers contain <p>…</p> HTML from TipTap. Give consecutive
   paragraphs a readable gap; a single paragraph is unaffected. */

.lecturer-hero__bio p + p,
.lecturer-section__lead p + p,
.lecturer-cta__body p + p {
  margin-top: 0.9em;
}


/* ═══ § Shared - typographic eyebrow used on all three surfaces ══
   A thin brand-gradient bar paired with a small mono uppercase
   kicker. Replaces the older filled-pill treatment for a quieter,
   more editorial feel - the gradient is the only adornment. */

.lecturer-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 19.2px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.lecturer-section__eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 66px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}


/* ═══ § Shared - section-title deep link anchor ══════════════
   A tiny `#` hash link next to each section heading. Faint by
   default; brightens on hover of the heading or the anchor
   itself. Clicking updates the URL hash, making the section
   shareable. */

.lecturer-anchor {
  display: inline-block;
  margin-inline-start: 0.4em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.7em;
  color: var(--primary-color);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-0.05em);
  vertical-align: middle;
  user-select: none;
}

.lecturer-hero__name:hover .lecturer-anchor,
.lecturer-section__title:hover .lecturer-anchor,
.lecturer-cta__headline:hover .lecturer-anchor,
.lecturer-anchor:hover,
.lecturer-anchor:focus-visible {
  opacity: 0.55;
}

.lecturer-anchor:hover,
.lecturer-anchor:focus-visible {
  opacity: 1;
  outline: none;
}


/* ═══ § Main view - page scaffolding ═════════════════════════ */

.lecturer-view {
  direction: rtl;
  background: var(--bg-primary);
}

.lecturer-view__top-rule {
  height: 1px;
  background: linear-gradient(90deg,
    #0894FF 0%,
    #BD32D6 35%,
    #6462EA 50%,
    #0894FF 70%,
    #FFA304 100%);
}
/* ↑ gradient accent #1/5: top page hairline */

.lecturer-section {
  padding: 72px 24px;
}

.lecturer-section--alt {
  background: linear-gradient(180deg, #EFF6FF 0%, #F5F9FF 100%);
}

.lecturer-section__inner {
  max-width: 960px;
  margin: 0 auto;
}

.lecturer-section__title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-color);
  font-family: var(--font-display);
  margin-top: 16px;
}

.lecturer-section__lead {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 680px;
  margin-top: 18px;
}


/* ═══ § Hero ═════════════════════════════════════════════════ */

.lecturer-hero {
  padding: 88px 24px 76px;
  background: linear-gradient(170deg,
    #D6E8FF 0%,
    #E8F1FF 30%,
    #F4F8FF 60%,
    #FFFFFF 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lecturer-hero > .lecturer-hero__inner {
  position: relative;
  z-index: 1;
}

.lecturer-hero__grid {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
}

/* Editorial wrap: portrait floats to the visual right (RTL inline-start);
   the bio text fills the remainder of the column and wraps around the
   portrait like a magazine feature. */
.lecturer-hero__portrait-wrap {
  float: right;
  width: 320px;
  max-width: 38%;
  aspect-ratio: 4 / 5;
  margin-inline-end: 36px;
  margin-block-end: 20px;
  margin-block-start: 4px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(245, 247, 250, 0.25));
  shape-outside: inset(0 round var(--radius-xl));
}

.lecturer-hero__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.lecturer-hero__text {
  display: block;
}

.lecturer-hero__text::after {
  content: '';
  display: block;
  clear: both;
}

.lecturer-hero__name {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-color);
  font-family: var(--font-display);
  margin-top: 14px;
}

.lecturer-hero__headline {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.4;
  margin-top: 14px;
}

.lecturer-hero__subheadline {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 6px;
}

.lecturer-hero__bio {
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-top: 18px;
}

.lecturer-hero__bio ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

/* Editorial magazine flow: first bullet + client list + exit-stat wrap
   beside the portrait on the inline-end (left in RTL). The senior-lecturer
   bullet and everything after it clears below the portrait. */
.lecturer-hero__bio ul:nth-of-type(2) {
  clear: both;
  padding-top: 18px;
}

.lecturer-hero__bio li {
  position: relative;
  padding-inline-start: 22px;
  margin-bottom: 10px;
}

.lecturer-hero__bio li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 4px;
  top: 0;
  color: var(--primary-color);
  font-size: 1.4em;
  line-height: 1.3;
}

.lecturer-hero__bio li p {
  margin: 0;
}

/* First paragraph reads as flowing editorial prose - no bullet marker,
   no inline-start padding - so the text wraps cleanly around the portrait
   shape without an orphaned dot floating against the portrait edge. */
.lecturer-hero__bio ul:first-of-type li {
  padding-inline-start: 0;
}

.lecturer-hero__bio ul:first-of-type li::before {
  content: none;
}


/* ═══ § Exit-stat callout (inside lecturer bio rich-text) ══════
   Centered editorial pull-quote for the "6 companies exited" line.
   Two short brand-gradient rules above and below frame the figure;
   the punchline sits on its own display-typography line. The
   gradient is the only adornment - no quotation marks, no card. */

.lecturer-hero__exit-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 24px 0 28px;
  padding: 0;
  max-width: 560px;
  text-align: center;
}

.lecturer-hero__exit-stat::before,
.lecturer-hero__exit-stat::after {
  content: '';
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.lecturer-hero__exit-stat__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-color);
  letter-spacing: -0.005em;
}

.lecturer-hero__exit-stat__quote strong {
  font-weight: 600;
  color: var(--text-color);
}


/* ═══ § Graphical CV header strip (download + contacts) ══════ */

.lecturer-cv-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
  width: fit-content;
  margin: 28px auto;
  clear: both;
}

.lecturer-cv-header__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.lecturer-cv-header__link i {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: color 0.2s;
}

.lecturer-cv-header__link:hover,
.lecturer-cv-header__link:hover i {
  color: var(--primary-color);
}

.lecturer-cv-header__link--primary {
  color: var(--text-color);
  font-weight: 600;
}

.lecturer-cv-header__link--primary i {
  color: var(--primary-color);
}

.lecturer-cv-header__sep {
  width: 1px;
  height: 18px;
  background: var(--border-default);
  flex-shrink: 0;
}


/* ═══ § Stats - infographic bar chart ════════════════════════ */

.lecturer-stats-section {
  padding: 72px 24px 40px;
  background: var(--bg-surface);
  display: none;
}

.lecturer-stats-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lecturer-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lecturer-stat__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.lecturer-stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}

.lecturer-stat__value {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  background: linear-gradient(90deg,
    #0894FF 0%,
    #BD32D6 35%,
    #6462EA 50%,
    #0894FF 70%,
    #FFA304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
}

.lecturer-stat__bar {
  width: 100%;
  height: 8px;
  background: var(--border-light);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.lecturer-stat__bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    #0894FF 0%,
    #BD32D6 35%,
    #6462EA 50%,
    #0894FF 70%,
    #FFA304 100%);
  border-radius: 999px;
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ═══ § Hero - Industry experience continuation ══════════════
   Extends the hero below the bio/portrait grid, keeping the
   same gradient background so the CV reads as one editorial
   piece rather than a separate section. Tighter typography
   than .lecturer-section - smaller title, compact project
   cards, denser logo strip - to feel like a continuum of the
   opening bio. */

.lecturer-hero__industry {
  max-width: 1040px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(0, 60, 130, 0.08);
}

.lecturer-hero__industry-title {
  position: relative;
  margin: 0;
  padding-block-start: 22px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-color);
}

.lecturer-hero__industry-title::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 56px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.lecturer-hero__industry-lead {
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 14px;
  max-width: 720px;
}

.lecturer-hero__industry-lead p + p {
  margin-top: 0.75em;
}

.lecturer-hero__projects {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lecturer-hero__project {
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 24px;
  align-items: anchor-center;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 60, 130, 0.08);
  border-radius: var(--radius-md);
}

.lecturer-hero__project:not(:has(.lecturer-hero__project-logo-wrap)) {
  grid-template-columns: 1fr;
}

.lecturer-hero__project-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  padding: 7px;
  /* background: rgba(255, 255, 255, 0.9); */
  /* border: 1px solid rgba(0, 60, 130, 0.08); */
  /* border-radius: var(--radius-md); */
  /* box-shadow: 0 4px 14px -8px rgba(9, 31, 67, 0.18); */
}

.lecturer-hero__project-logo-wrap--stacked {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 105px;
  padding: 8px;
}

.lecturer-hero__project-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(0.2);
  opacity: 0.95;
}

/* Vulcan and Israeli police logos are PNGs with a solid white background;
   mix-blend-mode: multiply lets the parent surface show through the white
   so they sit cleanly on the hero's light-blue gradient (and on the plain
   white card on mobile where no card background is painted). */
.lecturer-hero__project-logo[src*="vulcan"],
.lecturer-hero__project-logo[src*="israel-police"],
.lecturer-hero__clients-logo[src*="vulcan"],
.lecturer-hero__clients-logo[src*="israel-police"] {
  mix-blend-mode: multiply;
}

.lecturer-hero__project-logo-wrap--stacked .lecturer-hero__project-logo {
  max-height: 28px;
}

.lecturer-hero__project-logo-plus {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-tertiary);
  letter-spacing: 0;
}

.lecturer-hero__project-content {
  min-width: 0;
}

.lecturer-hero__project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.lecturer-hero__project-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-color);
}

.lecturer-hero__project-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.lecturer-hero__project-subtitle {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--text-tertiary);
  direction: ltr;
  unicode-bidi: isolate;
}

.lecturer-hero__project-meta .lecturer-hero__project-subtitle + .lecturer-hero__project-era {
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--border-default);
}

.lecturer-hero__project-era {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.lecturer-hero__project-body {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.lecturer-hero__project-body p + p {
  margin-top: 0.75em;
}

.lecturer-hero__project-body ul,
.lecturer-hero__project-body ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lecturer-hero__project-body li {
  position: relative;
  padding-inline-start: 16px;
  margin-top: 6px;
  line-height: 1.65;
}

.lecturer-hero__project-body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: 0.68em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary-color);
  opacity: 0.6;
}

.lecturer-hero__project-aside {
  display: block;
  margin-top: 12px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(0, 60, 130, 0.18);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Editorial clients strip: typographic "as seen at" label centered
   between two gradient rules, then a generous flex of muted logos
   that brighten on hover. No enclosed card - the section divider
   and label alone frame the roster. */
.lecturer-hero__clients {
  margin-top: 56px;
  padding: 44px 0 48px;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid rgba(0, 60, 130, 0.1);
  text-align: center;
}

.lecturer-hero__clients-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.lecturer-hero__clients-label::before,
.lecturer-hero__clients-label::after {
  content: '';
  width: 32px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  flex-shrink: 0;
}

.lecturer-hero__clients-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 52px;
  row-gap: 32px;
}

.lecturer-hero__clients-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
}

.lecturer-hero__clients-logo {
  max-width: 98px;
  max-height: 21px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.58;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.lecturer-hero__clients-item:has(.lecturer-hero__clients-logo[src*="israel-police"]) .lecturer-hero__clients-logo {
  max-height: 28px;
}

.lecturer-hero__clients-item:hover .lecturer-hero__clients-logo {
  filter: none;
  opacity: 1;
}


/* ═══ § Hero - Teaching subsection (continuation of industry)
   The teaching content lives inside .lecturer-hero__industry as
   a typographic subsection. The title is a demoted sibling of
   the industry title (smaller gradient rule, smaller type) so
   the whole hero reads as one editorial piece rather than two
   stacked sections. Programs reuse .lecturer-hero__project
   cards verbatim - single column, no logo column. */

.lecturer-hero__subsection-title {
  position: relative;
  margin: 48px 0 0;
  padding-block-start: 16px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-color);
}

.lecturer-hero__subsection-title::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 36px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.lecturer-hero__subsection-lead {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 12px;
  max-width: 720px;
}

.lecturer-hero__subsection-lead p + p {
  margin-top: 0.75em;
}

.lecturer-hero__colleges {
  margin-top: 28px;
}

.lecturer-hero__colleges-title {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary-color);
  margin-bottom: 14px;
}

/* .lecturer-hero__colleges-heading removed - use .lecturer-hero__subsection-title instead */

/* ── Schools list (was: separate table + logo strip) ──────────
   Each row mirrors the .lecturer-hero__project glass card: a
   logo column on the inline-start side, the name flex-fills the
   middle, and the years sit as a quiet mono pill on the end.
   The john-bryce row gets a slight scale boost so its denser
   logo lands at the same optical weight as the SVGs. */

.lecturer-schools {
  list-style: none;
  padding: 0;
  margin: 24px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lecturer-school {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  column-gap: 24px;
  align-items: center;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 60, 130, 0.08);
  border-radius: var(--radius-md);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lecturer-school:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 60, 130, 0.14);
  box-shadow: 0 8px 22px rgba(0, 60, 130, 0.07);
}

.lecturer-school__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}

.lecturer-school__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

.lecturer-school__logo[src*="john-bryce"] {
  max-height: 56px;
  opacity: 1;
}

.lecturer-school__name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.4;
}

.lecturer-school__years {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.lecturer-school--no-logo .lecturer-school__logo-wrap {
  visibility: hidden;
}

@media (max-width: 768px) {
  .lecturer-schools {
    margin-top: 18px;
    gap: 10px;
  }

  .lecturer-school {
    grid-template-columns: 84px 1fr;
    grid-template-areas: "logo name" "logo years";
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 16px;
  }

  .lecturer-school__logo-wrap {
    grid-area: logo;
    height: 44px;
  }

  .lecturer-school__name {
    grid-area: name;
    font-size: 15px;
    align-self: end;
  }

  .lecturer-school__years {
    grid-area: years;
    font-size: 11.5px;
    justify-self: start;
    align-self: start;
  }
}

.lecturer-hero__orgs {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 60, 130, 0.08);
}

.lecturer-hero__orgs-lead {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 4px;
}

.lecturer-hero__orgs-panel {
  margin-top: 20px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 60, 130, 0.06);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lecturer-hero__orgs-group {
  display: flex;
  flex-direction: column;
}

.lecturer-hero__orgs-group-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.lecturer-hero__orgs-group-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  flex-shrink: 0;
}

.lecturer-hero__orgs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.lecturer-hero__orgs-item {
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--text-color);
  line-height: 1.5;
  border-block-end: 1px solid rgba(0, 60, 130, 0.06);
}

.lecturer-hero__orgs-item:last-child {
  border-block-end: none;
}

@media (max-width: 768px) {
  .lecturer-hero__orgs-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 22px;
  }
}


/* ═══ § Internship - editorial accent panel ═══════════════════
   Uses the same .lecturer-hero__subsection-title as its siblings
   so the heading flows with the page, but wraps the body and
   coming-soon pill in a subtle tinted panel with a slim
   brand-gradient side bar. The section stands out as a
   distinct region without breaking the typographic format. */

.lecturer-hero__internship {
  position: relative;
  margin-top: 12px;
  padding: 20px 26px 22px;
  background: linear-gradient(
    180deg,
    rgba(8, 148, 255, 0.04) 0%,
    rgba(189, 50, 214, 0.035) 100%
  );
  border: 1px solid rgba(0, 60, 130, 0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lecturer-hero__internship::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 55%, #FFA304 100%);
  opacity: 0.9;
}

.lecturer-hero__internship .lecturer-hero__subsection-title {
  margin-top: 0;
}

.lecturer-hero__coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 9px 16px;
  background: rgba(0, 113, 227, 0.05);
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--primary-color);
  letter-spacing: -0.003em;
}

.lecturer-hero__coming-soon i {
  font-size: 14px;
  color: var(--primary-color);
}

/* ═══ § Certifications - centered-logo vendor cards ══════════
   Each card: padded logo plate (centered) + vendor name +
   tagline + credentials list (with inline text-link verify)
   and an optional "verify all" footer link. Verify actions
   are typographic underlined links, not pill buttons - so the
   credential name remains the visual anchor. */

.lecturer-cert-vendors {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.lecturer-cert-vendor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 28px 22px;
  background: #ffffff82;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 60, 130, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.lecturer-cert-vendor:hover {
  border-color: rgba(0, 60, 130, 0.14);
  box-shadow: 0 16px 32px -20px rgba(9, 31, 67, 0.14), 0 6px 14px -10px rgba(9, 31, 67, 0.06);
  transform: translateY(-1px);
}

.lecturer-cert-vendor__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
  margin: 0 0 18px;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.9) 0%, rgba(239, 243, 249, 0.6) 100%);
  border: 1px solid rgba(0, 60, 130, 0.05);
  border-radius: var(--radius-md);
}

.lecturer-cert-vendor__logo {
  max-height: 64px;
  max-width: 190px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lecturer-cert-vendor:has(.lecturer-cert-vendor__logo[src*="anthropic"]) .lecturer-cert-vendor__logo {
  max-height: 72px;
  max-width: 220px;
}

.lecturer-cert-vendor:has(.lecturer-cert-vendor__logo[src*="vmware"]) .lecturer-cert-vendor__logo {
  max-height: 32px;
}

/* MCT is the headline credential - render it noticeably larger than the
   VMware/Anthropic marks so it stands out in the certifications grid. */
.lecturer-cert-vendor:has(.lecturer-cert-vendor__logo[src*="mct"]) .lecturer-cert-vendor__logo-wrap {
  padding: 10px 16px;
}

.lecturer-cert-vendor:has(.lecturer-cert-vendor__logo[src*="mct"]) .lecturer-cert-vendor__logo {
  max-height: 86px;
  max-width: 240px;
}

.lecturer-cert-vendor__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color);
  line-height: 1.25;
  text-align: center;
}

.lecturer-cert-vendor__tagline {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
}

.lecturer-cert-vendor__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.lecturer-cert-vendor__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  line-height: 1.5;
}

.lecturer-cert-vendor__item:last-child {
  border-bottom: 0;
}

.lecturer-cert-vendor__item-name {
  color: var(--text-color);
  flex: 1;
  font-weight: 500;
}

.lecturer-cert-vendor__verify {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-color: rgba(0, 113, 227, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lecturer-cert-vendor__verify i {
  font-size: 10.5px;
  color: var(--primary-color);
  transition: color 0.2s ease;
}

.lecturer-cert-vendor__verify:hover {
  color: #0058B6;
  text-decoration-color: #0058B6;
}

.lecturer-cert-vendor__verify:hover i {
  color: #0058B6;
}

.lecturer-cert-vendor__verify-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-light);
  width: 100%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: underline;
  text-decoration-color: rgba(0, 113, 227, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lecturer-cert-vendor__verify-all i {
  font-size: 12px;
  color: var(--primary-color);
  transition: color 0.2s ease, transform 0.2s ease;
}

.lecturer-cert-vendor__verify-all:hover {
  color: #0058B6;
  text-decoration-color: #0058B6;
}

.lecturer-cert-vendor__verify-all:hover i {
  color: #0058B6;
  transform: translateY(-1px);
}


/* ═══ § Testimonials - v-if guarded ══════════════════════════ */

.lecturer-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.lecturer-testimonial {
  margin: 0;
  padding: 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.lecturer-testimonial__quote {
  margin: 0;
  font-size: 17px;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-color);
}

.lecturer-testimonial__attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.lecturer-testimonial__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.lecturer-testimonial__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.lecturer-testimonial__role {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}


/* ═══ § Closing CTA ══════════════════════════════════════════ */

.lecturer-cta {
  padding: 80px 24px;
  background: linear-gradient(180deg, #DBEAFE 0%, #C7DBFA 100%);
  text-align: center;
}

.lecturer-cta__inner {
  max-width: 680px;
  margin: 0 auto;
}

.lecturer-cta__headline {
  display: inline-block;
  position: relative;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-color);
  font-family: var(--font-display);
  padding-bottom: 18px;
}

.lecturer-cta__headline::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg,
    #0894FF 0%,
    #BD32D6 50%,
    #FFA304 100%);
}
/* ↑ gradient accent #4/5: CTA headline underline */

.lecturer-cta__body {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-top: 24px;
}

.lecturer-cta__actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}


/* === Lecturer "meet" teaser - editorial two-column ==================
   Mirrors the /about-lecturer hero grid (.lecturer-hero2__grid):
   portrait spans both rows on the left, header (eyebrow + name + roles)
   sits top-right, body (identity paragraphs + cert badges) sits
   bottom-right. On mobile the grid collapses to a single column with
   areas stacked as header → portrait → body, so the title sits ABOVE
   the photo. Shared by HomeView (#lecturer) and CourseOverviewView
   (#overview-lecturer). RTL: column 1 = right. */

.lecturer-meet {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: clamp(248px, 30%, 370px) minmax(0, 1fr);
  grid-template-areas:
    "portrait header"
    "portrait body"
    "badges   badges";
  column-gap: 56px;
  row-gap: 18px;
  align-items: start;
}

/* Header - eyebrow + name + 2 role lines, stacked. Sits top-right on
   desktop, lifts above the portrait on mobile. */
.lecturer-meet__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* RTL: hugs the right */
  gap: 8px;
  min-width: 0;
}

/* Portrait - spans both rows on the left. Hosts the canonical
   .lecturer-portrait-card + __img markup (so the teaser shares the
   --portrait-* knobs with the /about-lecturer hero), but at desktop &
   tablet the aspect-ratio stays the legacy 1000/1949 tall full-body box
   - only mobile drops to the canonical head-to-mid-torso framing (see
   the 768px media query below). */
.lecturer-meet__media {
  grid-area: portrait;
  width: 100%;
  max-width: 370px;
  aspect-ratio: 1000 / 1949;
  align-self: center;
}

/* Body - identity paragraphs + cert badges. Sits below the header on
   the right column (desktop) or below the portrait (mobile). Typography
   classes used inside (.lecturer-hero2__identity) carry their own
   sizes/weights from the canonical hero; this block only controls grid
   placement and per-row gap. */
.lecturer-meet__body {
  grid-area: body;
  display: grid;
  row-gap: 14px;
  min-width: 0;
}

/* Certification logos - borderless / shadowless. Single row spanning
   both columns of the .lecturer-meet grid (portrait + text column),
   logos at a uniform height. Visual order in RTL is forced via CSS
   `order` so the data array can stay in priority order (Microsoft
   first) while the row reads, right-to-left: Anthropic · Microsoft ·
   VMware. */
.lecturer-meet__badges {
  grid-area: badges;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(28px, 4.5vw, 56px);
  row-gap: 18px;
}

.lecturer-meet__badge-item {
  display: flex;
}

.lecturer-meet__badge-item:has(.lecturer-meet__badge-logo[src*="anthropic"]) { order: 1; }
.lecturer-meet__badge-item:has(.lecturer-meet__badge-logo[src*="mct"])       { order: 2; }
.lecturer-meet__badge-item:has(.lecturer-meet__badge-logo[src*="vmware"])    { order: 3; }

.lecturer-meet__badge,
.lecturer-meet__badge-logo-wrap {
  display: flex;
  align-items: center;
}

/* Single uniform height for all three certification marks. Definite
   `height` (not max-* only): the Anthropic/VMware SVGs have a
   viewBox but no intrinsic size and would otherwise collapse to 0. */
.lecturer-meet__badge-logo {
  width: auto;
  max-width: 100%;
  height: clamp(28px, 3.6vw, 40px);
  object-fit: contain;
}

/* (The in-body __link / __arrow were replaced by the teaser-level
   .lecturer-teaser__cta - one CTA per teaser. See § Lecturer teaser.) */

/* -- Tablet -- */
@media (max-width: 1024px) {
  .lecturer-meet {
    column-gap: 40px;
    grid-template-columns: clamp(220px, 32%, 320px) minmax(0, 1fr);
  }
  .lecturer-meet__media {
    max-width: 320px;
  }
  /* The canonical hero centers .lecturer-hero2__name / __role / __role-
     secondary / __identity at <=1024px because the hero collapses to a
     single column there. The teaser keeps its 2-col layout at tablet,
     so re-align those classes to the start (RTL = right) inside the
     teaser scope only. */
  .lecturer-teaser .lecturer-hero2__name,
  .lecturer-teaser .lecturer-hero2__role,
  .lecturer-teaser .lecturer-hero2__role-secondary,
  .lecturer-teaser .lecturer-hero2__identity {
    text-align: start;
  }
}

/* -- Mobile - single column. Areas collapse to: header → portrait →
   body (matches the /about-lecturer hero: header → portrait →
   identity). Title sits ABOVE the photo. -- */
@media (max-width: 768px) {
  .lecturer-meet {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "portrait"
      "body"
      "badges";
    row-gap: 22px;
    max-width: 520px;
    justify-items: center;
  }
  .lecturer-meet__header {
    align-items: center;
  }
  .lecturer-meet__media {
    /* Mobile portrait: mirrors .lecturer-hero2__portrait-wrap at the
       same breakpoint - wider head-to-mid-torso framing rather than
       the old tall full-body box. */
    max-width: clamp(220px, 70vw, 280px);
    aspect-ratio: 1000 / 1550;
  }
  .lecturer-meet__body {
    width: 100%;
  }
  .lecturer-meet__badges {
    width: 100%;
    column-gap: clamp(14px, 4vw, 28px);
  }
  /* VMware's wordmark is ~6.6:1; at desktop's 40px it would overflow a
     single mobile row. Shrink the uniform height so all three stay on
     one line in RTL: Anthropic (right) · Microsoft (middle) · VMware
     (left). */
  .lecturer-meet__badge-logo {
    height: clamp(20px, 5.5vw, 28px);
  }
}



/* ═══ § Lecturer teaser - shared component (LecturerTeaser.vue) ══
   Wraps the .lecturer-meet editorial block + a numeric tile strip +
   the "companies exited" callout + one prominent CTA into
   /about-lecturer. Rendered inside the host section on Home
   (#lecturer) and Course (#overview-lecturer). The tile + exit-stat
   visuals are inherited verbatim from the hero classes
   (.lecturer-hero2__tiles / .lecturer-hero__exit-stat) so the teaser
   and the full page stay in sync by design - only spacing and the
   CTA are teaser-specific here. */

/* Children self-center via their own max-width + margin:auto; this
   wrapper only scopes the mobile composition and the CTA. */
.lecturer-teaser {
  display: block;
}

/* Tile strip sits a touch tighter under the editorial block than in
   the hero (where credential cards sit between the bio and tiles). */
.lecturer-teaser .lecturer-hero2__tiles {
  margin-top: 48px;
}

.lecturer-teaser .lecturer-hero2__exit-stat {
  margin: 30px auto 0;
}

/* One prominent CTA into the full page. Matches the sibling
   .testimonials-teaser__cta pill so both teasers on the same page
   share a consistent "read the full story" affordance. */
.lecturer-teaser__cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 36px auto 0;
  padding: 12px 26px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--primary-color);
  background: #ffffff;
  border: 1px solid rgba(0, 113, 227, 0.25);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease,
    box-shadow 0.2s ease, gap 0.2s ease;
}

.lecturer-teaser__cta:hover {
  color: #0077ED;
  border-color: rgba(0, 113, 227, 0.55);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  gap: 12px;
}

.lecturer-teaser__cta-arrow {
  flex: 0 0 auto;
  position: relative;
  top: 1px;
  transition: transform 0.2s ease;
}

.lecturer-teaser__cta:hover .lecturer-teaser__cta-arrow {
  transform: translateX(-2px);
}

/* -- Mobile: source order (kicker → portrait → body) mirrors the
   /about-lecturer hero (header → portrait → identity), so the eyebrow
   + name sit ABOVE the photo on mobile. The brand-gradient/weight rule
   keeps the name in a solid color (weight 700); the gradient lives in
   the eyebrow accent above, never on the title itself. -- */
@media (max-width: 768px) {
  .lecturer-teaser .lecturer-meet__body {
    text-align: center;
  }
  .lecturer-teaser .lecturer-hero2__tiles {
    margin-top: 36px;
  }
}


/* ═══ § Course overview card - .lecturer-card (refined) ══════ */

.lecturer-card {
  display: grid;
  grid-template-columns: minmax(200px, 220px) 1fr;
  gap: 48px;
  padding: 56px 56px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 24px;
  box-shadow:
    0 28px 64px -22px rgba(9, 31, 67, 0.18),
    0 8px 20px -10px rgba(9, 31, 67, 0.08);
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.lecturer-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  opacity: 0.9;
}

.lecturer-card__portrait {
  margin: 0;
  width: 100%;
}

.lecturer-card__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  display: block;
  box-shadow: 0 14px 32px -14px rgba(9, 31, 67, 0.22);
}

.lecturer-card__body {
  display: grid;
  row-gap: 14px;
  align-content: start;
}

.lecturer-card__eyebrow {
  font-family: var(--font-body);
  font-size: 24.64px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.lecturer-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-color);
}

.lecturer-card__role {
  margin: 0;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.lecturer-card__stats {
  margin: 6px 0 2px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-block: 22px;
  border-block: 1px solid var(--border-light);
}

.lecturer-card__stat {
  display: grid;
  row-gap: 6px;
  justify-items: start;
}

.lecturer-card__stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 60%, #FFA304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  direction: ltr;
  unicode-bidi: isolate;
}

.lecturer-card__stat-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lecturer-card__link {
  margin-top: 4px;
  color: var(--primary-color);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, gap 0.2s;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-self: start;
}

.lecturer-card__link:hover {
  border-bottom-color: var(--primary-color);
}

.lecturer-card__link:hover .lecturer-card__link-arrow {
  transform: translateX(-3px);
}

.lecturer-card__link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}


/* ═══ § Responsive - 1024px ══════════════════════════════════ */

@media (max-width: 1024px) {
  .lecturer-hero {
    padding: 64px 24px 112px;
  }

  .lecturer-hero__grid {
    max-width: 640px;
  }

  .lecturer-hero__portrait-wrap {
    float: none;
    width: min(320px, 70%);
    max-width: none;
    margin: 0 auto 32px;
    shape-outside: none;
  }

  .lecturer-hero__name {
    font-size: 44px;
  }

  .lecturer-section {
    padding: 80px 24px;
  }

  .lecturer-section__title {
    font-size: 32px;
  }

  .lecturer-stats-section {
    padding: 56px 24px 32px;
  }

  .lecturer-stat__value {
    font-size: 36px;
  }

  .lecturer-hero__clients-list {
    column-gap: 36px;
    row-gap: 24px;
  }

  .lecturer-cert-vendors {
    grid-template-columns: 1fr;
  }

  .lecturer-testimonials {
    grid-template-columns: 1fr;
  }

  .lecturer-cta {
    padding: 88px 24px;
  }

  .lecturer-cta__headline {
    font-size: 34px;
  }

  .lecturer-card {
    padding: 44px 40px;
    gap: 36px;
    grid-template-columns: minmax(180px, 200px) 1fr;
  }

  .lecturer-card__stat-value {
    font-size: 26px;
  }
}


/* ═══ § Responsive - 768px ═══════════════════════════════════ */

@media (max-width: 768px) {
  .lecturer-hero {
    padding: 48px 20px 56px;
  }

  /* Center the hero eyebrow ("הכירו את המרצה"), name, and headline on mobile.
     Bio prose below intentionally stays start-aligned for readability.
     The gradient hairline (::before) stacks above the text via column layout
     rather than sitting beside it. */
  .lecturer-hero__text > .lecturer-section__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* The deep-link "#" anchor is opacity:0 by default (revealed on hover),
     but it still reserves inline width — which pushes centered titles
     off-center. Hover is a no-op on touch devices, so hide the anchor
     entirely on mobile so titles center around their actual text. */
  .lecturer-anchor {
    display: none;
  }

  .lecturer-hero__name {
    font-size: 36px;
    text-align: center;
  }

  .lecturer-hero__headline {
    font-size: 19px;
    text-align: center;
  }

  .lecturer-hero__bio {
    font-size: 15.5px;
  }

  .lecturer-hero__exit-stat {
    gap: 18px;
    margin: 28px auto;
  }

  .lecturer-hero__exit-stat::before,
  .lecturer-hero__exit-stat::after {
    width: 64px;
  }

  .lecturer-hero__exit-stat__quote {
    font-size: 15.5px;
  }

  .lecturer-cv-header {
    gap: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
  }

  .lecturer-stat__value {
    font-size: 32px;
  }

  .lecturer-section {
    padding: 64px 20px;
  }

  .lecturer-section__title {
    font-size: 28px;
  }

  .lecturer-hero__industry {
    margin-top: 32px;
    padding-top: 28px;
  }

  /* Mobile: center the industry section title + lead, gradient bar centered. */
  .lecturer-hero__industry-title {
    font-size: 26px;
    padding-block-start: 18px;
    text-align: center;
  }

  .lecturer-hero__industry-title::before {
    width: 44px;
    inset-inline-start: 50%;
    transform: translateX(50%);
  }

  .lecturer-hero__industry-lead {
    text-align: center;
    margin-inline: auto;
  }

  .lecturer-hero__project {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 16px 18px;
    background: none;
    border: none;
    /* Also drop the glass-effect blur. It creates an isolated stacking
       context which traps `mix-blend-mode: multiply` on the Vulcan /
       Israeli Police logos inside the card, leaving their white PNG
       backgrounds visible. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Mobile: stack project title on its own centered line, with the
     subtitle + era chips centered below it. */
  .lecturer-hero__project-head {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
  }

  .lecturer-hero__project-title {
    text-align: center;
  }

  .lecturer-hero__project-meta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .lecturer-hero__project-logo-wrap {
    order: -1;
    height: 56px;
  }

  .lecturer-hero__project-logo-wrap--stacked {
    height: 84px;
  }

  /* Magic Software logo reduced by 15% on mobile (56px → ~48px). */
  .lecturer-hero__project-logo[src*="magic-software"] {
    max-height: 48px;
  }
  .lecturer-hero__clients-logo[src*="magic-software"] {
    max-height: 15.3px;
    max-width: 71px;
  }

  .lecturer-hero__project-title {
    font-size: 16.5px;
  }

  /* Mobile: center subsection title + gradient line + lead copy. */
  .lecturer-hero__subsection-title {
    margin-top: 36px;
    font-size: 19px;
    text-align: center;
  }

  .lecturer-hero__subsection-title::before {
    inset-inline-start: 50%;
    transform: translateX(50%);
  }

  .lecturer-hero__subsection-lead {
    text-align: center;
    margin-inline: auto;
  }

  /* Also center the main section title in mobile. */
  .lecturer-section__title {
    text-align: center;
  }

  .lecturer-hero__clients {
    margin-top: 40px;
    padding-top: 32px;
  }

  .lecturer-hero__clients-list {
    column-gap: 28px;
    row-gap: 20px;
    margin-top: 24px;
  }

  .lecturer-hero__clients-item {
    height: 28px;
  }

  .lecturer-hero__clients-logo {
    max-height: 18px;
    max-width: 84px;
  }

  .lecturer-hero__internship {
    padding: 18px 20px 20px;
  }

  .lecturer-cert-vendor {
    padding: 20px 20px 16px;
  }

  .lecturer-cert-vendor__item {
    padding: 7px 0;
    font-size: 14px;
  }

  .lecturer-card {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 28px;
  }

  .lecturer-card__portrait {
    max-width: 220px;
    justify-self: center;
  }

  .lecturer-card__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .lecturer-card__stat-value {
    font-size: 24px;
  }

  .lecturer-card__stat-label {
    font-size: 9.5px;
  }

  .lecturer-cta {
    padding: 72px 20px;
  }

  .lecturer-cta__headline {
    font-size: 28px;
  }
}


/* ═══ § Responsive - 400px ═══════════════════════════════════ */

@media (max-width: 400px) {
  .lecturer-hero__name {
    font-size: 32px;
  }

  .lecturer-stat__value {
    font-size: 44px;
  }
}


/* ═══ § Desktop - right-align content, reserve nav gutter ════
   The SectionNavigation rail is fixed at right: 40px with width 240px.
   Push all lecturer content blocks to the physical right of the viewport
   but leave a 300px right gutter so the nav never overlaps the text.
   Below 1480px the nav becomes a sticky top strip, so this only applies
   on desktop. */

@media (min-width: 1480px) {
  .lecturer-view .lecturer-section__inner,
  .lecturer-view .lecturer-stats-inner {
    margin-right: 300px;
    margin-left: auto;
  }

  /* Closing CTA is a full-bleed band with centered content.
     Reserve the nav gutter as padding so the inner block stays
     optically centered within the visible (non-nav) area. */
  .lecturer-view .lecturer-cta {
    /* padding-right: calc(24px + 300px); */
  }
}


img.lecturer-hero__project-logo {
    /* max-height: 30px; */
}


/* ═══════════════════════════════════════════════════════════════
   § Combined-page additions (identity hero, timeline, page sections,
   chip strips, founder cards, internship panel, fun-fact title,
   experience callout). These mirror al2 patterns but live under
   .lecturer-* so the production page is self-contained.
   ═══════════════════════════════════════════════════════════════ */


/* ── Hero 2-column identity layout ───────────────────────────── */

.lecturer-hero__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.lecturer-hero2__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-areas:
    "portrait header"
    "portrait identity";
  column-gap: 64px;
  row-gap: 0;
  align-items: center;
}

/* Header trio (eyebrow + name + role) is its own grid child so the
   single-column layout (<=1024px) can lift it above the portrait
   without disturbing desktop. On desktop the two grid-template-areas
   rows are content-sized with zero row-gap, so header+identity stack
   exactly as one continuous column - pixel-identical to the original
   single identity block. */
.lecturer-hero2__header {
  grid-area: header;
  min-width: 0;
}

.lecturer-hero2__identity-col {
  grid-area: identity;
  min-width: 0;
}

.lecturer-hero2__name {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 60px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-color);
}

.lecturer-hero2__role {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.lecturer-hero2__role-secondary {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary-color);
  opacity: 0.78;
  letter-spacing: -0.01em;
}

.lecturer-hero2__identity {
  margin: 26px 0 0;
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 600px;
}

.lecturer-hero2__identity p {
  margin: 0;
}

.lecturer-hero2__identity p + p {
  margin-top: 14px;
}

.lecturer-hero2__identity .blue-bold-text {
  color: var(--primary-color);
  font-weight: 600;
}

/* Keep multi-word English brand names from breaking mid-name inside
   RTL prose. Hebrew brand spans are excluded since long Hebrew names
   need to wrap. */
.lecturer-hero2__identity .blue-bold-text--nowrap {
  white-space: nowrap;
}

.lecturer-hero2__identity .logo-10x-course-inline svg {
  height: 1.35em;
}

/* ─────────────────────────────────────────────────────────────
   Free-standing portrait - shared treatment.
   The asset is a transparent-background waist-up cutout, so the
   figure is not a rectangular photo - it is a person who must look
   *grounded* inside a branded studio space, not floating on a flat
   tint. The frame is therefore a soft studio backdrop: a cool
   overhead spotlight, a brand-tinted glow pooling at the base where
   the figure stands, and a paper gradient - inside a rounded mask
   with a hairline cool-blue border, a layered cool-blue depth
   shadow, and a soft inner white edge. Reused by the About-Lecturer
   hero (wrapper + __img child) and the Home / Course "meet the
   lecturer" blocks (single element).

   ── Tunable knobs (edit live in Chrome DevTools Workspaces) ──
   --portrait-img  : the cutout asset. Mirrors `photo` in
                     src/data/about-lecturer.ts - keep both in sync.
   --portrait-size : background-size of the figure. `auto <h>` keeps
                     the cutout's native 2:3 ratio; <h> < 100% adds
                     headroom above the head.
   --portrait-pos-x: horizontal placement (50% = centered).
   --portrait-pos-y: vertical placement. 100% grounds the figure at
                     the base of the frame (standing on the floor);
                     lower it to lift the figure off the base. */
.lecturer-portrait-card {
  --portrait-img: url('/images/rotemx-navy-cutout-q65.webp');
  --portrait-size: 136%;
  --portrait-pos-x: 59%;
  --portrait-pos-y: 14%;
}

/* No frame and no backdrop: the transparent cutout floats directly on
   the page. The .lecturer-portrait-card class stays on the hero element
   only to carry the shared --portrait-* knobs (block above). */
.lecturer-portrait-card {
  background: transparent;
}

/* The cutout figure. No backdrop behind it - the transparent areas of
   the asset show the section background through. Size/position are
   CSS-only knobs (above), retunable in DevTools Workspaces without
   touching markup. */
.lecturer-portrait-card__img {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--portrait-img);
  background-repeat: no-repeat;
  background-position: var(--portrait-pos-x) var(--portrait-pos-y);
  background-size: var(--portrait-size);
}

/* Hero portrait - layout sizing only. */
.lecturer-hero2__portrait-wrap {
  grid-area: portrait;
  width: 100%;
  max-width: 370px;
  aspect-ratio: 4 / 5;
  justify-self: start;
  align-self: center;
  height: 100%;
}

/* CV strip start-aligned variant (item 3) - sits below the additional
   paragraph in the identity column, not auto-centered. */
.lecturer-cv-header--start {
  margin: 30px 0 0;
  justify-content: flex-start;
  margin: 20px auto;
}

/* Hero bio block - the "keep bullets of 1" content (item 4). It now
   sits below the identity column on its own row, centered, with the
   exit callout visually anchoring the middle of the hero. */
.lecturer-hero__bio--centered {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: start;
}

.lecturer-hero__bio--centered .lecturer-hero__exit-stat {
  margin-inline: auto;
}

/* Identity tiles (numeric proof points) below the bio. */
.lecturer-hero2__tiles {
  margin: 52px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 980px;
}

.lecturer-hero2__tile {
  padding: 24px 24px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 60, 130, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.lecturer-hero2__tile-value {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Helvetica Neue', 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 56px;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(90deg,
    #0894FF 0%,
    #BD32D6 35%,
    #6462EA 50%,
    #0894FF 70%,
    #FFA304 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lecturer-hero2__tile-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Hero credential cards - 3-up grid of icon + title + body. Scannable
   proof of clients, exits and certifications below the tiles strip. */
.lecturer-hero2__cards {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 980px;
}

.lecturer-hero2__card {
  position: relative;
  padding: 24px 24px 22px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 60, 130, 0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lecturer-hero2__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(8, 148, 255, 0.12), rgba(189, 50, 214, 0.10));
  color: var(--primary-color);
  font-size: 17px;
}

.lecturer-hero2__card-title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

.lecturer-hero2__card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Hero variant of the exit-stat callout - centered, full inner width,
   visually anchors the bottom of the hero. */
.lecturer-hero2__exit-stat {
  margin: 32px auto 4px;
}


/* ── Page sections (shared scaffold for non-hero sections) ───── */

.lecturer-page-section {
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px;
  border-top: 1px solid rgba(0, 60, 130, 0.08);
}

.lecturer-page-section__title {
  position: relative;
  margin: 0;
  padding-block-start: 22px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-color);
}

.lecturer-page-section__title::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 48px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.lecturer-page-section__lead {
  font-size: 16.5px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 14px;
  max-width: 720px;
}

.lecturer-page-section__lead p + p {
  margin-top: 0.6em;
}


/* ── Career timeline with connector line ──────────────────────── */

.lecturer-timeline {
  position: relative;
  margin: 32px 0 0;
  list-style: none;
  padding: 0;
}

.lecturer-timeline::before {
  content: '';
  position: absolute;
  /* dot column = second grid column; year column is 140px + 18px gap, then 7px to dot center */
  inset-inline-start: calc(140px + 18px + 6.25px);
  top: 28px;
  bottom: 28px;
  width: 1.5px;
  background: linear-gradient(180deg,
    rgba(8, 148, 255, 0.45) 0%,
    rgba(189, 50, 214, 0.45) 50%,
    rgba(255, 163, 4, 0.45) 100%);
  pointer-events: none;
}

.lecturer-timeline__row {
  display: grid;
  grid-template-columns: 140px 14px 1fr;
  column-gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-block-end: 1px solid rgba(0, 60, 130, 0.05);
}

.lecturer-timeline__row:last-child {
  border-block-end: 0;
}

.lecturer-timeline__year {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  direction: ltr;
  unicode-bidi: isolate;
  text-align: end;
}

.lecturer-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0894FF 0%, #BD32D6 60%, #FFA304 100%);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 5px rgba(8, 148, 255, 0.10);
  justify-self: center;
  position: relative;
  z-index: 1;
}

.lecturer-timeline__org {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.lecturer-timeline__org-note {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.lecturer-timeline__role {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.45;
}


/* ── Projects list wrapper inside lecturer-page-section ──────── */

.lecturer-projects-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* "Fun Fact" pullquote header (item 5.2). Reuses .lecturer-hero__project-aside
   styling but adds a small uppercase eyebrow above the quote. */
.lecturer-funfact {
  margin: 0;
}

.lecturer-funfact__title {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-color);
  font-style: normal;
}

/* Magic Software logo -15% across the board (item 5.2). Already had a
   mobile-only override; this brings desktop into line. */
.lecturer-hero__project--magic .lecturer-hero__project-logo {
  max-height: 48px;
  max-width: 144px;
}

/* Hysolate logo -15% (item 5.4). */
.lecturer-hero__project--hysolate .lecturer-hero__project-logo {
  max-height: 48px;
  max-width: 144px;
}


/* ── Client / Alumni labeled chip strip ──────────────────────── */

.lecturer-chip-strip {
  list-style: none;
  padding: 8px 0 4px;
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 36px;
  row-gap: 28px;
}

.lecturer-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  max-width: 160px;
}

.lecturer-chip--text-only {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 60, 130, 0.1);
  border-radius: var(--radius-full);
  gap: 0;
}

.lecturer-chip__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
}

.lecturer-chip__logo {
  max-width: 116px;
  max-height: 24px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.lecturer-chip:hover .lecturer-chip__logo {
  filter: none;
  opacity: 1;
}

.lecturer-chip__logo[src*="israel-police"],
.lecturer-chip__logo[src*="vulcan"] {
  mix-blend-mode: multiply;
}

.lecturer-chip__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.35;
  direction: ltr;
  unicode-bidi: isolate;
}

.lecturer-chip--text-only .lecturer-chip__label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-color);
  font-weight: 500;
}


/* ── Experience callout (item 7) - centered editorial pull-quote.
       Mirrors the hero's .lecturer-hero__exit-stat: two short brand-gradient
       rules above and below frame the line; no card chrome, no gradient
       text fill — the gradient is the only adornment. ── */

.lecturer-experience-callout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 32px auto;
  padding: 0;
  max-width: 640px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color);
  letter-spacing: -0.005em;
  background: none;
  border: 0;
  border-radius: 0;
}

.lecturer-experience-callout::before,
.lecturer-experience-callout::after {
  content: '';
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.lecturer-experience-callout strong {
  font-weight: 600;
  color: var(--text-color);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}


/* ── Founder cards (item 13) ─────────────────────────────────── */

.lecturer-founder {
  margin: 52px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 880px;
}

.lecturer-founder__card {
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 60, 130, 0.08);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lecturer-founder__card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 60, 130, 0.16);
  box-shadow: 0 14px 28px -16px rgba(9, 31, 67, 0.18);
}

.lecturer-founder__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
}

.lecturer-founder__logo {
  max-height: 100%;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.95;
}

.lecturer-founder__logo[src*="john-bryce"] {
  max-height: 56px;
}

.lecturer-founder__logo[src*="the-mobile-workshop"] {
  max-height: 80px;
  max-width: 140px;
  margin-block: -8px;
}

.lecturer-founder__logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 44px;
  padding: 0 10px;
  border: 1px dashed rgba(0, 60, 130, 0.25);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.2;
}

.lecturer-founder__kicker {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-color);
}

.lecturer-founder__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--text-color);
}

.lecturer-founder__subtitle {
  margin: -4px 0 2px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

.lecturer-founder__body {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}


/* ── Organizational training panel (stand-alone wrapper for the
       previously hero-scoped .lecturer-hero__orgs-panel) ─────────── */

.lecturer-orgs-panel {
  margin-top: 28px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 48px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 60, 130, 0.07);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lecturer-orgs-group {
  display: flex;
  flex-direction: column;
}

.lecturer-orgs-group-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.lecturer-orgs-group-label::before {
  content: '';
  width: 20px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
  flex-shrink: 0;
}

.lecturer-orgs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.lecturer-orgs-item {
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--text-color);
  line-height: 1.5;
  border-block-end: 1px solid rgba(0, 60, 130, 0.06);
}

.lecturer-orgs-item:last-child {
  border-block-end: none;
}


/* ── Internship panel (under Alumni section) ─────────────────── */

.lecturer-internship-panel {
  position: relative;
  margin-top: 32px;
  padding: 22px 26px;
  background: linear-gradient(
    180deg,
    rgba(8, 148, 255, 0.04) 0%,
    rgba(189, 50, 214, 0.035) 100%
  );
  border: 1px solid rgba(0, 60, 130, 0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lecturer-internship-panel::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #0894FF 0%, #BD32D6 55%, #FFA304 100%);
  opacity: 0.9;
}

.lecturer-internship-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.01em;
}

.lecturer-internship-panel__body {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.lecturer-internship-panel__body p + p {
  margin-top: 0.6em;
}

.lecturer-internship-panel__coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  background: rgba(0, 113, 227, 0.05);
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color);
}

.lecturer-internship-panel__coming-soon i {
  font-size: 13px;
}


/* ── Responsive overrides for the new combined-page blocks ───── */

@media (max-width: 1024px) {
  /* Single column: lift the header trio (eyebrow + name + role) above
     the portrait, bio + CV below it. Desktop (>1024px) keeps the
     2-column areas defined on the base rule. */
  .lecturer-hero2__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "portrait"
      "identity";
    row-gap: 12px;
  }

  .lecturer-hero2__portrait-wrap {
    max-width: 320px;
    justify-self: center;
    align-self: center;
  }

  .lecturer-hero2__name,
  .lecturer-hero2__role,
  .lecturer-hero2__role-secondary,
  .lecturer-hero2__identity {
    text-align: center;
  }

  .lecturer-hero2__identity {
    margin-top: 0;
    margin-inline: auto;
  }

  .lecturer-cv-header--start {
    margin: 28px auto 0;
    justify-content: center;
  }

  .lecturer-hero2__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lecturer-page-section {
    padding: 56px 24px;
  }

  .lecturer-page-section__title {
    font-size: 28px;
  }

  .lecturer-founder {
    grid-template-columns: 1fr;
  }

  .lecturer-orgs-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 24px;
  }
}

@media (max-width: 768px) {
  /* Mobile: the figure occupies only ~63% of the asset's width (632px of
     1000, with transparent margins each side). At a high zoom the figure
     renders wider than the window and the arms clip. Drop the zoom so the
     full figure width fits inside the window with a small even margin;
     position centers the figure (its center sits at ~47% of the asset).
     Y is anchored to the top so the only headroom is the asset's own ~6%
     transparent margin - the figure connects up to the subtitle instead
     of floating with a large empty void above the head. */
  .lecturer-portrait-card__img {
    background-position: 47% -31px;
    background-size: 138%;
  }

  /* Mobile: widen the portrait window so the full-width figure (arms
     included) reads at a comfortable size. Aspect ratio trimmed (was
     1000/1949) so the box ends just past the figure - with the image now
     top-anchored, the old taller box only added dead space below; this
     keeps the same head-to-lower-torso crop tight against the subtitle.
     Overrides the 320px tablet max-width; desktop/tablet unchanged. */
  .lecturer-hero2__portrait-wrap {
    max-width: clamp(220px, 70vw, 280px);
    aspect-ratio: 1000 / 1550;
  }

  /* Mobile: stack the eyebrow vertically - the brand-gradient bar
     (::before) centered ABOVE the "meet the lecturer" title, both
     center-aligned. The title text is filled with the compact 3-stop
     brand gradient. Weight drops 600 -> 400 so the gradient stays on
     light letterforms per the brand gradient rule (forbidden on 500+);
     400 is allowed for a small tracked accent. width:fit-content keeps
     the gradient box tight so the full cyan->magenta->orange sweep
     reads across the word. */
  .lecturer-hero2__header .lecturer-section__eyebrow,
  .lecturer-meet__header .lecturer-section__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-inline: auto;
    font-weight: 400;
    background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .lecturer-hero2__name {
    font-size: 38px;
  }

  .lecturer-hero2__role {
    font-size: 18px;
  }

  .lecturer-hero2__role-secondary {
    font-size: 18px;
  }

  .lecturer-hero2__identity {
    font-size: 15.5px;
  }

  /* Mobile: a soft gray hairline between bio paragraphs - breaks the
     long block into scannable chunks. Cool-blue-tinted gray to match
     the card/portrait hairlines (no raw black per the design rules). */
  .lecturer-hero2__identity p + p {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 60, 130, 0.12);
  }

  .lecturer-hero2__tiles {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
  }

  .lecturer-hero2__tile {
    padding: 16px 20px;
  }

  .lecturer-hero2__tile-value {
    font-size: 36px;
  }

  .lecturer-hero2__card {
    padding: 18px 18px 16px;
  }

  .lecturer-hero2__card-title {
    font-size: 15.5px;
  }

  .lecturer-hero2__card-body {
    font-size: 14px;
  }

  .lecturer-page-section {
    padding: 48px 20px;
  }

  .lecturer-page-section__title {
    font-size: 24px;
    text-align: center;
  }

  .lecturer-page-section__title::before {
    inset-inline-start: 50%;
    transform: translateX(50%);
  }

  .lecturer-page-section__lead {
    text-align: center;
    margin-inline: auto;
  }

  /* Mobile timeline: stack year + role; hide connector line. */
  .lecturer-timeline::before {
    display: none;
  }

  .lecturer-timeline__row {
    grid-template-columns: 14px 1fr;
    grid-template-areas: "dot year" "dot body";
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px 0;
  }

  .lecturer-timeline__dot {
    grid-area: dot;
    align-self: start;
    margin-top: 6px;
  }

  .lecturer-timeline__year {
    grid-area: year;
    text-align: start;
  }

  .lecturer-timeline__body {
    grid-area: body;
  }

  .lecturer-chip-strip {
    column-gap: 24px;
    row-gap: 20px;
  }

  .lecturer-experience-callout {
    font-size: 16px;
    gap: 14px;
  }

  .lecturer-experience-callout::before,
  .lecturer-experience-callout::after {
    width: 56px;
  }
}

/* Bulleted block sits in its own BFC beside the floating portrait so
   the disc markers are visible and the list is clearly indented from
   the surrounding prose (which wraps the float). Without flow-root the
   list shares its line-box width with the wrapped prose and looks
   un-indented even though padding-inline-start is set. */
.lecturer-hero__bio ul.about-lecturer-main-bullets {
  display: flow-root;
  list-style: disc;
  padding-inline-start: 3em;
  margin-inline-start: 0.5em;
}

.lecturer-hero__bio ul.about-lecturer-main-bullets > li {
  list-style: disc;
  padding-inline-start: 0;
  margin-bottom: 8px;
}

/* Outer wrapper li contains a nested .about-lecturer-main-bullets ul plus
   trailing prose; it must not render its own disc marker - only the leaf
   bullets in the inner ul should. */
.lecturer-hero__bio ul.about-lecturer-main-bullets > li:has(> ul.about-lecturer-main-bullets) {
  list-style: none;
}

.lecturer-hero__bio ul.about-lecturer-main-bullets > li::before {
  content: none;
}

.lecturer-hero__bio ul.about-lecturer-main-bullets > li::marker {
  color: var(--primary-color);
}

.lecturer-hero__bio ul.about-lecturer-main-bullets > li:has(> ul.about-lecturer-main-bullets)::marker {
  content: none;
}