/* Jobs-data product page (templates/pages/vacatures.html), recruitment-angled.
   Self-contained — defines the hero bits it needs so it doesn't lean on home.css. */


/* hero */
.vc-hero { padding-top: clamp(1.5rem, 4vh, 3rem); }
.vc-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: 1.1rem; }
.vc-lede { color: var(--ink-60); font-size: 1.12rem; margin-top: 1rem; max-width: 34rem; }
.vc-note { color: var(--ink-40); font-size: .85rem; margin-top: 1.1rem; }

/* hero feed (hiring companies) */
.vc-feed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.vc-feed-head { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; }
.vc-feed-head .q-icon { font-family: var(--jbmono); color: var(--blue); font-size: 1.1rem; }
.vc-feed-head p { font-size: .9rem; color: var(--ink); }
.vc-count { font-size: .88rem; color: var(--ink-60); padding: 0 .2rem; }
.vc-count b { color: var(--ink); }
.vc-job { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; }
.vc-role { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .96rem; }
.vc-new { font-family: var(--jbmono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--green-tint); padding: .12rem .45rem; border-radius: 99px; }
.vc-co { font-size: .86rem; color: var(--ink-60); margin-top: .2rem; }
.vc-co b { color: var(--ink); }
.vc-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .5rem; font-size: .78rem; color: var(--ink-60); }

/* stats strip */

/* live vacaturestroom */
.vc-live-sec .sec-label { display: flex; align-items: center; }
.vc-live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #c0392b; margin-right: .45rem; box-shadow: 0 0 0 0 rgba(192,57,43,.5); animation: vc-live 1.6s infinite; }
@keyframes vc-live { 70% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0); } }
.vc-stream { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.vc-stream-head, .vc-srow { display: grid; grid-template-columns: 2.2fr 1.2fr 1.4fr 1.3fr .8fr; gap: 1rem; align-items: center; padding: .72rem 1.2rem; }
.vc-stream-head { font-family: var(--jbmono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.vc-stream-list { list-style: none; margin: 0; padding: 0; }
.vc-srow { border-bottom: 1px solid var(--line); font-size: .9rem; opacity: 0; transform: translateY(-8px); background: var(--green-tint); transition: opacity .4s ease, transform .4s ease, background 1s ease; }
.vc-srow.show { opacity: 1; transform: none; background: #fff; }
.vc-srow:last-child { border-bottom: none; }
.vc-s-t { font-weight: 600; color: var(--ink); }
.vc-s-l, .vc-s-c { color: var(--ink-60); }
.vc-s-u { color: var(--ink-40); font-size: .84rem; }
.vc-s-time { font-family: var(--jbmono); font-size: .72rem; color: var(--ink-40); text-align: right; white-space: nowrap; }
@media (max-width: 52rem) {
  .vc-stream-head { display: none; }
  .vc-srow { grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .8rem 1rem; }
  .vc-s-t { grid-column: 1; grid-row: 1; }
  .vc-s-time { grid-column: 2; grid-row: 1; }
  .vc-s-l, .vc-s-c, .vc-s-u { grid-column: 1; font-size: .82rem; }
}

/* pillars */
.vc-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.vc-pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; }
.vc-pillar-label { font-family: var(--jbmono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-tint); padding: .25rem .6rem; border-radius: 99px; }
.vc-pillar h3 { font-size: 1.2rem; margin: 1rem 0 .9rem; }
.vc-pillar ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.vc-pillar li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--ink-60); line-height: 1.45; }
.vc-pillar li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
@media (max-width: 60rem) { .vc-pillars { grid-template-columns: 1fr; } }

/* steps */

/* use cases */
.vc-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.vc-use { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.vc-use b { font-size: .98rem; }
.vc-use span { display: block; font-size: .86rem; color: var(--ink-60); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 56rem) { .vc-uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .vc-uses { grid-template-columns: 1fr; } }

/* moat */