/* Block: Connecting Talent with Opportunity — sector tabs (ported from live #panel-advanced) */


/* ====== TOKENS / BASE (PINK GLASS STYLE) ====== */

.sectors-tabs.v2{

  --pink:var(--mp-pink);

  --pink-dark:var(--mp-pink-dark);

  --blue:var(--mp-blue);

  --text:var(--mp-ink);

  --glassTop:rgba(255,255,255,.26);

  --glassBot:rgba(255,255,255,.16);

  --glassOutline:rgba(255,255,255,.32);

  position:relative;

  isolation:isolate;

  overflow:clip;

  background: radial-gradient(130% 160% at 70% 0%, var(--pink) 0%, var(--pink-dark) 65%, var(--mp-pink-deep) 100%);

  color:var(--text);

  padding:clamp(40px,5vw,80px) 0;

  font-family:Montserrat,system-ui,Arial,sans-serif!important;

}

.sectors-tabs.v2 .bg-mesh{

  position:absolute;

  inset:0;

  opacity:.55;

  mix-blend-mode:screen;

  pointer-events:none;

  z-index:0;

}

.sectors-tabs.v2 .st-wrap{

  width:min(1120px,92vw);

  margin:0 auto;

  position:relative;

  z-index:2;

}



/* ====== HEADER ====== */

.sectors-tabs.v2 .st-header{

  text-align:center;

  margin-bottom:20px;

}

.sectors-tabs.v2 .st-title{

  font-family:"DM Serif Display",serif!important;

  font-weight:400!important;

  color:#fff!important;

  text-shadow:0 2px 10px rgba(0,0,0,.35);

  font-size:clamp(28px,4.6vw,42px);

  line-height:1.12;

  margin:0 0 10px;

}

.sectors-tabs.v2 .st-lead{

  max-width:880px;

  margin:0 auto;

  color:#fff;

  font:400 16px/1.8 Montserrat,sans-serif;

}



/* ====== TABS (PILL GLASS LABELS) ====== */

.sectors-tabs.v2 .st-tabs{

  display:flex;

  gap:14px;

  margin:26px 0 20px;

  overflow:auto;

  padding:4px 2px 10px;

  scrollbar-width:none;

  -ms-overflow-style:none;



  /* mobile feel upgrade (desktop unaffected) */

  scroll-snap-type:x mandatory;

  -webkit-overflow-scrolling:touch;

}

.sectors-tabs.v2 .st-tabs::-webkit-scrollbar{ display:none; }



.sectors-tabs.v2 .st-tab{

  position:relative;

  flex:0 0 auto;

  padding:10px 20px;

  border-radius:999px;

  cursor:pointer;



  background:

    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));

  border:1px solid rgba(255,255,255,.32);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.24),

    0 10px 24px rgba(0,0,0,.35);



  color:#fff;

  font-family:"Montserrat",sans-serif;

  font-size:13px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.14em;

  white-space:nowrap;



  transition:

    transform .18s ease,

    box-shadow .25s ease,

    border-color .25s ease,

    filter .2s ease;



  scroll-snap-align:center;

}



.sectors-tabs.v2 .st-tab span{ display:inline-block; }



/* gradient rim */

.sectors-tabs.v2 .st-tab::before{

  content:"";

  position:absolute;

  inset:-1px;

  padding:1px;

  border-radius:999px;

  pointer-events:none;

  background:linear-gradient(90deg, var(--blue), var(--pink));

  opacity:.55;

  mix-blend-mode:screen;

  -webkit-mask:

    linear-gradient(#000 0 0) content-box,

    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;

          mask-composite:exclude;

}



/* hover */

.sectors-tabs.v2 .st-tab:hover{

  transform:translateY(-2px);

  box-shadow:

    0 16px 36px rgba(0,0,0,.48),

    0 1px 0 rgba(255,255,255,.18) inset;

  filter:saturate(1.05);

}



/* active */

.sectors-tabs.v2 .st-tab[aria-selected="true"]{

  border-color:rgba(255,255,255,.55);

  background:

    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.16));

  box-shadow:

    0 18px 40px rgba(0,0,0,.60),

    0 2px 0 rgba(255,255,255,.22) inset;

  filter:saturate(1.08);

}



/* underline for active tab */

.sectors-tabs.v2 .st-tab[aria-selected="true"]::after{

  content:"";

  position:absolute;

  left:20px;

  right:20px;

  bottom:-7px;

  height:4px;

  border-radius:999px;

  background:linear-gradient(90deg, var(--blue), var(--pink));

}



/* keyboard focus */

.sectors-tabs.v2 .st-tab:focus-visible{

  outline:2px solid #fff;

  outline-offset:2px;

}



/* ====== PANELS (GLASS CARD) ====== */

.sectors-tabs.v2 .st-panel{

  display:none;

  border:1px solid var(--glassOutline);

  border-radius:18px;

  background:linear-gradient(180deg, var(--glassTop), var(--glassBot));

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.25),

    0 22px 52px rgba(0,0,0,.40);

  padding:clamp(18px,2.4vw,26px) clamp(18px,2.8vw,32px);

  color:#fff;

  position:relative;

  overflow:hidden;

}

.sectors-tabs.v2 .st-panel.is-active{ display:block; }



/* sheen following mouse */

.sectors-tabs.v2 .st-panel::after{

  content:"";

  position:absolute;

  inset:1px;

  border-radius:16px;

  pointer-events:none;

  opacity:0;

  background: radial-gradient(

    420px 280px at var(--sx,120%) var(--sy,-60%),

    rgba(255,255,255,.32),

    rgba(255,255,255,0) 60%

  );

  transition:opacity .25s ease;

}

.sectors-tabs.v2 .st-panel:hover::after{ opacity:1; }



/* edges */

.sectors-tabs.v2 .st-panel i.edgeL,

.sectors-tabs.v2 .st-panel i.edgeR{

  position:absolute;

  top:0;

  bottom:0;

  width:8px;

  pointer-events:none;

}

.sectors-tabs.v2 .st-panel i.edgeL{

  left:0;

  border-top-left-radius:18px;

  border-bottom-left-radius:18px;

  background:linear-gradient(180deg,var(--pink),var(--blue));

}

.sectors-tabs.v2 .st-panel i.edgeR{

  right:0;

  border-top-right-radius:18px;

  border-bottom-right-radius:18px;

  background:linear-gradient(180deg,var(--blue),var(--pink));

}



/* panel text */

.sectors-tabs.v2 .st-panel h3{

  font-family:"DM Serif Display",serif!important;

  font-weight:400!important;

  color:#fff!important;

  font-size:26px;

  line-height:1.25;

  margin:0 0 8px;

}

.sectors-tabs.v2 .st-panel p{

  margin:.45em 0;

  font-size:15px;

  line-height:1.75;

  color:#fff;

}



/* ====== MOBILE POLISH (same style, just more natural) ====== */

@media (max-width: 768px){

  .sectors-tabs.v2{

    padding:clamp(34px,5vw,70px) 0;

  }

  .sectors-tabs.v2 .st-header{

    margin-bottom:16px;

  }

  .sectors-tabs.v2 .st-lead{

    font:400 15px/1.75 Montserrat,sans-serif;

    padding:0 2px;

  }



  /* Tabs: better touch + nicer scroll */

  .sectors-tabs.v2 .st-tabs{

    gap:10px;

    margin:18px 0 16px;

    padding:6px 2px 12px;

  }

  .sectors-tabs.v2 .st-tab{

    padding:11px 16px;     /* bigger tap target */

    font-size:12px;        /* slightly tighter */

    letter-spacing:.12em;  /* slightly tighter */

  }

  .sectors-tabs.v2 .st-tab[aria-selected="true"]::after{

    left:16px; right:16px; bottom:-6px; height:4px;

  }



  /* Panel: less “tall block”, more natural reading */

  .sectors-tabs.v2 .st-panel{

    padding:18px 18px;

    border-radius:16px;

  }

  .sectors-tabs.v2 .st-panel::after{ border-radius:14px; }

  .sectors-tabs.v2 .st-panel h3{ font-size:22px; }

  .sectors-tabs.v2 .st-panel p{

    font-size:14px;

    line-height:1.7;

  }

}

@media (max-width: 420px){

  .sectors-tabs.v2 .st-tab{

    padding:11px 14px;

    font-size:11.5px;

    letter-spacing:.11em;

  }

}



/* Touch devices: soften hover only on touch */

@media (hover: none){

  .sectors-tabs.v2 .st-tab:hover{

    transform:none;

    filter:none;

    box-shadow:

      inset 0 1px 0 rgba(255,255,255,.24),

      0 10px 24px rgba(0,0,0,.35);

  }

  .sectors-tabs.v2 .st-panel:hover::after{ opacity:0; }

}