/* Bespoke composition for the on-site AI program. Controls, icons, colors and
   type come from the shared design system; this file owns only page layout. */
.ai-training {
    background: var(--color-surface);
    color: var(--color-text-dark);
    text-transform: none;
}
/* Owner request, 2026-09-26: this enterprise program uses authored sentence
   casing, including shared controls. Other Eesier pages keep their casing. */
.ai-training .btn,
.ai-training .eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary {
    text-transform: none;
}
.ai-training .content-inner { max-width: 1280px; padding-inline: var(--space-medium); }
.ai-training main { overflow: clip; }
.ai-training main section { scroll-margin-top: var(--space-large); }
.ai-training main section + section::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(-1 * var(--space-medium));
    height: var(--space-large);
    border-radius: 50% 50% 0 0;
    background: inherit;
    pointer-events: none;
}
.ai-training main :is(h1, h2, h3, p, ol, figure) { margin: 0; }
.ai-training main p { font-size: var(--type-size-base); line-height: 1.7; }
.ai-training main h1 { font-size: var(--type-size-hero); font-weight: 600; line-height: 1.08; letter-spacing: -0.045em; }
.ai-training main h2 { font-size: var(--type-size-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.035em; }
.ai-training main h3 { font-size: var(--type-size-heading); font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; }
.ai-training main a { overflow-wrap: anywhere; }
.ai-training main a:focus-visible, .ai-training main summary:focus-visible {
    outline: 3px solid var(--color-palette-primary);
    outline-offset: var(--space-tight);
}
.ai-training main .btn { flex-shrink: 0; gap: var(--space-small); }
.ai-training main .eicon { width: var(--icon-size); height: var(--icon-size); }
.at-stack { display: flex; flex-direction: column; gap: var(--space-large); }
.at-split { display: flex; align-items: flex-start; gap: var(--space-large); }
.at-split > * { flex: 1 1 0; min-width: 0; }
.at-section-heading { display: flex; flex-direction: column; gap: var(--space-medium); max-width: 760px; }
.at-section-heading p { color: var(--color-muted); }
.ai-training main .at-overline { color: var(--color-palette-primary); font-size: var(--type-size-small); font-weight: 700; text-align: left; }
.at-hero { background: linear-gradient(120deg, var(--color-palette-primary-surface), var(--color-surface) 70%); }
.at-hero__layout { display: flex; align-items: center; gap: var(--space-large); }
.at-hero__copy { flex: 1.2 1 0; display: flex; flex-direction: column; gap: var(--space-medium); min-width: 0; }
.ai-training .at-lead { max-width: 55ch; color: var(--color-muted); }
.at-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-small); }
.ai-training main .at-hero__note { font-size: var(--type-size-small); color: var(--color-muted); text-align: left; }
.at-portrait { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-medium); }
.at-portrait__canvas { overflow: hidden; border-radius: 50% 50% var(--radius, 12px) var(--radius, 12px); background: var(--color-palette-primary-surface); }
.at-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.at-portrait figcaption { display: flex; flex-direction: column; gap: var(--space-small); }
.at-portrait figcaption span:first-child { font-size: var(--type-size-heading); font-weight: 600; }
.at-portrait figcaption span:last-child { color: var(--color-muted); font-size: var(--type-size-small); }
.at-modules { background: var(--color-surface); }
.at-module-pair { display: flex; gap: var(--space-medium); }
.at-module { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-medium); padding: var(--space-large); border-radius: 12px; background: var(--color-palette-primary-surface); color: var(--color-text-dark); text-decoration: none; border: 1px solid transparent; }
.at-module--infrastructure { background: var(--color-canvas-dark); color: var(--color-text-on-dark); }
.at-module:hover { border-color: var(--color-palette-primary); }
.at-module p { flex-grow: 1; }
.at-module__label { font-size: var(--type-size-small); font-weight: 600; }
.at-module__link { display: flex; align-items: center; gap: var(--space-small); font-weight: 700; text-decoration: underline; text-underline-offset: var(--space-tight); }
.at-training { background: var(--color-palette-background); }
.at-section-heading--side { flex: .85 1 0; }
.at-deliverable { display: flex; gap: var(--space-small); padding-top: var(--space-medium); }
.at-deliverable > .eicon { flex-shrink: 0; color: var(--color-palette-primary); }
.at-deliverable > div { display: flex; flex-direction: column; gap: var(--space-small); }
.ai-training main .at-deliverable h3 { font-size: var(--type-size-base); font-weight: 700; }
.ai-training main .at-deliverable p { font-size: var(--type-size-small); }
.at-steps { display: flex; flex-direction: column; gap: var(--space-medium); list-style: none; counter-reset: training; padding: 0; }
.at-steps li { position: relative; display: flex; flex-direction: column; gap: var(--space-small); padding: 0 0 var(--space-medium) var(--space-large); border-bottom: 1px solid var(--color-veil); counter-increment: training; }
.at-steps li::before { content: counter(training, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--color-palette-primary); font-size: var(--type-size-base); font-weight: 700; }
.ai-training main .at-steps h3 { font-size: var(--type-size-base); font-weight: 700; }
.at-steps p { color: var(--color-muted); }
.at-infrastructure { background: var(--color-surface); }
.at-diagram { display: flex; flex-direction: column; align-items: center; border-radius: 12px; padding: var(--space-medium); background: var(--color-palette-primary-surface); }
.at-diagram__people { display: flex; align-items: center; gap: var(--space-small); font-weight: 600; }
.at-diagram__connector { height: var(--space-medium); width: 1px; background: var(--color-palette-primary); flex-shrink: 0; }
.at-diagram__assistant { padding: var(--space-small) var(--space-medium); border-radius: 12px; background: var(--color-surface); font-weight: 600; text-align: center; }
.at-diagram__control { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: var(--space-small); background: var(--color-canvas-dark); color: var(--color-text-on-dark); border-radius: 12px; padding: var(--space-medium); text-align: center; }
.at-diagram__control strong { font-size: var(--type-size-base); }
.at-diagram__control span { font-size: var(--type-size-small); }
.at-diagram__sources { display: flex; align-self: stretch; justify-content: center; gap: var(--space-medium); flex-wrap: wrap; }
.at-diagram__sources span { display: flex; flex-direction: column; align-items: center; gap: var(--space-small); font-weight: 600; }
.at-diagram figcaption { padding-top: var(--space-medium); font-size: var(--type-size-small); color: var(--color-muted); text-align: center; }
.at-infra-steps { display: flex; gap: var(--space-medium); list-style: none; padding: 0; counter-reset: infrastructure; }
.at-infra-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-small); counter-increment: infrastructure; }
.at-infra-steps li::before { content: counter(infrastructure, decimal-leading-zero); color: var(--color-palette-primary); font-weight: 700; padding-bottom: var(--space-small); }
.ai-training main .at-infra-steps h3 { font-size: var(--type-size-base); font-weight: 700; }
.ai-training main .at-infra-steps p { font-size: var(--type-size-small); color: var(--color-muted); }
.at-examples { background: var(--color-palette-primary-surface); }
.at-examples__list { display: flex; flex-wrap: wrap; column-gap: var(--space-large); row-gap: var(--space-medium); }
.at-example { display: flex; gap: var(--space-medium); flex: 0 1 calc(50% - var(--space-medium)); padding-block: var(--space-medium); border-top: 1px solid var(--color-veil); }
.at-example__icon { color: var(--color-palette-primary); flex-shrink: 0; }
.at-example > div { display: flex; flex-direction: column; gap: var(--space-small); }
.ai-training main .at-example h3 { font-size: var(--type-size-base); font-weight: 700; }
.at-example p { color: var(--color-muted); }
.at-included { background: var(--color-surface); }
.at-included__items { display: flex; gap: var(--space-large); }
.at-included__items > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-medium); }
.at-number { color: var(--color-palette-primary); font-size: var(--type-size-hero); font-weight: 600; line-height: 1; letter-spacing: -0.045em; }
.ai-training main .at-included__items h3 { font-size: var(--type-size-base); font-weight: 700; }
.at-included__items p { color: var(--color-muted); }
.at-about { background: var(--color-palette-background); }
.at-about .btn { align-self: flex-start; }
.at-history { display: flex; flex-direction: column; gap: var(--space-large); list-style: none; padding: 0; }
.at-history li { display: flex; gap: var(--space-medium); }
.at-history li > span { color: var(--color-palette-primary); font-weight: 700; }
.at-history li > div { display: flex; flex-direction: column; gap: var(--space-small); }
.ai-training main .at-history h3 { font-size: var(--type-size-base); font-weight: 700; }
.at-history p { color: var(--color-muted); }
.at-faq { background: var(--color-surface); }
.at-faq__items { display: flex; flex-direction: column; }
.at-contact { background: var(--color-canvas-dark); color: var(--color-text-on-dark); }
.at-contact__layout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-large); }
.at-contact .at-section-heading { flex: 1 1 0; }
.at-contact .at-section-heading p { color: var(--color-text-on-dark); }
.at-contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-medium); min-width: 0; }
.at-contact__email { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: var(--space-tight); min-height: var(--space-large); display: flex; align-items: center; }
.at-contact__actions > span { font-size: var(--type-size-small); }
@media (max-width: 1100px) {
    .ai-training main h1 { font-size: var(--type-size-display); }
}
@media (max-width: 900px) {
    .at-hero__layout, .at-split, .at-module-pair, .at-contact__layout { flex-direction: column; align-items: stretch; }
    .at-portrait { max-width: 440px; align-self: center; }
    .at-module { padding: var(--space-medium); }
    .at-section-heading { max-width: none; }
    .at-infra-steps { flex-wrap: wrap; row-gap: var(--space-large); }
    .at-infra-steps li { flex-basis: calc(50% - var(--space-small)); }
    .at-example { flex-basis: 100%; }
    .at-included__items { gap: var(--space-medium); }
    .ai-training main h2 { font-size: var(--type-size-page); }
}
@media (max-width: 540px) {
    .at-actions { align-items: stretch; flex-direction: column; }
    .at-actions .btn { width: 100%; }
    .at-included__items { flex-direction: column; gap: var(--space-large); }
    .at-infra-steps { flex-direction: column; }
    .at-contact__actions { align-items: stretch; }
    .at-contact__actions > .btn { width: 100%; white-space: normal; }
    .at-history li { flex-direction: column; gap: var(--space-small); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-training *, .ai-training *::before, .ai-training *::after { scroll-behavior: auto; animation: none; transition: none; }
}