/*
 * OS Careers page (/careers/, client brief client-html/Careers_Page_Content_Final_Revised.pdf).
 * Most sections reuse Industries/Services/About/CSR components as is (Industries Why, automate
 * cards, OS Service Results, case study testimonial, the Success Stories chip tabs, OS Post CTA,
 * common OS FAQs) with no extra CSS. These rules cover only the pieces that needed a new design or
 * a small variant: the hero slider's grid fix, the Why QKTech subhead, the employee voices' head-
 * to-quotes spacing (the quote card itself now uses two reusable OS Case Study Testimonial
 * variants defined in os-case-detail.css, not page-specific CSS), the UNIQK University intro
 * lines, the Programs tabs (Home Services tabs), the metrics row (Home Trust Stats), the Life at QK split (topics index + photo bento), and the closing CTA.
 */

/* ---------- Hero (os/careers-hero) ---------- */
/* The L1 hero's grid rule (os-industry-list.css) targets `.os-blog-hero > .os-industry-list-hero__body`
   — a *direct* child of the section. The OS Slider wrapper this hero adds around its one slide
   (`os-careers-hero__slides`, so a second banner can be added later) puts another div between them,
   so that rule never matches on its own (same fix as the About/Analyst Relations heroes). */
.os-careers-hero__slides > .os-industry-list-hero__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 543px);
	gap: 40px;
	align-items: center;
	margin-top: 24px;
}
@media (max-width: 1100px) {
	.os-careers-hero__slides > .os-industry-list-hero__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
	.os-careers-hero__slides > .os-industry-list-hero__body { gap: 24px; }
}

/* ---------- Why QKTech subhead (os/careers-why) ---------- */
/* The brief's own one-liner ("We build careers. We create leaders. You'll grow here."),
   above the lead paragraph — the Industries Why layout's first use of a subhead line. The base
   layout only centres text on `.os-industry-why__text` (os-industry-list.css); this paragraph
   doesn't carry that class, so without its own centring it rendered left-aligned at the body's
   full 980px width while the lead paragraph under it is centred at 860px — matched here.
   Upright and at the paragraph's own size (18px, 16 on phones), no italic (user, 2026-10-19). */
.os-careers-why__subhead {
	max-width: 860px;
	margin: 0 auto 12px !important;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--ink-deep);
}
@media (max-width: 768px) {
	.os-careers-why__subhead { font-size: var(--wp--preset--font-size--medium); }
}

/* ---------- Employee voices (os/careers-voices) ---------- */
/* Same head-to-quotes gap as the CSR/Analyst Relations testimonial carousels (the testimonial's
   own `> * { margin-block: 0 }` leaves no space between the head and the OS Slider wrapper). */
.os-careers-voices > .os-industry-list__head + .os-case-detail-quotes { margin-top: 32px; }
.os-careers-voices > .os-slider__controls { margin-top: 32px; }
@media (max-width: 768px) {
	.os-careers-voices > .os-industry-list__head + .os-case-detail-quotes { margin-top: 24px; }
	.os-careers-voices > .os-slider__controls { margin-top: 24px; }
}
/* The content-hugging/centred card (short quotes) and the two-line role+tenure citation both
   started here, page-scoped, then were promoted into os-case-detail.css as reusable OS Case Study
   Testimonial variants once it was clear neither was Careers-specific (2026-10-15) —
   `.os-case-detail-quote--tight` and `.os-case-detail-quote__cite--split`, applied directly in
   os/careers-voices.php. Nothing Careers-specific remains for this section beyond the head-gap
   rules above; see os-case-detail.css for the variants' own rules and reasoning. */

/* ---------- UNIQK University intro (os/careers-university) ---------- */
.os-careers-university__text {
	max-width: 720px;
	margin: 12px auto 0 !important;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--custom--color--tertiary);
}
.os-careers-university__text + .os-careers-university__text { margin-top: 4px !important; }

/* On the OS Blue Band (os-theme.css; user, 2026-10-19: "blue gradient … change the color
   schemes"), as the Analyst Relations Our Perspective band: the band's gradient stretched to the
   section's height (it's sized for Home's 782px band; only background-size is overridden, see
   os-analyst-relations.css), the spinning orbit ring off. White head, intro lines at 86% white,
   and the white cards become glass cards (the OS Metric Row's white 8% fill, #245a94 border and
   blur) with white titles and 86% white text; the section keeps its own 48px / 29px padding. */
.os-careers-university.is-style-os-blue-band {
	background-size: var(--os-band-glow-size) auto, 100% 100% !important;
}
.os-careers-university.is-style-os-blue-band::after { content: none; animation: none; }
.os-careers-university.is-style-os-blue-band .os-service-detail-automate__head > * { color: var(--wp--preset--color--white); }
.os-careers-university.is-style-os-blue-band .os-service-detail-automate__head > .is-style-os-eyebrow { color: var(--wp--custom--color--on-brand); }
.os-careers-university.is-style-os-blue-band .os-service-detail-automate__head > .os-careers-university__text { color: rgb(255 255 255 / 0.86); }
.os-careers-university.is-style-os-blue-band .os-automate-card {
	border-color: #245a94;
	background: rgb(255 255 255 / 0.08);
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
	box-shadow: 0 8px 16px rgb(0 0 0 / 0.12);
}
.os-careers-university.is-style-os-blue-band .os-automate-card > .os-automate-card__title { color: var(--wp--preset--color--white); }
.os-careers-university.is-style-os-blue-band .os-automate-card > .os-automate-card__text { color: rgb(255 255 255 / 0.86); }
/* The card photo on top of its text, edge to edge (the card clips it to its corners): the card's
   top padding goes, the photo cancels the side padding (32px, 24px ≤768px) and keeps 16:10. */
.os-careers-university .os-automate-card:has(> .os-careers-university__image) { min-height: 0; padding-top: 0; }
.os-careers-university .os-automate-card > .os-careers-university__image { margin: 0 -32px 8px; }
.os-careers-university__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }
@media (max-width: 768px) {
	.os-careers-university .os-automate-card > .os-careers-university__image { margin: 0 -24px 4px; }
}

/* ---------- Programs tabs (os/careers-programs) ---------- */
/* The Home "Services that scale with you" tabs (user, 2026-10-19), as is (os-services__tabs +
   os-service, os-theme.css): icon tab list on the left, the navy panel with the program's photo
   fading in from the right (the live site's program photos). Only the differences: 32px from the
   head (24 on phones) like the Partners modules (Home's is 60px under a centred head), and the
   title may wrap, since "Experienced Professionals" at 32px is wider than Home's 413px copy column
   (Home's titles are short and kept on one line). */
.os-careers-programs > .os-careers-programs__tabs { margin-top: 32px !important; }
.os-careers-program .os-service__title { white-space: normal; line-height: 1.25; }
@media (max-width: 768px) {
	.os-careers-programs > .os-careers-programs__tabs { margin-top: 24px !important; }
}

/* ---------- Excellence in Metrics (os/careers-metrics) ---------- */
/* The section and head stay the service page results band (os-service-detail.css); the stats row is
   the Home "Why trust QKTech" OS Metric Row as is (user, 2026-10-19: is-style-os-metrics +
   os-metric, os-theme.css) with the brief's six metrics. Section spacing unchanged (user): the row
   keeps the old row's 32px under the head (24 ≤768) instead of Home's 30 (32). On phones the sixth
   cell stays half width (Home's last-cell-full-width rule is for its five). */
.os-careers-metrics > .is-style-os-metrics { margin-top: 32px !important; }
@media (max-width: 768px) {
	.os-careers-metrics > .is-style-os-metrics { margin-top: 24px !important; }
	.os-careers-metrics .os-metric:last-child { flex-basis: 50%; }
}

/* ---------- Life at QK (os/careers-life) ---------- */
/* Redesigned 2026-10-19 (user: the live site's photos, "Life at QK", Mentorship removed; then the
   layout reworked, Option 1 of three on a preview page): on the Aurora surface (light, between the
   blue Metrics band and the white FAQs), a split. Left: the head and the brief's three topics as a
   numbered editorial index between hairlines (the QK AI Labs lab-to-live index: 01-03 in brand
   blue, H3, text). Right: the five highlights as a photo bento, 2 columns x 3 rows, the first tile
   (Team Collaboration) two rows tall, both columns the same height. Each tile is the live site's
   415x311 photo with 24px corners, its name on an OS Glass Card label (72% white, hairline, 6px
   blur, float shadow) bottom left, the photo easing in on hover. At 1100px and below the photos go
   under the text as an OS Carousel (os-carousel--compact) of 4:3 tiles, 2 a view down to 541px. */
.os-careers-life__copy > * { margin: 0; }
.os-careers-life__copy > .os-service-detail-automate__head > * { margin-inline: 0; }
.os-careers-life__list { margin-top: 28px !important; border-top: 1px solid var(--wp--preset--color--border); }
.os-careers-life__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	margin: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.os-careers-life__item > * { margin: 0; }
.os-careers-life__item > .os-careers-life__num {
	grid-row: 1 / span 2;
	padding-top: 3px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--wp--preset--color--brand);
}
.os-careers-life__item > .os-careers-life__title { font-family: var(--wp--preset--font-family--body); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--ink-deep); }
.os-careers-life__item > .os-careers-life__text { margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--wp--preset--color--ink-soft); }
.os-careers-life__moment {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: var(--wp--preset--border-radius--lg);
	background: var(--wp--preset--color--navy-deep);
	box-shadow: 2px 2px 20px rgb(0 0 0 / 0.05);
	isolation: isolate;
}
.os-careers-life__moment > .os-careers-life__photo { margin: 0; }
.os-careers-life__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--os-base) var(--os-ease);
}
.os-careers-life__moment:hover .os-careers-life__photo img { transform: scale(1.04); }
.os-careers-life__moment > .os-careers-life__label {
	position: absolute;
	left: 12px;
	bottom: 12px;
	max-width: calc(100% - 24px);
	margin: 0;
	padding: 8px 14px;
	border: 1px solid rgb(10 11 13 / 0.08);
	border-radius: 14px;
	background: rgb(255 255 255 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: var(--wp--preset--shadow--float);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-deep);
}
@media (min-width: 1101px) {
	.os-careers-life__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: stretch; }
	.os-careers-life__inner > * { margin: 0; }
	.os-careers-life__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.os-careers-life__photos > :first-child { grid-row: span 2; }
	/* The photo fills its tile out of flow, so the text column alone sets the height: in flow, a
	   lazy Media Library image (sizes="auto") brings core's 3000 x 1500 contain-intrinsic-size
	   into the row sizing and the section grew to 4,600px. */
	.os-careers-life__photos .os-careers-life__photo { position: absolute; inset: 0; }
	.os-careers-life__photos .os-careers-life__photo img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1100px) {
	/* The carousel's own -12px top margin (room for the shadow) comes off this gap. */
	.os-careers-life__inner > .os-careers-life__photos { margin-top: 20px !important; }
}
@media (max-width: 768px) {
	.os-careers-life__inner > .os-careers-life__photos { margin-top: 12px !important; }
	.os-careers-life__item { grid-template-columns: 36px minmax(0, 1fr); padding: 18px 0; }
	.os-careers-life__item > .os-careers-life__title { font-size: 18px; }
	.os-careers-life__moment > .os-careers-life__label { font-size: 14px; }
}
/* Large phones / small tablets: two tiles a view, not the carousel's one (86%), which would blow
   the 415px photos up past 600px. */
@media (min-width: 541px) and (max-width: 768px) {
	.os-careers-life__inner > .os-careers-life__photos > * { flex-basis: calc((100% - 16px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
	.os-careers-life__moment:hover .os-careers-life__photo img { transform: none; }
}

/* ---------- Start Your Journey CTA (os/careers-journey) ---------- */
/* The OS Post CTA panel (dark) edge to edge (user, 2026-10-19): the panel is full width with square
   corners, its content padded onto the wide column (1272px, the page gutter below that), with an
   eyebrow added above the title (not in the brief; "Get Started"). Buttons: green Explore Open
   Roles + white (OS Secondary) Contact Us. Awards & Recognition and the "Let's Engineer Your Path"
   CTA used this panel too until 2026-10-19. */
.os-careers-journey { padding-top: 0; padding-bottom: 0; }
.os-careers-journey > .os-post-cta.alignfull {
	margin-block: 0;
	padding-block: 48px; /* the internal pages' section spacing, 24px ≤768 (user, 2026-10-19) */
	/* 100% here is the section's content box (the gutter already taken off both sides). */
	padding-inline: calc(var(--wp--custom--gutter) + max(0px, (100% - var(--wp--style--global--wide-size)) / 2));
	border-radius: 0;
}
.os-careers-journey .os-careers-journey__copy > * { margin: 0; }
.os-careers-journey .os-careers-journey__copy > .is-style-os-eyebrow {
	margin-bottom: 8px !important;
	color: var(--wp--custom--color--on-brand);
}
.os-careers-journey .os-post-cta .os-post-cta__title { max-width: 620px; }
.os-careers-journey .os-careers-journey__copy > .os-careers-journey__text {
	max-width: 560px;
	margin-top: 12px !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.8);
}
/* Desktop: the two buttons one below the other, the same width (user, 2026-10-19); ≤768 they stay
   side by side under the copy, as the panel's phone layout (os-post.css). */
@media (min-width: 769px) {
	.os-careers-journey .os-post-cta .os-post-cta__actions { flex-direction: column; align-items: stretch; gap: 12px; }
	.os-careers-journey .os-post-cta__actions .wp-block-button__link { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 768px) {
	.os-careers-journey > .os-post-cta.alignfull { padding-block: 24px; }
	.os-careers-journey .os-careers-journey__copy > .os-careers-journey__text { font-size: 15px; }
}

/* ---------- About QKTech (os/careers-company, the Home Join us layout) ---------- */
/* The internal pages' section spacing instead of Home's fixed 560px (user, 2026-10-19): the section
   is as tall as its copy plus 48px above and below (24 ≤768); the photo fills the left side at any
   height (top to bottom, still cropped by object-fit). Stacked (≤1100) the photo stays on top, edge
   to edge, and the copy under it gets the same 48 / 24. */
.os-careers.os-careers-company { height: auto; }
.os-careers.os-careers-company > .os-careers__photo { top: 0; height: 100%; }
.os-careers.os-careers-company > .os-careers__inner { height: auto; padding-top: 48px; padding-bottom: 48px; }
.os-careers.os-careers-company > .os-careers__inner > .os-careers__copy { margin-top: 0 !important; }
@media (max-width: 1100px) {
	.os-careers.os-careers-company > .os-careers__photo { height: auto; }
}
@media (max-width: 768px) {
	.os-careers.os-careers-company > .os-careers__inner { padding-top: 24px; padding-bottom: 24px; }
}