@charset "utf-8";

/* ============================================================
   SECTION REFRESH - ErgoBytes, ErgoConnect, Journey, Contact
   Keeps these sections cohesive with the ErgoSphere flagship.
   Scoped by #id or new prefixed classes; reuses the EE brand
   tokens (navy #0a1628, gunmetal #1a2332, cyan #00d4ff).
   ============================================================ */

/* ===== ErgoBytes: play affordance on episode cards ===== */
#ergobytes .episode_card{ position:relative; }

/* Scrim so the play button reads on bright thumbnails */
#ergobytes .episode_card::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(8,18,32,.62), rgba(8,18,32,0) 55%);
  opacity:.92; transition:opacity .3s ease;
}
/* Circular play button */
#ergobytes .episode_card::after{
  content:"\25B6"; position:absolute; top:50%; left:50%; z-index:2;
  width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  color:#fff; font-size:19px; line-height:1;
  background:rgba(10,22,40,.68); border:1.6px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  transition:transform .3s ease, border-color .3s ease, color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
#ergobytes .episode_card:hover::before{ opacity:.5; }
#ergobytes .episode_card:hover::after{
  transform:scale(1.08); color:#00d4ff; border-color:#00d4ff;
  background:rgba(10,22,40,.85); box-shadow:0 10px 30px rgba(0,212,255,.28);
}

/* ===== ErgoConnect: value chips + richer screengrab frame ===== */
#ergoconnect .ecn_chips{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;
}
#ergoconnect .ecn_chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:30px;
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:500;
  color:rgba(255,255,255,.82);
  background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.22);
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
#ergoconnect .ecn_chip::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:#00d4ff; box-shadow:0 0 8px rgba(0,212,255,.7);
}
#ergoconnect .ecn_chip:hover{
  color:#fff; border-color:rgba(0,212,255,.5); background:rgba(0,212,255,.1);
}
#ergoconnect .right .image{
  border:1px solid rgba(0,212,255,.22);
  box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 40px rgba(0,212,255,.12);
}

/* ===== Journey: credential cards ===== */
.jrn_creds{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px;
  margin-top:50px;
}
.jrn_cred{
  text-align:center; padding:26px 16px 22px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.09);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.jrn_cred:hover{
  transform:translateY(-5px); border-color:rgba(0,212,255,.45);
  box-shadow:0 16px 40px rgba(0,0,0,.32), 0 0 26px rgba(0,212,255,.1);
}
.jrn_cred_ico{
  width:46px; height:46px; margin:0 auto 14px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.28);
  color:#00d4ff;
}
.jrn_cred_ico svg{ width:23px; height:23px; }
.jrn_cred_num{
  font-family:'Archivo Black', Arial Black, sans-serif;
  font-size:30px; line-height:1; color:#fff; margin-bottom:8px; letter-spacing:.3px;
}
.jrn_cred_label{
  font-family:'Poppins',sans-serif; font-size:12px; letter-spacing:.05em;
  color:rgba(255,255,255,.62); line-height:1.4;
}
@media (max-width:1040px){
  .jrn_creds{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:620px){
  .jrn_creds{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .jrn_cred{ padding:22px 12px 18px; }
  .jrn_cred_num{ font-size:24px; }
}

/* ===== Contact: info cards (desktop only) =====
   Below 1040px the site intentionally collapses Contact to an
   icon-only circle row (text hidden, location hidden, YouTube shown),
   so the card treatment is gated to desktop and leaves mobile alone. */
@media (min-width:1041px){
  #contact .contact_simple{ max-width:1040px; margin:0 auto; }
  #contact .contact_info{ width:100%; }
  #contact .info_list ul{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
    gap:18px; margin:0; padding:0;
  }
  #contact .info_list ul li{
    margin-bottom:0 !important; flex:1 1 300px; max-width:346px; list-style:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:32px 14px;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  #contact .info_list ul li:hover{
    transform:translateY(-4px); border-color:rgba(0,212,255,.4);
    box-shadow:0 14px 34px rgba(0,0,0,.3), 0 0 24px rgba(0,212,255,.09);
  }
  /* Centred vertical layout: icon badge on top, label, value */
  #contact .info_list ul li .list_inner{
    flex-direction:column; align-items:center; justify-content:flex-start;
    text-align:center; gap:15px; width:100%; padding-left:0 !important;
  }
  /* Icon badge - the anchor holds the icon for email/linkedin, the bare img for location */
  #contact .info_list ul li .list_inner > a,
  #contact .info_list ul li .list_inner > img.svg{
    width:58px; height:58px; min-width:58px; border-radius:16px; margin:0;
    display:flex; align-items:center; justify-content:center; box-sizing:border-box;
    background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.28);
    transition:border-color .25s ease, background .25s ease;
  }
  #contact .info_list ul li .list_inner > a:hover{
    border-color:rgba(0,212,255,.6); background:rgba(0,212,255,.16);
  }
  #contact .info_list ul li .list_inner > a img.svg{ width:26px; height:26px; min-width:26px; }
  #contact .info_list ul li .list_inner > img.svg{ padding:16px; }
  #contact .info_list ul li p{ margin:0; }
  #contact .info_list ul li .first{ display:block; margin-bottom:7px; }
  #contact .info_list ul li .second{ display:block; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
  #contact .info_list ul li.location-item .second,
  #contact .info_list ul li.linkedin-item .second{ font-size:15px; }
}

/* Focus visibility for the freshened interactive elements */
#ergobytes .episode_card:focus-visible,
#ergoconnect .ecn_chip:focus-visible,
#contact .info_list ul li a:focus-visible{
  outline:2px solid #00d4ff; outline-offset:3px; border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
  #ergobytes .episode_card,
  #ergobytes .episode_card::after,
  .jrn_cred, #contact .info_list ul li, #ergoconnect .ecn_chip{ transition:none; }
}