/* Public job detail page (/careers/{slug}). Type scale and colours below are the measured
   computed styles from the live techtrend.us/careers/<slug> page, mapped onto this app's
   tokens: eyebrow Open Sans 14/19 700 uppercase in --color-accent, H1 adelle-condensed
   36/52 500, main-column H2 adelle-condensed 28 400, sidebar H2 Open Sans 18/28 700, all
   in --color-primary. */

/* tt-flex/tt-section only take effect when a page-scoped rule supplies their --display
   variable; without one these fall back to display:inline and the boxed padding below
   never applies. This page owns its own layout, so set the box model explicitly. */
.tt-career-detail .tt-career-detail-wrap {
  display: block;
  padding-top: 64px;
  padding-bottom: 96px;
}
.tt-career-detail .tt-career-detail-wrap > .tt-section-inner {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* Two columns on desktop, matching the live page's roughly even split with a wide gutter;
   collapses to a single stack below the tablet breakpoint. */
/* Column split measured off the live page: at a 1425px content box it lays out as
   675px main / 72px gutter / 630px sidebar, leaving ~48px slack on the right rather than
   stretching the sidebar to the edge. Expressed as percentages so it holds at any width. */
.tt-career-detail-cols { display: flex; align-items: flex-start; gap: 5.05%; }
.tt-career-detail-main { flex: 0 0 47.37%; max-width: 47.37%; min-width: 0; }
.tt-career-detail-aside { flex: 0 0 44.21%; max-width: 44.21%; min-width: 0; }
.tt-career-detail-cols--single .tt-career-detail-main { max-width: 860px; }

.tt-career-detail-eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  margin: 0 0 64px 0;
}
/* The global .tt-kit a reset would otherwise override the eyebrow's own font/size/colour
   on the nested link, since inheritance always loses to an explicit declaration. */
.tt-career-detail-eyebrow a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}
.tt-career-detail-eyebrow a:hover { color: var(--color-secondary); }

.tt-career-detail .tt-career-detail-title-b .tt-heading {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 52px;
  color: var(--color-primary);
  margin: 0 0 24px 0;
}

/* Scoped under .tt-career-detail so these outrank the global `.tt-kit h2` rule, which
   would otherwise force every heading here to the condensed heading font at h2 size.
   The 63px line-height is the live page's own value - its section spacing comes mostly
   from generous leading rather than margins, so matching it keeps the vertical rhythm
   aligned instead of drifting further down the page with each section. */
.tt-career-detail h2.tt-career-detail-h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 63px;
  color: var(--color-primary);
  margin: 24px 0 24px 0;
}

.tt-career-detail h2.tt-career-detail-aside-h {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-primary);
  margin: 0;
}
.tt-career-detail .tt-career-detail-aside > h2.tt-career-detail-aside-h:not(:first-child) {
  margin-top: 30px;
}

.tt-career-detail-aside-p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--text-body-weight);
  line-height: 28px;
  color: var(--color-text);
  margin: 0 0 14.4px 0;
}
.tt-career-detail-aside-p:last-child { margin-bottom: 0; }

/* About TechTrend is its own full-width band under the two columns on the live page, with
   a 64px gap above it and an H1-sized heading rather than the 28px used for the in-column
   section headings. Keeping it inside the main column would leave the company blurb
   wrapping in a 675px measure with the whole sidebar width empty beside it. */
.tt-career-detail-about { margin-top: 64px; }
.tt-career-detail h2.tt-career-detail-about-h {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 500;
  line-height: 52px;
  color: var(--color-primary);
  margin: 0 0 24px 0;
}

/* Body copy for every rich-text block (description, the list sections, sidebar Benefits).
   Margins here mirror the live page exactly: lists and list items carry none at all and
   rely on the 28px line-height for separation, and paragraphs use 14.4px. An earlier pass
   used 24px paragraph and 12px list-item margins, which compounded into ~230px of extra
   height by the bottom of the page. */
.tt-career-detail-prose {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--text-body-weight);
  line-height: 28px;
  color: var(--color-text);
}
.tt-career-detail-prose p { margin: 0 0 14.4px 0; }
.tt-career-detail-prose p:last-child { margin-bottom: 0; }
.tt-career-detail-prose ul,
.tt-career-detail-prose ol { margin: 0; padding-left: 40px; }
.tt-career-detail-prose li { margin: 0; }
.tt-career-detail-prose a { color: var(--color-secondary); }

@media only screen and (max-width: 1024px) {
  .tt-career-detail-cols { flex-direction: column; gap: 48px; }
  .tt-career-detail-aside { flex: 1 1 auto; max-width: none; width: 100%; }
}

@media only screen and (max-width: 767px) {
  .tt-career-detail .tt-career-detail-wrap { padding-top: 42px; padding-bottom: 64px; }
  .tt-career-detail .tt-career-detail-title-b .tt-heading { font-size: 30px; line-height: 1.3; }
  .tt-career-detail-h2 { font-size: 24px; margin-top: 36px; }
  .tt-career-detail-eyebrow { margin-bottom: 24px; }
}