/* ==========================================================================
   page-staffing-solutions.css — Nearshore Staffing Solutions (page-specific)
   Depends on: style.css → lp-base.css → page-service-landing.css
   Scope: only enqueued on page-staffing-solutions.php.

   Section 2 (By Industry) — moved here from Back-Office Roles, where it
   was built by mistake. This is its real home per the confirmed 10-section
   plan for this hub page. .ns- prefix for page-specific section wrappers;
   .ind- classes (carousel/card) kept as-is since they were already
   page-agnostic.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 2 — BY INDUSTRY
   ═══════════════════════════════════════════════════════════════════════════ */
.ns-industries {
	background: #f8fafc;
	padding-block: 64px 56px;
}

/* Header — eyebrow+title on the left, supporting text on the right. */
.ns-industries__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: end;
}

.ns-industries__title {
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
	letter-spacing: -.3px;
	margin: 0;
}

.ns-industries__desc {
	font-size: .9375rem;
	color: #4a5568;
	line-height: 1.7;
	margin: 0 0 0 auto;
	text-align: right;
	max-width: 440px;
}

@media (max-width: 900px) {
	.ns-industries__header {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ── Industries carousel ──────────────────────────────────────────────────
   Closed card: icon centered at the bottom + industry name as vertical
   text above it (writing-mode, not a manual rotate hack).
   Active card: expands, reveals a placeholder gradient "photo" (no real
   images yet) with a bottom-up gradient and the title/description at
   the bottom. */
.ind-carousel {
	--ind-h: 380px;
	--ind-w: 300px;
	margin-top: 40px;
}

.ind-carousel__list {
	display: flex;
	align-items: stretch;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ind-card {
	position: relative;
	flex: 1 1 100px;
	height: var(--ind-h);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	background: var(--nw-navy);
	outline: none;
	transition: flex-basis .5s cubic-bezier(.55, .24, .18, 1), flex-grow .5s cubic-bezier(.55, .24, .18, 1);
	/* Closed state: icon + vertical title grouped together near the
	   bottom of the card, inside the SAME bounded box (padding on both
	   ends) the active state's title/desc use — column-reverse so the
	   icon (first in the DOM) sits below the title, small gap between.
	   justify-content:flex-start — in column-reverse the main-start/end
	   are swapped, so flex-start is what packs toward the visual bottom. */
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 20px 16px 16px;
}

.ind-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 180, 216, .5) inset;
}

.ind-card[data-active] {
	flex: 0 0 var(--ind-w);
}

/* Gradient here is now just the loading-state fallback behind the real
   photo (.ind-card__media-img) — kept so there's no flash of empty space
   before the image decodes in. */
.ind-card__media {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #64748b 0%, #334155 100%);
}

.ind-card__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ind-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, .15) 0%, transparent 55%),
		linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 60%),
		linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, transparent 30%);
}

.ind-card__icon {
	position: relative;
	z-index: 2;
	display: flex;
	flex-shrink: 0;
	color: var(--nw-cyan);
	transition: opacity .3s ease;
}

.ind-card__icon svg {
	width: 26px;
	height: 26px;
}

.ind-card[data-active] .ind-card__icon {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ind-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	/* column, not row (the default) — otherwise .ind-card__desc, even
	   invisible (opacity:0), still claims horizontal space next to the
	   title and pushes it off-center to the left. */
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ind-card[data-active] .ind-card__body {
	position: absolute;
	inset: 0;
	padding: 20px 16px 24px;
}

.ind-card__title {
	margin: 0;
	color: #fff;
	font-weight: 700;
	font-size: .75rem;
	line-height: 1.15;
	letter-spacing: .01em;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	transition: font-size .4s ease;
}

.ind-card__desc {
	margin: 8px 0 0;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .7);
	line-height: 1.5;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity .3s ease;
}

.ind-card[data-active] .ind-card__body {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	text-align: left;
}

.ind-card[data-active] .ind-card__title {
	writing-mode: horizontal-tb;
	transform: none;
	font-size: 1.125rem;
	line-height: 1.3;
	white-space: normal;
}

.ind-card[data-active] .ind-card__desc {
	opacity: 1;
	max-height: 100px;
}

.ind-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}

.ind-carousel__nav-btns {
	display: flex;
	gap: 10px;
}

.ind-carousel__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	color: #0f172a;
	cursor: pointer;
	transition: color .2s ease;
}

.ind-carousel__btn:hover {
	color: var(--nw-cyan-text);
}

.ind-carousel__btn svg {
	width: 18px;
	height: 18px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 3 — BY ROLE
   Desktop: fixed height = viewport minus header (same mechanic as
   .bo-services/.bo-hero), not padding-driven — the grid stretches
   (flex:1) to fill whatever's left after the header text block, so the
   cards themselves grow taller instead of leaving empty space. Cards are
   media cards (background image/gradient placeholder + bottom gradient,
   same recipe as .ind-card) rather than flat bordered boxes.
   ═══════════════════════════════════════════════════════════════════════════ */
.ns-roles {
	height: calc(100vh - var(--nw-header-h, 124px));
	height: calc(100svh - var(--nw-header-h, 124px));
	background: var(--nw-navy);
	padding-block: 56px;
	display: flex;
}

.ns-roles .lp-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ns-roles__title {
	font-size: clamp(1.9rem, 2.8vw, 2.4rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -.3px;
	max-width: 480px;
	margin: 8px 0 6px;
}

.ns-roles__desc {
	font-size: .9375rem;
	color: rgba(255, 255, 255, .6);
	line-height: 1.7;
	max-width: 480px;
	margin: 0;
}

.ns-roles__grid {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 12px;
	margin-top: 32px;
}

.ns-role {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: var(--nw-navy);
}

/* Gradient here is now just the loading-state fallback behind the real
   photo (.ns-role__media-img) — same recipe as .ind-card__media. */
.ns-role__media {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #64748b 0%, #334155 100%);
}

.ns-role__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ns-role__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 90% at 50% 100%, rgba(0, 0, 0, .15) 0%, transparent 55%),
		linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 60%),
		linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, transparent 30%);
}

.ns-role__body {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 16px;
}

.ns-role__title {
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
	margin: 0;
}

.ns-roles__link {
	display: flex;
	justify-content: center;
	margin-top: 24px;
	flex-shrink: 0;
}


/* SECTION 5 — COMPARISON TABLE is the shared .cmp-table component
   (template-parts/comparison-table.php); styled by its own component
   CSS, nothing page-specific needed here. ("4 Service Cards" and "Why
   Colombia short" used to have their own shells — merged into Section 4's
   quiz instead, see .ns-quiz__result-why / .ns-quiz__all above.) */


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4 — FIND YOUR FIT (real 2-step quiz)
   Step 1 = industry (8, same as Section 2), Step 2 = need (5). The need
   decides the recommended service; the industry adds a tailored "why
   Colombia" line to the result. All rendered into #nsQuizBody by
   page-staffing-solutions.js — this file only styles the shell + the
   classes the JS applies (.ns-quiz__option, .ns-quiz__result, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */
.ns-quiz {
	background: #f8fafc;
	padding-block: 80px;
}

.ns-quiz__header {
	text-align: center;
	max-width: 520px;
	margin: 0 auto 32px;
}

.ns-quiz__title {
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
	letter-spacing: -.3px;
	margin: 8px 0 6px;
}

.ns-quiz__sub {
	font-size: .9375rem;
	color: #4a5568;
	margin: 0;
	line-height: 1.6;
}

.ns-quiz__card {
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #e5e8ec;
	border-radius: 16px;
	padding: 28px 28px 32px;
	box-shadow: 0 20px 40px -20px rgba(7, 17, 31, .18);
}

.ns-quiz__progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
}

.ns-quiz__dot {
	height: 6px;
	width: 30px;
	border-radius: 999px;
	background: #e5e8ec;
	transition: background .2s ease, width .2s ease;
}

.ns-quiz__dot.is-active {
	background: var(--nw-cyan);
	width: 44px;
}

.ns-quiz__dot.is-done {
	background: var(--nw-cyan);
}

.ns-quiz__step-label {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nw-cyan-text);
	margin: 0 0 6px;
}

.ns-quiz__question {
	font-size: 1.0625rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 18px;
}

.ns-quiz__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}

.ns-quiz__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	background: #fff;
	border: 1px solid #e5e8ec;
	border-radius: 10px;
	padding: 16px 10px;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.ns-quiz__option:hover {
	border-color: var(--nw-cyan);
	transform: translateY(-2px);
}

.ns-quiz__option-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nw-navy);
	flex-shrink: 0;
}

.ns-quiz__option-icon svg {
	width: 17px;
	height: 17px;
}

.ns-quiz__option-label {
	font-size: .8125rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.ns-quiz__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 700;
	color: #6b7280;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	margin-bottom: 14px;
	padding: 0;
}

.ns-quiz__back:hover {
	color: var(--nw-cyan-text);
}

.ns-quiz__back svg {
	width: 14px;
	height: 14px;
}

/* ── Result screen ── */
.ns-quiz__result-eyebrow {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--nw-cyan-text);
	margin: 0 0 10px;
}

.ns-quiz__result-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

.ns-quiz__result-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nw-navy);
	color: var(--nw-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ns-quiz__result-icon svg {
	width: 20px;
	height: 20px;
}

.ns-quiz__result-title {
	font-size: 1.0625rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
	line-height: 1.3;
}

.ns-quiz__result-desc {
	font-size: .875rem;
	color: #4a5568;
	line-height: 1.6;
	margin: 0 0 16px;
}

/* "Why Colombia for [industry]" — tailored proof point, not a generic
   line, so the answer feels like advice rather than just a link. */
.ns-quiz__result-why {
	display: flex;
	gap: 10px;
	background: #f8fafc;
	border: 1px solid #e5e8ec;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 20px;
}

.ns-quiz__result-why svg {
	width: 16px;
	height: 16px;
	color: var(--nw-cyan-text);
	flex-shrink: 0;
	margin-top: 1px;
}

.ns-quiz__result-why p {
	font-size: .8125rem;
	color: #334155;
	line-height: 1.55;
	margin: 0;
}

.ns-quiz__result-why strong {
	color: #0f172a;
}

.ns-quiz__result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.ns-quiz__restart {
	font-size: .8125rem;
	font-weight: 700;
	color: #6b7280;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
}

.ns-quiz__restart:hover {
	color: var(--nw-cyan-text);
}

/* Fallback for people who'd rather scan than answer a question — folds
   what used to be the standalone "4 Service Cards" section into a
   compact link row instead of a full grid. Always visible (not JS-gated),
   doubles as the no-JS fallback for the whole section. */
.ns-quiz__all {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 0;
	max-width: 380px;
	margin: 20px auto 0;
	text-align: center;
}

.ns-quiz__all-label {
	font-size: .8125rem;
	color: #475569;
	width: 100%;
	margin: 0 0 10px;
}

.ns-quiz__all-label strong {
	color: #0f172a;
	font-weight: 700;
}

.ns-quiz__all a {
	font-size: .8125rem;
	font-weight: 700;
	color: #0f172a;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 6px;
	transition: color .18s ease, background .18s ease;
}

.ns-quiz__all a:hover {
	color: var(--nw-cyan-text);
	background: #eef7fb;
}

.ns-quiz__all-dot {
	color: #cbd5e1;
	font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATS STRIP — sits directly above Testimonials, reads as one section
   with it (same recipe as Back-Office's .bo-stats).
   ═══════════════════════════════════════════════════════════════════════════ */
.ns-stats {
	background: #f8fafc;
	padding: 56px 0 68px;
}

.ns-stats__inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.ns-stats__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 180px;
	text-align: center;
	padding: 0 32px;
	border-left: 1px solid #e5eaf0;
}

.ns-stats__item:first-child { border-left: none; }

.ns-stats__num {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	color: #0a1f35;
	line-height: 1;
}

.ns-stats__label {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--nw-cyan-text);
}


/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 680px) {
	.ns-industries {
		padding-block: 32px;
	}

	.ns-roles__title {
		font-size: 1.9rem;
	}

	.ns-quiz {
		padding-block: 32px;
	}

	.ns-quiz__title {
		font-size: 1.9rem;
	}

	.ns-quiz__card {
		padding: 22px 18px 26px;
	}

	.ns-quiz__options {
		grid-template-columns: repeat(2, 1fr);
	}

	.ns-quiz__result-head {
		align-items: flex-start;
	}

	/* Desktop's fixed height (viewport - header) only makes sense with 5
	   columns × 2 rows filling the space evenly — on mobile the grid goes
	   to 2 columns × 5 rows, so height reverts to normal, content-driven
	   flow (cards stack down and the section grows with them). */
	.ns-roles {
		height: auto;
		display: block;
		padding-block: 32px;
	}

	.ns-roles .lp-container {
		display: block;
	}

	.ns-roles__desc {
		max-width: none;
	}

	/* 2-column grid, all 10 cards visible and stacking normally — no
	   carousel/peek behavior here, unlike Industries. Cards get their own
	   aspect-ratio since there's no longer a fixed-height row to stretch
	   into. */
	.ns-roles__grid {
		flex: none;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: none;
		margin-top: 24px;
	}

	.ns-role {
		aspect-ratio: 1 / 1;
	}

	.ns-stats__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 24px;
	}

	.ns-stats__item {
		border-left: none;
		padding: 0 16px;
	}

	.ns-stats__item:nth-child(2n) {
		border-left: 1px solid #e5eaf0;
	}

	.ns-stats__item:nth-child(n+3) {
		padding-top: 20px;
		border-top: 1px solid #e5eaf0;
	}

	/* Mobile eyebrow/h2/text convention, matching what we standardized
	   on Remote Talent and Back-Office (.75rem / 1.9rem / .9375rem) —
	   keep reusing these 3 numbers on any future page's mobile section
	   headers. */
	.ns-industries__header {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.ns-industries__heading .lp-eyebrow {
		font-size: .75rem;
	}

	.ns-industries__title {
		font-size: 1.9rem;
	}

	.ns-industries__desc {
		margin: 0 auto;
		text-align: center;
	}

	/* Industries carousel — only 2 cards visible at a time (open card
	   left, closed peek right), infinite loop. JS (page-staffing-
	   solutions.js) still tags both neighbors with .ind-card--peek-prev/
	   --peek-next on every activation, but only --peek-next is shown here
	   — the active card always precedes it in DOM order, so it lands on
	   the left and gets the rest of the row's width. Everything else
	   stays display:none so it can't contribute to layout width at all —
	   the strongest guarantee against horizontal overflow, not just
	   clipping it after the fact. */
	.ind-carousel__list {
		overflow: hidden;
	}

	.ind-card {
		display: none;
	}

	.ind-card[data-active],
	.ind-card--peek-next {
		display: flex;
	}

	.ind-card--peek-next {
		flex: 0 0 56px;
	}

	.ind-card[data-active] {
		flex: 1 1 auto;
		/* Flex items default to min-width:auto — without this, the
		   description text's intrinsic width can force the row wider
		   than the container instead of wrapping inside it. */
		min-width: 0;
	}
}