/* Shared by the training overview and Key Skillz pages. Keep full artwork visible. */
.training-page { --training-ink: #132f43; --training-line: #d6e3ed; }
.training-page .section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.training-page [id] { scroll-margin-top: 7rem; }
.training-page figure { margin: 0; }
.training-page h4 { margin: 0 0 .55rem; font-size: 1.06rem; line-height: 1.4; }
.training-page p { color: #4a6070; }
.training-page a:focus-visible, .training-page summary:focus-visible,
.training-lightbox button:focus-visible { outline: 3px solid #dd362f; outline-offset: 4px; }
.training-hero { overflow: hidden; background: radial-gradient(ellipse at 90% 10%, #086da2 0, transparent 58%), #0b2f47; color: #fff; }
.training-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding-block: 4.5rem; }
.training-hero__copy, .training-hero__visual { min-width: 0; }
.training-hero .eyebrow { color: #9ddcff; }
.training-hero h1 { margin-bottom: 1.4rem; font-size: clamp(3rem, 5.4vw, 4.65rem); line-height: 1.05; }
.training-hero h1 span { display: block; color: #9ddcff; }
.training-hero .training-hero__promise { color: #fff; font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 600; margin-bottom: .75rem; }
.training-hero .training-hero__lead { color: #d6e5ee; font-size: 1.04rem; max-width: 54ch; line-height: 1.8; margin-bottom: 1.8rem; }
.training-hero .button-group { gap: .75rem; }
.training-hero .button { padding-inline: 1.1rem; }
.training-hero__visual { position: relative; width: 96%; aspect-ratio: 1.12; margin-inline: auto; }
.training-hero__frame { position: absolute; background: #fff; padding: .3rem; border-radius: 9px; box-shadow: 0 16px 45px #00152166; }
.training-hero__frame--retail { width: 90%; top: 4%; left: 0; transform: rotate(-4deg); }
.training-hero__frame--management { width: 72%; top: 45%; right: 0; transform: rotate(5deg); }
.training-hero__frame img { display: block; width: calc(100% - 4px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin: 2px; border: 1px solid #007eca; border-radius: 5px; background: #fff; }
.training-index { border-bottom: 1px solid var(--training-line); background: #fff; }
.training-index__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.8rem; padding-block: 1.15rem; }
.training-index__inner > span { margin-right: auto; color: #687782; font-size: .83rem; }
.training-index a { color: #005f98; font-size: .9rem; font-weight: 700; text-decoration: none; padding-block: .3rem; }
.training-index a:hover { text-decoration: underline; text-underline-offset: .3rem; }
.training-heading { max-width: 48rem; margin-bottom: 2.25rem; }
.training-heading h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.13; margin-bottom: 1rem; }
.training-heading > p { max-width: 68ch; margin-bottom: 0; }
.training-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; }
.training-steps li { padding-top: 1.25rem; border-top: 2px solid #d6e3ed; }
.training-steps__number { display: block; color: #007eca; font: 2.4rem/1 var(--font-brand); margin-bottom: 1rem; }
.training-steps h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.training-steps p { margin-bottom: 0; font-size: .94rem; }
.training-platform { display: grid; grid-template-columns: 14rem minmax(0, 1fr); align-items: center; gap: 2.75rem; background: #f2f8fc; border: 1px solid var(--training-line); border-radius: 16px; padding: 2rem; margin-top: 3.5rem; }
.training-platform__brand img { display: block; width: 100%; height: auto; }
.training-platform h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.training-platform p { font-size: .95rem; margin-bottom: 1.1rem; }
.training-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.training-tags li { color: #005f98; border: 1px solid #c3dcea; background: #fff; border-radius: 5px; padding: .3rem .65rem; font-size: .77rem; }
.training-project { background: #fff; border: 1px solid var(--training-line); border-radius: 20px; padding: clamp(1.15rem, 3vw, 2.5rem); margin-top: 2rem; box-shadow: 0 10px 30px #12354b05; }
.training-project__summary { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.training-project__cover { min-width: 0; }
.training-project__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 5px; background: #fff; }
.training-project__cover--loans img { aspect-ratio: 2 / 1; }
.training-project h3 { font-family: var(--font-brand); font-weight: 400; font-size: clamp(2.35rem, 3.8vw, 3.1rem); line-height: 1.1; margin-bottom: .8rem; }
.training-project .training-project__subtitle { font-size: 1.16rem; line-height: 1.5; font-weight: 600; color: var(--training-ink); margin-bottom: 1rem; }
.training-project__copy > p:last-child, .training-project__text-row > p { margin-bottom: 0; }
.training-project__copy > p:not(.training-project__subtitle), .training-project__text-row p { font-size: .95rem; }
.training-project__text-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: start; }
.training-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.65rem 0 0; padding: 1.5rem 0 0; list-style: none; border-top: 1px solid var(--training-line); }
.training-features h4 { color: var(--training-ink); font-size: .95rem; }
.training-features p { margin: 0; font-size: .9rem; line-height: 1.65; }
.training-gallery-details { border-top: 1px solid var(--training-line); margin-top: 1.5rem; }
.training-gallery-details summary { cursor: pointer; padding: 1.1rem 0 .1rem; color: #005f98; font-size: .94rem; font-weight: 600; }
.training-gallery-details summary > span { color: #667985; font-weight: 400; font-size: .8rem; margin-left: .5rem; white-space: nowrap; }
.training-gallery-details[open] summary { margin-bottom: 1.2rem; }
.training-gallery { display: grid; gap: 1.25rem; }
.training-gallery--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.training-gallery--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.training-gallery--gratis { max-width: 54rem; margin: 1.6rem auto 0; }
.training-gallery figure { min-width: 0; }
/* The frame is 16:9; contain keeps every pixel of near-16:9 originals visible. */
.training-shot { display: block; width: calc(100% - 4px); aspect-ratio: 16 / 9; margin: 2px; border: 1px solid #007eca; border-radius: 5px; overflow: hidden; background: #f3f6f8; cursor: zoom-in; }
.training-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.training-shot:hover { box-shadow: 0 0 0 2px #007eca26; }
.training-gallery figcaption { padding: .65rem 2px 0; font-size: .79rem; line-height: 1.55; color: #506372; }
.training-language-note { color: #667985; font-size: .8rem !important; margin-bottom: 0; }
.training-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.training-module { display: flex; flex-direction: column; border-top: 3px solid #007eca; padding-top: 1.2rem; min-width: 0; }
.training-module:nth-child(2) { border-top-color: #dd362f; }
.training-module:nth-child(3) { border-top-color: #206d68; }
.training-module__label { font-size: .72rem; color: #60727f; margin-bottom: .5rem; }
.training-module h4 { font-size: 1.16rem; }
.training-module > p { font-size: .89rem; margin-bottom: 1.25rem; }
.training-module .training-gallery { margin-top: auto; }
.training-gallery-hint { font-size: .82rem; text-align: center; margin: 1.3rem 0 0; }
.training-design__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: start; }
.training-design h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.15; margin-bottom: 1rem; }
.training-design__list { list-style: none; padding: 0; margin: 0; }
.training-design__list li { padding-block: 1.1rem; border-bottom: 1px solid var(--training-line); }
.training-design__list li:first-child { padding-top: 0; }
.training-design__list strong, .training-design__list span { display: block; }
.training-design__list strong { color: var(--training-ink); margin-bottom: .3rem; }
.training-design__list span { color: #506372; font-size: .92rem; }
.training-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: #0b2f47; border-radius: 16px; padding: 2rem 2.5rem; margin-top: 2.5rem; color: #fff; }
.training-cta h3 { font-size: 1.45rem; margin-bottom: .6rem; }
.training-cta p { color: #d6e5ee; margin: 0; font-size: .93rem; }
.training-cta .button { flex-shrink: 0; }
.training-related { text-align: center; font-size: .9rem; margin: 1.8rem 0 0; }
.training-overview .training-hero__frame--business img { aspect-ratio: 2 / 1; }
.keyskillz-page .training-hero h1 { max-width: none; font-size: clamp(2.6rem, 4.2vw, 3.7rem); line-height: 1.1; }
.keyskillz-page .keyskillz-management { padding-top: 1rem; }
.keyskillz-page .training-cta .button { max-width: 27rem; gap: .5rem; }
.keyskillz-page .training-cta > div { min-width: 0; }
.training-paths { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: stretch; }
.training-path { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--training-line); border-radius: 18px; background: #fff; }
.training-path--custom { border-top: 4px solid #007eca; }
.training-path__status { align-self: flex-start; display: inline-block; margin-bottom: 1.1rem; padding: .3rem .65rem; background: #eaf6fd; color: #005f98; border-radius: 5px; font-size: .78rem; font-weight: 700; }
.training-path__status--ready { color: #145b46; background: #e7f5ee; }
.training-path h3 { font-size: 1.45rem; line-height: 1.25; margin-bottom: 1rem; }
.training-path p { font-size: .94rem; }
.training-path__heading { display: flex; gap: 1rem; align-items: flex-start; }
.training-path__heading h3 { flex: 1; }
.training-path__logo { width: 6.5rem; max-width: 28%; height: auto; flex-shrink: 0; }
.training-path .training-path__image { margin-top: auto; padding-top: .5rem; margin-bottom: 1.4rem; }
.training-path__image img { display: block; width: calc(100% - 4px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; margin: 2px; border: 1px solid #007eca; border-radius: 5px; background: #f3f6f8; }
.training-path__image figcaption { font-size: .78rem; line-height: 1.5; color: #506372; padding: .6rem 2px 0; }
.training-path > .button { align-self: flex-start; width: 100%; gap: .5rem; font-size: .9rem; }
.training-lightbox { width: max-content; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); padding: 1rem; border: 1px solid #007eca; border-radius: 12px; background: #fff; box-shadow: 0 20px 80px #0008; color: #132f43; }
.training-lightbox:not([open]) { display: none; }
.training-lightbox::backdrop { background: #061c2be6; }
.training-lightbox > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 70vh; max-height: calc(100dvh - 11rem); object-fit: contain; border: 1px solid #007eca; border-radius: 5px; margin: 2px auto; }
.training-lightbox button { font: inherit; color: #005f98; background: #f2f8fc; border: 1px solid #cadfeb; border-radius: 5px; min-height: 44px; min-width: 44px; cursor: pointer; }
.training-lightbox__close { display: block; margin: 0 0 .65rem auto; padding: .4rem .8rem; }
.training-lightbox__close span { margin-left: .5rem; font-size: 1.2rem; }
.training-lightbox__footer { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: .75rem; }
.training-lightbox__footer p { margin: 0; text-align: center; font-size: .88rem; line-height: 1.5; }
@media (max-width: 68rem) {
    .training-hero__inner { gap: 1.75rem; }
    .training-hero__visual { aspect-ratio: 1; }
    .training-index__inner { gap: .5rem 1.25rem; }
    .training-project__text-row { gap: 2rem; }
    .training-modules { gap: 1rem; }
    .training-design__inner { gap: 3rem; }
}
@media (max-width: 52rem) {
    .training-paths { grid-template-columns: 1fr; }
    .training-path .training-path__image { max-width: 34rem; width: 100%; margin-inline: auto; }
    .training-hero__inner { grid-template-columns: 1fr; padding-block: 3rem 1.5rem; gap: 2rem; }
    .training-hero h1 { max-width: none; }
    .training-hero__lead { max-width: 65ch; }
    .training-hero__visual { width: min(100%, 32rem); aspect-ratio: 1.12; }
    .training-index__inner > span { width: 100%; }
    .training-platform { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.75rem; padding: 1.5rem; }
    .training-project__summary { grid-template-columns: 1fr; }
    .training-project__cover { max-width: 38rem; width: 100%; margin-inline: auto !important; }
    .training-project__text-row { grid-template-columns: 1fr; gap: .5rem; }
    .training-modules { grid-template-columns: 1fr; gap: 2rem; }
    .training-module .training-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .training-design__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    .training-cta { padding: 1.75rem; align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}
@media (max-width: 36rem) {
    .training-hero__inner { padding-top: 2.5rem; }
    .training-hero h1 { font-size: clamp(2.7rem, 11vw, 3.5rem); }
    .training-hero__visual { width: 96%; aspect-ratio: 1; }
    .training-hero__frame--management { top: 46%; width: 77%; }
    .training-index__inner { gap: .35rem 1.25rem; }
    .training-steps { grid-template-columns: 1fr; gap: 1.5rem; }
    .training-steps li { padding-left: 3.5rem; position: relative; }
    .training-steps__number { position: absolute; left: 0; font-size: 2rem; }
    .training-platform { grid-template-columns: 1fr; gap: 1rem; }
    .training-platform__brand { max-width: 11rem; }
    .training-features { grid-template-columns: 1fr; gap: 1.15rem; }
    .training-gallery--two, .training-gallery--three, .training-module .training-gallery { grid-template-columns: 1fr; }
    .training-gallery-details summary > span { display: none; }
    .training-lightbox { padding: .65rem; max-width: calc(100vw - 1rem); }
    .training-lightbox__footer { gap: .5rem; }
    .training-lightbox__footer p { font-size: .78rem; }
}