/* Smile-new homepage team section enhancements
 * Scope: front page only (#brxe-xfdolb team section)
 * Word-limited bios + "קרא עוד" modal + missing-photo placeholder
 * Reversible: remove enqueue in functions.php to fully revert.
 */

/* Read-more button */
.smt-readmore {
  display: inline-block;
  margin-top: 1rem;
  padding: .55rem 1.8rem;
  font: inherit;
  font-size: var(--text-m, 1.6rem);
  color: var(--white, #fff);
  background-color: var(--orange, #f08c2e);
  border: 0;
  border-radius: 3rem;
  cursor: pointer;
  transition: background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.smt-readmore:hover,
.smt-readmore:focus-visible {
  background-color: var(--blue-1, #2b6c8a);
  outline: 2px solid var(--blue-1, #2b6c8a);
  outline-offset: 2px;
}

/* Truncated text helper – the trailing ellipsis sits inline before the button */
.smt-bio-truncated .smt-ellipsis { unicode-bidi: isolate; }

/* Modal overlay */
.smt-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(20, 35, 45, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  direction: rtl;
}
.smt-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.smt-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 62rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--white, #fff);
  border: 1px solid var(--cream, #efe6d6);
  border-radius: 2rem;
  /* Bug 1 fix: clear space at the top + inline-start so the absolutely
     positioned close (X) button never overlaps the title or body text.
     RTL site => button is at inset-inline-start (right edge); reserve
     enough top room for the whole button + a gap below it. */
  padding: 5.6rem 3rem 3rem;
  padding-inline-start: 5.6rem;
  box-shadow: 0 2rem 5rem rgba(20, 35, 45, .25);
  transform: translateY(12px);
  transition: transform .2s ease;
  text-align: right;
}
.smt-modal.is-open .smt-modal__dialog { transform: translateY(0); }

.smt-modal__close {
  position: absolute;
  top: 1.2rem;
  inset-inline-start: 1.2rem;
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--white, #fff);
  background: var(--orange, #f08c2e);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease;
}
.smt-modal__close:hover,
.smt-modal__close:focus-visible {
  background: var(--blue-1, #2b6c8a);
  outline: 2px solid var(--blue-1, #2b6c8a);
  outline-offset: 2px;
}

.smt-modal__name {
  margin: 0 0 .3rem;
  font-size: var(--h-3, 2.4rem);
  font-weight: 500;
  color: var(--blue-1, #2b6c8a);
}
.smt-modal__role {
  margin: 0 0 1.6rem;
  font-size: var(--text-m, 1.6rem);
  color: var(--mustar, #d9a441);
}
.smt-modal__body {
  font-size: var(--text-m, 1.6rem);
  line-height: 1.8;
  color: var(--black, #1c2b33);
  /* Bug 2 fix: faithfully render the original bio HTML.
     The bio source uses <p>, <br> and (sometimes nested) <div dir="rtl">
     blocks. Force normal block flow + RTL so breaks/paragraphs show. */
  direction: rtl;
  text-align: right;
  white-space: normal;
}
/* Every block element becomes a real block; paragraph blocks get
   consistent spacing so <p>/<div> separations are visible.
   The (possible) outer wrapper <div> stays flush; only blocks that
   actually contain text get separation, so spacing is even. */
.smt-modal__body p,
.smt-modal__body div,
.smt-modal__body ul,
.smt-modal__body ol {
  display: block;
  direction: rtl;
  text-align: right;
}
.smt-modal__body p,
.smt-modal__body li,
.smt-modal__body div:not(:empty) {
  margin: 0 0 1.1rem;
}
.smt-modal__body br { display: block; content: ""; }
.smt-modal__body p:empty,
.smt-modal__body div:empty { margin: 0; }
.smt-modal__body > :last-child,
.smt-modal__body p:last-child,
.smt-modal__body div:last-child { margin-bottom: 0; }

body.smt-modal-open { overflow: hidden; }

/* Missing-photo placeholder – injected <img> keeps the component layout */
img.smt-photo-fallback {
  object-fit: cover;
  border-radius: 1rem;
  background: #e9f1f5;
}

@media (max-width: 478px) {
  /* keep top + inline-start clearance for the close (X) button on mobile */
  .smt-modal__dialog {
    padding: 5.4rem 1.6rem 2rem;
    padding-inline-start: 5.4rem;
  }
}