/* ==========================================================================
   SmartEdge — Careers
   Layout from packagedesign/7_CAREERS/01_MOCKUPS/Careers_Main_Page_Desktop_Approved.png
   and Career_Detail_Page_Desktop_Approved.png.
   Depends on main.css, components.css and pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.se-phero--careers .se-phero__media{justify-content:flex-end}
.se-phero--careers .se-phero__img{max-width:560px}

/* --------------------------------------------------------------------------
   2. Culture and life at SmartEdge
   -------------------------------------------------------------------------- */
.se-crculture__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);align-items:start}
.se-crculture__text{font-size:.9375rem;line-height:1.68;color:var(--se-ink);margin:.3rem 0 1rem}
.se-crculture__item .se-btn{margin-bottom:18px}
.se-crculture__img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--se-radius);box-shadow:var(--se-shadow)}

.se-crlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.se-crlife__shot{margin:0;position:relative;border-radius:var(--se-radius-sm);overflow:hidden;background:var(--se-blue-soft)}
.se-crlife__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.se-crlife__cap{
  position:absolute;left:8px;right:8px;bottom:8px;text-align:center;
  background:rgba(255,255,255,.94);border-radius:var(--se-radius-pill);padding:4px 8px;
  font-family:var(--se-font-head);font-size:.6875rem;font-weight:800;color:var(--se-navy);
}

/* --------------------------------------------------------------------------
   3. Training + hiring process
   -------------------------------------------------------------------------- */
.se-crprocess__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.se-crprocess__intro{font-size:.9375rem;color:var(--se-ink-soft);margin:.3rem 0 22px;max-width:60ch}
.se-crprocess__icon{
  width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--se-orange-ink);margin-bottom:12px;box-shadow:var(--se-shadow-sm);
}

/* --------------------------------------------------------------------------
   4. Openings
   -------------------------------------------------------------------------- */
.se-cropenings__grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.se-cropenings__main{min-width:0}
.se-jobrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--se-line);border-radius:var(--se-radius);padding:20px 22px;box-shadow:var(--se-shadow-sm);transition:box-shadow .2s var(--se-ease),transform .2s var(--se-ease)}
.se-jobrow:hover{box-shadow:var(--se-shadow);transform:translateY(-2px)}
.se-jobrow__main{min-width:0}
.se-jobrow__title{font-family:var(--se-font-head);font-size:1.1875rem;font-weight:800;color:var(--se-navy);line-height:1.35;margin:0 0 9px}
.se-jobrow__title a{text-decoration:none}
.se-jobrow__title a:hover{color:var(--se-orange-ink)}
.se-jobrow__facts{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:9px}
.se-jobrow__fact{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--se-ink-soft)}
.se-jobrow__fact .se-icon{color:var(--se-orange)}
.se-jobrow__desc{margin:0 0 8px;font-size:.9375rem;line-height:1.6;color:var(--se-ink)}
.se-jobrow__posted{margin:0;font-size:.75rem;color:var(--se-ink-faint)}
.se-jobrow__count{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;text-align:right}
.se-jobrow__details{font-size:.8125rem;font-weight:700;color:var(--se-navy)}
.se-jobrow__details:hover{color:var(--se-orange-ink)}

/* --------------------------------------------------------------------------
   5. Job detail
   -------------------------------------------------------------------------- */
.se-jobdetail{padding-block:var(--se-flow-y)}
.se-jobdetail__main{min-width:0}
.se-jobdetail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.se-jobdetail__title{margin:0 0 .4rem}
.se-jobmeta dt{font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--se-ink-faint);margin:0 0 3px}
.se-jobmeta dd{margin:0;font-family:var(--se-font-head);font-size:.9375rem;font-weight:700;color:var(--se-navy)}
.se-jobsec__text,.se-jobsec .se-prose{font-size:.9375rem;line-height:1.7}

.se-relatedjobs{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.se-relatedjob__link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 8px;border-radius:8px;text-decoration:none;color:inherit}
.se-relatedjob__link:hover{background:#fff}
.se-relatedjob__link .se-icon{color:var(--se-orange);flex:none}
.se-relatedjob__title{font-family:var(--se-font-head);font-size:.875rem;font-weight:800;color:var(--se-navy);line-height:1.35;display:block}
.se-relatedjob__meta{font-size:.75rem;color:var(--se-ink-faint)}

.se-applyform .se-field__help{font-size:.8125rem;color:var(--se-ink-faint);margin:0}

/* --------------------------------------------------------------------------
   6. Benefit strip

   The approved mockup shows six benefit cards in one row on desktop. The
   generic component ships a four-column default, so this page overrides it.
   -------------------------------------------------------------------------- */
.se-crcareers .se-vstrip__grid{grid-template-columns:repeat(6,minmax(0,1fr))}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1279px){
  /* Six cards in one row need more width than a 1280 container gives. */
  .se-crcareers .se-vstrip__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1023px){
  .se-crculture__grid{grid-template-columns:1fr}
  .se-crprocess__grid{grid-template-columns:1fr}
  .se-cropenings__grid{grid-template-columns:1fr}
  .se-cropenings__grid .se-sidebar{order:2}
}

@media (max-width:640px){
  .se-crcareers .se-vstrip__grid{grid-template-columns:1fr}
  .se-crlife{grid-template-columns:1fr}
  .se-jobrow{grid-template-columns:1fr}
  .se-jobrow__count{flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:14px}
  .se-stepflow{grid-template-columns:1fr}
}

/* ==========================================================================
   Gallery strip

   Correction pass: a single clickable strip below the "Life at SmartEdge"
   gallery. It is the whole element rather than a button inside a card, so
   the target is comfortable on touch as well as on desktop, and the hover
   and focus states are the ones every other clickable card on the site uses.
   ========================================================================== */
.se-crstrip{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:center;
  margin-top:18px;padding:15px 18px;
  border:1px solid var(--se-line);border-radius:var(--se-radius);
  background:linear-gradient(120deg,var(--se-blue-soft) 0%,#fff 62%);
  text-decoration:none;color:inherit;
  transition:transform .2s var(--se-ease),box-shadow .2s var(--se-ease),border-color .2s var(--se-ease);
}
.se-crstrip:hover{
  transform:translateY(-2px);
  box-shadow:var(--se-shadow);
  border-color:color-mix(in srgb,var(--se-orange) 38%,var(--se-line));
}
.se-crstrip:focus-visible{outline:3px solid var(--se-orange);outline-offset:3px}
.se-crstrip__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:11px;
  background:var(--se-navy);color:#fff;
}
.se-crstrip__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.se-crstrip__title{font-family:var(--se-font-head);font-size:.9375rem;font-weight:800;color:var(--se-navy);line-height:1.35}
.se-crstrip__text{font-size:.8125rem;line-height:1.5;color:var(--se-ink-soft)}
.se-crstrip__go{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:50%;
  background:var(--se-orange);color:#fff;
  transition:transform .2s var(--se-ease);
}
.se-crstrip:hover .se-crstrip__go{transform:translateX(3px)}

@media (max-width:640px){
  .se-crstrip{grid-template-columns:auto minmax(0,1fr);padding:14px 15px}
  .se-crstrip__go{display:none}
}