/* ==========================================================================
   JAT SITEWIDE CSS — 08-components-v3.css
   Split card, feature list, rail steps, call card, inverse form card,
   stacked career card

   Loaded right after Elementor's Site Settings CSS (see child functions.php),
   in file-name order 01 → 08. Keep blocks in order; add new blocks at the end
   of the relevant file under a "JAT — …" banner comment.
   ========================================================================== */

/* =========================================================
   JAT — CARD SPLIT
   One card, two columns, hairline divider between them.
   Put on the card (a grid-2 container); each direct child
   is a column. Stacks with a horizontal divider ≤ tablet.
   Use on: Single Career "The work & the fit".
   ========================================================= */
.elementor .e-con.card-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.elementor .card-split > .e-con {
  padding-block: 0;
  padding-inline: var(--space-fluid-lg);
}
.elementor .card-split > .e-con:first-child { padding-inline-start: 0; }
.elementor .card-split > .e-con:last-child { padding-inline-end: 0; }
.elementor .card-split > .e-con + .e-con {
  border-inline-start: 1px solid var(--color-divider-inverse);
}
@media (max-width: 1024px) {
  .elementor .e-con.card-split { grid-template-columns: minmax(0, 1fr); }
  .elementor .card-split > .e-con { padding-inline: 0; }
  .elementor .card-split > .e-con + .e-con {
    border-inline-start: 0;
    border-block-start: 1px solid var(--color-divider-inverse);
    margin-block-start: var(--space-fluid-lg);
    padding-block-start: var(--space-fluid-lg);
  }
}

/* Columns are the positioning context for a .number-watermark */
.elementor .card-split > .e-con { position: relative; isolation: isolate; }

/* =========================================================
   JAT — NUMBER WATERMARK
   Big, faint solid number in a left gutter beside a column's
   content (like the JAT watermark in the CTA, smaller).
   Put on a paragraph that is the first child of a
   card-split column; the column reserves the gutter.
   ========================================================= */
.elementor .card-split > .e-con:has(> .number-watermark) {
  --num-size: clamp(4.5rem, 3rem + 4vw, 7rem);
  --num-gutter: calc(var(--num-size) * 1.15);
}
.elementor .number-watermark {
  position: absolute;
  top: -0.12em;
  left: 0;
  z-index: -1;
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--num-size, 6rem);
  font-weight: 900;
  font-stretch: 80%;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--white) 9%, transparent);
  pointer-events: none;
  user-select: none;
}
/* Reserve the gutter: first column from its left edge, later
   columns after the divider padding */
.elementor .card-split > .e-con:first-child:has(> .number-watermark) { padding-inline-start: var(--num-gutter); }
.elementor .card-split > .e-con + .e-con:has(> .number-watermark) {
  padding-inline-start: calc(var(--space-fluid-lg) + var(--num-gutter));
}
.elementor .card-split > .e-con + .e-con > .number-watermark { left: var(--space-fluid-lg); }
@media (max-width: 1024px) {
  .elementor .card-split > .e-con + .e-con:has(> .number-watermark) { padding-inline-start: var(--num-gutter); }
  .elementor .card-split > .e-con + .e-con > .number-watermark {
    left: 0;
    top: calc(var(--space-fluid-lg) - 0.12em);
  }
}
/* Phones: no gutter — number sits faintly behind, top-right */
@media (max-width: 767px) {
  .elementor .card-split > .e-con:has(> .number-watermark),
  .elementor .card-split > .e-con + .e-con:has(> .number-watermark) { padding-inline-start: 0; }
  .elementor .card-split .number-watermark,
  .elementor .card-split > .e-con + .e-con > .number-watermark { left: auto; right: 0; }
}

/* =========================================================
   JAT — FEATURE LIST
   2-column list of icon + title + text (no tiles).
   feature-list  → the grid (e.g. a loop layout)
   feature-item  → each item: icon spans title + text
   Icon is the first child, title second, text third.
   Use on: Single Career "What you take home".
   ========================================================= */
.elementor div.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--space-fluid-md) var(--space-fluid-lg);
  padding: 0;
}
@media (max-width: 767px) {
  .elementor div.feature-list { grid-template-columns: minmax(0, 1fr); }
}
.elementor .e-con.feature-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--space-fluid-sm);
  row-gap: 4px;
  align-content: start;
  height: auto;
  padding: 0;
}
.elementor .feature-item > :first-child {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: var(--color-brand-accent-alpha-08);
  color: var(--color-brand-accent);
  font-size: 18px;
  line-height: 1;
}
.elementor .feature-item > :nth-child(2) {
  align-self: end;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* =========================================================
   JAT — STEP RAIL (component "Process Step (Rail)")
   Numbered red circle + title + text, joined to the next
   step by a vertical rail. Colours follow the section
   (inherit), so it works on dark and light backgrounds.
   ========================================================= */
.elementor .e-con.step-rail {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--space-fluid-sm);
  padding: 0 0 var(--space-fluid-md);
}
.elementor .e-con.step-rail:last-child { padding-block-end: 0; }
/* Rail to the next step */
.elementor .step-rail::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--color-brand-accent), var(--color-brand-accent-alpha-24));
}
.elementor .step-rail:last-child::before { display: none; }
.elementor .step-rail__num {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-brand-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-accent) 22%, transparent);
  color: var(--white);
  font-family: var(--font-family-heading);
  font-size: 14px;
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1;
}
.elementor .step-rail > :nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0 0;
}
.elementor .step-rail__title {
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
  color: inherit;
  text-transform: none;
}
.elementor .step-rail__desc {
  font-family: var(--font-family-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in srgb, currentColor 72%, transparent);
}

/* =========================================================
   JAT — CALL CARD
   Small card: icon circle + label + phone link.
   Use on: Single Career "Apply" (under the steps).
   ========================================================= */
.elementor .e-con.call-card {
  display: flex;
  align-items: center;
  gap: var(--space-fluid-sm);
  width: fit-content;
  max-width: 100%;
  padding: var(--space-fluid-sm) var(--space-fluid-md);
  border: 1px solid var(--color-divider-inverse);
  border-radius: var(--radius-md, 12px);
  background: color-mix(in srgb, var(--color-background-dark) 60%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.elementor .call-card > :first-child {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background-color: var(--color-brand-accent);
}
/* The phone glyph is drawn here (centred, crisp) — the uploaded
   iphone.svg has a baked-in blob and an off-centre phone, so any
   element placed inside the icon circle is hidden. */
.elementor .call-card > :first-child > * { display: none; }
.elementor .call-card > :first-child { position: relative; }
.elementor .call-card > :first-child::before {
  content: "";
  /* Elementor makes container ::before absolute — centre it explicitly */
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0;
  opacity: 1;
  width: 20px;
  height: 20px;
  background-color: var(--white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   JAT — BACKGROUND GRAYSCALE
   Put on a section that has a background image (+ overlay)
   set in Elementor's Background control. Repaints the same
   background layers in grayscale behind the content, so the
   text/buttons/forms keep their colour.
   ========================================================= */
.elementor .bg-grayscale {
  position: relative;
  isolation: isolate;
}
.elementor .bg-grayscale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  filter: grayscale(1);
  pointer-events: none;
}

/* =========================================================
   JAT — FORM CARD — INVERSE
   Dark form on a photo/overlay background: translucent
   fields, spaced caps labels, soft chips. Put on the card
   that wraps the form. Use on: Single Career "Apply".
   ========================================================= */
.elementor .form-card--inverse .e-form-base { padding: 0; }
.elementor .form-card--inverse .text-meta-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-text-inverse-muted);
}
.elementor .form-card--inverse .form-field {
  min-height: 48px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-inverse);
}
.elementor .form-card--inverse .form-field::placeholder { color: rgba(255, 255, 255, 0.45); }
.elementor .form-card--inverse .form-field:hover { border-color: rgba(255, 255, 255, 0.26); }
.elementor .form-card--inverse .form-field:focus {
  border-color: var(--color-brand-accent);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px var(--color-brand-accent-alpha-24);
}
.elementor .form-card--inverse select.form-field option { color: var(--color-text-primary); }
.elementor .form-card--inverse .form-chip {
  padding: 10px 15px;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-text-inverse-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.elementor .form-card--inverse .form-chip:hover { border-color: rgba(255, 255, 255, 0.4); color: var(--color-text-inverse); }
.elementor .form-card--inverse .form-chip:has(input:checked) {
  background-color: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: var(--white);
}
.elementor .form-card--inverse .upload-dropzone {
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.03);
}

/* =========================================================
   JAT — CAREER CARD — STACKED VARIANT
   Photo on top fading into a dark body; title + meta on the
   left, red arrow on the right. Category badge stays pinned
   top-left. Use on: Single Career "Other open positions".
   career-card--stacked → card
   career-card__media   → the image
   career-card__body    → title, meta, arrow (last child)
   ========================================================= */
.elementor .e-con.career-card--stacked {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-divider-inverse);
  border-radius: 1rem;
  background-color: var(--color-background-dark);
  color: var(--color-text-inverse);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
  text-decoration: none;
}
.elementor .career-card--stacked:hover {
  transform: translateY(-4px);
  border-color: var(--color-brand-accent);
}
.elementor .career-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  transition: transform 400ms ease;
}
.elementor .career-card--stacked:hover .career-card__media { transform: scale(1.03); }
.elementor .e-con.career-card__body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-fluid-sm);
  row-gap: 6px;
  margin-top: calc(var(--space-fluid-lg) * -1);
  padding: 0 var(--space-fluid-md) var(--space-fluid-md);
}
.elementor .career-card__body > :not(:last-child) { grid-column: 1; }
.elementor .career-card__body > :last-child {
  grid-column: 2;
  grid-row: 1 / span 2;
  transition: transform 180ms ease;
}
.elementor .career-card--stacked:hover .career-card__body > :last-child { transform: translateX(3px); }

/* =========================================================
   JAT — ICON HELPERS (inline, before the text)
   icon-pin    → map pin      (e.g. "St. Cloud, MN")
   icon-shield → shield badge (e.g. "USDOT 1110393")
   The icon takes the text colour.
   ========================================================= */
.elementor .icon-pin,
.elementor .icon-shield {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.elementor .icon-pin::before,
.elementor .icon-shield::before {
  content: "";
  flex: 0 0 auto;
  width: 1.35em;
  height: 1.35em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.elementor .icon-pin {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.elementor .icon-shield {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* =========================================================
   JAT — ABOUT COLLAGE — layered inset
   Framed, floating dashboard photo over the portrait.
   ========================================================= */
.elementor .about-collage .about-collage__inset {
  border: 6px solid var(--color-background-primary);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 18px 36px -12px rgba(0, 0, 0, 0.35),
    0 50px 90px -30px rgba(0, 0, 0, 0.55);
  transform: translateY(-4px);
}

/* =========================================================
   JAT — COMPANY CARD (door-decal)
   Red accent bar, spaced eyebrow, italic caps name, meta row
   with pin + shield icons and a divider, faint red-gradient
   "JAT" watermark in the back right.
   ========================================================= */
.elementor .e-con.door-decal {
  overflow: hidden;
  isolation: isolate;
  padding: var(--space-fluid-md) var(--space-fluid-md) var(--space-fluid-md) calc(var(--space-fluid-md) + 14px);
  gap: var(--space-fluid-xs);
}
/* Red accent bar */
.elementor .e-con.door-decal::before {
  content: "";
  position: absolute;
  left: var(--space-fluid-md);
  top: var(--space-fluid-md);
  bottom: var(--space-fluid-md);
  width: 3px;
  border-radius: 2px;
  background: var(--color-brand-accent);
  opacity: 1;
  z-index: 1;
}
/* JAT watermark */
.elementor .e-con.door-decal::after {
  content: "JAT";
  position: absolute;
  right: -0.04em;
  bottom: -0.2em;
  z-index: 0;
  font-family: var(--font-family-heading);
  font-size: clamp(6rem, 4rem + 5vw, 9rem);
  font-weight: 900;
  font-stretch: 80%;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-brand-accent) 30%, transparent) 0%, color-mix(in srgb, var(--white) 4%, transparent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.elementor .door-decal > * { position: relative; z-index: 1; }
.elementor .door-decal .text-meta-label { letter-spacing: 0.2em; }
.elementor .door-decal .text-h4 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.01em;
}
/* Meta row: icon items separated by a hairline */
.elementor .door-decal .icon-pin,
.elementor .door-decal .icon-shield {
  color: var(--color-text-inverse);
  letter-spacing: 0.08em;
}
.elementor .door-decal .icon-shield {
  padding-inline-start: var(--space-fluid-sm);
  border-inline-start: 1px solid var(--color-divider-inverse);
}

/* =========================================================
   JAT — CONTACT LIST — fit + larger values
   Hairline dividers only (the list's default padding showed
   its translucent background as a thick frame); values sized
   like the call card / quick-info values elsewhere.
   ========================================================= */
.elementor .e-con.contact-list { padding: 0; }
.elementor .contact-list .text-meta-value {
  font-family: var(--font-family-heading);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-transform: none;
}
.elementor .contact-list .text-meta-label { letter-spacing: 0.16em; }

/* =========================================================
   JAT — MAP EMBED
   Put on the box that holds a Google Maps widget: the map
   fills the box, rounded, in a dark grayscale style.
   ========================================================= */
.elementor .e-con.map-embed {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: block;
}
.elementor .map-embed > .elementor-widget,
.elementor .map-embed .elementor-widget-container,
.elementor .map-embed .elementor-custom-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.elementor .map-embed iframe {
  display: block;
  width: 100%;
  height: 100% !important;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9) brightness(0.95);
}