/* ============================================================================
   KLAAS PUUL - SINGLE VACATURE PAGE
   Mobile-first approach. Desktop breakpoint: 1024px.
   Fonts: "sofia-pro" (headings), "acumin-pro" (body)
   Primary: #0D1C38, Accent: #6BABD3, Light bg: #EBF1F8
   ============================================================================ */

/* ============================================================================
   BREADCRUMBS (override for single vacature)
   ============================================================================ */
.single-kp_vacature .kp-pd-breadcrumbs {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* ============================================================================
   INFO BOX / NOTE (blockquote override for vacature)
   Figma: bg #EBF1F8, border-left 4px #6BABD3, padding 14px 16px
   ============================================================================ */
.single-kp_vacature .kp-se-article__content blockquote {
    background: #ebf1f8;
    border-left: 4px solid #6babd3;
    padding: 14px 16px;
    margin: 0;
    font-style: normal;
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}
.single-kp_vacature .kp-se-article__content blockquote p {
    margin: 0;
}

/* ============================================================================
   JOB TAGS (pill shaped, white bg)
   ============================================================================ */
.kp-sv-tag {
    background: #ffffff;
    border-radius: 9999px;
    padding: 8px 16px 6px 16px;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.kp-sv-tag__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.kp-sv-tag__text {
    color: #1d1d1f;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
}

/* ============================================================================
   HERO SECTION
   Mobile: padding 64px 16px 40px 16px, single column
   Desktop: padding 64px 100px 64px 309px, two columns (text + image)
   ============================================================================ */
.kp-sv-hero {
    background: #ebf1f8;
    padding: 40px 16px;
    width: 100%;
    overflow: hidden;
}
.kp-sv-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
.kp-sv-hero__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}
.kp-sv-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}
.kp-sv-hero__tags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.kp-sv-hero__titles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.kp-sv-hero__title {
    color: #1d1d1f;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-hero__subtitle {
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}

/* Meta row */
.kp-sv-hero__meta {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.kp-sv-hero__meta-item {
    color: rgba(13, 28, 56, 0.5);
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
}
.kp-sv-hero__meta-sep {
    color: rgba(13, 28, 56, 0.5);
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 14px;
    line-height: 150%;
    font-weight: 400;
}

/* Hero CTA button */
.kp-sv-hero__cta {
    width: 100%;
    justify-content: center;
}

/* Hero image */
.kp-sv-hero__image {
    display: none; /* Hidden on mobile */
    position: relative;
    overflow: hidden;
}
.kp-sv-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kp-sv-hero__shape {
    position: absolute;
    pointer-events: none;
}
.kp-sv-hero__shape--tl { top: 0; left: 0; }
.kp-sv-hero__shape--tr { top: 0; right: 0; }
.kp-sv-hero__shape--bl { bottom: 0; left: 0; }
.kp-sv-hero__shape--br { bottom: 0; right: 0; }

/* ============================================================================
   ARTICLE + SIDEBAR BODY
   Mobile: single column, full width
   Desktop: two columns (828px article + 390px sidebar, gap 80px)
   ============================================================================ */
.kp-sv-body {
    width: 100%;
    background: #ffffff;
    padding: 40px 0 64px 0;
}
.kp-sv-body__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

/* Article reuses .kp-se-article from kp-single-event.css.
   Override padding: body section + .inner already handle spacing. */
.kp-sv-body .kp-se-article {
    padding: 0;
}

/* ============================================================================
   SIDEBAR
   Mobile: full width, padding 0 16px 16px 16px
   Desktop: width 390px, gap 24px between items
   ============================================================================ */
.kp-sv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 0 16px 0;
    width: 100%;
}

/* ============================================================================
   SNEL OVERZICHT (Quick overview box)
   bg #EBF1F8, padding 24px, gap 24px
   ============================================================================ */
.kp-sv-overview {
    background: #ebf1f8;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-sv-overview__title {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-overview__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kp-sv-overview__item {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 8px 8px 8px;
}
.kp-sv-overview__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.kp-sv-overview__text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.kp-sv-overview__label {
    color: #1d1d1f;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 600;
}
.kp-sv-overview__value {
    color: #1d1d1f;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
}
.kp-sv-overview__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}
.kp-sv-overview__btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================================
   RECRUITER CTA (sidebar, dark bg)
   ============================================================================ */
.kp-sv-recruiter {
    background: #0d1c38;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
.kp-sv-recruiter__image {
    position: relative;
    width: 111px;
    height: 111px;
    flex-shrink: 0;
    overflow: hidden;
}
.kp-sv-recruiter__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kp-sv-recruiter__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kp-sv-recruiter__name {
    color: #ffffff;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-recruiter__role {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}

/* Recruiter action buttons */
.kp-sv-recruiter__actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}
.kp-sv-recruiter__phone {
    background: #ffffff;
    padding: 16px 32px;
    display: inline-flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: center;
    height: 56px;
    box-sizing: border-box;
    text-decoration: none;
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    width: fit-content;
}
.kp-sv-recruiter__phone:hover {
    background: rgba(255, 255, 255, 0.85);
}
.kp-sv-recruiter__phone svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.kp-sv-recruiter__email {
    border: 1px solid #ffffff;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 56px;
    box-sizing: border-box;
    text-decoration: none;
    color: #ffffff;
    transition: background 0.2s ease;
}
.kp-sv-recruiter__email:hover {
    background: rgba(255, 255, 255, 0.1);
}
.kp-sv-recruiter__email svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ============================================================================
   APPLICATION FORM SECTION
   Dark bg #0D1C38
   Mobile: padding 64px 16px
   Desktop: padding 120px 100px, two columns (left info + right form)
   ============================================================================ */
.kp-sv-form-section {
    background: #0d1c38;
    padding: 64px 0;
    width: 100%;
}
.kp-sv-form-section__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* width handled by .inner from theme grid */
    align-items: center;
}
.kp-sv-form-section__left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kp-sv-form-section__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kp-sv-form-section__title {
    color: #ffffff;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-form-section__subtitle {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 18px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}

/* Recruiter card in form section */
.kp-sv-form-recruiter {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 451px;
}
.kp-sv-form-recruiter__card {
    padding: 16px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}
.kp-sv-form-recruiter__image {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
}
.kp-sv-form-recruiter__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kp-sv-form-recruiter__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.kp-sv-form-recruiter__name {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-form-recruiter__role {
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-form-recruiter__actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 16px 16px 16px;
    flex-wrap: wrap;
}
.kp-sv-form-recruiter__phone {
    width: fit-content;
}
.kp-sv-form-recruiter__phone svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.kp-sv-form-recruiter__email-btn {
    border: 1px solid #0d1c38;
    padding: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    width: 56px;
    box-sizing: border-box;
    text-decoration: none;
    color: #0d1c38;
    transition: background 0.2s ease;
}
.kp-sv-form-recruiter__email-btn:hover {
    background: rgba(13, 28, 56, 0.05);
}
.kp-sv-form-recruiter__email-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Gravity Form styling inside vacature form section */
.kp-sv-form-section__form {
    width: 100%;
}
.kp-sv-form-section__form .gform_wrapper {
    width: 100%;
}
/* Figma: form fields gap 24px, max-width 710px desktop */
.kp-sv-form-section__form .gform_fields {
    display: flex !important;
    flex-direction: column;
    gap: 24px;
}
@media (min-width: 1024px) {
    .kp-sv-form-section__form .gform_body {
        max-width: 710px;
    }
}
.kp-sv-form-section__form .gfield_label,
.kp-sv-form-section__form label.gfield_label {
    color: #ffffff !important;
    font-family: var(--font-main, "acumin-pro", sans-serif) !important;
    font-size: 14px !important;
    line-height: 150% !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}
.kp-sv-form-section__form input[type="text"],
.kp-sv-form-section__form input[type="email"],
.kp-sv-form-section__form input[type="tel"],
.kp-sv-form-section__form input[type="url"],
.kp-sv-form-section__form input[type="number"],
.kp-sv-form-section__form select,
.kp-sv-form-section__form textarea {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding: 12px !important;
    color: #ffffff !important;
    font-family: var(--font-main, "acumin-pro", sans-serif) !important;
    font-size: 16px !important;
    line-height: 150% !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.kp-sv-form-section__form input::placeholder,
.kp-sv-form-section__form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
.kp-sv-form-section__form textarea {
    height: 125px !important;
    resize: vertical;
}
/* File upload field — custom styled to match Figma */
.kp-sv-form-section__form .ginput_container_fileupload {
    position: relative;
}
.kp-sv-form-section__form .ginput_container_fileupload input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.kp-sv-file-upload-trigger {
    background: rgba(235, 241, 248, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 12px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
}
.kp-sv-file-upload-trigger:hover {
    background: rgba(235, 241, 248, 0.65);
}
.kp-sv-file-upload-trigger__text {
    color: #ffffff;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    flex: 1;
}
.kp-sv-file-upload-trigger__text--placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.kp-sv-file-upload-trigger__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.kp-sv-file-upload-trigger__icon path {
    fill: #ffffff;
}
/* Submit button */
.kp-sv-form-section__form .gform_footer input[type="submit"],
.kp-sv-form-section__form .gform_button {
    background: #ffffff !important;
    color: #0d1c38 !important;
    padding: 16px 32px !important;
    border: none !important;
    font-family: var(--font-main, "acumin-pro", sans-serif) !important;
    font-size: 16px !important;
    line-height: 150% !important;
    font-weight: 400 !important;
    cursor: pointer;
    height: 56px;
    width: 100%;
    border-radius: 0 !important;
}
.kp-sv-form-section__form .gform_footer input[type="submit"]:hover,
.kp-sv-form-section__form .gform_button:hover {
    background: rgba(255, 255, 255, 0.85) !important;
}
/* Divider above submit */
.kp-sv-form-section__form .gform_footer {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
    padding-top: 24px;
    margin-top: 24px;
}
/* Validation messages */
.kp-sv-form-section__form .gfield_error .gfield_label {
    color: #ff6b6b !important;
}
.kp-sv-form-section__form .validation_message {
    color: #ff6b6b !important;
    font-size: 14px;
}
/* Reset fieldset/legend browser defaults */
.kp-sv-form-section__form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.kp-sv-form-section__form legend {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
}
/* Name field: stack on mobile, side by side on desktop */
.kp-sv-form-section__form .ginput_container_name {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
.kp-sv-form-section__form .ginput_container_name .name_first,
.kp-sv-form-section__form .ginput_container_name .name_last {
    flex: 1;
}
/* Email + Phone side by side on desktop */
@media (min-width: 1024px) {
    .kp-sv-form-section__form .gform_fields {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        row-gap: 24px;
        column-gap: 16px;
    }
    .kp-sv-form-section__form .gfield {
        width: 100%;
        flex-shrink: 0;
    }
    .kp-sv-form-section__form .gfield--type-email,
    .kp-sv-form-section__form .gfield--type-phone {
        width: calc(50% - 8px);
    }
}
/* Sub-labels above inputs: style as white labels */
.kp-sv-form-section__form .gform-field-label--type-sub {
    color: #ffffff !important;
    font-family: var(--font-main, "acumin-pro", sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px;
}
/* Description text on dark bg */
.kp-sv-form-section__form .gfield_description {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
}
/* Motivatie: "(optioneel)" naast label, niet eronder */
.kp-sv-form-section__form .gfield--type-textarea > .gfield_label {
    display: inline !important;
    margin-right: 6px;
    margin-bottom: 0 !important;
}
.kp-sv-form-section__form .gfield--type-textarea > .gfield_description {
    display: inline !important;
}
.kp-sv-form-section__form .gfield--type-textarea > .ginput_container {
    margin-top: 8px;
}
/* File upload rules text */
.kp-sv-form-section__form .gform_fileupload_rules {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 12px !important;
}
/* Textarea max height */
.kp-sv-form-section__form textarea {
    height: 125px !important;
    max-height: 200px;
}
/* Custom GF button (brochure-submit-btn filter) — dark text + dark chevron on white bg */
.kp-sv-form-section__form .brochure-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    padding: 16px 32px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    color: var(--color-primary, #0D1C38);
    border-radius: 0;
    transition: background 0.2s ease;
}
.kp-sv-form-section__form .brochure-submit-btn .kp-btn__arrow {
    transition: transform 0.3s ease;
}
.kp-sv-form-section__form .brochure-submit-btn:hover { background: rgba(255, 255, 255, 0.85); }
.kp-sv-form-section__form .brochure-submit-btn:hover .kp-btn__arrow { transform: translateX(4px); }
.kp-sv-form-section__form .brochure-submit-btn .kp-btn__chevron path { fill: #0D1C38 !important; }
.kp-sv-form-section__form .brochure-submit-btn .kp-btn__arrow svg path { fill: #0D1C38 !important; }
.kp-sv-form-section__form .brochure-submit-btn .btn-text { color: #0D1C38; }
/* Hide GF defaults that conflict */
.kp-sv-form-section__form .gform_heading { display: none; }
.kp-sv-form-section__form .gform_validation_container { display: none !important; }
.kp-sv-form-section__form .gform_required_legend { display: none; }
/* Button stays full width on all breakpoints per Figma (align-self: stretch) */

/* ============================================================================
   RECRUITMENT PROCESS SECTION
   Desktop: two columns (left title/desc, right steps)
   Mobile: single column
   ============================================================================ */
.kp-sv-process {
    background: #ffffff;
    padding: 80px 0;
    width: 100%;
}
.kp-sv-process__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* width handled by .inner from theme grid */
}
.kp-sv-process__left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kp-sv-process__title {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-process__desc {
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-process__steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kp-sv-process__step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kp-sv-process__step-title {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-process__step-desc {
    color: #0d1c38;
    font-family: var(--font-main, "acumin-pro", sans-serif);
    font-size: 16px;
    line-height: 150%;
    font-weight: 400;
    margin: 0;
}
.kp-sv-process__divider {
    border-top: 1px solid rgba(13, 28, 56, 0.25);
}

/* ============================================================================
   RELATED VACATURES SECTION
   ============================================================================ */
.kp-sv-related {
    background: #ffffff;
    padding: 0 0 64px 0;
    width: 100%;
}

/* Label bar (section label + button) */
.kp-sv-related__label {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid rgba(13, 28, 56, 0.25);
    padding: 24px 0 40px 0;
}
.kp-sv-related__label-inner {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}
.kp-sv-related__label-text {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 24px;
    line-height: 140%;
    font-weight: 400;
}
.kp-sv-related__more-btn {
    display: none; /* Hidden on mobile */
}

/* Vacancy cards grid */
.kp-sv-related__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================================================
   VACANCY CARD
   ============================================================================ */
.kp-vacature-card {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.kp-vacature-card:hover {
    opacity: 0.85;
}
.kp-vacature-card__image {
    display: none;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
}
.kp-vacature-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kp-vacature-card__body {
    background: #ebf1f8;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    align-self: stretch;
    justify-content: center;
    min-width: 0;
}
.kp-vacature-card__title {
    color: #0d1c38;
    font-family: var(--font-heading, "sofia-pro", sans-serif);
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
    margin: 0;
}
.kp-vacature-card__bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.kp-vacature-card__tags {
    display: none;
}
.kp-vacature-card__arrow {
    background: #0d1c38;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    color: #ffffff;
}

/* ============================================================================
   DESKTOP STYLES (min-width: 1024px)
   ============================================================================ */
@media (min-width: 1024px) {

    /* Hero */
    .kp-sv-hero {
        padding: 64px 100px 64px 309px;
    }
    .kp-sv-hero__inner {
        flex-direction: row;
        gap: 50px;
        max-width: 1304px;
    }
    .kp-sv-hero__left {
        width: 634px;
        max-width: 100%;
        flex-shrink: 0;
        gap: 40px;
    }
    .kp-sv-hero__content {
        gap: 32px;
    }
    .kp-sv-hero__tags {
        gap: 16px;
    }
    .kp-sv-hero__title {
        font-size: 40px;
        line-height: 120%;
    }
    .kp-sv-hero__cta {
        width: fit-content;
    }
    .kp-sv-hero__image {
        display: block;
        flex: 1;
        min-width: 0;
        align-self: stretch;
    }

    /* Article + Sidebar layout */
    .kp-sv-body {
        padding: 64px 0 160px 0;
    }
    .kp-sv-body__inner {
        flex-direction: row;
        gap: 80px;
        justify-content: center;
    }

    /* Article column — reuses .kp-se-article */
    .kp-sv-body .kp-se-article {
        width: 828px;
        max-width: 828px;
        flex-shrink: 0;
        padding: 0;
    }

    /* Sidebar */
    .kp-sv-sidebar {
        width: 390px;
        max-width: 390px;
        flex-shrink: 0;
        padding: 0;
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }

    /* Sidebar recruiter — restore desktop sizes */
    .kp-sv-recruiter__name {
        font-size: 32px;
        line-height: 130%;
    }

    /* Form section */
    .kp-sv-form-section {
        padding: 120px 0;
    }
    .kp-sv-form-section__inner {
        flex-direction: row;
        gap: 40px;
        justify-content: center;
        align-items: flex-start;
    }
    .kp-sv-form-section__left {
        width: 610px;
        max-width: 610px;
        flex-shrink: 0;
        gap: 80px;
    }
    .kp-sv-form-recruiter__name {
        font-size: 32px;
        line-height: 130%;
    }
    .kp-sv-form-recruiter__card {
        padding: 24px;
        gap: 24px;
    }
    .kp-sv-form-recruiter__image {
        width: 111px;
        height: 111px;
    }
    .kp-sv-form-recruiter__actions {
        padding: 0 24px 24px 24px;
    }
    .kp-sv-form-section__form .ginput_container_name {
        flex-direction: row;
    }
    .kp-sv-form-section__title {
        font-size: 40px;
        line-height: 120%;
    }
    .kp-sv-form-section__subtitle {
        font-size: 20px;
    }
    .kp-sv-form-section__form {
        max-width: 710px;
        flex: 1;
    }

    /* Process section */
    .kp-sv-process {
        padding: 160px 0 80px 0;
    }
    .kp-sv-process__inner {
        flex-direction: row;
        gap: 150px;
        align-items: flex-start;
    }
    .kp-sv-process__left {
        width: 817px;
        flex-shrink: 0;
    }
    .kp-sv-process__title {
        font-size: 56px;
        line-height: 120%;
    }
    .kp-sv-process__desc {
        font-size: 24px;
    }
    .kp-sv-process__step-title {
        font-size: 32px;
        line-height: 130%;
    }
    .kp-sv-process__steps {
        width: 703px;
        flex-shrink: 0;
    }

    /* Related section */
    .kp-sv-related {
        padding: 0 0 80px 0;
    }
    .kp-sv-related__label {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 48px 0;
    }
    .kp-sv-related__label-text {
        font-size: 32px;
        line-height: 130%;
    }
    .kp-sv-related__more-btn {
        display: inline-flex;
    }

    /* Vacancy cards */
    .kp-sv-related__grid {
        align-items: center;
    }
    .kp-vacature-card__image {
        display: block;
        width: 180px;
        height: 180px;
    }
    .kp-vacature-card__tags {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }
    .kp-vacature-card__body {
        padding: 32px;
        gap: 24px;
        width: 720px;
        flex: initial;
    }
    .kp-vacature-card__title {
        font-size: 24px;
        line-height: 140%;
    }
}

/* ============================================================================
   MEDIUM DESKTOP (1025px - 1439px) — smaller padding
   ============================================================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
    .kp-sv-hero {
        padding: 48px 60px 48px 120px;
    }
    .kp-sv-form-section {
        padding: 80px 0;
    }
    .kp-sv-process {
        padding: 80px 0;
    }
    .kp-sv-process__inner {
        gap: 80px;
    }
    .kp-sv-related {
        padding: 0 0 64px 0;
    }
}