/* Careers page. Shared tokens and classes live in site.css. */

/* hero: photo on the right, as the board */
.cr-hero .hero__media img{object-position:38% center}

/* why join: six cards, 3 x 2 on desktop */
.cr-why .dcard{min-height:clamp(240px,22vw,320px)}
.cr-why .dcard__title{font-size:clamp(22px,1.9vw,28px)}
.cr-why .dcard__text{font-size:15px}
@media (max-width:640px){.cr-why .dcard{min-height:0}.cr-why .dcard__title{margin-top:28px}}
/* cards in a row share title and text tracks, so titles and texts line up even when a title wraps to two lines */
@media (min-width:641px){
  .cr-why .dcard{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:20px;min-height:0}
  .cr-why .dcard__mark{margin-bottom:clamp(40px,6vw,96px)}
  .cr-why .dcard__title{margin-top:0;align-self:end}
}

/* life at Endless Energy: one tall photo, two small, one wide (as the board) */
.cr-gallery{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;height:clamp(420px,52vw,760px)}
.cr-gallery figure{margin:0;position:relative;overflow:hidden;background:var(--core)}
.cr-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.cr-gallery figure:hover img{transform:scale(1.03)}
.cr-gallery__big{grid-row:span 2}
.cr-gallery__wide{grid-column:span 2}
@media (max-width:700px){
  .cr-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:clamp(150px,42vw,240px);height:auto}
  .cr-gallery__big,.cr-gallery__wide{grid-column:1/-1;grid-row:auto}
  .cr-gallery__big{grid-row:span 2}
}

/* open roles */
.cr-roles-note{max-width:360px;text-align:right}
@media (max-width:900px){.cr-roles-note{text-align:left}}
.roles{border-top:1px solid var(--core);border-bottom:1px solid var(--line-light)}
.roles li+li{border-top:1px solid var(--line-light)}
.role{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr 140px;gap:24px;align-items:center;padding:28px 0;transition:background .25s,padding .25s}
.role:hover{background:var(--white);padding-inline:16px}
.role__title{font-family:var(--f-head);font-size:clamp(22px,1.9vw,26px);font-weight:500;display:flex;flex-direction:column;gap:6px}
.role__summary{font-family:var(--f-body);font-size:15px;font-weight:400;color:var(--ink-3)}
.role__meta{font-size:16px;color:var(--ink-3)}
.role__apply{justify-self:end;font-size:15px;font-weight:600;border-bottom:2px solid var(--spark);padding-bottom:3px}
@media (max-width:900px){.role{grid-template-columns:1fr auto;gap:6px 16px}.role__title{grid-column:1/-1}.role__meta{font-size:14px}.role__apply{grid-column:2;grid-row:2}}
.roles--empty{border-top:1px solid var(--core);padding:clamp(28px,4vw,48px) 0 clamp(8px,2vw,16px);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.roles__empty-title{font-family:var(--f-head);font-size:clamp(24px,2.4vw,34px);font-weight:300;letter-spacing:-.015em}
.roles__empty-text{font-size:17px;line-height:1.55;color:var(--ink-3);max-width:620px}
.roles--empty .link{margin-top:8px}

/* apply band */
.cr-apply__mail{font-size:14px;background:rgba(24,25,27,.1);padding:4px 8px;align-self:flex-end;user-select:all}
@media (max-width:560px){.cr-apply__mail{align-self:flex-start}}