/* =========================
   Meet Our Alums (acf/meet-our-alums)
   Clean + conflict-free
   ========================= */

.mh-alums {
  position: relative;
  padding: 80px 0;
  overflow: visible;
  background: transparent;
}

.mh-alums__inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  min-height: 700px; /* space for absolute layout */
  --design-w: 1800;
  --design-h: 700; /* matches your min-height canvas */
}



/* =========================
   Node geometry + stacking
   ========================= */

.mh-alums__node {
  position: absolute;
  overflow: visible;

  /* Tunables */
  --gap: 14px;
  --circle: 0px;             /* set by .is-xxx class on NODE */
  --line-pos: 0.15;          /* 15% from top default */
  --label-offset: 10px;      /* distance above/below connector */
  --line-width: var(--line-w, 275px); /* uses inline style="--line-w:270px" */
}

/* Circle sizes (NODE receives is-xxx class in PHP) */
/* Responsive circle sizing (based on 1800px artboard) */
.mh-alums__node.is-484 { --circle: clamp(206.7px, 26.8889vw, 484px); } /* 484/1800 */
.mh-alums__node.is-339 { --circle: clamp(144.8px, 18.8333vw, 339px); } /* 339/1800 */
.mh-alums__node.is-571 { --circle: clamp(243.9px, 31.7222vw, 571px); } /* 571/1800 */
.mh-alums__node.is-281 { --circle: clamp(120.0px, 15.6111vw, 281px); } /* 281/1800 */


/* Layering: line behind circles, text above */
.mh-alums__connector { position: absolute; z-index: 1; }
.mh-alums__circle    { position: absolute; z-index: 2; }
.mh-alums__text      { position: absolute; z-index: 3; }

/* =========================
   Circle image + rings
   ========================= */

.mh-alums__circle {
  top: 0;
  left: 0;

  width: var(--circle);
  height: var(--circle);
  border-radius: 999px;

  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

/* Rings / borders */
.mh-alums__circle.is-ring-none { }

.mh-alums__circle.is-ring-single::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  border: 3px solid #DED9C9;
  pointer-events: none;
}

.mh-alums__circle.is-ring-double::before,
.mh-alums__circle.is-ring-double::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  border: 3px solid #DED9C9;
  pointer-events: none;
}

.mh-alums__circle.is-ring-double::before { inset: -10px; }
.mh-alums__circle.is-ring-double::after  { inset: -22px; }

/* =========================
   Connector placement
   - anchored to circle size + line-pos
   ========================= */

.mh-alums__connector {
  width: var(--line-width);
  height: 3px;
  background: #DED9C9;

  /* 15% from top by default, overridden per node below */
  top: calc(var(--circle) * var(--line-pos));
  transform: translateY(-50%);
}

/*
  X placement rules
  - RIGHT-going: start near the circle edge (your tweak)
  - LEFT-going: extend leftwards from circle edge
*/
.mh-alums__node[data-line-side="right"] .mh-alums__connector {
  left: calc(var(--circle) - (var(--gap) * 2));
}

.mh-alums__node[data-line-side="left"] .mh-alums__connector {
  left: calc((var(--gap) * 2) - var(--line-width));
}

/* =========================
   Text placement
   - same width + same X as connector
   - sits directly above/below connector line
   ========================= */

.mh-alums__text {
  width: var(--line-width);
  max-width: var(--line-width);
  text-align: left;

  color: #191919;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.18px;
}

/* Anchor text X to connector X */
.mh-alums__node[data-line-side="right"] .mh-alums__text {
  left: calc(var(--circle) - (var(--gap) * 2));
}

.mh-alums__node[data-line-side="left"] .mh-alums__text {
  left: calc((var(--gap) * 2) - var(--line-width));
}

/* Default: ABOVE the connector */
.mh-alums__text {
  top: calc((var(--circle) * var(--line-pos)) - var(--label-offset));
  transform: translateY(-100%);
}

/* Bottom labels (left outside + right outside) */
.mh-alums__node--left-out .mh-alums__text,
.mh-alums__node--right-out .mh-alums__text {
  top: calc((var(--circle) * var(--line-pos)) + var(--label-offset));
  transform: none;
}

.mh-alums__name { margin: 0; }

.mh-alums__sub {
  margin-top: 4px;
  font-weight: 400;
  opacity: 0.85;
  font-size: 14px;
  line-height: 100%;
}

.mh-alums__sub_class{
  margin-top: 4px;
  font-weight: 400;
  opacity: 0.85;
  font-size: 14px;
  line-height: 100%;
  display: none;
}

/* =========================
   Per-node connector Y rules
   ========================= */

/* left inside + right inside: 15% from top */
.mh-alums__node--left-in,
.mh-alums__node--right-in {
  --line-pos: 0.15;
}

/* left outside + right outside: 15% from bottom */
.mh-alums__node--left-out,
.mh-alums__node--right-out {
  --line-pos: 0.85;
}

/* Pull specific nodes closer to the circle (your request) */
.mh-alums__node--left-out { --gap: 35px; }
.mh-alums__node--right-in { --gap: 35px; }

/* =========================
   Positioning (desktop)
   Keep your current circle placement
   ========================= */

/* Left outside (Clinton Campion) */
.mh-alums__node--left-out {
  left: -5%;
  top: 180px;
}

/* Left inside (Chris Pham) */
.mh-alums__node--left-in {
  left: 12%;
  top: -5%;
}

/* Right inside (Rashanda Bruce) */
.mh-alums__node--right-in {
  left: 45%;
  top: -5%;
}

/* Right outside (Stephanie Menning) */
.mh-alums__node--right-out {
  right: 32%;
  bottom: 50%;
}

/* .mh-alums__node[data-line-side="right"].mh-alums__node--right-in .mh-alums__text {
    left: 480px;
}

.mh-alums__node[data-line-side="right"].mh-alums__node--right-in .mh-alums__connector {
    left: 480px;
} */

/* =========================================
   Responsive desktop positioning (769px+)
   Keep overlap relationships based on 1800px comp
   ========================================= */
@media (min-width: 768px){

  /* Scale factor: 1 at 1800px wide, smaller below that */
  .mh-alums__inner{
    --sx: clamp(0.4272, (100vw / (var(--design-w) * 1px)), 1); 
    /* 0.4272 = 769/1800 (floor so it doesn't collapse at breakpoint) */
  }

  /* Convert "comp pixels" to responsive px */
  .mh-alums__node{
    --px: calc(var(--sx) * 1px);
  }

  /* Left outside (Clinton Campion) — was: left:-5%; top:180px */
  .mh-alums__node--left-out{
    left: calc(-0.05 * 100%);
    top:  calc(180 * var(--px));
  }

  /* Left inside (Chris Pham) — was: left:12%; top:-5% */
  .mh-alums__node--left-in{
    left: calc(0.12 * 100%);
    top:  calc(-0.05 * 100%);
  }

  /* Right inside (Rashanda Bruce) — was: left:45%; top:-5% */
  .mh-alums__node--right-in{
    left: calc(0.45 * 100%);
    top:  calc(-0.05 * 100%);
  }

  /* Right outside (Stephanie Menning) — was: right:32%; bottom:50% */
  .mh-alums__node--right-out{
    right: calc(0.32 * 100%);
    bottom: calc(0.50 * 100%);
  }
}
@media (max-width: 1400px) {

  .mh-alums__node--right-out {
    right: 32%;
    bottom: 63%;
  }

}

@media (min-width: 993px) and (max-width: 1300px) {
  .mh-alums__node.mh-alums__node--right-in.is-571 .mh-alums__text {
      top: -13px;
      left: 131px;
  }
  .mh-alums__node.mh-alums__node--left-out.is-484 .mh-alums__text {
          left: 200px;
    top: 372px;
  }
  .mh-alums__node.mh-alums__node--left-out.is-484 .mh-alums__connector {
                 top: 336px;
        left: 200px;
  }
  .mh-alums__node.mh-alums__node--right-in.is-571 .mh-alums__connector {
    top: 10px;
        left: 137px;
  }
  .mh-alums__node--right-out {
        right: 24%;
        bottom: 63%;
    }

      .mh-alums__node--right-in {
        left: 55vw;
        top: calc(-0.05 * 100%);
    }

}

/* =========================================
   Meet Our Alums — Mobile (<= Bootstrap md)
   FINAL replacement
   ========================================= */
@media (max-width: 992px) {

  .mh-alums {
    padding: 48px 0;
    overflow: visible;
    margin-bottom: 100px;
  }

  .mh-alums__inner{
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 0;                 /* comp is tight */
    padding: 0 18px;
    position: relative;
    margin-top: 50px;
  }

  /* -----------------------------------------
     Base mobile reset
     ----------------------------------------- */
  .mh-alums__node{
    position: relative !important;
    width: 100%;
    margin: 0;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .mh-alums__node[data-line-side="right"] .mh-alums__text {
    left: 0;
    top: -13px;
}

.mh-alums__node--left-out.mh-alums__node[data-line-side="right"] .mh-alums__text {
    top: initial !important;
    bottom: -100px;
}

  .mh-alums__connector{ display:none !important; }
/*   .mh-alums__text{ display:none !important; } */

  .mh-alums__circle{
    position: relative !important;
    margin: 0;
  }

  /* -----------------------------------------
     Exact mobile sizes
     ----------------------------------------- */
  .mh-alums__node.is-339 { --circle: 439px; }
  .mh-alums__node.is-484 { --circle: 584px; }
  .mh-alums__node--right-in.is-571 { --circle: 583px; }
  .mh-alums__node.is-281 { --circle: 381px; }

  /* -----------------------------------------
     1) LEFT IN — TOP
     339px, ~ -5% off RIGHT edge
     ----------------------------------------- */
  .mh-alums__node--left-in{
    display:flex;
    justify-content:flex-end;
  }
  .mh-alums__node--left-in .mh-alums__circle{
    margin-right: -5%;
  }

  /* -----------------------------------------
     2) LEFT OUT — SECOND
     484px, ~ -10% off LEFT edge
     overlaps upward
     ----------------------------------------- */
  .mh-alums__node--left-out{
    display:flex;
    justify-content:flex-start;
    margin-top: -70px;
  }
  .mh-alums__node--left-out .mh-alums__circle{
    margin-left: -10%;
  }

  /* -----------------------------------------
     3) RIGHT IN — THIRD
     483px, ~ -10% off LEFT edge
     reserves space for overlap
     ----------------------------------------- */
  .mh-alums__node--right-in{
    display:flex;
    justify-content:flex-start;
    margin-top: 300px;
    padding-bottom: 140px;
    position: relative;
  }
  .mh-alums__node--right-in .mh-alums__circle{
    margin-left: -10%;
  }

  /* -----------------------------------------
     4) RIGHT OUT — OVERLAP
     281px, ~ -5% off RIGHT edge
     ----------------------------------------- */
  .mh-alums__node--right-out{
    position: absolute !important;
    right: auto !important;
    bottom: 10px !important;
            left: 33vw !important;
    z-index: 10;
  }

  .mh-alums__node--right-out.mh-alums__node[data-line-side="left"] .mh-alums__text {
    top: 111%;
    left: -25%;
    /* bottom: 17px; */
}

  /* Safety: prevent ring clipping */
  .mh-alums__node,
  .mh-alums__inner{
    overflow: visible !important;
  }
}

@media (max-width: 500px) {

  .mh-alums__node.is-339 { --circle: 339px; }
  .mh-alums__node.is-484 { --circle: 434px; }
  .mh-alums__node--right-in.is-571 { --circle: 430px; }
  .mh-alums__node.is-281 { --circle: 281px; }

  .mh-alums__inner {
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 18px;
        position: relative;
        margin-top: 50px;
        margin-bottom: 40px;
    }
}