/* ==========================================================================
   NextCareer Success Stories — archive + detail styles.
   Prefixed .ncs- (NextCareer Success Stories). Reuses --nch- custom
   properties from homepage.css (declared dependency).
   ========================================================================== */

.ncs-listing-header {
	max-width: 900px;
	margin: 0 auto 26px;
}

.ncs-listing-header h1 {
	margin: 0 0 8px;
	font-size: clamp(24px, 3.6vw, 32px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nch-ink);
}

.ncs-listing-header p {
	margin: 0;
	color: var(--nch-gray);
	font-size: 15px;
}

/* ---------- FILTERS ---------- */

.ncs-filters {
	max-width: 1100px;
	margin: 0 auto 30px;
	display: grid;
	grid-template-columns: 2fr auto;
	gap: 14px;
	padding: 18px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius);
	box-shadow: var(--nch-shadow);
}

.ncs-filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ncs-filter-field label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--nch-gray);
}

.ncs-filter-field input {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	background: var(--nch-white);
	font-size: 14px;
	color: var(--nch-ink);
}

.ncs-filter-field input:focus {
	outline: none;
	border-color: var(--nch-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ncs-filter-actions {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.ncs-search-button,
.ncs-reset-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.ncs-search-button {
	border: none;
	background: var(--nch-blue);
	color: #fff;
}

.ncs-search-button:hover {
	background: var(--nch-blue-dark);
}

.ncs-reset-button {
	border: 1px solid var(--nch-border);
	background: var(--nch-white);
	color: var(--nch-ink);
}

@media (max-width: 640px) {
	.ncs-filters {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   MOBILE COMPACTNESS PASS — @media (max-width: 767px). Spacing/sizing
   reduction only; long-form article body (.ncs-detail-body) intentionally
   left at its normal readable size. Search + Reset share one row.
   ========================================================================== */
@media (max-width: 767px) {

	.ncs-listing-header {
		margin-bottom: 16px;
	}

	.ncs-listing-header p {
		font-size: 13.5px;
	}

	.ncs-filters {
		gap: 10px;
		padding: 12px;
		margin-bottom: 18px;
	}

	.ncs-filter-field input {
		height: 44px;
		font-size: 13.5px;
	}

	.ncs-filter-actions {
		flex-direction: row;
		gap: 8px;
	}

	.ncs-search-button,
	.ncs-reset-button {
		width: auto;
		height: 44px;
		padding: 0 14px;
		font-size: 13.5px;
	}

	.ncs-search-button {
		flex: 1 1 auto;
	}

	.ncs-reset-button {
		flex: 0 0 auto;
	}

	.ncs-list {
		gap: 8px;
	}

	.ncs-list-item {
		gap: 12px;
		padding: 10px 12px;
	}

	.ncs-list-item__thumb {
		width: 40px;
		height: 40px;
	}

	.ncs-list-item__title {
		font-size: 14.5px;
	}

	.ncs-list-item__date {
		font-size: 12px;
	}

	.ncs-no-results {
		padding: 32px 18px;
	}

	.ncs-detail-head {
		margin-bottom: 6px;
	}

	.ncs-detail-head__title {
		margin-bottom: 10px;
	}

	.ncs-detail-head__date {
		margin-bottom: 14px;
	}

	.ncs-detail-head__photo {
		width: 100%;
		height: 220px;
		margin-bottom: 4px;
	}

	/* Bug fix (2026-07-28): on mobile the hero photo was being cropped —
	   the container above caps the box at a fixed height, and the base
	   (desktop) rule below uses object-fit: cover, which fills that box by
	   cutting off whichever part of the image doesn't fit. Overriding to
	   object-fit: contain here (mobile only) scales the image down to fit
	   entirely inside the same box instead, so the full featured image is
	   always visible with its original aspect ratio preserved. Desktop is
	   untouched — the base .ncs-detail-head__photo img rule still uses
	   object-fit: cover there. */
	.ncs-detail-head__photo img {
		height: 100%;
		object-fit: contain;
	}

	.ncs-social-links {
		margin-bottom: 16px;
	}

	.ncs-social-links__heading {
		font-size: 11.5px;
		margin-bottom: 8px;
	}

	.ncs-social-links__list {
		gap: 8px;
	}

	.ncs-social-links__item {
		padding: 7px 13px;
		font-size: 12.5px;
	}

	.ncs-social-links__item span {
		max-width: 110px;
	}

	.ncs-ad-slot {
		margin-top: 18px;
	}

	.ncs-ad-slot__box {
		min-height: 60px;
		font-size: 11px;
	}
}

/* ---------- LIST (compact, editorial listing rows) ----------
   Each Success Story is one clickable/focusable row: small thumbnail or
   fallback avatar, headline, published date, trailing chevron. Deliberately
   lightweight — no exam-specific fields, no excerpt, no separate CTA link;
   the whole row is the link. */

.ncs-list {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ncs-list-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--nch-white);
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ncs-list-item:hover {
	border-color: #8b5cf6;
	box-shadow: var(--nch-shadow);
}

.ncs-list-item__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 999px;
	overflow: hidden;
	background: var(--nch-bg-soft);
	color: var(--nch-gray);
}

.ncs-list-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ncs-list-item__thumb svg {
	width: 22px;
	height: 22px;
}

.ncs-list-item__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.ncs-list-item__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--nch-ink);
}

.ncs-list-item:hover .ncs-list-item__title {
	color: #6d28d9;
}

.ncs-list-item__date {
	font-size: 12.5px;
	color: var(--nch-gray);
}

.ncs-list-item__chevron {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--nch-gray);
}

.ncs-list-item__chevron svg {
	width: 18px;
	height: 18px;
}

/* ---------- PAGINATION ---------- */

.ncs-pagination {
	max-width: 1100px;
	margin: 30px auto 0;
	display: flex;
	justify-content: center;
}

.ncs-pagination .page-numbers {
	display: inline-flex;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.ncs-pagination a.page-numbers,
.ncs-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--nch-border);
	border-radius: 8px;
	color: var(--nch-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.ncs-pagination a.page-numbers:hover {
	background: var(--nch-bg-soft);
}

.ncs-pagination span.page-numbers.current {
	background: #8b5cf6;
	border-color: #8b5cf6;
	color: #fff;
}

/* ---------- NO RESULTS ---------- */

.ncs-no-results {
	max-width: 1100px;
	margin: 0 auto;
	padding: 50px 25px;
	text-align: center;
	background: var(--nch-bg-soft);
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius);
}

.ncs-no-results h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.ncs-no-results p {
	margin: 0 0 20px;
	color: var(--nch-gray);
}

.ncs-clear-search {
	display: inline-block;
	padding: 10px 18px;
	background: #8b5cf6;
	color: #fff !important;
	border-radius: 7px;
	text-decoration: none !important;
	font-weight: 700;
}

/* ---------- DETAIL PAGE ---------- */

.ncs-detail-head {
	max-width: 900px;
	margin: 0 auto 8px;
}

.ncs-detail-head__title {
	margin: 0 0 10px;
	font-size: clamp(22px, 3.4vw, 32px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nch-ink);
}

.ncs-detail-head__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	color: var(--nch-gray);
	font-size: 13.5px;
	font-weight: 600;
}

.ncs-detail-head__date svg {
	width: 15px;
	height: 15px;
}

/* Prominent editorial photo (or neutral fallback avatar) — a step up from
   the small passport-style thumbnail used on listing rows, per the single
   article page's "prominent" requirement. Optional: not shown at all if
   no Featured Image is set and the fallback icon is rendered instead. */
.ncs-detail-head__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 320px;
	margin-bottom: 24px;
	border-radius: var(--nch-radius);
	overflow: hidden;
	background: var(--nch-bg-soft);
	border: 1px solid var(--nch-border);
}

.ncs-detail-head__photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.ncs-detail-head__photo-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 40px 0;
	color: var(--nch-gray-light);
}

.ncs-detail-head__photo-fallback svg {
	width: 48px;
	height: 48px;
}

/* ---------- SOCIAL PROFILE LINKS (individual Success Story page only) ----------
   Official social profiles of the person featured in the story — NOT
   social-share buttons. Renders only when at least one URL is filled in;
   PHP omits this entire block otherwise, so no empty-state CSS is needed. */

.ncs-social-links {
	max-width: 900px;
	margin: 0 auto 20px;
}

.ncs-social-links__heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--nch-gray);
}

.ncs-social-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ncs-social-links__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
	padding: 8px 16px;
	border: 1px solid var(--nch-border);
	border-radius: 999px;
	background: var(--nch-white);
	color: var(--nch-ink);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ncs-social-links__item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.ncs-social-links__item span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ncs-social-links__item:hover {
	border-color: #8b5cf6;
	background: #f6f4fe;
	color: #6d28d9;
}

/* Article content wrapper (added in site-wrapper.php for is_singular
   ('success_stories')). */
.ncs-detail-body {
	max-width: 900px;
	margin: 0 auto;
	color: var(--nch-ink);
	font-size: 15px;
}

.ncs-detail-body blockquote {
	margin: 20px 0;
	padding: 14px 20px;
	border-left: 3px solid #8b5cf6;
	background: #f6f4fe;
	color: var(--nch-ink);
	font-style: italic;
}

.ncs-ad-slot {
	max-width: 900px;
	margin: 30px auto 0;
}

.ncs-ad-slot__box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	border: 1px dashed var(--nch-gray-light);
	border-radius: var(--nch-radius-sm);
	background: var(--nch-bg-soft);
	color: var(--nch-gray);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	.ncs-detail-head__photo {
		max-width: 100%;
	}
}


/* ---------- DETAILED CONTENT — TABLES (2026-07-30) -------------------------
   Success Stories shares the same "Detailed Content" TinyMCE table editor as
   Government Jobs (see nextcareer-admin/includes/class-nca-content-editor.php
   and assets/js/nca-tinymce-table.js), which can write .nca-tbl-wrap /
   .nca-tbl / .nca-tbl-row--* / .nca-tbl-cell--* markup into this module's
   post_content. Until now this module's own stylesheet had ZERO rules for
   those classes, so any table pasted/built via that editor rendered as
   plain unstyled text on the live page (no border, no border-collapse, no
   background — just the browser's bare UA defaults) even though it looked
   correct inside the editor's own preview iframe. This block is a direct
   port of the already-working table CSS in
   nextcareer-homepage/assets/jobs-pages.css, scoped to this module's own
   .ncs-detail-body content wrapper (inside the shared #nch-main region from
   site-wrapper.php) instead of Government Jobs' .nextcareer-job-article, so
   it only ever affects tables inside THIS module's own content and cannot
   leak into or collide with any other module. Colors reuse the same
   --nch-border / --nch-bg-soft / --nch-ink / --nch-radius-sm custom
   properties already declared globally on the shared .nch-body class (see
   nextcareer-homepage/assets/homepage.css), so this needs no new tokens and
   stays visually identical to both the editor preview and the Government
   Jobs frontend. No !important anywhere — normal cascade is sufficient
   since nothing else in this stylesheet or Kadence targets these class
   names. */

#nch-main .ncs-detail-body .nca-tbl-wrap {
	overflow-x: auto;
	max-width: 100%;
	margin: 24px 0;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--nch-border);
	border-radius: var(--nch-radius-sm);
}

#nch-main .ncs-detail-body .nca-tbl {
	width: 100%;
	min-width: 460px;
	border-collapse: collapse;
	font-size: 14.5px;
}

#nch-main .ncs-detail-body .nca-tbl th,
#nch-main .ncs-detail-body .nca-tbl td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--nch-border);
	border-right: 1px solid var(--nch-border);
	text-align: left;
	vertical-align: top;
	color: var(--nch-ink);
}

#nch-main .ncs-detail-body .nca-tbl tr > :last-child {
	border-right: none;
}

#nch-main .ncs-detail-body .nca-tbl tbody tr:last-child td {
	border-bottom: none;
}

#nch-main .ncs-detail-body .nca-tbl thead th {
	background: var(--nch-bg-soft);
	font-weight: 700;
	border-bottom: 2px solid var(--nch-border);
}

/* :where() keeps this at ZERO specificity on purpose, so every row/cell
   highlight rule below reliably wins over this default stripe without a
   specificity arms race. */
:where(#nch-main .ncs-detail-body .nca-tbl tbody tr:nth-child(even)) td {
	background: var(--nch-bg-soft);
}

/* ---- Row highlight styles (6 controlled choices — Row Style dropdown) ---- */

#nch-main .ncs-detail-body .nca-tbl-row--primary td,
#nch-main .ncs-detail-body .nca-tbl-row--primary th {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
	border-left: 3px solid #2563eb;
}

#nch-main .ncs-detail-body .nca-tbl-row--success td,
#nch-main .ncs-detail-body .nca-tbl-row--success th {
	background: #e9f9ef;
	color: #15803d;
	font-weight: 700;
	border-left: 3px solid #16a34a;
}

#nch-main .ncs-detail-body .nca-tbl-row--important td,
#nch-main .ncs-detail-body .nca-tbl-row--important th {
	background: #fef6e0;
	color: #92610a;
	font-weight: 700;
	border-left: 3px solid #d97706;
}

#nch-main .ncs-detail-body .nca-tbl-row--urgent td,
#nch-main .ncs-detail-body .nca-tbl-row--urgent th {
	background: #fdecec;
	color: #b91c1c;
	font-weight: 700;
	border-left: 3px solid #dc2626;
}

#nch-main .ncs-detail-body .nca-tbl-row--neutral td,
#nch-main .ncs-detail-body .nca-tbl-row--neutral th {
	background: #f1f5f9;
	color: #475569;
	font-weight: 700;
	border-left: 3px solid #94a3b8;
}

/* ---- Cell highlight styles (6 controlled choices — Cell Style dropdown) --
   Declared after the row styles above so a cell-level choice always wins
   over its row's style for that one cell (equal specificity, later wins). */

#nch-main .ncs-detail-body td.nca-tbl-cell--primary,
#nch-main .ncs-detail-body th.nca-tbl-cell--primary {
	background: #eaf2ff;
	color: #1d4ed8;
	font-weight: 700;
}

#nch-main .ncs-detail-body td.nca-tbl-cell--success,
#nch-main .ncs-detail-body th.nca-tbl-cell--success {
	background: #e9f9ef;
	color: #15803d;
	font-weight: 700;
}

#nch-main .ncs-detail-body td.nca-tbl-cell--important,
#nch-main .ncs-detail-body th.nca-tbl-cell--important {
	background: #fef6e0;
	color: #92610a;
	font-weight: 700;
}

#nch-main .ncs-detail-body td.nca-tbl-cell--urgent,
#nch-main .ncs-detail-body th.nca-tbl-cell--urgent {
	background: #fdecec;
	color: #b91c1c;
	font-weight: 700;
}

#nch-main .ncs-detail-body td.nca-tbl-cell--neutral,
#nch-main .ncs-detail-body th.nca-tbl-cell--neutral {
	background: #f1f5f9;
	color: #475569;
	font-weight: 700;
}

/* Mobile: table itself never shrinks below a readable width; the wrap
   scrolls horizontally instead. Matches jobs-pages.css behavior exactly. */
@media (max-width: 600px) {
	#nch-main .ncs-detail-body .nca-tbl {
		font-size: 13.5px;
	}
	#nch-main .ncs-detail-body .nca-tbl th,
	#nch-main .ncs-detail-body .nca-tbl td {
		padding: 10px 12px;
	}
}