/* Careers page - additions only. Reuses style2.css for type, colour and layout. */

.careers {
  background-color: #2c3e5e;
  padding: 1.5em 0 3.5em 0;
}
.careers .mainmenu {
  margin-bottom: 2.5em;
}
/* style2.css hovers to #2c3e5e, which is this page's background */
.careers .mainmenu a:hover {
  color: #ffc20e;
}
.careers .intro {
  max-width: 800px;
  margin: 0 auto 2.6em auto;
}
.careers h1 {
  line-height: 1.05;
  margin-bottom: 0.5em;
}
.careers .lead {
  line-height: 1.5;
}

/* category block */
.cat {
  margin: 0 auto 2.6em auto;
}
.cat > h2 {
  color: #ffc20e;
  border-bottom: 2px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 0.35em;
  margin-bottom: 0.9em;
}

/* job grid */
.joblist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -0.6em;
  padding: 0;
  list-style: none;
}
.joblist li {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.333%;
  padding: 0 0.6em 1.3em 0.6em;
}
.joblist h3 {
  color: #ea7c35;
  margin: 0 0 0.2em 0;
  font-weight: 700;
  /* inherited h3 is 35px, too large inside a ~300px card */
  font-size: 1.25em;
  line-height: 1.15;
}
.joblist p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.45;
  opacity: 0.93;
}

/* ---- AI / automation page ---- */

/* plain name lists (no descriptions) */
.namelist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -0.6em;
  padding: 0;
  list-style: none;
}
.namelist li {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.333%;
  padding: 0.3em 0.6em;
  line-height: 1.35;
}
.namelist li:before {
  content: "\203A";
  margin-right: 0.5em;
  opacity: 0.75;
}
.namelist.risk li:before { color: #ff6b5a; }
.namelist.safe li:before { color: #3ddc97; }

/* safe-bet category cards */
.safegrid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -0.6em;
}
.safecard {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 0 0.6em 1.2em 0.6em;
}
.safecard .inner {
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid #3ddc97;
  border-radius: 4px;
  padding: 1em 1.1em 1.1em 1.1em;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.safecard h3 {
  color: #3ddc97;
  font-size: 1.15em;
  margin: 0 0 0.2em 0;
  line-height: 1.2;
}
.safecard .why {
  font-size: 0.92em;
  opacity: 0.85;
  margin: 0 0 0.6em 0;
  line-height: 1.4;
}
.safecard ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95em;
  line-height: 1.5;
}
.safecard ul li:before {
  content: "\203A";
  color: #3ddc97;
  margin-right: 0.5em;
}
.safecard.hybrid .inner { border-left-color: #ff4fa3; }
.safecard.hybrid h3 { color: #ff4fa3; }
.safecard.hybrid ul li:before { color: #ff4fa3; }

.riskbox {
  background: rgba(255, 107, 90, 0.12);
  border-left: 4px solid #ff6b5a;
  border-radius: 4px;
  padding: 1.1em 1.2em;
  margin-bottom: 1.4em;
}
.riskbox h3 {
  color: #ff6b5a;
  font-size: 1.15em;
  margin: 0 0 0.5em 0;
}

@media only screen and (max-width: 900px) {
  .namelist li { width: 50%; }
  .safecard { width: 100%; }
}
@media only screen and (max-width: 600px) {
  .namelist li { width: 100%; }
}

/* closing call to action */
.careers .endcta {
  max-width: 760px;
  margin: 1.5em auto 0 auto;
  padding-top: 1.6em;
  border-top: 2px solid rgba(255, 255, 255, 0.22);
}
.careers .endcta .button {
  display: inline-block;
  margin: 0.4em 0.4em 0 0.4em;
}

@media only screen and (max-width: 900px) {
  .joblist li {
    width: 50%;
  }
}
@media only screen and (max-width: 600px) {
  .joblist li {
    width: 100%;
  }
  .careers {
    padding: 1em 0 2.5em 0;
  }
  .careers .mainmenu {
    height: auto;
    margin-bottom: 1.8em;
  }
}