/* Cards. Whole-card click uses a stretched link on the title (.c-stretched), never a wrapping <a>.
   .c-card        generic panel (dashboards, info panels)
   .c-job-row     dense job list row (default job list view)
   .c-job-card    job card (featured / related grids only)
   .c-company-row company directory row with action rail
   .c-post-card   blog card, --lead for the side-by-side lead story */
.c-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); padding: var(--space-5); }
@media (min-width: 768px) { .c-card { padding: var(--space-6); } }
.c-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.c-card__title { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--fw-semibold); }
.c-stretched { text-decoration: none; color: inherit; }
.c-stretched::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.c-stretched:hover { color: var(--color-primary); }
.c-stretched:focus-visible { outline: none; }
.c-stretched:focus-visible::after { outline: var(--focus-outline); outline-offset: 2px; }
:is(.c-job-row, .c-job-card, .c-company-row, .c-post-card) :is(a, button):not(.c-stretched) { position: relative; z-index: 1; }

.c-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--color-text-muted); }
.c-meta > * { display: inline-flex; align-items: center; gap: 0.375rem; }
.c-meta .icon { width: 1rem; height: 1rem; color: var(--pn-gray-400); }

/* Job row (dense list, default) */
.c-job-list { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.c-job-list > li + li { border-top: 1px solid var(--color-border); }
.c-job-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-4); transition: background-color var(--dur) var(--ease); }
.c-job-row__head { min-width: 0; }
.c-job-row__title { font-size: var(--fs-16); line-height: 1.4; font-weight: var(--fw-semibold); }
.c-job-row__company { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-2); }
.c-job-row__body { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.c-job-row__aside { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-13); color: var(--color-text-muted); }
.c-job-row--featured { background: linear-gradient(90deg, var(--pn-brand-50), var(--color-surface) 45%); box-shadow: inset 3px 0 0 var(--color-primary); }
.c-job-row--expired .c-job-row__title { color: var(--color-text-muted); }
@media (min-width: 768px) {
	.c-job-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--space-4) var(--space-5); }
	.c-job-row .c-logo { grid-row: 1 / span 2; }
	.c-job-row__body { grid-column: 2; }
	.c-job-row__aside { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; justify-content: space-between; }
}
@media (hover: hover) { .c-job-row:hover { background-color: var(--pn-gray-50); } .c-job-row:hover .c-job-row__title { color: var(--color-primary); } }

/* Job card (featured / related only) */
.c-job-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-job-card::before { content: ""; position: absolute; inset: -1px -1px auto; height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-accent); opacity: 0.5; transition: opacity var(--dur) var(--ease); }
.c-job-card__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.c-job-card__title { font-size: var(--fs-16); line-height: 1.4; font-weight: var(--fw-semibold); }
.c-job-card__excerpt { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-job-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-13); color: var(--color-text-muted); }
@media (hover: hover) {
	.c-job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--pn-brand-200); }
	.c-job-card:hover::before { opacity: 1; }
	.c-job-card:hover .c-job-card__title { color: var(--color-primary); }
}

/* Company row */
.c-company-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-company-row__body { display: grid; gap: var(--space-2); min-width: 0; }
.c-company-row__name { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: var(--fw-semibold); }
.c-company-row__desc { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-company-row__rail { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--fs-13); color: var(--color-text-muted); }
.c-company-row__count { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--color-text); }
@media (min-width: 768px) {
	.c-company-row { grid-template-columns: auto minmax(0, 1fr) 13rem; }
	.c-company-row__rail { grid-column: 3; flex-direction: column; align-items: stretch; justify-content: center; padding: 0 0 0 var(--space-5); border-top: 0; border-left: 1px solid var(--color-border); }
}
@media (hover: hover) { .c-company-row:hover { box-shadow: var(--shadow-hover); border-color: var(--pn-brand-200); } }

/* Post card */
.c-post-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-rest); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.c-post-card__media { aspect-ratio: 16 / 10; margin: 0; background: var(--pn-gray-100); overflow: hidden; }
.c-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-post-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-5); }
.c-post-card__kicker { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--color-text-muted); }
.c-post-card__title { font-size: var(--fs-18); line-height: 1.4; font-weight: var(--fw-semibold); }
.c-post-card__excerpt { font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) {
	.c-post-card--lead { display: grid; grid-template-columns: 1.15fr 1fr; }
	.c-post-card--lead .c-post-card__media { aspect-ratio: auto; min-height: 20rem; }
	.c-post-card--lead .c-post-card__body { padding: var(--space-8); justify-content: center; }
	.c-post-card--lead .c-post-card__title { font-size: var(--fs-30); line-height: var(--lh-30); font-weight: var(--fw-bold); }
}
@media (hover: hover) { .c-post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .c-post-card:hover .c-post-card__title { color: var(--color-primary); } }

/* Dark mode: bridge the legacy semantic tokens to the clone palette (clone/base.css) so generic templates follow html[data-theme=dark]. */
[data-theme="dark"] {
	--color-text: var(--text-primary);
	--color-text-2: var(--text-secondary);
	--color-text-muted: var(--text-secondary);
	--color-heading: var(--text-primary);
	--color-bg: var(--background);
	--color-surface: var(--background-secondary);
	--color-surface-tint: #ffffff0a;
	--color-border: #ffffff1a;
	--color-border-strong: #ffffff40;
	--color-link: var(--primary);
	--color-primary: var(--primary);
	--pn-gray-50: #ffffff08;
	--pn-gray-100: #ffffff0d;
	--pn-brand-50: #7091ff1f;
}

/* QA R3: the stretched title link keeps a 24px target. */
a.c-stretched { display: inline-flex; align-items: center; min-height: 24px; }

/* Dark: white on #7091ff is 2.9:1; primary buttons in page content take dark ink (header/footer untouched). */
[data-theme="dark"] .site-main :is(.c-btn--primary, .c-btn:not(.c-btn--secondary):not(.c-btn--ghost)) { color: #0a071a; }

.c-job-row__company a { display: inline-flex; align-items: center; min-height: 24px; } /* WCAG 2.5.8 target size */
