/* Small presentation refinements layered on top of the existing portfolio. */

/* Contact: keep the copy, remove the unnecessary card around it. */
#contact .contact-grid{align-items:center!important}
#contact .contact-copy{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:18px 10px!important;
  min-height:0!important;
}
#contact .contact-copy::before,#contact .contact-copy::after{display:none!important}

/* Nology: make the CTA use the available copy-column width like the concept preview. */
#nology .nology-copy .button{
  width:100%!important;
  max-width:none!important;
  justify-content:space-between!important;
  margin-top:8px!important;
}

/* Credibility links for selected industry involvement cards. */
#events .event-card{position:relative}
#events .event-source-link{
  position:absolute;
  z-index:8;
  top:14px;
  inset-inline-end:14px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:calc(100% - 28px);
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(5,7,10,.72);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
#events .event-source-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#events .event-source-link:hover{
  transform:translateY(-1px);
  background:rgba(10,12,16,.86);
  border-color:rgba(255,255,255,.32);
}
html[data-theme='light'] #events .event-source-link{
  background:rgba(17,19,24,.74);
  color:#fff;
}

/* Snapchat: compact proof, but with enough space to read as a deliberate section. */
#recognition .snapchat-proof{
  margin-top:22px;
  display:grid;
  grid-template-columns:minmax(300px,1.25fr) minmax(430px,1fr) auto;
  align-items:center;
  gap:32px;
  min-height:142px;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  box-shadow:0 14px 42px rgba(0,0,0,.08);
  animation:snapchatProofIn .42s ease both;
}
#recognition .snapchat-proof-copy{min-width:0}
#recognition .snapchat-proof-copy>small{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#recognition .snapchat-proof h3{
  margin:0;
  max-width:620px;
  font-family:var(--display);
  font-size:clamp(16px,1.3vw,21px);
  line-height:1.18;
  letter-spacing:-.025em;
}
html[dir='rtl'] #recognition .snapchat-proof h3{font-family:var(--arabic);letter-spacing:0;line-height:1.55}
#recognition .snapchat-proof-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(110px,1fr));
  gap:18px;
  align-items:start;
}
#recognition .snapchat-proof-metrics span{
  min-width:0;
  min-height:66px;
  padding-inline-start:16px;
  border-inline-start:1px solid var(--line);
}
#recognition .snapchat-proof-metrics b{
  display:block;
  font-family:var(--display);
  font-size:18px;
  line-height:1;
  letter-spacing:-.025em;
}
#recognition .snapchat-proof-metrics small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  font-size:9.5px;
  line-height:1.5;
}
html[dir='rtl'] #recognition .snapchat-proof-metrics b{font-family:var(--arabic);letter-spacing:0}
#recognition .snapchat-proof-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  align-self:center;
  padding-inline:4px;
}
#recognition .snapchat-proof-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes snapchatProofIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:1100px){
  #recognition .snapchat-proof{
    grid-template-columns:minmax(260px,1fr) minmax(360px,1.2fr);
    gap:24px 28px;
  }
  #recognition .snapchat-proof-link{grid-column:1/-1;justify-self:start}
}

@media(max-width:820px){
  #recognition .snapchat-proof{grid-template-columns:1fr;gap:20px;padding:22px}
  #recognition .snapchat-proof-metrics{max-width:680px;width:100%}
  #recognition .snapchat-proof-link{grid-column:auto}
}

@media(max-width:760px){
  #contact .contact-copy{padding:0!important}
  #events .event-source-link{top:11px;inset-inline-end:11px;font-size:9.5px;min-height:32px}
  #recognition .snapchat-proof{margin-top:16px;padding:20px 18px;border-radius:18px;gap:18px;min-height:0}
  #recognition .snapchat-proof h3{font-size:16px}
  #recognition .snapchat-proof-metrics{grid-template-columns:repeat(3,1fr);gap:10px}
  #recognition .snapchat-proof-metrics span{padding-inline-start:10px;min-height:60px}
  #recognition .snapchat-proof-metrics b{font-size:17px}
  #recognition .snapchat-proof-metrics small{font-size:8.5px;line-height:1.45}
}

/* --------------------------------------------------------------------------
   Hero role cards — keep the portrait completely clean and place both role
   cards below it, like the approved preview. Both cards remain intentionally
   dark in light and dark themes; previous role is visibly secondary.
   -------------------------------------------------------------------------- */
html body main .hero .hero-grid .hero-visual{
  padding-bottom:112px!important;
}
html body main .hero .hero-grid .portrait-card::before{
  background:none!important;
}
html body main .hero .hero-grid .portrait-caption{
  display:none!important;
}

/* Current role: wider and primary. Keep the existing Jazeera logo artwork. */
html body main .hero .hero-grid .hero-visual .note-a{
  left:0!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  width:58%!important;
  min-width:0!important;
  max-width:none!important;
  height:94px!important;
  min-height:94px!important;
  padding:15px 108px 15px 18px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background-color:#11151b!important;
  background-position:right 17px center!important;
  background-size:82px auto!important;
  color:#f6f7f8!important;
  box-shadow:0 14px 34px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  animation:none!important;
  transform:none!important;
}
html body main .hero .hero-grid .hero-visual .note-a small{
  color:#aeb4bd!important;
  font-size:8.5px!important;
  margin-bottom:5px!important;
}
html body main .hero .hero-grid .hero-visual .note-a strong{
  color:#fff!important;
  font-size:13.5px!important;
  line-height:1.22!important;
}

/* Previous role: smaller card and smaller job title. Keep the existing Zain mark. */
html body main .hero .hero-grid .hero-visual::before{
  left:auto!important;
  right:0!important;
  top:auto!important;
  bottom:6px!important;
  width:38%!important;
  height:82px!important;
  min-height:82px!important;
  padding:13px 82px 12px 14px!important;
  border-radius:17px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background-color:#11151b!important;
  background-position:right 13px center!important;
  background-size:60px auto!important;
  color:#9da4ae!important;
  box-shadow:0 12px 30px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  font-size:7.8px!important;
  line-height:1.2!important;
  z-index:5!important;
}
html body main .hero .hero-grid .hero-visual::after{
  left:auto!important;
  right:0!important;
  top:auto!important;
  bottom:6px!important;
  width:38%!important;
  height:82px!important;
  padding:30px 82px 11px 14px!important;
  color:#f3f4f5!important;
  font-size:10.4px!important;
  line-height:1.24!important;
  font-weight:800!important;
  z-index:6!important;
}

/* Mirror the role hierarchy for Arabic, while keeping the same black treatment. */
html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{
  left:auto!important;
  right:0!important;
  padding:15px 18px 15px 108px!important;
  background-position:left 17px center!important;
  text-align:right!important;
}
html[lang='ar'] body main .hero .hero-grid .hero-visual::before{
  left:0!important;
  right:auto!important;
  padding:13px 14px 12px 82px!important;
  background-position:left 13px center!important;
  text-align:right!important;
}
html[lang='ar'] body main .hero .hero-grid .hero-visual::after{
  left:0!important;
  right:auto!important;
  padding:30px 14px 11px 82px!important;
  text-align:right!important;
  font-size:10px!important;
}

@media(max-width:1050px) and (min-width:761px){
  html body main .hero .hero-grid .hero-visual{padding-bottom:108px!important}
  html body main .hero .hero-grid .hero-visual .note-a{
    width:59%!important;height:90px!important;min-height:90px!important;
    padding-right:94px!important;background-size:72px auto!important;
  }
  html body main .hero .hero-grid .hero-visual::before,
  html body main .hero .hero-grid .hero-visual::after{width:37%!important;height:78px!important;min-height:78px!important}
  html body main .hero .hero-grid .hero-visual::before{padding-right:72px!important;background-size:53px auto!important}
  html body main .hero .hero-grid .hero-visual::after{padding-right:72px!important;font-size:9.9px!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{padding-left:94px!important;padding-right:18px!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual::before{padding-left:72px!important;padding-right:14px!important}
  html[lang='ar'] body main .hero .hero-grid .hero-visual::after{padding-left:72px!important;padding-right:14px!important}
}

@media(max-width:760px){
  html body main .hero .hero-grid .hero-visual{padding-bottom:92px!important;width:96%!important}
  html body main .hero .hero-grid .hero-visual .note-a{
    left:0!important;right:auto!important;top:auto!important;bottom:0!important;
    width:57%!important;height:78px!important;min-height:78px!important;
    padding:11px 64px 11px 12px!important;
    background-position:right 10px center!important;background-size:48px auto!important;
    border-radius:14px!important;
  }
  html body main .hero .hero-grid .hero-visual .note-a small{font-size:7.4px!important}
  html body main .hero .hero-grid .hero-visual .note-a strong{font-size:11.3px!important}
  html body main .hero .hero-grid .hero-visual::before{
    left:auto!important;right:0!important;bottom:4px!important;
    width:39%!important;height:68px!important;min-height:68px!important;
    padding:10px 52px 9px 10px!important;
    background-position:right 8px center!important;background-size:39px auto!important;
    border-radius:13px!important;font-size:6.8px!important;
  }
  html body main .hero .hero-grid .hero-visual::after{
    left:auto!important;right:0!important;bottom:4px!important;
    width:39%!important;height:68px!important;
    padding:25px 52px 8px 10px!important;
    font-size:8.7px!important;line-height:1.25!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual .note-a{
    left:auto!important;right:0!important;padding:11px 12px 11px 64px!important;background-position:left 10px center!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual::before{
    left:0!important;right:auto!important;padding:10px 10px 9px 52px!important;background-position:left 8px center!important;
  }
  html[lang='ar'] body main .hero .hero-grid .hero-visual::after{
    left:0!important;right:auto!important;padding:25px 10px 8px 52px!important;font-size:8.4px!important;
  }
}