/* ==========================================================================
   Careers page (views/pages/careers.erb). Tokens only — no hex here.
   ========================================================================== */

/* ---- Apply intro ------------------------------------------------------------ */
.careers-intro__lockup { display: block; width: min(300px, 80%); height: auto; margin-bottom: 1.75rem; }
.careers-intro__title { font-size: clamp(2rem, 3.2vw, 2.875rem); }
.careers-intro__quote {
  margin: 1.75rem 0 2rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--brand-summer-green);
  background: var(--surface-sage); border-radius: 0 var(--radius) var(--radius) 0;
}
.careers-intro__quote p { margin: 0 0 .5rem; font-size: 1.0625rem; font-style: italic; color: var(--color-heading); line-height: 1.55; }
.careers-intro__quote footer { font-size: .8125rem; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-medium); color: var(--color-primary); }
.careers-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.careers-apply__lang { display: flex; align-items: flex-start; gap: .6rem; margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--color-text-muted); max-width: 300px; }
.careers-apply__lang .bi { color: var(--color-primary); font-size: 1.25rem; line-height: 1.1; }
.careers-apply__lang strong { color: var(--color-heading); }

.careers-intro__media { position: relative; padding-bottom: 3.5rem; }
.careers-intro__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--gradient-green); box-shadow: var(--shadow-soft); }
.careers-intro__awards {
  position: absolute; left: 1.5rem; bottom: 0; display: flex; gap: .75rem; margin: 0;
}
.careers-intro__awards li {
  background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: .65rem .85rem; display: grid; place-items: center;
}
.careers-intro__awards img { height: 84px; width: auto; }
@media (max-width: 575.98px) { .careers-intro__awards img { height: 64px; } }

/* ---- Perks --------------------------------------------------------------------- */
.careers-perk { display: flex; flex-direction: column; gap: 1rem; transition: transform var(--dur) var(--ease-out); }
.careers-perk:hover { transform: translateY(-4px); }
.careers-perk__title { font-size: 1.1875rem; text-transform: uppercase; margin: .25rem 0 0; }
.careers-perk p { color: var(--color-text-muted); font-size: 1rem; }

/* ---- Values (compact) ----------------------------------------------------------- */
.careers-values__title { font-size: clamp(2rem, 3vw, 2.625rem); }
.careers-values__list { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 576px) { .careers-values__list { grid-template-columns: repeat(2, 1fr); } }
.careers-values__list li { /* + .tile-on-dark */
  display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1.15rem; line-height: 1.4; font-size: .9375rem;
}
.careers-values__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.careers-values__list strong { display: block; color: var(--white); text-transform: uppercase; letter-spacing: .03em; font-weight: var(--fw-bold); margin-bottom: .1rem; }

/* ---- Life at Encore mosaic -------------------------------------------------------- */
.careers-life__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; }
.careers-life__item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--gradient-green); }
.careers-life__item img { transition: transform var(--dur-slow) var(--ease-out); }
.careers-life__item:hover img { transform: scale(1.05); }
.careers-life__item::after { content: ""; position: absolute; inset: 0; background: var(--overlay-card-shade); pointer-events: none; }
.careers-life__item figcaption {
  position: absolute; left: 1rem; bottom: .85rem; right: 1rem; z-index: 1; color: var(--white);
  font-size: .75rem; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
}
.careers-life__item--1 { grid-column: span 2; grid-row: span 2; }
@media (min-width: 768px) {
  .careers-life__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
  .careers-life__item--2 { grid-row: span 2; }
  .careers-life__item--7 { grid-column: span 2; }
}
@media (min-width: 1200px) { .careers-life__grid { grid-auto-rows: 240px; } }

/* ---- Roles -------------------------------------------------------------------------- */
.careers-roles__title { font-size: clamp(2rem, 3vw, 2.625rem); }
.careers-roles__intro .lead-text { color: var(--color-text-muted); margin-bottom: 1.75rem; }
@media (min-width: 992px) { .careers-roles__intro { position: sticky; top: calc(var(--header-height-compact) + 24px); } }
.careers-roles__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 768px) { .careers-roles__grid { grid-template-columns: repeat(2, 1fr); } }
.careers-role {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem; height: 100%;
  background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.careers-role__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-green-tint); color: var(--color-heading); font-size: 1.35rem;
}
.careers-role__icon img { width: 30px; height: 30px; object-fit: contain; }
.careers-role__title { font-size: 1.0625rem; text-transform: uppercase; margin: .2rem 0 .35rem; line-height: 1.25; }
.careers-role p { color: var(--color-text-muted); font-size: .9375rem; line-height: 1.55; }