/* הקלטות המפגשים — kept in its own stylesheet (loaded after style.css) so this
   feature and the course workbook never touch the same file. Uses the shared
   design tokens from style.css (:root) and its .card / .btn / .who / .back-link
   base classes; everything added here is namespaced .mt-*.

   The layout deliberately mirrors the workbook tab (.wb-* in style.css) —
   full-bleed hero, centred title, "half image · half text" cards — so the two
   tabs read as one site. The rules are duplicated rather than shared on
   purpose: it keeps the two features independently editable. If you restyle
   the workbook hero or cards, mirror the change here. */

/* --- hero: full-bleed image that fades into the page, title below ---------- */
.mt-hero { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); margin-top: -24px; margin-bottom: 18px; overflow: hidden; background: var(--bg); }
.mt-hero-img { display: block; width: 100%; height: clamp(380px, 64vh, 620px); object-fit: cover; object-position: center 45%; }
.mt-hero::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 28%; pointer-events: none;
  background: linear-gradient(to top, rgb(250,247,243) 2%, rgba(250,247,243,0.55) 45%, rgba(250,247,243,0) 100%); }
/* Stand-in until a cover image is generated — same footprint as the real hero,
   so dropping the image in later changes nothing about the layout. */
.mt-hero--placeholder { height: clamp(380px, 64vh, 620px);
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgb(250,247,243) 55%, var(--hover-tint) 100%); }

.mt-hero-title { font-size: clamp(2.4rem, 8vw, 3.8rem); font-weight: 800; line-height: 1.05; text-align: center; margin: 6px 0 2px; color: var(--text); }
.mt-hero-sub { text-align: center; font-size: 1.02rem; font-weight: 300; color: var(--text-muted); margin: 0 auto 2px; max-width: 46ch; line-height: 1.6; }
.mt-hero-back { display: block; text-align: center; margin: 10px 0 18px; }

/* --- search --------------------------------------------------------------- */
.mt-search { width: 100%; box-sizing: border-box; padding: 15px 18px; margin: 18px 0 6px; font-size: 1.05rem;
  font-family: inherit; border: 1.5px solid var(--border); border-radius: 6px; background: var(--card); color: inherit; }
.mt-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- "כל המפגשים" heading + card grid ------------------------------------- */
.mt-all-title { font-size: 1.4rem; font-weight: 800; margin: 26px 2px 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.mt-cards { display: grid; grid-template-columns: 1fr; gap: 18px; }

.mt-card { display: flex; align-items: stretch; min-height: 172px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, box-shadow 0.14s ease; }
.mt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.mt-card-body { flex: 1 1 52%; min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
/* Absolutely-positioned image so the TEXT sets the card height and stays
   vertically centred — same trick as the workbook cards. */
.mt-card-media { flex: 0 0 46%; align-self: stretch; position: relative; overflow: hidden; }
.mt-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Until a per-meeting image exists, the slot shows the date as a quiet tile —
   reads as a deliberate design rather than a missing picture. */
.mt-card-media--empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--hover-tint) 0%, var(--accent-soft) 100%);
  color: var(--accent); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.04em; opacity: 0.75; }
.mt-card-kicker { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 10px; }
.mt-card-title { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0 0 10px; }
.mt-card-summary { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.mt-card-meta { font-size: 0.92rem; font-weight: 600; color: var(--accent); }

@media (min-width: 760px) {
  .mt-card { min-height: 240px; }
  .mt-card-body { padding: 30px 40px; }
  .mt-card-kicker { font-size: 0.82rem; margin-bottom: 12px; }
  .mt-card-title { font-size: 1.85rem; margin-bottom: 12px; }
  .mt-card-summary { font-size: 1.18rem; margin-bottom: 16px; }
  .mt-card-meta { font-size: 1rem; }
  .mt-card-media--empty { font-size: 2.1rem; }
}

@media (max-width: 640px) {
  .mt-hero { margin: -14px -14px 4px; }
  .mt-card { min-height: 132px; }
  .mt-card-body { padding: 15px 16px; }
  .mt-card-title { font-size: 1.2rem; }
  .mt-card-summary { font-size: 0.92rem; }
}

/* --- search results ------------------------------------------------------- */
.mt-results { display: grid; gap: 12px; }
.mt-results-head { font-size: 1.35rem; font-weight: 800; margin: 20px 2px 4px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-soft); }
.mt-result { cursor: pointer; padding: 18px 20px; border-radius: 0; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.mt-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mt-result-title { font-weight: 700; font-size: 1.12rem; margin: 2px 0; }
.mt-snippet { font-size: 0.92rem; color: var(--text-muted); line-height: 1.5; }
.mt-result mark, .mt-snippet mark { background: var(--accent-soft); color: inherit; padding: 0 2px; border-radius: 3px; font-weight: 600; }

/* --- single meeting page -------------------------------------------------- */
.mt-title { margin: 6px 0 16px; font-size: 1.85rem; line-height: 1.25; }
.mt-watch { display: inline-block; margin: 4px 0 18px; padding: 12px 24px; background: var(--text); color: #fff;
  border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; text-decoration: none; transition: filter 0.12s ease; }
.mt-watch:hover { filter: brightness(1.07); }

.mt-summary { line-height: 1.6; font-size: 1.08rem; font-weight: 300; }
.mt-summary-head { font-size: 1.1rem; font-weight: 800; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--accent-soft); }
.mt-summary--empty { color: var(--text-muted); font-weight: 300; }
.mt-points { margin: 0; padding-inline-start: 1.3em; }
.mt-points li { margin: 0.55em 0; line-height: 1.6; }
.mt-points strong { font-weight: 700; }
.mt-list-blocks { margin: 0.5em 0; padding-inline-start: 1.3em; }
.mt-list-blocks li { margin: 0.4em 0; }
.mt-h3 { font-size: 1.15rem; font-weight: 700; margin: 0.9em 0 0.3em; }
.mt-p { margin: 0.45em 0; }
.mt-summary > *:first-child { margin-top: 0; }
.mt-summary > *:last-child { margin-bottom: 0; }
.mt-summary a { color: var(--accent); text-decoration: underline; }

/* Headings use the same face/weight as the workbook and the Wix site. */
.mt-hero-title, .mt-all-title, .mt-card-title, .mt-results-head, .mt-title, .mt-h3 {
  font-family: "Rubik", "Heebo", -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}
.mt-hero-title { margin: 34px 0 20px; }
.mt-hero-sub { margin-top: -12px; margin-bottom: 4px; }