/* OM Bio Tooltip — Cast & Creative hover cards + listing headshots on single production (template 5262) */

/* keep grids from clipping (card itself is position:fixed via JS) */
.single-productions .elementor-widget-jet-listing-grid .jet-listing-grid,
.single-productions .jet-listing-grid__items,
.single-productions .jet-listing-grid__item { overflow: visible; }

/* ---- listing item: headshot (or icon placeholder) beside name + role ---- */
.om-cast-item { position: relative; }
/* boxed container wraps widgets in .e-con-inner, so the grid goes there */
.om-cast-item > .e-con-inner {
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 13px !important;
  row-gap: 0 !important;
  align-items: center !important;
}
.om-cast-photo { grid-column: 1 !important; grid-row: 1 / 3 !important; }
.om-cast-item .elementor-element-2150c95 { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; text-align: left !important; }
.om-cast-item .elementor-element-8431956 { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin-top: 1px !important; text-align: left !important; }
.om-cast-item .elementor-element-2150c95 .jet-listing-dynamic-field,
.om-cast-item .elementor-element-8431956 .jet-listing-dynamic-field { justify-content: flex-start !important; }

/* circular photo frames */
.om-cast-photo {
  position: relative !important;
  align-self: center;
  width: 46px !important; height: 46px !important; flex: 0 0 46px;
  border-radius: 50% !important; overflow: hidden !important; padding: 0 !important;
  background: #EDE4D2 !important;
}
.om-bio-pop__photo {
  position: relative !important;
  flex: 0 0 58px !important; width: 58px !important; height: 58px !important;
  border-radius: 50% !important; overflow: hidden !important; padding: 0 !important; background: #EDE4D2 !important;
}

/* Collapse EVERY wrapper inside the circle with display:contents so the icon/image becomes a
   direct child of the circle. Critical: the popup photo nests an extra Elementor widget div
   (.elementor-widget, position:relative, height:0) between the circle and the content; left in
   place it traps the absolute icon at height 0. display:contents removes all these boxes so the
   circle itself is the icon's containing block — works for the flat listing widget AND the nested
   popup widget. See [[jetengine-dynamic-field-frame-centering]]. */
.om-cast-photo, .om-bio-pop__photo { position: relative !important; }
.om-cast-photo .elementor-widget, .om-cast-photo .elementor-widget-container, .om-cast-photo .jet-listing,
.om-cast-photo .jet-listing-dynamic-field, .om-cast-photo .jet-listing-dynamic-field__inline-wrap,
.om-cast-photo .jet-listing-dynamic-field__content,
.om-bio-pop__photo .elementor-widget, .om-bio-pop__photo .elementor-widget-container, .om-bio-pop__photo .jet-listing,
.om-bio-pop__photo .jet-listing-dynamic-field, .om-bio-pop__photo .jet-listing-dynamic-field__inline-wrap,
.om-bio-pop__photo .jet-listing-dynamic-field__content {
  display: contents !important;
}
/* placeholder icon: absolutely fill the circle, flex-center the glyph (box-centering alone leaves
   the webfont glyph painting off-center inside its own box) */
.om-cast-photo .om-avatar-icon, .om-bio-pop__photo .om-avatar-icon {
  position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important;
  line-height: 1 !important; color: #7A1F25; opacity: .5;
}
.om-cast-photo .om-avatar-icon { font-size: 21px; }
.om-bio-pop__photo .om-avatar-icon { font-size: 26px; }
/* headshot image: absolutely fill the circle */
.om-cast-photo img, .om-cast-photo .om-bio-pop__img,
.om-bio-pop__photo img, .om-bio-pop__photo .om-bio-pop__img {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block;
}

/* ---- the hover card (charcoal; JS repositions it edge-aware via position:fixed) ---- */
.om-cast-item .om-bio-pop {
  position: absolute !important;             /* no-JS fallback: above the item */
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%);
  width: 400px !important;
  max-width: 84vw !important;
  background: #14110F;
  border: 1px solid rgba(244, 239, 230, .12);
  border-radius: 12px;
  box-shadow: 0 22px 50px -16px rgba(0, 0, 0, .55);
  padding: 18px 18px 16px !important;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease;
  z-index: 9999 !important;
}
.om-cast-item:hover .om-bio-pop,
.om-cast-item:focus-within .om-bio-pop { opacity: 1; visibility: visible; }

/* caret points toward the photo; JS adds a placement class + sets --caret-x / --caret-y */
.om-cast-item .om-bio-pop::after { content: ""; position: absolute; border: 9px solid transparent; }
.om-bio-pop.om-bio-pop--right::after { right: 100%; top: var(--caret-y, 50%); transform: translateY(-50%); border-right-color: #14110F; }
.om-bio-pop.om-bio-pop--left::after  { left: 100%;  top: var(--caret-y, 50%); transform: translateY(-50%); border-left-color: #14110F; }
.om-bio-pop.om-bio-pop--above::after { top: 100%;  left: var(--caret-x, 50%); transform: translateX(-50%); border-top-color: #14110F; }
.om-bio-pop.om-bio-pop--below::after { bottom: 100%; left: var(--caret-x, 50%); transform: translateX(-50%); border-bottom-color: #14110F; }

/* header row: photo + name/role */
.om-bio-pop__head {
  display: flex !important; flex-direction: row !important; gap: 14px !important; align-items: center !important; margin-bottom: 12px !important;
}
.om-bio-pop__id { flex: 1 1 auto !important; min-width: 0 !important; gap: 0 !important; }

/* name + role + bio — light type on charcoal */
.om-bio-pop__name .jet-listing-dynamic-field__content {
  font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; color: #F7F3EC;
}
.om-bio-pop__role { margin-top: 1px !important; }
.om-bio-pop__role .jet-listing-dynamic-field__content {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #E8D7A9;
}
.om-bio-pop__bio .jet-listing-dynamic-field__content {
  font-family: "proxima-nova", sans-serif; font-size: 13.5px; line-height: 1.5; color: #D6CEC1;
}
.om-bio-pop__bio .jet-listing-dynamic-field__content p { margin: 0 0 .7em; }
.om-bio-pop__bio .jet-listing-dynamic-field__content p:last-child { margin-bottom: 0; }

/* GATE: only enable the hover card when the bio has non-empty text */
.om-cast-item:not(:has(.om-bio-pop__bio .jet-listing-dynamic-field__content:not(:empty))) .om-bio-pop { display: none !important; }
.om-cast-item:has(.om-bio-pop__bio .jet-listing-dynamic-field__content:not(:empty)) { cursor: help; }

@media (max-width: 767px) { .om-cast-item .om-bio-pop { width: 340px !important; } }