/*
 * Connect IT — Vacatures: detailpagina, overzichtskaarten en de sollicitatie-modal.
 * De modal-chrome (.citc-overlay/.citc-modal/...) is identiek aan de prijsindicatie-
 * modal; het formulier hergebruikt de .cit-form-stijl uit components.css.
 */

/* ============================ Detail (single) ============================ */
/* Lichte kop-band (breadcrumbs + eyebrow + titel + details) — gelijk aan de
   single blogpost — en daaronder de inhoud op wit. */
.cit-vac__hero { background: #F7FAFC; border-bottom: 1px solid #EDF2F6; padding: clamp(40px, 5vw, 64px) 0 clamp(30px, 4vw, 44px); }
.cit-vac__hero-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.cit-vac__main { padding: clamp(40px, 5vw, 56px) 0 clamp(56px, 7vw, 80px); }
.cit-vac__main-inner { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.cit-vac__crumbs { margin-bottom: 24px; font-size: 14px; }
.cit-vac__crumbs a { color: #8FA3B8; text-decoration: none; }
.cit-vac__crumbs a:hover { color: var(--cit-teal, #0E7490); }
.cit-vac__crumb-sep { color: #CBD6E0; margin: 0 8px; }
.cit-vac__crumb-cur { color: #33475C; }

.cit-vac__eyebrow { margin-bottom: 12px; }
.cit-vac__title { font-family: var(--cit-font-head, 'Archivo', sans-serif); font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.025em; color: var(--cit-ink, #0D1B2A); margin: 0 0 24px; }

.cit-vac__meta { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.cit-vac__badge { display: inline-flex; align-items: center; gap: 11px; background: var(--cit-surface-2, #F0F5F8); border: 1px solid #E2E8ED; border-radius: 12px; padding: 10px 16px; }
.cit-vac__badge-ic { color: var(--cit-teal, #0E7490); display: inline-flex; flex-shrink: 0; }
.cit-vac__badge-txt { display: flex; flex-direction: column; line-height: 1.25; font-size: 15px; font-weight: 600; color: var(--cit-ink, #0D1B2A); }
.cit-vac__badge-lbl { font-family: var(--cit-font-mono, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--cit-text, #5A6B7B); }
.cit-vac__salnote { margin: 4px 0 0; font-size: 13.5px; color: var(--cit-text, #5A6B7B); }
.cit-vac__intro { font-size: 18px; line-height: 1.65; color: var(--cit-text, #33475C); margin: 0 0 26px; }
.cit-vac__apply { margin-bottom: 8px; }

.cit-vac__body { margin-top: 40px; font-size: 16px; line-height: 1.75; color: var(--cit-text, #33475C); }
.cit-vac__body h2 { font-family: var(--cit-font-head, 'Archivo', sans-serif); font-size: 24px; color: var(--cit-ink, #0D1B2A); margin: 34px 0 12px; }
.cit-vac__body h3 { font-family: var(--cit-font-head, 'Archivo', sans-serif); font-size: 19px; color: var(--cit-ink, #0D1B2A); margin: 24px 0 8px; }
.cit-vac__body p { margin: 0 0 14px; }
.cit-vac__body ul, .cit-vac__body ol { margin: 0 0 16px; padding-left: 22px; }
.cit-vac__body li { margin: 7px 0; }
.cit-vac__body a { color: var(--cit-teal, #0E7490); }

/* Deel-knoppen onderaan (zelfde stijl als op de single blogpost). */
.cit-vac__share { margin-top: 44px; padding-top: 28px; border-top: 1px solid #EDF2F6; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.cit-vac__share-label { font-size: 14px; font-weight: 600; color: var(--cit-ink, #0D1B2A); }
.cit-vac__share-btns { display: flex; gap: 8px; }
.cit-vac__share-btn { font-size: 13px; font-weight: 600; color: #33475C; background: #fff; border: 1px solid #CBD6E0; border-radius: 8px; padding: 9px 14px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.cit-vac__share-btn:hover { border-color: var(--cit-teal, #0E7490); color: var(--cit-teal, #0E7490); }

/* ============================ Overzicht (grid) =========================== */
.cit-vac-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cit-vac-grid[data-cols="1"] { grid-template-columns: 1fr; }
.cit-vac-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .cit-vac-grid, .cit-vac-grid[data-cols="3"] { grid-template-columns: 1fr; } }

.cit-vac-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E2E8ED; border-radius: 18px; padding: 28px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.cit-vac-card:hover { border-color: var(--cit-teal, #0E7490); box-shadow: 0 24px 48px -28px rgba(7,15,27,.28); transform: translateY(-2px); }
.cit-vac-card__title { font-family: var(--cit-font-head, 'Archivo', sans-serif); font-size: 22px; line-height: 1.2; color: var(--cit-ink, #0D1B2A); margin: 0 0 14px; }
.cit-vac-card__meta { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; color: var(--cit-text, #33475C); }
.cit-vac-card__lbl { font-family: var(--cit-font-mono, monospace); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cit-teal, #0E7490); margin-right: 4px; }
.cit-vac-card__intro { font-size: 15px; line-height: 1.6; color: var(--cit-text, #5A6B7B); margin: 0 0 20px; }
.cit-vac-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--cit-teal, #0E7490); }
.cit-vac-card:hover .cit-vac-card__cta .cit-arr { transform: rotate(45deg); }

.cit-vac-empty { background: var(--cit-surface-2, #F0F5F8); border: 1px dashed #C7D3DC; border-radius: 16px; padding: 32px; text-align: center; color: var(--cit-text, #33475C); font-size: 16px; }

/* ===================== Sollicitatie-modal (chrome) ====================== */
/* Identiek aan de prijsindicatie-modal; los gedefinieerd zodat de vacaturepagina
   de calculator-CSS niet hoeft te laden. */
.cit-apply.citc-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(7,15,27,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: citcOverlayIn .2s ease both; }
.cit-apply[hidden] { display: none !important; }
.cit-apply .citc-modal { background: #fff; border-radius: 20px; width: min(620px, 100%); max-height: min(92vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 48px 96px -24px rgba(7,15,27,.5); animation: citcIn .28s ease both; }
.cit-apply .citc-modal__head { background: var(--cit-grad-dark, linear-gradient(135deg,#0A1626,#134155)); padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; }
.cit-apply .citc-modal__eyebrow { margin: 0 0 2px; font-family: var(--cit-font-mono, monospace); font-size: 11px; letter-spacing: .1em; color: var(--cit-cyan, #53D6EE); text-transform: uppercase; }
.cit-apply .citc-modal__title { margin: 0; font-family: var(--cit-font-head, 'Archivo', sans-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #fff; }
.cit-apply .citc-modal__close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; font-size: 16px; cursor: pointer; line-height: 1; flex-shrink: 0; transition: background .15s ease; }
.cit-apply .citc-modal__close:hover { background: rgba(255,255,255,.1); }
.cit-apply .citc-body { padding: 26px 28px 30px; overflow-y: auto; }

@keyframes citcOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes citcIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ===================== Formulier binnen de modal ======================== */
.cit-apply__form .cit-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cit-apply__form .cit-form__field--full { grid-column: 1 / -1; }
@media (max-width: 520px) { .cit-apply__form .cit-form__row { grid-template-columns: 1fr; } }

.cit-apply__file { width: 100%; font-size: 14px; color: var(--cit-text, #33475C); background: var(--cit-surface-2, #F0F5F8); border: 1px solid #D5DEE6; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.cit-apply__file::-webkit-file-upload-button, .cit-apply__file::file-selector-button { font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--cit-teal, #0E7490); border: none; border-radius: 7px; padding: 8px 14px; margin-right: 12px; cursor: pointer; }
.cit-apply__file.is-error { border-color: var(--cit-danger, #B4232A); }
.cit-apply__hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--cit-text, #5A6B7B); }

/* Succes-scherm */
.cit-apply__success { text-align: center; padding: 22px 8px 8px; }
.cit-apply__success-ic { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; background: #E7F5F8; display: grid; place-items: center; }
.cit-apply__success-titel { font-family: var(--cit-font-head, 'Archivo', sans-serif); font-size: 22px; color: var(--cit-ink, #0D1B2A); margin: 0 0 10px; }
.cit-apply__success-tekst { font-size: 15.5px; line-height: 1.6; color: var(--cit-text, #33475C); margin: 0 0 22px; }
.cit-apply__success-close { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.cit-apply.citc-overlay, .cit-apply .citc-modal { animation: none; }
	.cit-vac-card { transition: none; }
}