/**
 * GD Pilots Manager — listing display.
 *
 * /pilot-jobs cards use the gdpilots CDU-green design: a green→black card
 * gradient with a top-lit gradient border (brighter on hover), a light logo
 * tile, outlined phosphor-green pill badges, and Apply / Set-up-alerts buttons.
 * Featured cards are identical but swap the green border for the metallic-gold
 * one. All rules are scoped under .gdp-listings so the class names can't collide
 * with the theme.
 *
 * The single vacancy page still uses the .gdp-listing markup for now; its
 * colours come from the palette tokens mapped below, pending its rebuild.
 */

/* ============================================================= */
/* Theme integration                                              */
/* ============================================================= */

/* Vertically centre Blocksy's map / location-pin icon against its   */
/* adjacent text. Ships with this stylesheet, so it applies wherever */
/* listing output is enqueued (archive, single vacancy, preview).    */
.ct-map-icon img {
	vertical-align: middle;
}

/* ============================================================= */
/* Detail-page palette bridge (unchanged)                         */
/* ============================================================= */

.gdp-listings,
.gdp-single {
	--accent: #378ADD;
	--accent-dark: #185FA5;
	--accent-light: rgba(55, 138, 221, 0.15);
	--accent-text: #85B7EB;
	--bg: #0D0F14;
	--bg-secondary: #141720;
	--bg-tertiary: #1a1e2a;
	--bg-card: #161921;
	--text: #E8E6E0;
	--text-secondary: #9A9890;
	--text-tertiary: #868482;
	--border: rgba(255, 255, 255, 0.07);
	--border-md: rgba(255, 255, 255, 0.12);
	--radius-md: 8px;
	--radius-lg: 12px;

	--gdp-signal: var(--accent);
	--gdp-signal-ink: #ffffff;
	--gdp-ink: var(--text);
	--gdp-body: var(--text-secondary);
	--gdp-muted: var(--text-tertiary);
	--gdp-rule: var(--border);
	--gdp-rule-strong: var(--border-md);
	--gdp-shade: var(--bg-secondary);
	--gdp-paper: var(--bg-tertiary);
	--gdp-surface: var(--bg-card);
	--gdp-radius: var(--radius-lg);

	color: var(--text);
}

.gdp-listings *,
.gdp-single * { box-sizing: border-box; }

/* ============================================================= */
/* Cards — gdpilots CDU-green design                              */
/* ============================================================= */

.gdp-listings {
	/* Card fill */
	--jc-bg-top: #0d150b;
	--jc-bg-bottom: #0D0E0D;
	--jc-bg-top-hover: #0d2508;
	--jc-bg-bottom-hover: #000000;
	/* Top-lit gradient border */
	--jc-border-top: #375C2F;
	--jc-border-bottom: #20281E;
	--jc-border-top-hover: #66B95D;
	--jc-border-bottom-hover: #24301F;
	/* Pills */
	--jc-pill-text: #74D268;
	--jc-pill-border: #56A24A;
	/* Buttons */
	--jc-apply-bg: #39a751;
	--jc-apply-bg-hover: #45bc60;
	--jc-alerts-bg: #252927;
	--jc-alerts-bg-hover: #20241F;
	--jc-alerts-border: #6EA263;
	/* Text */
	--jc-title: #FFFFFF;
	--jc-sub: #8B8D86;
	--jc-meta: #D3D0CE;
	/* Shape */
	--jc-radius: 18px;
	--jc-border-w: 2px;
}

.gdp-listings__count {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--jc-sub);
	font-variant-numeric: tabular-nums;
}

.gdp-listings .jobs-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Card shell + top-lit gradient border via a masked ::before ---- */
.gdp-listings .jcard {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 22px;
	align-items: start;
	padding: 22px 24px;
	border-radius: var(--jc-radius);
	background: linear-gradient(180deg, var(--jc-bg-top) 0%, var(--jc-bg-bottom) 100%);
	transition: background .18s ease;
}
.gdp-listings .jcard::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--jc-radius);
	padding: var(--jc-border-w);
	background: linear-gradient(180deg, var(--jc-border-top) 0%, var(--jc-border-bottom) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: background .18s ease;
}
.gdp-listings .jcard > * { position: relative; z-index: 1; }

.gdp-listings .jcard:hover {
	background: linear-gradient(180deg, var(--jc-bg-top-hover) 0%, var(--jc-bg-bottom-hover) 100%);
}
.gdp-listings .jcard:hover::before {
	background: linear-gradient(180deg, var(--jc-border-top-hover) 0%, var(--jc-border-bottom-hover) 100%);
}

/* Featured — same card, metallic-gold border (static in both states) */
.gdp-listings .jcard.featured::before,
.gdp-listings .jcard.featured:hover::before {
	padding: 2.5px;
	background: linear-gradient(
		to right,
		#8A5C12 0%, #C8880F 12%, #FFCC44 28%, #FFE060 33%,
		#FFD050 38%, #C88010 52%, #8A5A10 72%, #643E08 100%
	);
}

/* Logo tile ---------------------------------------------------- */
.gdp-listings .jcard-logo {
	grid-row: 1 / span 2;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: 4px;
	border-radius: var(--radius-md);
	border: 0.5px solid var(--border-md);
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	font-size: 11px;
	font-weight: 500;
	overflow: hidden;
	flex-shrink: 0;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.gdp-listings .jcard-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; opacity: .85; transition: opacity .2s; }
.gdp-listings .jcard-logo:hover img { opacity: 1; }
.gdp-listings .jcard-logo__initials { font-size: 24px; font-weight: 700; color: #2a2a2a; letter-spacing: .02em; }

/* Main column -------------------------------------------------- */
.gdp-listings .jcard-main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.gdp-listings .jcard-title { margin: 0; font-size: 29px; font-weight: 800; line-height: 1.08; color: var(--jc-title); text-decoration: none; letter-spacing: -0.01em; }
.gdp-listings a.jcard-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.gdp-listings .jcard-sub { font-size: 17px; color: var(--jc-sub); }
.gdp-listings .jcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: 15px; color: var(--jc-meta); margin-top: 1px; }
.gdp-listings .jcard-meta span { display: inline-flex; align-items: center; gap: 7px; }
.gdp-listings .jcard-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gdp-listings .jbadge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 8px 16px;
	border-radius: 9px;
	color: var(--jc-pill-text);
	border: 1.5px solid var(--jc-pill-border);
	background: transparent;
	white-space: nowrap;
}

/* Whole-card link ---------------------------------------------- */
/* A transparent overlay anchor — a direct child of .jcard, so its
   inset:0 resolves against the card itself (the full padding box) —
   sits above every other card element and makes the entire card one
   click target. The visible title stays a real, focusable, crawlable
   link underneath; hovering anywhere on the card underlines it. */
.gdp-listings .jcard-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--jc-radius);
	text-decoration: none;
}
.gdp-listings .jcard:hover .jcard-title { text-decoration: underline; text-underline-offset: 3px; }
.gdp-listings .jcard-title:focus-visible {
	outline: 2px solid var(--jc-apply-bg);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Responsive --------------------------------------------------- */
@media (max-width: 520px) {
	.gdp-listings .jcard { padding: 18px; gap: 4px 16px; }
	.gdp-listings .jcard-logo { width: 64px; height: 64px; border-radius: 12px; }
	.gdp-listings .jcard-title { font-size: 22px; }
	.gdp-listings .jcard-sub { font-size: 15px; }
}

/* Empty + pagination (green to match) -------------------------- */
.gdp-listings--empty { padding: 40px 24px; text-align: center; border-radius: var(--jc-radius); background: linear-gradient(180deg, var(--jc-bg-top) 0%, var(--jc-bg-bottom) 100%); }
.gdp-empty__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--jc-title); }
.gdp-empty__body { margin: 0; font-size: 14px; color: var(--jc-sub); }
.gdp-empty__body a { color: var(--jc-pill-text); }
.gdp-pagination { margin-top: 18px; display: flex; gap: 6px; flex-wrap: wrap; }
.gdp-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 11px;
	font-size: 13px; font-weight: 600; color: var(--jc-meta); border: 1.5px solid var(--jc-alerts-border);
	border-radius: 9px; background: var(--jc-alerts-bg); text-decoration: none;
}
.gdp-pagination .page-numbers.current { background: var(--jc-apply-bg); border-color: var(--jc-apply-bg); color: #fff; }

/* ============================================================= */
/* Single vacancy page — CDU-green detail layout                  */
/* ============================================================= */

.gdp-single {
	/* Detail palette (overrides the bridge tokens above) */
	--gdp-d-ink:         #ffffff;
	--gdp-d-body:        #e6e6e6;
	--gdp-d-muted:       #9b9b9b;
	--gdp-d-meta:        #cfcfcf;
	--gdp-d-green:       #00811c; /* requirement labels, badges, special label */
	--gdp-d-line-green:  #002e0a; /* spec dividers */
	--gdp-d-line-gray:   #cccccc; /* header divider */
	--gdp-d-logo-bg:     #ffffff;
	--gdp-d-apply:       #39a751; /* same green as the job-card Apply button */
	--gdp-d-apply-hover: #45bc60;
	--gdp-d-alerts:        #000000; /* Set up alerts button — mirrors the card */
	--gdp-d-alerts-border: #6ea263;
	--gdp-d-alerts-hover:  #14210f;

	max-width: var(--gdp-maxw, 1060px);
	margin-inline: auto;
	padding: 28px 20px 64px;
	font-family: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--gdp-d-body);
}

/* --- header --------------------------------------------------- */
.gdp-single .gdp-listing--single { margin: 0; }
.gdp-single .gdp-listing__flag {
	margin: 0 0 18px; padding: 0.7rem 1rem; border-radius: 8px;
	border-left: 3px solid var(--gdp-d-green); background: rgba(0, 129, 28, 0.08);
	color: var(--gdp-d-ink); font-weight: 600;
}
.gdp-single .gdp-listing__head { display: flex; align-items: flex-start; gap: 22px; }
.gdp-single .gdp-listing__logo {
	flex: 0 0 auto; width: 88px; height: 88px; position: relative;
	display: flex; align-items: center; justify-content: center;
	background: var(--bg-tertiary); border: 0.5px solid var(--border-md);
	border-radius: var(--radius-md); padding: 4px; overflow: hidden;
	flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--text-secondary);
}
.gdp-single .gdp-listing__logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; opacity: .85; transition: opacity .2s; }
.gdp-single .gdp-listing__logo:hover img { opacity: 1; }
.gdp-single .gdp-listing__logo--empty { padding: 0; font-size: 26px; font-weight: 700; color: #2a2a2a; letter-spacing: .02em; }

.gdp-single .gdp-listing__headline { min-width: 0; padding-top: 2px; }
.gdp-single .gdp-listing__title {
	margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1;
	letter-spacing: -.01em; color: var(--gdp-d-ink);
}
.gdp-single .gdp-listing__subhead { margin: 7px 0 0; font-size: 19px; color: var(--gdp-d-muted); }
.gdp-single .gdp-listing__operator-link { color: inherit; text-decoration: none; }
.gdp-single .gdp-listing__operator-link:hover { color: var(--gdp-d-green); text-decoration: underline; text-underline-offset: 3px; }
.gdp-single .gdp-listing__base::before { content: "|"; margin: 0 11px; color: #5f5f5f; }

.gdp-single .gdp-listing__meta {
	list-style: none; margin: 14px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 12px 22px;
}
.gdp-single .gdp-listing__metaitem { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--gdp-d-meta); }
.gdp-single .gdp-listing__ico { font-size: 15px; line-height: 1; }

/* --- badges --------------------------------------------------- */
.gdp-single .gdp-badges { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.gdp-single .gdp-badge {
	display: inline-block; padding: 8px 15px; border: 1.5px solid var(--gdp-d-green);
	border-radius: 7px; background: transparent; color: var(--gdp-d-green);
	font-size: 16px; font-weight: 500; line-height: 1;
}

/* --- header divider ------------------------------------------- */
.gdp-single .gdp-single__rule { height: 1px; background: var(--gdp-d-line-gray); margin: 26px 0 30px; }

/* --- two-column body ------------------------------------------ */
.gdp-single .gdp-single__grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: start; }
.gdp-single .gdp-single__main { min-width: 0; }
.gdp-single .gdp-single__side { min-width: 0; }

.gdp-single .gdp-listing__section { margin: 0 0 18px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--gdp-d-ink); }
.gdp-single .gdp-listing__section--sp { margin-top: 40px; }

/* description (post content) */
.gdp-single .gdp-listing__about { font-size: 18px; line-height: 1.55; color: var(--gdp-d-body); }
.gdp-single .gdp-listing__about p { margin: 0 0 20px; }
.gdp-single .gdp-listing__about p:last-child { margin-bottom: 0; }
.gdp-single .gdp-listing__about strong,
.gdp-single .gdp-listing__about b { color: var(--gdp-d-ink); }
.gdp-single .gdp-listing__about a { color: var(--gdp-d-green); }
.gdp-single .gdp-listing__about ul,
.gdp-single .gdp-listing__about ol { margin: 0 0 20px; padding-left: 22px; }
.gdp-single .gdp-listing__about li { margin-bottom: 8px; }
.gdp-single .gdp-listing__about h2,
.gdp-single .gdp-listing__about h3,
.gdp-single .gdp-listing__about h4 { color: var(--gdp-d-ink); margin: 24px 0 10px; }

/* package highlights */
.gdp-single .gdp-listing__package { list-style: disc; margin: 0; padding-left: 22px; }
.gdp-single .gdp-listing__package li { margin-bottom: 14px; font-size: 18px; line-height: 1.5; color: var(--gdp-d-body); }
.gdp-single .gdp-listing__package li::marker { color: #cfcfcf; font-size: .85em; }

/* --- minimum requirements spec -------------------------------- */
.gdp-single .gdp-spec { margin: 0; max-width: none; border: 0; }
.gdp-single .gdp-spec__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 14px 0; border-bottom: 1px solid var(--gdp-d-line-green); font-size: 17px;
}
.gdp-single .gdp-spec__row dt { margin: 0; color: var(--gdp-d-green); font-weight: 500; }
.gdp-single .gdp-spec__row dd { margin: 0; text-align: right; color: var(--gdp-d-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- special requirements ------------------------------------- */
.gdp-single .gdp-spec__special { margin-top: 22px; }
.gdp-single .gdp-spec__special-label { margin: 0 0 10px; color: var(--gdp-d-green); font-weight: 700; font-size: 17px; }
.gdp-single .gdp-spec__special-text { margin: 0; color: var(--gdp-d-ink); font-weight: 700; font-size: 17px; line-height: 1.5; }

/* --- apply (matches the job-card button) ---------------------- */
.gdp-single .gdp-listing__apply { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0 0; }
.gdp-single .gdp-btn-apply {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 24px; border-radius: 11px; border: 1.5px solid transparent;
	background: var(--gdp-d-apply); color: #fff; font-size: 16px; font-weight: 700;
	line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.gdp-single .gdp-btn-apply:hover { background: var(--gdp-d-apply-hover); }
.gdp-single .gdp-btn-alerts {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 24px; border-radius: 11px; border: 1.5px solid var(--gdp-d-alerts-border);
	background: var(--gdp-d-alerts); color: #fff; font-size: 16px; font-weight: 700;
	line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s ease;
}
.gdp-single .gdp-btn-alerts:hover { background: var(--gdp-d-alerts-hover); }
.gdp-single .gdp-listing__closes { color: var(--gdp-d-muted); font-size: 14px; }

/* --- responsive ----------------------------------------------- */
@media (max-width: 820px) {
	.gdp-single .gdp-single__grid { grid-template-columns: 1fr; gap: 40px; }
	.gdp-single .gdp-listing__section--sp { margin-top: 36px; }
}
@media (max-width: 480px) {
	.gdp-single .gdp-listing__head { gap: 16px; }
	.gdp-single .gdp-listing__logo { width: 72px; height: 72px; }
	.gdp-single .gdp-listing__title { font-size: 25px; }
	.gdp-single .gdp-listing__subhead { font-size: 17px; }
}