/* WORKUP — visual system for vacancy categories.
   Loaded after modern.css so existing cards retain their layout and gain
   a profession-specific image, accent and accessible text scrim. */
#jobs .vacancy-card {
  --vacancy-art: url("/assets/vacancy-art/industrial.webp");
  --vacancy-art-accent: #3b82f6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--vacancy-art-accent) 42%, var(--color-border)) !important;
}

#jobs .vacancy-art--welding { --vacancy-art: url("/assets/vacancy-art/welding.webp"); --vacancy-art-accent: #f43f5e; }
#jobs .vacancy-art--pipeline { --vacancy-art: url("/assets/vacancy-art/pipeline.webp"); --vacancy-art-accent: #14b8a6; }
#jobs .vacancy-art--electrical { --vacancy-art: url("/assets/vacancy-art/electrical.webp"); --vacancy-art-accent: #38bdf8; }
#jobs .vacancy-art--construction { --vacancy-art: url("/assets/vacancy-art/construction.webp"); --vacancy-art-accent: #f59e0b; }
#jobs .vacancy-art--height { --vacancy-art: url("/assets/vacancy-art/height.webp"); --vacancy-art-accent: #d946ef; }
#jobs .vacancy-art--engineering { --vacancy-art: url("/assets/vacancy-art/engineering.webp"); --vacancy-art-accent: #8b5cf6; }
#jobs .vacancy-art--machinery { --vacancy-art: url("/assets/vacancy-art/machinery.webp"); --vacancy-art-accent: #84cc16; }
#jobs .vacancy-art--logistics { --vacancy-art: url("/assets/vacancy-art/logistics.webp"); --vacancy-art-accent: #22c55e; }
#jobs .vacancy-art--industrial { --vacancy-art: url("/assets/vacancy-art/industrial.webp"); --vacancy-art-accent: #3b82f6; }

html[data-theme="light"] #jobs .vacancy-card::before {
  background:
    radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--vacancy-art-accent) 20%, transparent), transparent 64%),
    linear-gradient(90deg, rgba(248,252,255,.98) 0%, rgba(246,251,255,.90) 48%, rgba(238,248,253,.55) 74%, rgba(231,244,249,.36) 100%),
    var(--vacancy-art) right center / cover no-repeat !important;
}

html[data-theme="dark"] #jobs .vacancy-card::before {
  background:
    radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--vacancy-art-accent) 24%, transparent), transparent 64%),
    linear-gradient(90deg, rgba(5,20,34,.985) 0%, rgba(5,21,36,.89) 48%, rgba(5,22,37,.54) 74%, rgba(4,18,31,.32) 100%),
    var(--vacancy-art) right center / cover no-repeat !important;
}

#jobs .vacancy-card .vacancy-index,
#jobs .vacancy-card .vacancy-pay > span,
#jobs .vacancy-card .vacancy-info-icon,
#jobs .vacancy-card .vacancy-location svg {
  color: color-mix(in srgb, var(--vacancy-art-accent) 78%, var(--color-text)) !important;
}

@media (hover: hover) and (pointer: fine) {
  #jobs .vacancy-card::before { transition: filter .45s ease, transform .65s cubic-bezier(.16,1,.3,1); }
  #jobs .vacancy-card:hover::before { filter: saturate(1.12) contrast(1.03); transform: scale(1.025); }
  #jobs .vacancy-card:hover { border-color: color-mix(in srgb, var(--vacancy-art-accent) 76%, var(--color-border)) !important; }
}

@media (max-width: 720px) {
  html[data-theme] #jobs .vacancy-card::before { background-position: 72% center !important; }
}

@media (prefers-reduced-motion: reduce) {
  #jobs .vacancy-card::before { transition: none !important; }
}

/* Glass treatment for the page-wide section bands: the animated site
   background remains visible through every section without compromising the
   contrast of headings or copy. */
html:root[data-theme] body.home-page :is(
  .stats, #services, .process-section, #employment, #jobs,
  #partners, .testimonials, #about, #facts, #contact
) {
  background-color: color-mix(in srgb, var(--section-surface) 76%, transparent) !important;
  background-image:
    radial-gradient(42rem circle at var(--section-pointer-x, 14%) var(--section-pointer-y, 10%), color-mix(in srgb, var(--section-tone-a) 18%, transparent) 0%, transparent 72%),
    radial-gradient(70rem 44rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 14%, transparent) 0%, transparent 70%),
    linear-gradient(142deg, color-mix(in srgb, var(--section-surface) 72%, transparent) 0%, color-mix(in srgb, var(--section-surface) 64%, transparent) 48%, color-mix(in srgb, var(--section-surface) 70%, transparent) 100%) !important;
  backdrop-filter: saturate(1.06);
}

html:root[data-theme="dark"] body.home-page :is(
  .stats, #services, .process-section, #employment, #jobs,
  #partners, .testimonials, #about, #facts, #contact
) {
  background-color: color-mix(in srgb, var(--section-surface) 82%, transparent) !important;
  background-image:
    radial-gradient(44rem circle at var(--section-pointer-x, 14%) var(--section-pointer-y, 10%), color-mix(in srgb, var(--section-tone-a) 20%, transparent) 0%, transparent 74%),
    radial-gradient(70rem 46rem at var(--section-orb-x, 104%) var(--section-orb-y, 104%), color-mix(in srgb, var(--section-tone-b) 16%, transparent) 0%, transparent 72%),
    linear-gradient(142deg, color-mix(in srgb, var(--section-surface) 76%, transparent) 0%, color-mix(in srgb, var(--section-surface) 68%, transparent) 48%, color-mix(in srgb, var(--section-surface) 74%, transparent) 100%) !important;
}

/* Safe area inside the editorial cards.  The image/text layer in "Facts"
   previously had no inner space on the left and almost none underneath.  The
   same compact, equal gutter keeps neighbouring text cards visually aligned
   without introducing opaque panels over the animated background. */
html:root[data-theme] body.home-page :is(
  #facts .fact-card,
  #services .service-card,
  .process-section .process-card
) {
  box-sizing: border-box;
  padding-inline: clamp(18px, 2.25vw, 32px) !important;
  padding-bottom: clamp(22px, 2.4vw, 34px) !important;
}

html:root[data-theme] body.home-page #facts .fact-card {
  padding-top: clamp(22px, 2.25vw, 30px) !important;
}

html:root[data-theme] body.home-page :is(
  #facts .fact-card,
  #services .service-card,
  .process-section .process-card
) > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 640px) {
  html:root[data-theme] body.home-page :is(
    #facts .fact-card,
    #services .service-card,
    .process-section .process-card
  ) {
    padding-inline: 18px !important;
    padding-bottom: 24px !important;
  }

  html:root[data-theme] body.home-page #facts .fact-card {
    padding-top: 22px !important;
  }
}