/* ==========================================================================
   Augmented Systems — Careers page (scoped)
   Extends the shared theme. Reuses every brand token defined in
   home-revamp.css (:root --as-*) and the breadcrumb / hero / overview-panel /
   check-list / benefit-list / process-six / faq patterns already shipped in
   business-solution.css. Only adds the handful of NEW patterns this page
   needs that have no existing equivalent: the culture bento gallery, the job
   card, the job-filter toolbar and the opportunities empty state.

   Load order on the page: home-revamp.css -> business-solution.css -> careers.css
   Nothing here overrides global theme files — all rules are prefixed .as-*.
   ========================================================================== */
:root {
  --as-grape: #3b6fd4;
  --as-grape-dark: #3059ab;
  --as-ink: #343f52;
  --as-body: #60697b;
  --as-soft: #f2f3fb;
  --as-line: #e6e5f4;
  --as-radius: 0.8rem;
  --as-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.06);
  --as-shadow-hover: 0 1rem 2.5rem rgba(96, 93, 186, 0.16);
}

/* ==========================================================================
   SEC-28 — LIFE AT AUGMENTED SYSTEMS (bento culture gallery)
   One large feature tile + four supporting tiles. Captions sit on a
   PERMANENT gradient veil (not hover-revealed) per the accessibility
   requirement that captions must be visible without hovering — hover only
   adds a subtle image scale as decorative polish.
   ========================================================================== */
.as-culture-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.as-culture-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
}
.as-culture-tile--feature { min-height: 300px; }
.as-culture-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.as-culture-tile:hover .as-culture-img { transform: scale(1.05); }
.as-culture-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 26, 58, 0.05) 30%, rgba(28, 26, 58, 0.82) 100%);
}
.as-culture-cap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.25rem 1.4rem;
  color: #fff;
}
.as-culture-cap h3 {
  color: #fff;
  font-size: clamp(15.5px, 0.3vw + 14px, 18px);
  margin-bottom: 0.3rem;
}
.as-culture-tile--feature .as-culture-cap h3 { font-size: clamp(18px, 0.5vw + 15px, 22px); }
.as-culture-cap p {
  margin: 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .as-culture-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 170px;
  }
  .as-culture-tile--feature { grid-column: span 2; grid-row: span 2; min-height: 0; }
  .as-culture-tile:not(.as-culture-tile--feature) { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .as-culture-img { transition: none !important; }
  .as-culture-tile:hover .as-culture-img { transform: none !important; }
}

/* ==========================================================================
   NEW — CURRENT OPPORTUNITIES (job filters, job card, empty state)
   ========================================================================== */
.as-job-filters {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.as-job-results-count { font-size: 0.85rem; color: var(--as-body); }

.as-job-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eef0f6;
  border-radius: var(--as-radius);
  padding: 1.6rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.as-job-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--as-shadow-hover);
  border-color: var(--as-line);
}
.as-job-title { font-size: clamp(17px, 0.4vw + 15px, 20px); color: var(--as-ink); margin-bottom: 0.75rem; }
.as-job-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.as-job-summary { font-size: clamp(13.5px, 0.25vw + 12.5px, 15px); color: var(--as-body); margin-bottom: 1.1rem; }
.as-job-posted { font-size: 0.78rem; color: var(--as-body); opacity: 0.85; margin-bottom: 1.1rem; }
.as-job-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: auto; }

.as-job-empty {
  background: #fff;
  border: 1px solid var(--as-line);
  border-radius: var(--as-radius);
  box-shadow: var(--as-shadow);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.as-job-empty-ic {
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1.25rem;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; color: var(--as-grape); background: var(--as-soft);
}

@media (max-width: 767.98px) {
  .as-job-filters { padding: 1.1rem 1.25rem; }
  .as-job-card { padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .as-job-card { transition: none !important; }
  .as-job-card:hover { transform: none !important; }
}

/* ==========================================================================
   LIFE AT AUGMENTED SYSTEMS — CULTURE GALLERY  (.as-life*)
   Added 2026-08-19 for resources/views/frontend/life_at_aug.blade.php, from
   the "Life At Augmented Systems / Moments from our team" section of the
   client's reference careers page.

   Photo tiles with a dark scrim and a caption pinned to the foot. The scrim
   stays dark in the light adaptation on purpose — it sits over photography,
   so white caption text on a dark gradient is the legible choice regardless
   of the surrounding page.

   SIZING: px, not rem — the theme sets :root{font-size:20px}.
   ========================================================================== */

.as-life-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.as-life-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #dde4ee;
  border-radius: 16px;
  background: #eef2f8;
}

.as-life-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.as-life-tile:hover img { transform: scale(1.05); }

/* Scrim. Decorative — the caption below carries the meaning. */
.as-life-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(5, 11, 24, 0.9) 0%, rgba(5, 11, 24, 0) 55%);
}

.as-life-cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  margin: 0;
  padding: 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .as-life-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 575.98px) {
  .as-life-gallery { gap: 10px; }
  .as-life-tile { border-radius: 12px; }
  .as-life-cap { padding: 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-life-tile img { transition: none !important; }
  .as-life-tile:hover img { transform: none !important; }
}

/* ==========================================================================
   CURRENT OPPORTUNITIES — "OPEN ROLES" ACCORDION  (.as-open*)
   Added 2026-08-20 from the client reference careers page.

   A hairline-divided list of full-width role rows: title + openings count on
   the left, location / employment type on the right, a circular chevron, and
   the full position description + apply actions revealed on expand. No card
   chrome — the same editorial language as .as-chal / .as-appr elsewhere.

   Behaviour is Bootstrap 5 collapse; this file only styles it.

   Palette matches the .as-wu2-* light adaptation of the reference (blue
   #3b6fd4 on #dde4ee hairlines) so this section sits with the cards above it.

   SIZING: px, not rem — the theme sets :root{font-size:20px}, so rem lengths
   render ~25% larger than intended.
   ========================================================================== */
.as-open {
  --op-ink: #0f1b33;
  --op-body: #5b6579;
  --op-blue: #3b6fd4;
  --op-blue-deep: #24499b;
  --op-line: #dde4ee;

  border-top: 1px solid var(--op-line);
}

.as-open-item { border-bottom: 1px solid var(--op-line); }

/* The <h3> is only there to put the row in the document outline — all of the
   visual sizing lives on the inner spans. */
.as-open-h { margin: 0; font-size: inherit; font-weight: inherit; }

.as-open-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 28px;
  width: 100%;
  padding: 26px 4px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.as-open-q:focus-visible {
  outline: 2px solid var(--op-blue);
  outline-offset: 2px;
  border-radius: 10px;
}

.as-open-lead { min-width: 0; }

.as-open-title {
  display: block;
  color: var(--op-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.2s ease;
}
.as-open-q:hover .as-open-title,
.as-open-q:focus-visible .as-open-title { color: var(--op-blue); }

.as-open-dept {
  display: block;
  margin-top: 7px;
  color: var(--op-blue);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.as-open-meta {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--op-body);
  font-size: 14.5px;
}
.as-open-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.as-open-fact i { color: var(--op-blue); font-size: 16px; }

/* Experience is a third fact that only fits on very wide rows; it is repeated
   in the expanded body, so hiding it here loses nothing. */
.as-open-fact--xl { display: none; }
@media (min-width: 1200px) { .as-open-fact--xl { display: inline-flex; } }

.as-open-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--op-line);
  border-radius: 50%;
  color: var(--op-blue);
  font-size: 18px;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.as-open-q[aria-expanded="true"] .as-open-ic {
  transform: rotate(180deg);
  background: var(--op-blue);
  border-color: var(--op-blue);
  color: #fff;
}

/* --- Expanded body -------------------------------------------------------- */
.as-open-a {
  max-width: 900px;
  padding: 0 4px 34px;
}
.as-open-about {
  margin: 0 0 24px;
  color: var(--op-body);
  font-size: 15px;
  line-height: 1.72;
}
.as-open-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 26px;
  margin: 0 0 28px !important;
  padding: 20px 0 0;
  border-top: 1px solid var(--op-line);
}
.as-open-facts li {
  color: var(--op-ink);
  font-size: 14.5px;
  font-weight: 600;
}
.as-open-facts li span {
  display: block;
  margin-bottom: 4px;
  color: var(--op-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.as-open-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Gradient pill — the reference's "Apply for this role" button. */
.as-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--op-blue-deep) 0%, var(--op-blue) 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(59, 111, 212, 0.26);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.as-open-btn:hover,
.as-open-btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(59, 111, 212, 0.38);
}

.as-open-btn2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--op-line);
  border-radius: 999px;
  background: #fff;
  color: var(--op-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.as-open-btn2:hover,
.as-open-btn2:focus-visible { border-color: var(--op-blue); color: var(--op-blue); }

/* --- Footnote under the list + the genuine no-vacancy state --------------- */
.as-open-note {
  margin: 26px 0 0;
  color: #5b6579;
  font-size: 14.5px;
  line-height: 1.7;
}
.as-open-link {
  padding: 0;
  border: 0;
  background: none;
  color: #3b6fd4;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.as-open-link:hover, .as-open-link:focus-visible { color: #24499b; }

.as-open-empty {
  max-width: 620px;
  margin: 0 auto;
  padding: 44px 32px;
  border: 1px solid #dde4ee;
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.as-open-empty-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(59, 111, 212, 0.1);
  color: #3b6fd4;
  font-size: 26px;
}
.as-open-empty h3 { color: #0f1b33 !important; font-size: 19px !important; font-weight: 700; }
.as-open-empty p { color: #5b6579; font-size: 14.5px; line-height: 1.7; }

/* --- Responsive: meta drops under the title, chevron stays on row 1 -------- */
@media (max-width: 991.98px) {
  .as-open-q {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 14px 16px;
    padding: 22px 2px;
  }
  .as-open-lead { grid-column: 1; grid-row: 1; }
  .as-open-ic   { grid-column: 2; grid-row: 1; }
  .as-open-meta { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; }
  .as-open-title { font-size: 17.5px; }
}
@media (max-width: 575.98px) {
  .as-open-a { padding-bottom: 28px; }
  .as-open-actions { flex-direction: column; align-items: stretch; }
  .as-open-btn, .as-open-btn2 { justify-content: center; }
  .as-open-empty { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-open-ic,
  .as-open-btn { transition: none !important; }
  .as-open-q[aria-expanded="true"] .as-open-ic { transform: none !important; }
  .as-open-btn:hover { transform: none !important; }
}

/* ==========================================================================
   CAREERS FAQs — CENTRED, NARROW ACCORDION  (.as-faq--center)
   Added 2026-08-20. Opt in with
   <x-frontend.business-solutions.faq variant="centered" />.
   The default two-column .as-faq layout is untouched.
   ========================================================================== */
.as-faq--center .as-faq { max-width: 820px; margin: 0 auto; }
.as-faq--center .as-section-intro { max-width: 620px; }
.as-faq-center-help {
  max-width: 820px;
  margin: 26px auto 0;
  color: #5b6579;
  font-size: 14.5px;
  line-height: 1.7;
  text-align: center;
}
.as-faq-center-help a {
  color: #3b6fd4;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.as-faq-center-help a:hover, .as-faq-center-help a:focus-visible { color: #24499b; }

/* Two consecutive tinted bands read as ONE band, as the reference renders its
   gallery and employee-benefits sections. :has() collapses the shared hairline
   entirely; browsers without :has() simply keep one divider line, which is a
   graceful fallback rather than a broken layout. */
.as-wu2-band + .as-wu2-band { border-top: 0; }
.as-wu2-band:has(+ .as-wu2-band) { border-bottom: 0; }

/* The .as-faq accordion is shared site-wide and themed in grape, which clashes
   on this page — every other section here is the blue reference adaptation.
   Rather than override each rule, redefine the tokens those rules already read
   from, scoped to this section only. Every other page's FAQ stays grape. */
.as-faq--center {
  --as-grape: #3b6fd4;
  --as-ink: #0f1b33;
  --as-body: #5b6579;
  --as-line: #dde4ee;
  --as-soft: rgba(59, 111, 212, 0.1);
  /* Added 2026-08-21: .as-faq-item:has(.collapse.show) reads --sd-blue for the
     open card's border. It was never defined for this variant, so the open
     question had no accent here while every other page shows one. */
  --sd-blue: #3b6fd4;
}