/* Jobs & Careers — Figma 661:4860 + 926:3322 (prihlaska). Prefix jb-. */

/* ---------------------------------------------------------------- PRIHLASKA (navy, pad 72/108/96/108) */
.jb-apply { position: relative; background: var(--c-navy); color: #fff; margin-top: calc(-38 * var(--u)); letter-spacing: 0; }
.jb-work, .jb-pos { letter-spacing: 0; }
.jb-apply__wrap { max-width: var(--maxw); margin-inline: auto; padding: calc(72 * var(--u)) calc(108 * var(--u)) calc(96 * var(--u)); }
.jb-eyebrow { font-weight: 700; font-size: max(13px, calc(16 * var(--u))); line-height: calc(23.2 / 16); color: #cc994a; text-transform: uppercase; }
.jb-apply__cols { display: grid; grid-template-columns: calc(528 * var(--u)) minmax(0, 1fr); gap: calc(80 * var(--u)); margin-top: calc(32 * var(--u)); align-items: start; }
.jb-intro { display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
.jb-intro__h { font-weight: 700; font-size: max(28px, calc(44 * var(--u))); line-height: calc(63.8 / 44); text-transform: uppercase; }
.jb-intro__p { font-size: max(16px, calc(22 * var(--u))); line-height: calc(31.9 / 22); }
.jb-intro__img { width: 100%; height: calc(352 * var(--u)); min-height: 200px; object-fit: cover; border-radius: 7px; }
.jb-intro__addr { font-size: max(15px, calc(20 * var(--u))); line-height: calc(29 / 20); }

.jb-form { display: flex; flex-direction: column; min-width: 0; }
.jb-form__intro { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.jb-form__h { font-weight: 700; font-size: max(22px, calc(28 * var(--u))); line-height: calc(40.6 / 28); text-transform: uppercase; }
.jb-note { font-size: max(13px, calc(15 * var(--u))); line-height: calc(21.8 / 15); }
.jb-sent { padding: 14px 18px; border-radius: 7px; background: #fff; color: var(--c-navy); font-weight: 600; }
.jb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jb-step { margin: calc(48 * var(--u)) 0 0; padding: 0; border: 0; min-width: 0; }
.jb-step + .jb-step { padding-top: calc(48 * var(--u)); border-top: 1px solid #fff; }
.jb-step > * + *, .jb-group > * + *, .jb-emps > * + * { margin-top: calc(24 * var(--u)); }
.jb-step__h, .jb-sub { float: left; width: 100%; padding: 0 0 calc(24 * var(--u)); }
.jb-step__h + *, .jb-sub + *, .jb-step__h + datalist + * { clear: both; margin-top: 0 !important; }
.jb-step__h { font-weight: 700; font-size: max(20px, calc(28 * var(--u))); line-height: calc(40.6 / 28); }
.jb-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
.jb-field { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: 0; }
.jb-label { padding: 0; font-weight: 600; font-size: max(13px, calc(16 * var(--u))); line-height: calc(23.2 / 16); }
.jb-input { width: 100%; height: max(48px, calc(62 * var(--u))); padding: 0 calc(20 * var(--u) + 2px); background: #fff; color: var(--c-navy); border: 2px solid #fff; border-radius: 7px; font: inherit; font-weight: 400; font-size: max(15px, calc(18 * var(--u))); line-height: 1.45; letter-spacing: 0; transition: border-color .2s, box-shadow .2s; }
.jb-input::placeholder { color: #424e6e; opacity: 1; }
.jb-input:focus { outline: none; border-color: var(--c-gold-2); box-shadow: 0 0 0 3px rgba(216, 152, 61, .45); }
.jb-input:user-invalid { border-color: #ff9b9b; }
input[type="date"].jb-input { color: #424e6e; }
input[type="date"].jb-input:valid { color: var(--c-navy); }
.jb-select { position: relative; display: block; }
.jb-select select { appearance: none; padding-right: 52px; cursor: pointer; }
.jb-select select:invalid { color: #424e6e; }
.jb-select__ico { position: absolute; right: calc(20 * var(--u) + 4px); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--c-navy); pointer-events: none; }

.jb-q { margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; min-width: 0; }
.jb-q .jb-label { float: left; width: 100%; }
.jb-radios { clear: both; display: flex; gap: calc(32 * var(--u) + 2px); padding-top: calc(16 * var(--u)); }
.jb-radio, .jb-check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: max(15px, calc(18 * var(--u))); line-height: calc(26.1 / 18); min-width: 90px; }
.jb-radio input, .jb-check input { appearance: none; margin: 0; flex: none; width: 20px; height: 20px; border: 1.5px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.jb-radio input:checked { background: radial-gradient(circle, #cc994a 0 5px, transparent 5.5px); border-color: #cc994a; }
.jb-radio input:focus-visible, .jb-check input:focus-visible { outline: 3px solid var(--c-gold-2); outline-offset: 3px; }
.jb-check { align-items: flex-start; font-weight: 600; font-size: max(13px, calc(16 * var(--u))); line-height: calc(23.2 / 16); }
.jb-check input { width: 22px; height: 22px; border-radius: 3px; background: #fff; border-color: #fff; }
.jb-check input:checked { background: #cc994a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6L21.1 7.4 19.7 6z'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: #cc994a; }
.jb-check > span { padding-top: 0; }

.jb-group { margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; min-width: 0; }
.jb-sub { font-weight: 600; font-size: max(13px, calc(16 * var(--u))); line-height: calc(23.2 / 16); color: #cc994a; text-transform: uppercase; }
.jb-add { align-self: flex-start; min-width: calc(300 * var(--u)); height: max(48px, calc(59 * var(--u))); padding: 0 calc(21 * var(--u)); border: 1px solid #fff; border-radius: 7px; font-weight: 600; font-size: max(13px, calc(16 * var(--u))); text-align: left; transition: background-color .2s, color .2s; }
.jb-add:hover { background: #fff; color: var(--c-navy); }
.jb-decl { font-size: max(15px, calc(18 * var(--u))); line-height: calc(26.1 / 18); }
.jb-submit { align-self: flex-start; min-width: calc(320 * var(--u)); height: max(50px, calc(59 * var(--u))); padding: 0 24px; background: var(--c-gold-3); color: #fff; border-radius: 7px; font-weight: 700; font-size: max(14px, calc(16 * var(--u))); letter-spacing: .3px; text-transform: uppercase; transition: background-color .2s; }
.jb-submit:hover { background: #b7873f; }

/* ---------------------------------------------------------------- MISTA A DOBROVOLNICI (capesmokey.ca) */
.jb-work { background: #fff; color: var(--c-navy-2); }
.jb-work__wrap { max-width: var(--maxw); margin-inline: auto; padding: calc(96 * var(--u)) calc(108 * var(--u)) 0; }
.jb-work__cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); }
.jb-wcard { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: calc(48 * var(--u)); border: 1px solid var(--c-navy-2); border-radius: 7px; }
.jb-wcard__h { font-weight: 800; font-size: max(26px, calc(40 * var(--u))); line-height: 1.2; text-transform: uppercase; }
.jb-wcard__lead { font-weight: 700; font-size: max(16px, calc(22 * var(--u))); color: #cc994a; }
.jb-wcard__list { display: grid; gap: 10px; font-size: max(15px, calc(18 * var(--u))); }
.jb-wcard__list li, .jb-pos__list li { display: flex; align-items: center; gap: 12px; }
.jb-wcard__list .cs-ico, .jb-pos__list .cs-ico { width: 22px; height: 22px; color: #cc994a; }
.jb-wcard__p { font-size: max(15px, calc(18 * var(--u))); line-height: 1.5; }
.jb-btn { margin-top: auto; display: inline-flex; align-items: center; min-height: max(46px, calc(51 * var(--u))); padding: 0 calc(20 * var(--u) + 6px); border: 2px solid currentColor; border-radius: 7px; font-weight: 700; font-size: max(13px, calc(15 * var(--u))); letter-spacing: .3px; text-transform: uppercase; transition: background-color .2s, color .2s; }
.jb-wcard .jb-btn:hover { background: var(--c-navy-2); color: #fff; border-color: var(--c-navy-2); }
.jb-btn--gold { background: #cc994a; border-color: #cc994a; color: #fff; }
.jb-btn--gold:hover { background: #b7873f; border-color: #b7873f; }
.jb-pos { background: #fff; color: var(--c-navy-2); scroll-margin-top: 24px; }
.jb-pos__wrap { max-width: var(--maxw); margin-inline: auto; padding: calc(96 * var(--u)) calc(108 * var(--u)); display: grid; grid-template-columns: calc(760 * var(--u)) 1fr; gap: calc(80 * var(--u)); align-items: center; }
.jb-pos__media img { width: 100%; height: auto; border-radius: 7px; }
.jb-pos__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: max(16px, calc(20 * var(--u))); line-height: 1.5; }
.jb-pos__h { font-weight: 800; font-size: max(28px, calc(45 * var(--u))); line-height: 1.2; text-transform: uppercase; }
.jb-pos__kicker { font-weight: 700; text-transform: uppercase; }
.jb-pos__list { display: grid; gap: 12px; font-weight: 700; font-size: max(14px, calc(17 * var(--u))); text-transform: uppercase; }
.jb-pos .jb-btn { margin-top: 12px; }

/* ---------------------------------------------------------------- RESPONZIVITA */
@media (max-width: 1023px) {
  .jb-apply__wrap, .jb-work__wrap, .jb-pos__wrap { padding-inline: var(--gut); }
  .jb-apply__wrap { padding-top: 48px; padding-bottom: 64px; }
  .jb-apply__cols { grid-template-columns: 1fr; gap: 48px; }
  .jb-intro { max-width: 640px; }
  .jb-work__cards, .jb-pos__wrap { grid-template-columns: 1fr; }
  .jb-pos__wrap { padding-top: 56px; padding-bottom: 64px; }
  .jb-work__wrap { padding-top: 56px; }
}
@media (max-width: 767px) {
  .jb-row { grid-template-columns: 1fr; gap: 16px; }
  .jb-step > * + *, .jb-group > * + *, .jb-emps > * + * { margin-top: 16px; }
  .jb-step__h, .jb-sub { padding-bottom: 16px; }
  .jb-step { margin-top: 32px; }
  .jb-step + .jb-step { padding-top: 32px; }
  .jb-wcard { padding: 28px 20px; }
  .jb-submit, .jb-add { width: 100%; text-align: center; }
}