/* ==========================================================================
   Styles for the Formulas / Courses / Vacancies / About / Contact page templates.
   Only page-specific rules live here; the design system is in main.css.
   ========================================================================== */

/* ---------- Page ground: these Figma screens sit on the light-blue page fill ---------- */
.page-template-formulas .cs-main,
.page-template-courses .cs-main,
.page-template-vacancies .cs-main,
.page-template-about .cs-main,
.page-template-contact .cs-main { background: var(--c-bg); }

/* ---------- Headline helpers ---------- */
.pg-accent-light .accent { font-weight: 400; }
.cs-hero__title.accent-2.pg-title-mix { font-weight: 400; }
.cs-hero__title.accent-2.pg-title-mix strong { font-weight: 700; }
.pg-hero__text--lg { font-family: var(--font-ui); font-weight: 500; font-size: 24px; line-height: 40px; letter-spacing: -1px; max-width: 627px; }
.cs-hero__text.pg-hero__text--lg + .cs-hero__actions { margin-top: 48px; }
.page-template-about .cs-hero__content { max-width: 770px; }

/* ---------- Centered intros ---------- */
.page-template-formulas .cs-intro__text { font-family: var(--font-ui); max-width: 776px; }
.page-template-courses .cs-intro__title,
.page-template-vacancies .cs-intro__title { margin-bottom: 20px; max-width: none; }
.page-template-courses .cs-intro__text,
.page-template-vacancies .cs-intro__text { max-width: 1013px; }
.page-template-courses .cs-intro__actions { margin-top: 48px; }

/* ---------- Pricing (formulas) ---------- */
.cs-pricing-section { padding: 72px 0; }
.cs-plan { border-color: var(--c-border-2); }
.cs-plan__icon { height: 248px; margin-bottom: 24px; }
.cs-plan__icon img { max-height: 248px; }
.cs-plan__title { font-size: 36px; line-height: 48px; letter-spacing: -1px; color: var(--c-deep); }
.cs-plan__badge { width: 80px; height: 80px; font-family: var(--font-head); font-size: 32px; letter-spacing: -1px; }
.cs-plan__sub { margin-top: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--c-teal); font-family: var(--font-head); line-height: 28px; color: var(--c-muted-2); }
.cs-plan__list { margin-top: 24px; gap: 20px; }
.cs-plan__list li { gap: 25px; font-weight: 600; font-size: 20px; line-height: 28px; color: var(--c-deep); }
.cs-plan__list .cs-icon-box { width: 32px; height: 32px; border-radius: 8px; }
.cs-plan__list .cs-icon-box .cs-icon { width: 16px; height: 16px; }
.cs-plan__actions { justify-content: center; padding-top: 48px; }
.cs-plan__actions .cs-btn { min-width: 324px; }
@media (max-width: 640px) {
  .cs-plan { padding: 24px; border-radius: 24px; }
  .cs-plan__icon { height: 200px; }
  .cs-plan__icon img { max-height: 200px; }
  .cs-plan__title { font-size: 28px; line-height: 36px; }
  .cs-plan__badge { width: 64px; height: 64px; font-size: 24px; }
  .cs-plan__list li { font-size: 18px; line-height: 26px; gap: 16px; }
  .cs-plan__actions .cs-btn { min-width: 0; width: 100%; }
}

/* ---------- Contact ---------- */
.pg-contact__title { margin-bottom: 24px; }
.pg-contact__text { margin-bottom: 24px; }
.cs-contact { margin-top: 24px; }
.cs-contact__form, .cs-contact__details { border-radius: 18px; }
.cs-contact__form .cs-form__row { gap: 26px; }
.cs-contact__form .cs-textarea { min-height: 162px; }
.cs-contact__form .cs-form__actions { margin-top: 24px; }
.cs-contact__details-title { color: var(--c-ink); margin-bottom: 28px; }
.cs-contact__row { gap: 32px; }
.cs-contact__row + .cs-contact__row { margin-top: 28px; }
.cs-contact__row .cs-icon-box { width: 36px; height: 36px; border-radius: 8px; }
.cs-contact__row .cs-icon-box .cs-icon { width: 24px; height: 24px; }
.cs-contact__label { font-family: var(--font-head); }
.cs-contact__value { display: inline-block; margin-top: 8px; font-weight: 600; line-height: 20px; }
.cs-contact__value:hover { color: var(--c-orange-dark); text-decoration: underline; }
.cs-contact__meta { margin-top: 8px; }
.cs-contact__address { font-style: normal; }
@media (max-width: 640px) { .cs-contact__form .cs-form__row { gap: 24px; } }

/* ---------- Image + text blocks (courses, about, offer) ---------- */
.page-template-courses .cs-feature,
.page-template-about .cs-feature,
.page-template-offer .cs-feature { padding: 72px 0; }
.page-template-courses .cs-feature__title { color: var(--c-navy); margin-bottom: 20px; }
.page-template-courses .cs-feature__text p + p,
.page-template-about .cs-feature__text p + p { margin-top: 20px; }
.page-template-courses .cs-feature__actions { margin-top: 48px; }
.page-template-about .cs-feature__grid { align-items: center; }
.cs-feature__media.pg-media--fill { height: auto; min-height: 413px; align-self: stretch; }
.cs-feature__media.pg-media--fill img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 1024px) {
  .page-template-courses .cs-feature,
  .page-template-about .cs-feature,
  .page-template-offer .cs-feature { padding: 48px 0; }
  .cs-feature__media.pg-media--fill { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Carousel with round orange arrows (courses tiles, vacancy region cards) ---------- */
.pg-carousel { display: flex; align-items: center; gap: 48px; }
/* Padding with a matching negative margin leaves room for a card grown on hover; the scrolling track would clip it. */
.pg-carousel .cs-carousel__track { flex: 1 1 auto; min-width: 0; gap: 24px; padding: 16px 12px; margin: -16px -12px; scroll-padding-inline: 12px; }
.pg-carousel__btn { flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.pg-carousel__btn:hover { background: var(--c-orange-dark); color: var(--c-white); transform: scale(1.05); }
.pg-carousel__btn .cs-icon { width: 32px; height: 32px; stroke-width: 3; }
@media (max-width: 1024px) { .pg-carousel { gap: 16px; } .pg-carousel__btn { width: 48px; height: 48px; } }
@media (max-width: 640px) { .pg-carousel { gap: 0; } .pg-carousel__btn { display: none; } }

/* Course tiles */
.pg-tiles { padding: 72px 0; }
.pg-tiles__title { text-align: center; margin-bottom: 48px; }
.pg-tile { flex: 0 0 calc((100% - 72px) / 4); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 351px; padding: 44px 20px 43px; background: var(--c-white); border: 1px solid var(--c-border-2); border-radius: 32px; }
.pg-tile__icon { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; }
.pg-tile__img { width: 100%; height: 100%; object-fit: contain; }
.pg-tile__label { margin: 24px 0; min-height: 64px; display: flex; align-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--c-navy); }
.pg-tile .cs-btn { margin-top: auto; }
@media (max-width: 1024px) { .pg-tile { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .pg-tile { flex-basis: 85%; } }

/* Vacancy region cards */
.pg-vcards { padding: 72px 0; }
.pg-vcard { flex: 0 0 calc((100% - 48px) / 3); display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 423px; padding: 43px 32px 45px; background: var(--c-white); border: 1px solid var(--c-border-2); border-radius: 32px; }
.pg-vcard__icon { width: 218px; height: 170px; display: flex; align-items: center; justify-content: center; }
.pg-vcard__title { margin: 19px 0 30px; font-family: var(--font-ui); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--c-navy); }
.pg-vcard__title span { display: block; color: var(--c-teal); }
.pg-vcard .cs-btn { margin-top: auto; width: 100%; max-width: 218px; }
/* City illustration cut from the 3 x 2 sprite (assets/img/vacancies-block.jpg, 1536 x 1024). */
.pg-city { --k: .68; display: block; width: calc(300px * var(--k)); height: calc(250px * var(--k)); background: url(../img/vacancies-block.jpg) no-repeat; background-size: calc(1536px * var(--k)) auto; background-position: calc(var(--sx, 0) * -1px * var(--k)) calc(var(--sy, 0) * -1px * var(--k)); }
@media (max-width: 1024px) { .pg-vcard { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .pg-vcard { flex-basis: 85%; } }

/* ---------- Vacancy filters + list ---------- */
.pg-vacancies { padding: 72px 0; }
.pg-filters { display: grid; gap: 48px; max-width: 764px; }
.pg-filter__label { font-weight: 700; font-size: 18px; line-height: 24px; text-transform: uppercase; color: #000; margin-bottom: 24px; }
.pg-filter__chips { display: flex; flex-wrap: wrap; gap: 24px; }
.pg-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 16px; background: var(--c-white); border: 1px solid var(--c-muted); border-radius: 8px; font-family: var(--font-ui); font-weight: 500; font-size: 20px; line-height: 1; color: var(--c-navy); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.pg-chip:hover { border-color: var(--c-teal); }
.pg-chip__box { position: relative; width: 18px; height: 18px; border: 1px solid var(--c-muted); border-radius: 2px; flex: none; }
.pg-chip.is-active { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }
.pg-chip.is-active .pg-chip__box { border-color: var(--c-white); background: var(--c-white); }
.pg-chip.is-active .pg-chip__box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--c-teal); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pg-vacancy-list { margin-top: 112px; max-width: 764px; display: grid; gap: 32px; }
.pg-vacancy { display: flex; align-items: center; gap: 32px; padding: 32px; border: 2px solid var(--c-border-2); border-radius: 24px; }
.pg-vacancy__icon { flex: none; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; background: var(--c-white); border: 1px solid var(--c-border-2); border-radius: 16px; overflow: hidden; }
.pg-vacancy__icon .pg-city { --k: .5; }
.pg-vacancy__body { min-width: 0; }
/* Real vacancy titles run to two lines ("Region Ghent – Independent care assistant"); the Figma's were one word. */
.pg-vacancy__title { font-weight: 700; font-size: 32px; line-height: 40px; color: var(--c-deep); }
.pg-vacancy__tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 16px 32px; }
.pg-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-pill); background: var(--c-border-2); font-family: var(--font-ui); font-weight: 500; font-size: 20px; line-height: 24px; color: var(--c-navy); }
.pg-vacancy__link { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--c-orange); transition: color .2s var(--ease); }
.pg-vacancy__link:hover { color: var(--c-orange-dark); }
.pg-vacancy__link .cs-icon { width: 22px; height: 22px; }
.pg-vacancies__empty { margin-top: 32px; max-width: 764px; }
@media (max-width: 640px) {
  .pg-filters { gap: 32px; }
  .pg-filter__chips { gap: 12px; }
  .pg-chip { font-size: 16px; min-height: 40px; padding: 8px 12px; }
  .pg-vacancy-list { margin-top: 56px; gap: 24px; }
  .pg-vacancy { flex-direction: column; align-items: flex-start; padding: 24px; }
  .pg-vacancy__icon { width: 120px; height: 120px; }
  .pg-vacancy__icon .pg-city { --k: .38; }
  .pg-vacancy__title { font-size: 24px; line-height: 32px; }
  .pg-tag { font-size: 16px; min-height: 36px; padding: 6px 16px; }
  .pg-vacancy__link { font-size: 20px; line-height: 28px; }
}

/* ---------- Vacancy page ---------- */
.pg-job__back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 24px; font-family: var(--font-ui); font-weight: 500; color: var(--c-teal); }
.pg-job__back:hover { color: var(--c-navy); }
.pg-job__back .cs-icon { width: 18px; height: 18px; }
.pg-job__title { margin-bottom: 0; }
.pg-job__tags { margin: 24px 0 40px; }
.pg-job__content ul li + li { margin-top: 6px; }
.pg-job__apply { margin-top: 40px; }

/* ---------- Compact "Ready to grow" (vacancies) ---------- */
.page-template-vacancies .cs-cta { padding-top: 0; }