/* =========================================================================
   Insight Recruiting Portal — Top-Jobs-Panel (Startseite, linke Spalte)
   Shortcode: [insight_top_jobs]
   v2.6.1: Buttons/Tabs an globales Insight-Button-System angepasst.
   ========================================================================= */

.irp-tj{
  --tj-line:rgba(255,255,255,.105);
  --tj-line-strong:rgba(255,255,255,.18);
  --tj-text:#F8F7FF;
  --tj-text-soft:#B8B4C7;
  --tj-text-muted:#7B768F;
  --tj-purple:#4E2780;
  --tj-purple-2:#7A3DFF;
  --tj-purple-soft:#B98CFF;
  --tj-burgundy:#8B001A;
  --tj-warm:#FF8A3D;
  --tj-cyan:#5FE1FF;
  --tj-serif:var(--ir-font-heading,'Instrument Serif', Georgia, serif);
  --tj-sans:var(--ir-font-body,'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --tj-ease:cubic-bezier(.2,.7,.2,1);
  --tj-tab-color:#B98CFF;

  display:flex;
  flex-direction:column;
  height:100%;
  font-family:var(--ir-font-body, var(--tj-sans));
  color:var(--tj-text);
}

.irp-tj *,.irp-tj *::before,.irp-tj *::after{ box-sizing:border-box; }

/* ---- Tabs / Filterchips: bewusst KEINE weißen Primary Buttons ---- */
html body .irp-tj .irp-tj-tabs{
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
  flex-wrap:wrap;
  align-items:center;
}

html body .irp-tj .irp-tj-tab{
  -webkit-appearance:none !important;
  appearance:none !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:999px !important;
  padding:0.78rem 1.34rem !important;
  border:1px solid var(--ir-btn-glass-border, rgba(255,255,255,.10)) !important;
  background:var(--ir-btn-glass-bg, rgba(255,255,255,.035)) !important;
  color:var(--tj-text-soft) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-family:var(--ir-btn-font, var(--tj-sans)) !important;
  font-size:clamp(.82rem,.78rem + .12vw,.9rem) !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap;
  cursor:pointer;
  transition:
    transform .28s var(--tj-ease),
    color .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s var(--tj-ease);
}

html body .irp-tj .irp-tj-tab::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:0;
  background:
    radial-gradient(120% 180% at 20% 0%, color-mix(in srgb, var(--tj-branch-color, var(--tj-purple-soft)) 32%, transparent), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--tj-branch-color, var(--tj-purple-soft)) 18%, transparent), rgba(255,255,255,.025));
  transition:opacity .28s var(--tj-ease);
}

html body .irp-tj .irp-tj-tab:hover{
  transform:translateY(-2px);
  color:#fff !important;
  border-color:color-mix(in srgb, var(--tj-branch-color, var(--tj-purple-soft)) 46%, rgba(255,255,255,.16)) !important;
  background:var(--ir-btn-glass-bg-hover, rgba(255,255,255,.075)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 55px color-mix(in srgb, var(--tj-branch-color, var(--tj-purple-soft)) 14%, transparent) !important;
}
html body .irp-tj .irp-tj-tab:hover::before{ opacity:1; }

html body .irp-tj .irp-tj-tab.is-active{
  color:#fff !important;
  border-color:color-mix(in srgb, var(--tj-tab-color, var(--tj-purple-soft)) 58%, rgba(255,255,255,.12)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tj-tab-color, var(--tj-purple-soft)) 34%, rgba(255,255,255,.035)),
      color-mix(in srgb, var(--tj-tab-color, var(--tj-purple-soft)) 14%, rgba(255,255,255,.025))
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px color-mix(in srgb, var(--tj-tab-color, var(--tj-purple-soft)) 22%, transparent),
    0 22px 70px color-mix(in srgb, var(--tj-tab-color, var(--tj-purple-soft)) 17%, transparent) !important;
}
html body .irp-tj .irp-tj-tab.is-active::before{ opacity:1; }

/* ---- Liste ---- */
.irp-tj-list{
  padding:0;
  margin-top:28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.irp-tj-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--tj-line);
  align-items:center;
  text-decoration:none !important;
  color:inherit !important;
  transition:padding-left .28s var(--tj-ease), border-color .28s var(--tj-ease);
}
.irp-tj-item:first-child{ padding-top:0; border-top:0; }
.irp-tj-item:hover{ padding-left:6px; border-bottom-color:rgba(255,255,255,.18); }
.irp-tj-item h3{
  font-family:var(--tj-serif) !important;
  font-size:clamp(1.05rem,.98rem + .2vw,1.22rem) !important;
  letter-spacing:-.035em !important;
  line-height:1.08 !important;
  margin:0 !important;
  font-weight:400 !important;
  color:var(--tj-text) !important;
  transition:color .24s ease;
}
.irp-tj-item:hover h3{ color:var(--tj-tab-color, var(--tj-purple-soft)) !important; }
.irp-tj-item p{
  font-family:var(--ir-font-body, var(--tj-sans)) !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:var(--tj-text-muted) !important;
  margin:6px 0 0 !important;
}
.irp-tj-tag{
  font-family:var(--ir-font-body, var(--tj-sans));
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--tj-purple-soft);
  border:1px solid rgba(185,140,255,.22);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(78,39,128,.16);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.irp-tj-tag.orange{ color:var(--tj-warm); border-color:rgba(255,138,61,.24); background:rgba(255,138,61,.12); }
.irp-tj-tag.cyan{ color:var(--tj-cyan); border-color:rgba(95,225,255,.24); background:rgba(95,225,255,.12); }

/* ---- Empty-State ---- */
.irp-tj-empty{
  padding:34px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:24px;
  background:rgba(255,255,255,.018);
  color:var(--tj-text-muted);
  margin-top:18px;
  font-size:14px;
  line-height:1.6;
}
.irp-tj-empty b{ display:block; color:var(--tj-text); font-size:16px; margin-bottom:6px; }

/* ---- CTA: an globales Button-System angepasst ---- */
html body .irp-tj .irp-tj-btn{
  --ir-btn-fs: clamp(0.875rem, 0.84rem + 0.14vw, 0.95rem);
  --ir-btn-py: clamp(0.875rem, 0.78rem + 0.35vw, 1rem);
  --ir-btn-px: clamp(1.5rem, 1.25rem + 0.85vw, 1.95rem);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65em;
  margin-top:24px;
  align-self:flex-start;
  min-height:44px;
  padding:var(--ir-btn-py) var(--ir-btn-px) !important;
  border-radius:var(--ir-btn-radius,999px) !important;
  border:1px solid transparent !important;
  font-family:var(--ir-btn-font, var(--tj-sans)) !important;
  font-size:var(--ir-btn-fs) !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  background:var(--ir-btn-primary-bg, #F8F7FF) !important;
  color:var(--ir-btn-primary-text, #050508) !important;
  text-decoration:none !important;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(255,255,255,.10) !important;
  transition:
    transform .28s var(--tj-ease),
    box-shadow .28s var(--tj-ease),
    background-color .28s ease,
    color .28s ease;
}
html body .irp-tj .irp-tj-btn:hover{
  color:var(--ir-btn-primary-text, #050508) !important;
  background:var(--ir-btn-primary-bg-hover, #fff) !important;
  transform:translateY(-2px);
  box-shadow:0 24px 70px rgba(255,255,255,.15) !important;
}
.irp-tj-btn svg{
  width:clamp(.9rem,.82rem + .25vw,1rem);
  height:clamp(.9rem,.82rem + .25vw,1rem);
  transition:transform .28s var(--tj-ease);
}
.irp-tj-btn:hover svg{ transform:translateX(3px); }

/* ---- Mobile ---- */
@media (max-width:767px){
  .irp-tj{ border-radius:24px; }
  html body .irp-tj .irp-tj-tabs{
    padding:0;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:-2px;
    padding-bottom:2px;
  }
  html body .irp-tj .irp-tj-tabs::-webkit-scrollbar{ display:none; }
  html body .irp-tj .irp-tj-tab{ flex:0 0 auto; min-height:40px; padding:.72rem 1.15rem !important; }
  .irp-tj-list{ padding:0; margin-top:24px; }
  .irp-tj-item{ grid-template-columns:1fr; gap:10px; padding:18px 0; }
  .irp-tj-item .irp-tj-tag{ justify-self:start; }
  .irp-tj-empty{ padding:26px; }
  html body .irp-tj .irp-tj-btn{ width:100%; align-self:stretch; min-height:44px; }
}

@media (prefers-reduced-motion: reduce){
  .irp-tj *{ transition-duration:.01ms !important; }
}