/* ============================================================================
   MTS Personio Jobs — Front-end styles
   Scoped under .msx-page. Colours/font/radius mirror milkthesun.com CI.
   (Poppins is provided by the theme; a system fallback keeps CWV intact.)
   ========================================================================== */

.msx-page{
  --msx-blue:#009FE3; --msx-blue-dark:#0077B6; --msx-navy:#0B2A46;
  --msx-gold:#F6B31B; --msx-green:#2FA95A; --msx-red:#E5533C;
  --msx-ink:#12212f; --msx-muted:#5c6b7a; --msx-line:#e4ebf1;
  --msx-bg:#ffffff; --msx-soft:#f2f7fb; --msx-r:14px; --msx-r-sm:9px;
  --msx-font:"Poppins","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --msx-shadow:0 10px 34px rgba(11,42,70,.10);
  font-family:var(--msx-font); color:var(--msx-ink); font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.msx-page *,.msx-page *::before,.msx-page *::after{box-sizing:border-box}
.ct-div-block:has(.msx-page),.ct-code-block:has(.msx-page),.msx-page{max-width:100%}
.msx-page img{max-width:100%;height:auto;display:block}
.msx-page a:not(.msx-btn){color:var(--msx-blue-dark);text-decoration:underline;text-underline-offset:2px}
.msx-page a:not(.msx-btn):hover{color:var(--msx-blue)}

/* Section shell + headings */
.msx-section{margin:0 0 60px;scroll-margin-top:90px}
.msx-section__head{max-width:680px;margin:0 0 30px}
.msx-eyebrow{display:block;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--msx-blue);margin:0 0 8px}
.msx-page h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em;color:var(--msx-navy);line-height:1.2;margin:0 0 12px}
.msx-section__lead{font-size:16px;color:#33475a;margin:0;max-width:640px}

/* Hero */
.msx-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--msx-blue),var(--msx-blue-dark));
  color:#fff;border-radius:var(--msx-r);padding:clamp(30px,5vw,56px);margin:0 0 40px}
.msx-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,179,27,.35),transparent 70%);pointer-events:none}
.msx-hero>*{position:relative;z-index:1}
.msx-hero__eyebrow{font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.9;margin:0 0 12px}
.msx-hero h1{font-size:clamp(28px,4.6vw,45px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}
.msx-hero__lead{font-size:clamp(16px,2.2vw,19px);opacity:.94;max-width:64ch;margin:0 0 26px}
.msx-hero__cta{display:flex;gap:12px;flex-wrap:wrap}

/* Meta pill row on hero (dark surface variant) */
.msx-hero__meta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.msx-hero__meta .msx-pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.001);color:#fff}
.msx-hero__meta .msx-pill b{color:#fff}

/* Buttons */
/*.msx-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:15px;padding:5px 28px !important;border-radius:999px;cursor:pointer;border:0;transition:.15s;text-decoration:none;white-space:nowrap}
.msx-btn--primary{background:#fff;color:var(--msx-blue-dark);box-shadow:0 8px 20px rgba(11,42,70,.22)}
.msx-btn--primary:hover{transform:translateY(-1px);color:var(--msx-blue-dark)}
.msx-btn--primary::after{content:"→";font-weight:800}
.msx-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.msx-btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.msx-btn--blue{background:linear-gradient(120deg,var(--msx-blue),var(--msx-blue-dark));color:#fff;box-shadow:0 8px 20px rgba(0,159,227,.34)}
.msx-btn--blue:hover{transform:translateY(-1px);color:#fff}
.msx-btn--blue::after{content:"→";font-weight:800}
.msx-btn--outline{background:transparent;color:var(--msx-blue-dark);border:1.5px solid var(--msx-line)}
.msx-btn--outline:hover{border-color:var(--msx-blue);color:var(--msx-blue-dark)}
.msx-btn--sm{padding:10px 20px;font-size:14px}
.msx-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}*/

/* Pills */
.msx-pill{display:inline-flex;align-items:center;gap:6px;background:var(--msx-soft);border:1px solid var(--msx-line);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:600;color:var(--msx-muted)}
.msx-pill b{color:var(--msx-ink);font-weight:800}

/* Job filter pills */
.msx-jobfilter{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.msx-jobfilter__btn{font:inherit;font-size:14px;font-weight:600;color:var(--msx-navy);background:var(--msx-soft);border:1px solid var(--msx-line);
  border-radius:999px;padding:9px 18px;cursor:pointer;transition:.15s}
.msx-jobfilter__btn:hover{border-color:var(--msx-blue)}
.msx-jobfilter__btn.is-active{background:linear-gradient(120deg,var(--msx-blue),var(--msx-blue-dark));color:#fff;border-color:transparent}

/* Job grid + cards */
.msx-jobgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.msx-jobgrid{grid-template-columns:1fr}}
/* Column variants (set via shortcode columns="…"). Higher specificity wins over the base rule. */
.msx-jobgrid.msx-jobgrid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.msx-jobgrid.msx-jobgrid--2{grid-template-columns:1fr}}
.msx-jobgrid.msx-jobgrid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.msx-jobgrid.msx-jobgrid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.msx-jobgrid.msx-jobgrid--4{grid-template-columns:1fr}}
.msx-jobcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--msx-line);border-radius:var(--msx-r);
  padding:24px;box-shadow:0 2px 10px rgba(11,42,70,.04);min-width:0;overflow-wrap:break-word;hyphens:auto}
.msx-jobcard h3{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--msx-navy)}
.msx-jobcard h3 a{color:inherit;text-decoration:none}
.msx-jobcard h3 a:hover{color:var(--msx-blue-dark)}
.msx-jobcard__tags{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.msx-jobcard p{margin:0 0 18px;font-size:15px;color:#33475a;flex:1}
.msx-jobcard__foot{margin-top:auto}
.msx-jobs-empty{display:none;text-align:center;padding:40px 20px;color:var(--msx-muted);font-size:15px;border:1px dashed var(--msx-line);border-radius:var(--msx-r)}
.msx-jobs-empty.is-visible{display:block}
.msx-jobs-all{text-align:center;margin:28px 0 0}

/* Detail: description sections */
.msx-jobdesc{margin:0 0 44px}
.msx-jobdesc h2{margin:34px 0 14px}
.msx-jobdesc h2:first-child{margin-top:0}
.msx-jobdesc p{margin:0 0 16px}
.msx-jobdesc ul,.msx-jobdesc ol{margin:0 0 18px;padding-left:22px}
.msx-jobdesc li{margin:0 0 8px}
.msx-jobdesc li::marker{color:var(--msx-blue)}
.msx-jobdesc strong{font-weight:700}
/* Neutralise inline colours Personio ships inside the CDATA description HTML */
.msx-jobdesc [style*="color"]{color:var(--msx-ink) !important}

/* Application form */
.msx-form{background:var(--msx-soft);border:1px solid var(--msx-line);border-radius:var(--msx-r);padding:clamp(22px,4vw,36px)}
.msx-form__title{font-size:clamp(20px,2.6vw,26px);font-weight:800;color:var(--msx-navy);margin:0 0 6px}
.msx-form__sub{font-size:15px;color:var(--msx-muted);margin:0 0 24px}
.msx-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.msx-form__grid{grid-template-columns:1fr}}
.msx-field{display:flex;flex-direction:column;min-width:0}
.msx-field--full{grid-column:1/-1}
.msx-label{font-size:14px;font-weight:600;color:var(--msx-navy);margin:0 0 6px}
.msx-label .req{color:var(--msx-red)}
.msx-input,.msx-textarea{font:inherit;font-size:15px;color:var(--msx-ink);background:#fff;border:1.5px solid var(--msx-line);
  border-radius:var(--msx-r-sm);padding:12px 14px;width:100%;transition:.15s;min-height:46px}
.msx-input:focus,.msx-textarea:focus{outline:none;border-color:var(--msx-blue);box-shadow:0 0 0 3px rgba(0,159,227,.15)}
.msx-textarea{min-height:130px;resize:vertical}
.msx-file{font-size:14px;color:var(--msx-muted);background:#fff;border:1.5px dashed var(--msx-line);border-radius:var(--msx-r-sm);padding:12px 14px;width:100%}
.msx-file::file-selector-button{font:inherit;font-weight:600;font-size:13px;margin-right:12px;padding:8px 14px;border:0;border-radius:999px;background:rgba(0,159,227,.12);color:var(--msx-blue-dark);cursor:pointer}
.msx-field__hint{font-size:14px;color:var(--msx-muted);margin:6px 0 0}
.msx-field__error{font-size:14px;color:var(--msx-red);font-weight:600;margin:6px 0 0;display:none}
.msx-field.has-error .msx-input,.msx-field.has-error .msx-textarea,.msx-field.has-error .msx-file{border-color:var(--msx-red)}
.msx-field.has-error .msx-field__error{display:block}

/* Consent */
.msx-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 0}
.msx-consent input{margin-top:3px;width:20px;height:20px;flex:none;accent-color:var(--msx-blue)}
.msx-consent label{font-size:14px;color:#33475a;line-height:1.55}

/* Honeypot — visually + AT hidden, still submitted by bots */
.msx-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.msx-form__actions{margin:24px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.msx-form__note{font-size:14px;color:var(--msx-muted)}

/* Form-level feedback */
.msx-alert{border-radius:var(--msx-r-sm);padding:14px 18px;font-size:15px;font-weight:600;margin:0 0 20px;display:none}
.msx-alert.is-visible{display:block}
.msx-alert--error{background:rgba(229,83,60,.08);border:1px solid #f0c2b8;color:#a3311f}
.msx-form__success{display:none;text-align:center;padding:20px 10px}
.msx-form__success.is-visible{display:block}
.msx-form__success .msx-success-ico{width:64px;height:64px;border-radius:50%;background:rgba(47,169,90,.12);color:var(--msx-green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.msx-form__success .msx-success-ico svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.msx-form__success h3{font-size:22px;font-weight:800;color:var(--msx-navy);margin:0 0 8px}
.msx-form__success p{font-size:15px;color:#33475a;margin:0}

/* Spinner */
.msx-spin{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  display:none;animation:msx-spin .7s linear infinite}
.is-sending .msx-spin{display:inline-block}
@keyframes msx-spin{to{transform:rotate(360deg)}}

/* Back link */
.msx-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin:0 0 22px;text-decoration:none!important}
.msx-back::before{content:"←";font-weight:800}

@media (prefers-reduced-motion: reduce){
  .msx-btn:hover{transform:none}
  .msx-spin{animation-duration:1.4s}
}