/* ==========================================================================
   ATHENA V5.3
   GLOBAL CARD HOVER / FOCUS INFORMATION POPUP
   ========================================================================== */

/* Card hover affordance */

.athena5-discovery-card,
.athena5-ecosystem-card,
.athena5-capability{
  position:relative;

  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.athena5-discovery-card:hover,
.athena5-ecosystem-card:hover,
.athena5-capability:hover,
.athena5-discovery-card:focus-visible,
.athena5-ecosystem-card:focus-visible,
.athena5-capability:focus-visible{
  transform:translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(7,36,69,.12);

  border-color:
    rgba(73,126,183,.34);
}

/* --------------------------------------------------------------------------
   POPUP
   -------------------------------------------------------------------------- */

#athena5CardPopup{
  position:fixed;

  width:330px;
  max-width:
    calc(100vw - 28px);

  padding:0;

  border:
    1px solid
    #cbd9e7;

  border-radius:13px;

  background:
    rgba(255,255,255,.99);

  color:#18395f;

  box-shadow:
    0 18px 44px
    rgba(4,30,58,.20);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:
    translateY(5px)
    scale(.985);

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;

  z-index:99999;
}

#athena5CardPopup.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;

  transform:
    translateY(0)
    scale(1);
}

/* Header */

.athena5-popup-head{
  display:flex;
  align-items:center;

  gap:10px;

  padding:
    13px 14px 11px;

  border-bottom:
    1px solid
    #e2e9f0;
}

.athena5-popup-icon{
  width:34px;
  height:34px;

  flex:
    0 0 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #e9f3ff,
      #f4efff
    );

  color:#075fcf;

  font-size:17px;
  font-weight:800;
}

.athena5-popup-heading{
  min-width:0;
}

.athena5-popup-heading strong{
  display:block;

  color:#12345e;

  font-size:14px;
  line-height:1.25;
}

.athena5-popup-heading span{
  display:block;

  margin-top:2px;

  color:#76899c;

  font-size:10.5px;
  line-height:1.3;
}

/* Content */

.athena5-popup-body{
  padding:
    12px 14px 13px;
}

.athena5-popup-summary{
  margin:0 0 11px;

  color:#526b85;

  font-size:11.5px;
  line-height:1.48;
}

.athena5-popup-section{
  margin-top:10px;
}

.athena5-popup-label{
  display:block;

  margin-bottom:5px;

  color:#244c77;

  font-size:10px;
  font-weight:850;

  letter-spacing:.045em;

  text-transform:uppercase;
}

.athena5-popup-list{
  margin:0;
  padding:0;

  list-style:none;
}

.athena5-popup-list li{
  position:relative;

  margin:4px 0;

  padding-left:13px;

  color:#566e87;

  font-size:10.7px;
  line-height:1.4;
}

.athena5-popup-list li::before{
  content:"";

  position:absolute;

  left:0;
  top:.52em;

  width:5px;
  height:5px;

  border-radius:50%;

  background:#1871d8;
}

/* Footer action */

.athena5-popup-footer{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:
    9px 14px 11px;

  border-top:
    1px solid
    #e6edf3;
}

.athena5-popup-footer span{
  color:#8493a4;

  font-size:9.5px;
}

.athena5-popup-open{
  display:inline-flex;

  align-items:center;

  gap:5px;

  color:#0865dc;

  font-size:10.5px;
  font-weight:800;

  text-decoration:none;
}

.athena5-popup-open:hover{
  text-decoration:underline;
}

/* Pointer */

#athena5CardPopup::before{
  content:"";

  position:absolute;

  top:-7px;
  left:30px;

  width:12px;
  height:12px;

  border-left:
    1px solid
    #cbd9e7;

  border-top:
    1px solid
    #cbd9e7;

  background:#fff;

  transform:
    rotate(45deg);
}

#athena5CardPopup.is-above::before{
  top:auto;
  bottom:-7px;

  transform:
    rotate(225deg);
}

/* mobile / narrow screen */

@media(max-width:700px){

  #athena5CardPopup{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    top:auto !important;

    width:auto;

    max-height:
      calc(100vh - 24px);

    overflow:auto;
  }

  #athena5CardPopup::before{
    display:none;
  }

}