/* Rinus van Hagen – Online Colleges v1.0.15 */
.rva-online-colleges-addon{
  width:100%;
  max-width:1200px;
  box-sizing:border-box;
  margin:0 auto 72px;
  padding:58px 56px 48px;
  background:#f7f1e6;
  border:1px solid rgba(117,82,47,.16);
  border-radius:24px;
  box-shadow:0 18px 48px rgba(45,33,23,.09);
  overflow:visible;
}
.rva-online-colleges-copy{
  max-width:980px;
  margin:0 auto 34px;
  text-align:center;
}
.rva-online-colleges-copy .rva-kicker{
  display:inline-block;
  margin-bottom:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a633c;
}
.rva-online-colleges-copy h2{
  margin:10px 0 18px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(38px,4vw,58px)!important;
  line-height:1.04!important;
  letter-spacing:-.025em!important;
  color:#2b2119!important;
}
.rva-online-colleges-copy p{
  margin:0 auto 18px!important;
  max-width:900px;
  font-size:17px!important;
  line-height:1.75!important;
  color:#4a392b!important;
}
.rva-online-colleges-lead{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:22px!important;
  line-height:1.5!important;
  color:#2b2119!important;
}
.rva-online-colleges-copy strong{color:#2b2119!important}
.rva-online-colleges-note{
  display:flex;
  max-width:760px;
  margin:26px auto 0;
  gap:16px;
  align-items:flex-start;
  text-align:left;
  padding:18px 22px;
  background:#eee4d1;
  border-left:4px solid #b98b55;
  border-radius:0 12px 12px 0;
}
.rva-online-colleges-note>span{
  flex:0 0 auto;
  font-family:Georgia,serif;
  font-size:31px;
  line-height:1;
  color:#8a633c;
}
.rva-online-colleges-note strong{
  display:block;
  margin-bottom:4px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
}
.rva-online-colleges-note small{
  display:block;
  color:#6b5643;
  font-size:14px;
  line-height:1.55;
}
.rva-online-colleges-image{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  visibility:visible!important;
  opacity:1!important;
}
/* The source image has a fixed native ratio of 1536 × 967.
   The screen is deliberately locked to that ratio so every overlay remains
   geometrically attached to the image on desktop and mobile. */
.rva-online-colleges-screen{
  position:relative;
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1536 / 967;
  line-height:0;
  overflow:visible;
}
.rva-online-colleges-screen img{
  position:absolute!important;
  inset:0;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:fill;
  border-radius:16px;
  box-shadow:0 18px 42px rgba(45,33,23,.16);
  visibility:visible!important;
  opacity:1!important;
}

/* One immutable coordinate system for all Teams UI overlays. */
.rva-online-colleges-fixed-ui-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:10;
  pointer-events:none;
  overflow:visible;
}

.rva-online-colleges-focus-layer,
.rva-online-colleges-participants-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* Yuki Tanaka — coordinates are tied to the 1536 × 967 image, never to page layout. */
.rva-online-colleges-focus-layer .rva-online-colleges-student-focus{
  position:absolute;
  left:89.15%;
  top:48.8%;
  width:10.15%;
  height:11.8%;
  box-sizing:border-box;
  z-index:4;
  border:3px solid #f4c542;
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(244,197,66,.32),0 8px 20px rgba(18,35,65,.28);
}
.rva-online-colleges-student-focus::before{
  content:"";
  position:absolute;
  inset:-9px;
  border:1px solid rgba(244,197,66,.55);
  border-radius:12px;
}
.rva-online-colleges-student-focus span{
  position:absolute;
  left:50%;
  top:-34px;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:5px 9px;
  border-radius:7px;
  background:#f4c542;
  color:#17233b;
  font-size:11px;
  line-height:1;
  font-weight:800;
  box-shadow:0 5px 14px rgba(18,35,65,.2);
}
.rva-online-colleges-student-focus span::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:9px;
  height:9px;
  background:#f4c542;
  transform:translateX(-50%) rotate(45deg);
}

.rva-online-colleges-mic-on{
  position:absolute;
  z-index:6;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:50%;
  background:#1f8f5f;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(10,35,25,.35);
  pointer-events:none;
}
.rva-online-colleges-mic-on svg{width:14px;height:14px;fill:#fff}
.rva-online-colleges-mic-omar{left:86.85%;top:60.15%}
.rva-online-colleges-mic-yuki{left:96.95%;top:60.15%}

/* Participants tile: exact native-image coordinate system, including its label. */
.rva-online-colleges-participants-mask{
  position:absolute;
  left:89.05%;
  top:76.55%;
  width:10.3%;
  height:12.15%;
  z-index:6;
  box-sizing:border-box;
  border-radius:6px;
  background:linear-gradient(180deg,#1b2434 0%,#182130 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  pointer-events:none;
}
.rva-online-colleges-participants{
  position:absolute;
  left:92.95%;
  top:78.35%;
  width:3.45%;
  aspect-ratio:1;
  z-index:7;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border-radius:50%;
  background:#3b4659;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 2px 8px rgba(7,16,30,.34),inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(9px,.85vw,13px);
  line-height:1;
  font-weight:400;
  text-shadow:none;
  pointer-events:none;
}
.rva-online-colleges-participants span{color:#fff!important;font-size:inherit;font-weight:400}
.rva-online-colleges-participants::after{content:"";position:absolute;inset:2px;border:1px solid rgba(255,255,255,.07);border-radius:50%}
.rva-online-colleges-participants-mask::after{
  content:"Participants";
  position:absolute;
  left:8px;
  bottom:9px;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(8px,.82vw,12px);
  line-height:1;
  font-weight:400;
  white-space:nowrap;
}

/*
 * Dedicated positioning layer for the chat bubble.
 * The layer is locked to the exact dimensions of the source image, so the
 * bubble scales and moves with the image on desktop and mobile instead of
 * positioning itself relative to the surrounding page/figure.
 */
.rva-online-colleges-chat-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:8;
  pointer-events:none;
  overflow:visible;
}

/* Fixed chat anchor: its point is tied to the baked-in Chat control inside the image.
   The bubble is positioned from this anchor, never from the surrounding page/figure. */
.rva-online-colleges-chat-anchor{
  position:absolute;
  left:35.0%;
  top:93.0%;
  width:0;
  height:0;
  z-index:9;
  pointer-events:none;
}

/* Small chat window positioned directly above the baked-in Chat control. */
.rva-online-colleges-chat{
  position:absolute;
  left:0;
  bottom:12px;
  transform:translateX(-50%);
  z-index:1;
  width:23.5%;
  min-width:300px;
  max-width:360px;
  box-sizing:border-box;
  padding:10px 11px 11px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(20,39,73,.18);
  border-radius:10px 10px 10px 4px;
  box-shadow:0 10px 24px rgba(13,25,45,.30);
  color:#17233b;
  pointer-events:none;
}
.rva-online-colleges-chat::after{
  content:"";
  position:absolute;
  left:17px;
  bottom:-7px;
  width:13px;
  height:13px;
  background:#fff;
  border-right:1px solid rgba(20,39,73,.14);
  border-bottom:1px solid rgba(20,39,73,.14);
  transform:rotate(45deg);
}
.rva-online-colleges-chat-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}
.rva-online-colleges-chat-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 29px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#315b9b;
  color:#fff;
  font-size:10px;
  font-weight:800;
}
.rva-online-colleges-chat-head strong{
  display:block;
  font-size:11px;
  line-height:1.1;
}
.rva-online-colleges-chat-head small{
  display:block;
  margin-top:2px;
  color:#68758a;
  font-size:9px;
  line-height:1.1;
}
 .rva-online-colleges-chat-text{
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  line-height:1.38;
  color:#253452;
  padding-bottom:9px;
  margin-bottom:9px;
  border-bottom:1px solid rgba(23,35,59,.12);
}
.rva-online-colleges-chat-answer{
  padding-top:0;
}
.rva-online-colleges-chat-answer-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.rva-online-colleges-chat-prof-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 29px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#183f78;
  color:#fff;
  font-size:9px;
  font-weight:800;
}
.rva-online-colleges-chat-answer-head strong{
  display:block;
  font-size:11px;
  line-height:1.1;
  color:#17233b;
}
.rva-online-colleges-chat-answer-head small{
  display:block;
  margin-top:2px;
  color:#68758a;
  font-size:9px;
  line-height:1.1;
}
.rva-online-colleges-chat-answer-text{
  font-family:Arial,Helvetica,sans-serif;
  font-size:12px;
  line-height:1.4;
  color:#253452;
}
.rva-online-colleges-image figcaption{
  margin-top:10px;
  text-align:center;
  color:#7b624b;
  font-size:12px;
  line-height:1.5;
}

@media(max-width:900px){
  .rva-online-colleges-addon{padding:48px 34px 38px}
}
@media(max-width:560px){
  .rva-online-colleges-addon{
    width:100%;
    margin:0 0 56px;
    padding:34px 16px 28px;
    border-radius:18px;
  }
  .rva-online-colleges-copy{margin-bottom:28px}
  .rva-online-colleges-copy h2{font-size:38px!important}
  .rva-online-colleges-lead{font-size:20px!important}
  .rva-online-colleges-copy p{font-size:16px!important;line-height:1.7!important}
  .rva-online-colleges-note{padding:16px 17px;gap:12px}
  .rva-online-colleges-screen{display:block!important}
  .rva-online-colleges-screen img{
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    height:auto!important;
    border-radius:12px;
  }

  /* Keep the overlay coordinate system identical to desktop. The screen itself
     is always 1536:967, so nothing reflows or drifts on narrow screens. */
  .rva-online-colleges-screen{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1536 / 967;
  }
  .rva-online-colleges-screen img{
    position:absolute!important;
    inset:0;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    object-fit:fill;
    border-radius:12px;
  }
  .rva-online-colleges-focus-layer .rva-online-colleges-student-focus{
    left:89.15%;top:48.8%;width:10.15%;height:11.8%;
    border-width:2px;border-radius:6px;
    box-shadow:0 0 0 2px rgba(244,197,66,.28),0 5px 13px rgba(18,35,65,.24);
  }
  .rva-online-colleges-student-focus span{top:-27px;padding:4px 7px;font-size:9px}
  .rva-online-colleges-mic-on{width:19px;height:19px;border-width:1.5px}
  .rva-online-colleges-mic-on svg{width:10px;height:10px}
  .rva-online-colleges-mic-omar{left:86.85%;top:60.15%}
  .rva-online-colleges-mic-yuki{left:96.95%;top:60.15%}
  .rva-online-colleges-participants-mask{left:89.05%;top:76.55%;width:10.3%;height:12.15%;border-radius:5px}
  .rva-online-colleges-participants-mask::after{left:7px;bottom:8px;font-size:8px}
  .rva-online-colleges-participants{left:92.95%;top:78.35%;width:3.45%;font-size:8px;border-width:1px}
  .rva-online-colleges-participants::after{inset:2px}
  .rva-online-colleges-chat-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .rva-online-colleges-chat-anchor{
    left:35.0%;
    top:93.0%;
  }
  .rva-online-colleges-chat{
    left:0;
    bottom:8px;
    transform:translateX(-50%);
    /* Mobile: keep a readable, compact chat card instead of a long narrow strip.
       Width is tied to the image layer, while capped so it remains comfortable on phones. */
    width:min(72%, 300px);
    min-width:220px;
    max-width:300px;
    padding:9px 10px 10px;
    border-radius:8px 8px 8px 3px;
  }
  .rva-online-colleges-chat-avatar{
    flex-basis:23px;
    width:23px;
    height:23px;
    font-size:8px;
  }
  .rva-online-colleges-chat-head{gap:6px;margin-bottom:5px}
  .rva-online-colleges-chat-head strong{font-size:9px}
  .rva-online-colleges-chat-head small{font-size:7px}
  .rva-online-colleges-chat-text{font-size:10px;line-height:1.35;padding-bottom:7px;margin-bottom:7px}
  .rva-online-colleges-chat-answer-head{gap:6px;margin-bottom:5px}
  .rva-online-colleges-chat-prof-avatar{flex-basis:23px;width:23px;height:23px;font-size:7px}
  .rva-online-colleges-chat-answer-head strong{font-size:9px}
  .rva-online-colleges-chat-answer-head small{font-size:7px}
  .rva-online-colleges-chat-answer-text{font-size:10px;line-height:1.35}
}