.elementor-4212 .elementor-element.elementor-element-eb95396{overflow:visible;}.elementor-4212 .elementor-element.elementor-element-2e74610{overflow:visible;}.elementor-4212 .elementor-element.elementor-element-7c786ee{overflow:visible;}.elementor-4212 .elementor-element.elementor-element-418cddf{overflow:visible;}.elementor-4212 .elementor-element.elementor-element-7bcf323{overflow:visible;}.elementor-4212 .elementor-element.elementor-element-ebfd1d4{overflow:visible;}/* Start custom CSS for section, class: .elementor-element-eb95396 *//* ==========================================================================
   ARAB ELBOW COURSE — FACULTY PAGE
   Paste into: Appearance → Customize → Additional CSS
   Scope: add CSS class "ae-faculty" to the Elementor section/container that
          holds the faculty grid (Advanced → CSS Classes).
          Popups are targeted globally via [id^="popup_"] because the popup
          script moves them out of the section when opened.
   ========================================================================== */

:root {
  --ae-ink:        #060B14;
  --ae-panel:      #0E1626;
  --ae-panel-2:    #131F33;
  --ae-gold:       #C9A96E;
  --ae-gold-lit:   #E7CE9B;
  --ae-line:       rgba(201, 169, 110, 0.22);
  --ae-line-lit:   rgba(201, 169, 110, 0.55);
  --ae-text:       #E8ECF3;
  --ae-muted:      #97A4B8;
  --ae-shadow:     0 18px 44px rgba(0, 0, 0, 0.55);
  --ae-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   1. GRID + CARD SHELL
   ========================================================================== */

.ae-faculty {
  --ae-card-gap: 28px;
}

/* Every direct card wrapper stretches so rows stay level */
.ae-faculty .elementor-widget,
.ae-faculty .e-con-inner > * {
  height: 100%;
}

/* The card surface. Elementor wraps each item in a widget container —
   this styles that container without needing the theme's own class. */
.ae-faculty .elementor-widget-wrap,
.ae-faculty .elementor-widget-container {
  position: relative;
  height: 100%;
  background: linear-gradient(180deg, var(--ae-panel) 0%, var(--ae-ink) 100%);
  border: 1px solid var(--ae-line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.45s var(--ae-ease),
              transform 0.45s var(--ae-ease),
              box-shadow 0.45s var(--ae-ease);
}

.ae-faculty .elementor-widget-container:hover {
  border-color: var(--ae-line-lit);
  transform: translateY(-6px);
  box-shadow: var(--ae-shadow);
}

/* Signature: a thin gold rule that draws itself across the top on hover */
.ae-faculty .elementor-widget-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ae-gold), transparent);
  transition: width 0.6s var(--ae-ease);
  z-index: 3;
}

.ae-faculty .elementor-widget-container:hover::before {
  width: 100%;
}


/* ==========================================================================
   2. PORTRAITS — the big fix: mixed PNG cut-outs and scaled JPGs
      forced into one consistent frame so the grid stops looking ragged
   ========================================================================== */

.ae-faculty img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  background: var(--ae-panel-2);
  filter: grayscale(0.35) contrast(1.05) brightness(0.94);
  transition: filter 0.5s var(--ae-ease), transform 0.7s var(--ae-ease);
}

.ae-faculty .elementor-widget-container:hover img {
  filter: grayscale(0) contrast(1.02) brightness(1);
  transform: scale(1.045);
}

/* Keep the image tile from clipping oddly */
.ae-faculty figure,
.ae-faculty .elementor-image {
  margin: 0;
  overflow: hidden;
  line-height: 0;
}


/* ==========================================================================
   3. CARD TYPOGRAPHY
   ========================================================================== */

.ae-faculty h3,
.ae-faculty h4,
.ae-faculty .elementor-heading-title {
  margin: 18px 20px 6px;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--ae-text);
}

.ae-faculty h3 a,
.ae-faculty h4 a,
.ae-faculty .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ae-ease);
}

.ae-faculty .elementor-widget-container:hover h3 a,
.ae-faculty .elementor-widget-container:hover h4 a,
.ae-faculty h3 a:hover,
.ae-faculty h4 a:hover {
  color: var(--ae-gold-lit);
}

/* Country line — small gold caps preceded by a short rule */
.ae-faculty h3 + p,
.ae-faculty h4 + p,
.ae-faculty .elementor-widget-text-editor p {
  margin: 0 20px 20px;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ae-gold);
  position: relative;
}

.ae-faculty h3 + p::before,
.ae-faculty h4 + p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 1px;
  background: var(--ae-gold);
  opacity: 0.7;
}

/* The whole tile is clickable — give it a visible keyboard focus ring */
.ae-faculty a:focus-visible {
  outline: 2px solid var(--ae-gold-lit);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   4. RESET — stop card rules leaking into the hidden popup markup
      (the popup content sits inside each card until it is opened)
   ========================================================================== */

.ae-faculty [id^="popup_"] img {
  aspect-ratio: auto;
  filter: none;
  transform: none;
}

.ae-faculty [id^="popup_"] h3,
.ae-faculty [id^="popup_"] h4,
.ae-faculty [id^="popup_"] p {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}


/* ==========================================================================
   5. THE BIO POPUP
   ========================================================================== */

[id^="popup_"] {
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 44px 44px;
  background: linear-gradient(180deg, var(--ae-panel) 0%, var(--ae-ink) 100%);
  border: 1px solid var(--ae-line);
  border-top: 2px solid var(--ae-gold);
  border-radius: 3px;
  box-shadow: var(--ae-shadow);
  color: var(--ae-text);
  max-height: 86vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Portrait inside the popup — floated on desktop so the bio wraps around it */
[id^="popup_"] img {
  width: 190px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  float: left;
  margin: 4px 28px 18px 0;
  border: 1px solid var(--ae-line);
  border-radius: 2px;
  background: var(--ae-panel-2);
}

/* Kill the empty / broken flag placeholder image the template outputs */
[id^="popup_"] img[src=""],
[id^="popup_"] img[src="#"],
[id^="popup_"] img:not([src]) {
  display: none !important;
}

/* --- Name + country ----------------------------------------------------- */

[id^="popup_"] h3,
[id^="popup_"] h4 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

[id^="popup_"] h3 a,
[id^="popup_"] h4 a {
  color: inherit;
  text-decoration: none;
}

[id^="popup_"] h3 a:hover,
[id^="popup_"] h4 a:hover {
  color: var(--ae-gold-lit);
}

/* Country sits directly under the name */
[id^="popup_"] h3 + p,
[id^="popup_"] h4 + p {
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ae-line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ae-gold);
}

/* --- Body copy ---------------------------------------------------------- */

[id^="popup_"] p {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ae-muted);
  text-align: left;
  hyphens: none;
}

[id^="popup_"] p:last-child {
  margin-bottom: 0;
}

/* Titles/affiliations come through as <strong> with <br> line breaks —
   render them as a clean gold credential block rather than bold body text */
[id^="popup_"] strong,
[id^="popup_"] b {
  color: var(--ae-gold-lit);
  font-weight: 600;
  letter-spacing: 0.015em;
}

[id^="popup_"] p:first-of-type strong {
  font-size: 13.5px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[id^="popup_"] em,
[id^="popup_"] i {
  color: var(--ae-text);
  font-style: italic;
}

[id^="popup_"] br + br {
  display: none;
}

[id^="popup_"] ul,
[id^="popup_"] ol {
  margin: 0 0 16px 1.1em;
  color: var(--ae-muted);
  font-size: 15.5px;
  line-height: 1.75;
}

[id^="popup_"] li::marker {
  color: var(--ae-gold);
}

/* Collapse the stray empty paragraphs the editor leaves behind */
[id^="popup_"] p:empty,
[id^="popup_"] p > br:only-child {
  display: none;
}

/* --- Social row --------------------------------------------------------- */

[id^="popup_"] ul li {
  list-style: none;
}

[id^="popup_"] a[href="#"],
[id^="popup_"] .social-icons a,
[id^="popup_"] ul li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 4px 8px 0 0;
  border: 1px solid var(--ae-line);
  border-radius: 50%;
  color: var(--ae-gold);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.3s var(--ae-ease),
              color 0.3s var(--ae-ease),
              border-color 0.3s var(--ae-ease);
}

[id^="popup_"] a[href="#"]:hover,
[id^="popup_"] .social-icons a:hover,
[id^="popup_"] ul li a:hover {
  background: var(--ae-gold);
  border-color: var(--ae-gold);
  color: var(--ae-ink);
}

/* --- Scrollbar ---------------------------------------------------------- */

[id^="popup_"] {
  scrollbar-width: thin;
  scrollbar-color: var(--ae-line-lit) transparent;
}

[id^="popup_"]::-webkit-scrollbar {
  width: 6px;
}

[id^="popup_"]::-webkit-scrollbar-thumb {
  background: var(--ae-line-lit);
  border-radius: 3px;
}

[id^="popup_"]::-webkit-scrollbar-track {
  background: transparent;
}


/* ==========================================================================
   6. POPUP CHROME (overlay + close button)
      Covers Magnific Popup and Elementor Pro popups — harmless if unused.
   ========================================================================== */

.mfp-bg {
  background: rgba(4, 8, 16, 0.9);
  opacity: 1;
  backdrop-filter: blur(3px);
}

.mfp-container {
  padding: 24px 16px;
}

.mfp-close,
.mfp-close:active,
.dialog-close-button {
  width: 42px;
  height: 42px;
  top: 8px;
  right: 8px;
  color: var(--ae-gold) !important;
  opacity: 1;
  font-size: 26px;
  line-height: 40px;
  border: 1px solid var(--ae-line);
  border-radius: 50%;
  background: rgba(6, 11, 20, 0.7);
  transition: background 0.3s var(--ae-ease), color 0.3s var(--ae-ease);
}

.mfp-close:hover,
.dialog-close-button:hover {
  background: var(--ae-gold);
  color: var(--ae-ink) !important;
}

.mfp-zoom-in .mfp-content {
  opacity: 0;
  transform: scale(0.96);
  transition: all 0.3s var(--ae-ease);
}

.mfp-zoom-in.mfp-ready .mfp-content {
  opacity: 1;
  transform: scale(1);
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  [id^="popup_"] {
    padding: 34px 30px 36px;
  }

  [id^="popup_"] img {
    width: 150px;
    margin-right: 22px;
  }
}

@media (max-width: 767px) {
  [id^="popup_"] {
    padding: 28px 20px 32px;
    max-height: 88vh;
  }

  [id^="popup_"] img {
    float: none;
    width: 130px;
    margin: 0 0 18px;
  }

  [id^="popup_"] h3,
  [id^="popup_"] h4 {
    font-size: 20px;
  }

  [id^="popup_"] p {
    font-size: 15px;
    line-height: 1.72;
  }

  [id^="popup_"] p:first-of-type strong {
    font-size: 12.5px;
  }

  .ae-faculty h3,
  .ae-faculty h4,
  .ae-faculty .elementor-heading-title {
    margin: 14px 16px 4px;
  }

  .ae-faculty h3 + p,
  .ae-faculty h4 + p {
    margin: 0 16px 16px;
  }
}


/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ae-faculty *,
  [id^="popup_"] * {
    transition: none !important;
    animation: none !important;
  }

  .ae-faculty .elementor-widget-container:hover {
    transform: none;
  }

  .ae-faculty .elementor-widget-container:hover img {
    transform: none;
  }
}/* End custom CSS */