/* ============================================================
   Dark ground shared by the AI pages (AI Services, Java
   modernization workshop).

   These pages continue the graphite of the site header instead of
   sitting in the white content well. The visual model is a
   verification record: mono keys carry the hard facts, and every
   claim that has evidence shows it.

   Loaded after design-system.css so it wins. Page-specific
   components live in their own sheet on top of this one.
   ============================================================ */

:root {
	--ai-bg: #0e1218;
	--ai-panel: #161c26;
	--ai-panel-2: #1c2431;
	--ai-line: #28323f;
	--ai-line-2: #384555;
	--ai-text: #e7ecf3;
	--ai-dim: #8996a8;
	--ai-dim-2: #5f6b7d;
	--ai-amber: #ff8c42;
	--ai-mint: #4ec9a6;
}

/* The dark ground has to reach past the content well on both sides. */
body,
.main_container,
.content-wrapper.ai_page {
	background: var(--ai-bg);
}
.main_container { border: 0; }
.leftcol { background: transparent; }

.ai_page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 5% 72px;
	color: var(--ai-text);
}
.ai_page h1, .ai_page h2, .ai_page h3, .ai_page h4 { color: var(--ai-text); }
.ai_page a, .ai_page a:link, .ai_page a:visited { color: var(--ai-amber); }
.ai_page a:hover { color: #ffa76a; }

/* ---------- Hero ---------- */
.ai_hero { padding: 52px 0 46px; }

.ai_lang {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 26px;
	color: var(--ai-dim-2);
}
.ai_page .ai_lang a, .ai_page .ai_lang a:link, .ai_page .ai_lang a:visited { color: var(--ai-dim); }
.ai_page .ai_lang a[aria-current="true"] { color: var(--ai-amber); }
.ai_lang span { padding: 0 8px; color: var(--ai-line-2); }

.ai_kicker {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ai-amber);
	margin-bottom: 18px;
}

.ai_hero h1 {
	font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.04;
	margin: 0 0 22px;
	max-width: 18ch;
}
.ai_hero h1 em { font-style: normal; color: var(--ai-amber); }

.ai_hero > p {
	max-width: 60ch;
	color: var(--ai-dim);
	font-size: 1.08rem;
	line-height: 1.65;
	margin: 0 0 40px;
}

/* The questions the page answers, as a record header. */
.ai_contract {
	list-style: none;
	margin: 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--ai-line);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.ai_contract li {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--ai-text);
	border-left: 1px solid var(--ai-line);
	padding-left: 16px;
}
.ai_contract b {
	display: block;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ai-amber);
	margin-bottom: 7px;
}

/* ---------- Section ---------- */
.ai_section { padding-top: 46px; }
.ai_section_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--ai-line);
	padding-bottom: 14px;
	margin-bottom: 8px;
}
.ai_section_head h2 {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0;
}
.ai_count {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ai-dim-2);
	white-space: nowrap;
}
.ai_section > p {
	color: var(--ai-dim);
	max-width: 68ch;
	margin: 14px 0 26px;
	line-height: 1.65;
}

/* ---------- Panel ---------- */
.ai_panel {
	background: var(--ai-panel);
	border: 1px solid var(--ai-line);
	border-radius: 12px;
	padding: 26px 28px;
}
.ai_panel h3 {
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 0.8rem;
}
.ai_panel p { color: var(--ai-dim); line-height: 1.65; margin: 0 0 1rem; }
.ai_panel p:last-child { margin-bottom: 0; }

.ai_cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 18px;
}

/* Ticked list, used wherever the page enumerates real items. */
.ai_list { list-style: none; margin: 0; padding: 0; }
.ai_list li {
	position: relative;
	padding-left: 17px;
	margin-bottom: 9px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ai-text);
}
.ai_list li::before {
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	content: "";
	background: var(--ai-mint);
	border-radius: 1px;
}
.ai_list--muted li { color: var(--ai-dim); }
.ai_list--muted li::before { background: var(--ai-dim-2); }

/* ---------- Call to action ---------- */
.ai_cta {
	display: inline-block;
	align-self: flex-start;
	padding: 9px 18px;
	border: 1px solid var(--ai-line-2);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ai_page a.ai_cta, .ai_page a.ai_cta:link, .ai_page a.ai_cta:visited { color: var(--ai-text); }
.ai_page a.ai_cta:hover, .ai_page a.ai_cta:focus {
	background: var(--ai-amber);
	border-color: var(--ai-amber);
	color: #10141a;
	text-decoration: none;
}
.ai_cta::after { content: " \2192"; color: var(--ai-amber); }
.ai_page a.ai_cta:hover::after { color: #10141a; }

/* ---------- Closing block ---------- */
.ai_outro {
	margin-top: 56px;
	padding: 36px 38px;
	background: var(--ai-panel);
	border: 1px solid var(--ai-line);
	border-radius: 12px;
}
.ai_outro h2 {
	margin: 0 0 0.7rem;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.02em;
}
.ai_outro p {
	margin: 0 0 1.1rem;
	color: var(--ai-dim);
	max-width: 64ch;
	line-height: 1.65;
}

/* ---------- Focus and motion ---------- */
.ai_page a:focus-visible {
	outline: 2px solid var(--ai-amber);
	outline-offset: 3px;
	border-radius: 2px;
}

/* One orchestrated moment: the record header resolves on load. */
@media (prefers-reduced-motion: no-preference) {
	.ai_kicker, .ai_hero h1, .ai_hero > p, .ai_contract li {
		animation: ai_settle 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
	}
	.ai_hero h1 { animation-delay: 0.06s; }
	.ai_hero > p { animation-delay: 0.12s; }
	.ai_contract li:nth-child(1) { animation-delay: 0.18s; }
	.ai_contract li:nth-child(2) { animation-delay: 0.24s; }
	.ai_contract li:nth-child(3) { animation-delay: 0.30s; }
}
@keyframes ai_settle {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
	.ai_contract { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
	.ai_hero { padding: 34px 0 32px; }
	.ai_outro, .ai_panel { padding: 26px 22px; }
}

/* ============================================================
   Footer on these pages: the dark ground runs to the bottom
   instead of stopping at a light block under the last panel.
   ============================================================ */
#companyfooter {
	background: var(--ai-panel);
	border-top: 1px solid var(--ai-line);
	color: var(--ai-dim);
	margin-top: 0;
}
#companyfooter a, #companyfooter a:link, #companyfooter a:visited { color: var(--ai-dim); }
#companyfooter a:hover { color: var(--ai-amber); }
#companyfooter h2, #companyfooter h2 a { color: var(--ai-text); }
/* The GitHub mark ships dark, so it needs inverting on the dark ground. */
#social-icons img { filter: invert(1); opacity: 0.7; }
.companyfooter_bottom { border-top-color: var(--ai-line); }
#social-icons a { background: var(--ai-panel-2); border-color: var(--ai-line); }

/* Contact line under the closing call to action: these pages have no
   sidebar, so the address has to live where the decision is made. */
.ai_contact {
	margin: 18px 0 0;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--ai-dim-2);
}
.ai_page .ai_contact a, .ai_page .ai_contact a:link, .ai_page .ai_contact a:visited { color: var(--ai-dim); }
.ai_page .ai_contact a:hover { color: var(--ai-amber); }