@import url('./outline-type.css');

/* Connected Markets responsive label protection */
.geography .map-card{
  border-color:rgba(255,255,255,.58);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 70px rgba(0,0,0,.18);
  background:
    radial-gradient(circle at 45% 50%,rgba(63,124,255,.2),transparent 40%),
    linear-gradient(rgba(255,255,255,.115) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.115) 1px,transparent 1px);
  background-size:auto,35px 35px,35px 35px;
}
.geography .map-card:before,.geography .map-card:after{
  z-index:0;
  pointer-events:none;
  border-color:rgba(255,255,255,.62);
  box-shadow:0 0 18px rgba(255,255,255,.08),inset 0 0 18px rgba(255,255,255,.035);
}
.geography .map-card:after{border-color:rgba(255,255,255,.76)}
.geography .map-lines{position:absolute;inset:0;z-index:0;pointer-events:none}
.geography .location{z-index:2;width:max-content;max-width:150px;min-width:92px;padding:8px 10px 9px;border-radius:12px;background:rgba(7,17,31,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.geography .location i{flex:0 0 auto;margin-bottom:8px}
.geography .location b{display:block;white-space:nowrap;line-height:1.15}
.geography .location span{display:block;margin-top:4px;max-width:130px;line-height:1.35;white-space:normal;overflow-wrap:break-word}

/* Deliberately separated desktop positions */
.geography .loc-newyork{left:9%;top:46%}
.geography .loc-london{left:38%;top:24%}
.geography .loc-brussels{left:56%;top:40%}
.geography .loc-monaco{left:43%!important;top:67%!important}
.geography .loc-riyadh{left:75%;top:68%}

/* Keep the primary hero CTA label optically centred, independent of the arrow. */
.hero-actions .button-primary{
  position:relative;
  justify-content:center;
  text-align:center;
  min-width:190px;
  padding-left:46px;
  padding-right:46px;
}
.hero-actions .button-primary>span{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

@media(max-width:1100px){
  .geography .map-card{height:500px}
  .geography .location{max-width:142px;min-width:88px;padding:7px 9px}
  .geography .location span{max-width:122px;font-size:.67rem}
  .geography .loc-newyork{left:8%;top:48%}
  .geography .loc-london{left:36%;top:22%}
  .geography .loc-brussels{left:58%;top:42%}
  .geography .loc-monaco{left:38%!important;top:70%!important}
  .geography .loc-riyadh{left:76%;top:70%}
}

@media(max-width:680px){
  .geography .map-card{height:520px}
  .geography .location{max-width:116px;min-width:80px;padding:7px 8px;border-radius:10px}
  .geography .location b{font-size:.86rem}
  .geography .location span{max-width:100px;font-size:.62rem;line-height:1.3}
  .geography .location i{width:10px;height:10px;box-shadow:0 0 0 6px rgba(86,214,201,.12);margin-bottom:7px}
  .geography .loc-newyork{left:5%;top:42%}
  .geography .loc-london{left:31%;top:14%}
  .geography .loc-brussels{left:62%;top:34%}
  .geography .loc-monaco{left:24%!important;top:70%!important}
  .geography .loc-riyadh{left:66%;top:73%}
  .hero-actions .button-primary{width:100%;min-width:0}
}

@media(max-width:390px){
  .geography .map-card{height:550px}
  .geography .location{max-width:105px;min-width:74px}
  .geography .location span{max-width:88px;font-size:.59rem}
  .geography .loc-newyork{left:4%;top:42%}
  .geography .loc-london{left:29%;top:12%}
  .geography .loc-brussels{left:61%;top:34%}
  .geography .loc-monaco{left:18%!important;top:72%!important}
  .geography .loc-riyadh{left:64%;top:76%}
}

@media(max-width:900px) and (orientation:landscape){
  .geography .map-card{height:430px}
  .geography .location{max-width:125px}
  .geography .location span{max-width:108px;font-size:.62rem}
  .geography .loc-newyork{left:7%;top:47%}
  .geography .loc-london{left:37%;top:18%}
  .geography .loc-brussels{left:58%;top:38%}
  .geography .loc-monaco{left:39%!important;top:70%!important}
  .geography .loc-riyadh{left:77%;top:67%}
}