/* Karijera page — template-karijera.php. Uses the site's shared type,
   spacing, button, label, reveal, and CTA primitives throughout. */
.karijera-main{overflow:hidden;background:var(--white)}
.karijera-main h1,.karijera-main h2,.karijera-main h3,.karijera-main p{margin-top:0}

/* Hero — the homepage's single-image banner structure, adapted to career copy. */
.karijera-hero{padding:var(--space-7) 0 var(--space-2)}
.karijera-hero-card{
  position:relative;overflow:hidden;min-height:min(72vh,620px);
  display:flex;align-items:center;
  border:1px solid rgba(var(--blue-rgb),.1);border-radius:var(--radius-xl);
  background-color:var(--soft-2);background-position:center;background-size:cover;background-repeat:no-repeat;
}
.karijera-hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,249,253,.99) 0%,rgba(245,249,253,.94) 30%,rgba(245,249,253,.58) 46%,rgba(245,249,253,0) 63%);
}
.karijera-hero-content{
  position:relative;z-index:1;width:min(53%,650px);
  padding:var(--space-10) 0 var(--space-10) clamp(var(--space-7),6vw,var(--space-10));
}
.karijera-hero-content .solution-label{margin-bottom:var(--space-4)}
.karijera-hero-content h1{margin-bottom:var(--space-5);color:var(--blue)}
.karijera-hero-text{max-width:51ch;margin-bottom:var(--space-7)}
.karijera-hero-text p{margin-bottom:0;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body)}

/* Benefits — one connected sequence, not four unrelated cards. */
.karijera-benefits{padding:var(--space-10) 0 var(--space-9)}
.karijera-section-intro{max-width:760px;margin:0 auto var(--space-9);text-align:center}
.karijera-section-intro h2,.karijera-jobs-heading h2{margin-bottom:0;color:var(--blue)}
.karijera-benefits-track{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(var(--blue-rgb),.18);border-radius:var(--radius-lg);background:var(--white);
}
.karijera-benefit{position:relative;z-index:1;min-width:0;padding:var(--space-7)}
.karijera-benefit + .karijera-benefit{border-left:1px solid rgba(var(--blue-rgb),.12)}
.karijera-benefit-visual{position:relative;width:132px;height:132px;margin:0 auto var(--space-5);background:var(--white)}
.karijera-benefit-visual img{width:100%;height:100%;object-fit:contain}
.karijera-benefit h3{margin-bottom:var(--space-3);color:var(--blue);font-size:var(--fs-card-title);line-height:var(--lh-title);letter-spacing:var(--tracking-title)}
.karijera-benefit p{margin-bottom:0;color:var(--text-secondary);font-size:var(--fs-body);line-height:var(--lh-body)}

/* Live openings — a compact board that works with jobs or the empty state. */
.karijera-jobs{padding:var(--space-9) 0;background:var(--soft)}
.karijera-jobs-layout{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:var(--space-10);align-items:start}
.karijera-jobs-heading{position:sticky;top:120px}
.karijera-jobs-board{overflow:hidden;border:1px solid rgba(var(--blue-rgb),.18);border-radius:var(--radius-lg);background:var(--white)}
.karijera-jobs-list{list-style:none;margin:0;padding:0}
.karijera-jobs-list li + li{border-top:1px solid rgba(var(--blue-rgb),.12)}
.karijera-jobs-list a{
  position:relative;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6) calc(var(--space-9) + 16px) var(--space-6) var(--space-7);
  transition:background-color .2s ease,color .2s ease;
}
.karijera-jobs-list a::after{
  content:"";position:absolute;right:var(--space-7);top:50%;width:16px;height:16px;
  background:var(--brand-dots);color:var(--red);transform:translateY(-50%);transition:transform .2s ease;
}
.karijera-jobs-list a:hover{background:var(--soft)}
.karijera-jobs-list a:hover::after{transform:translate(4px,-50%)}
.karijera-job-title{color:var(--blue);font-size:var(--fs-card-title-sm);font-weight:750;line-height:var(--lh-title)}
.karijera-jobs-list-meta{color:var(--text-secondary);font-size:var(--fs-body-sm)}
.karijera-jobs-empty{display:flex;align-items:center;gap:var(--space-5);min-height:150px;padding:var(--space-7)}
.karijera-jobs-empty-mark{width:32px;height:32px;flex:0 0 32px;background:var(--brand-dots);color:var(--red);transform:scale(1.35);transform-origin:left center}
.karijera-jobs-empty p{margin-bottom:0;color:var(--text-secondary);font-size:var(--fs-body-lg);line-height:var(--lh-body)}

.karijera-apply{padding:var(--space-9) 0 var(--space-10)}
.karijera-apply-form{max-width:760px;margin:0 auto;padding:var(--space-8)}
.karijera-apply-form h2{margin-bottom:var(--space-2);color:var(--blue);font-size:var(--fs-panel);letter-spacing:var(--tracking-heading)}
.karijera-apply-form > p{margin-bottom:var(--space-6);color:var(--text-secondary);font-size:var(--fs-body);line-height:1.6}

/* The CF7 form itself is styled by the shared .wpcf7-* rules in styles.css. */

@media (max-width:960px){
  .karijera-benefits-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karijera-benefit:nth-child(3){border-left:0;border-top:1px solid rgba(var(--blue-rgb),.12)}
  .karijera-benefit:nth-child(4){border-top:1px solid rgba(var(--blue-rgb),.12)}
}

@media (max-width:820px){
  .karijera-hero{padding:var(--space-4) 0 var(--space-2)}
  .karijera-benefits,.karijera-jobs,.karijera-apply{padding-top:var(--space-9);padding-bottom:var(--space-9)}
  .karijera-hero-card{min-height:560px;background-position:58% center}
  .karijera-hero-content{width:62%;padding:var(--space-9) 0 var(--space-9) var(--space-7)}
  .karijera-jobs-layout{grid-template-columns:1fr;gap:var(--space-7)}
  .karijera-jobs-heading{position:static}
}

@media (max-width:640px){
  .karijera-hero-card{
    min-height:0;display:block;border:0;
    background-size:auto clamp(260px,73vw,310px);background-position:65% top;
  }
  .karijera-hero-card::after{
    background:linear-gradient(to bottom,rgba(245,249,253,0) 12%,rgba(245,249,253,.44) 25%,rgba(245,249,253,.94) 39%,rgb(245,249,253) 50%);
  }
  .karijera-hero-content{width:100%;padding:clamp(215px,59vw,252px) var(--space-5) var(--space-7)}
  .karijera-hero-content h1{margin-bottom:var(--space-4)}
  .karijera-hero-text{margin-bottom:var(--space-5)}
  .karijera-hero-content .btn{width:100%}
  .karijera-section-intro{margin-bottom:var(--space-7)}
  .karijera-benefits-track{grid-template-columns:1fr}
  .karijera-benefit{padding:var(--space-6)}
  .karijera-benefit + .karijera-benefit{border-left:0;border-top:1px solid rgba(var(--blue-rgb),.12)}
  .karijera-benefit-visual{width:108px;height:108px;margin-bottom:var(--space-5)}
  .karijera-benefit h3{margin-bottom:var(--space-2)}
  .karijera-jobs-empty{min-height:120px;padding:var(--space-6)}
  .karijera-apply-form{padding:var(--space-6)}
}

@media (prefers-reduced-motion:reduce){
  .karijera-jobs-list a,.karijera-jobs-list a::after{transition:none}
}